main.61a4c1f82b5f3922aa06.bundle.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{14:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"e",(function(){return hideTopBanner})),__webpack_require__.d(__webpack_exports__,"g",(function(){return storyWrapper})),__webpack_require__.d(__webpack_exports__,"d",(function(){return getReadMeStory})),__webpack_require__.d(__webpack_exports__,"f",(function(){return storyParams})),__webpack_require__.d(__webpack_exports__,"c",(function(){return getReadMe})),__webpack_require__.d(__webpack_exports__,"b",(function(){return getLeftToRightIconTransform})),__webpack_require__.d(__webpack_exports__,"a",(function(){return getBodyFiller}));var banner,react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__),_constants__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(19),_pxblue_storybook_rtl_addon__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__(84),getBanner=function getBanner(){return banner||(banner=window.top.document.getElementsByClassName("simplebar-content")[1]),banner},setBannerStyle=function setBannerStyle(display){var banner=getBanner();banner&&banner.setAttribute("style","display: ".concat(display))},hideTopBanner=function hideTopBanner(){return setBannerStyle("none")},prevUrl="",storyWrapper=function storyWrapper(storyFn){var currentUrl=window.top.location.href;return function showTopBanner(){setBannerStyle("initial")}(),function updateTitle(){setTimeout((function(){window.top.document.title="PX Blue | React Components"}),10);var link=window.top.document.querySelector("link[rel*='icon']")||document.createElement("link");link.type="image/x-icon",link.rel="shortcut icon",link.href="./pxblue.png",window.top.document.getElementsByTagName("head")[0].appendChild(link)}(),currentUrl.replace("/story/","").replace("/info/","")!==prevUrl.replace("/story/","").replace("/info/","")&&!currentUrl.includes("get-read-me")&&currentUrl.includes("/info/")&&function selectCanvasTab(){window.top.history.replaceState(null,"",window.top.location.href.replace("/info/","/story/")),getBanner().children[0].children[0].children[0].children[0].click()}(),prevUrl=currentUrl,react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment,null,storyFn())},getReadMeStory=function getReadMeStory(){return hideTopBanner(),window.top.location.href.includes("/story/")&&function selectNotesTab(){window.top.history.replaceState(null,"",window.top.location.href.replace("/story/","/info/")),getBanner().children[0].children[0].children[0].children[1].click()}(),react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment,null)};getReadMeStory.story={name:_constants__WEBPACK_IMPORTED_MODULE_1__.b};var storyParams={options:{showPanel:!0},notes:{}},getReadMe=function getReadMe(name){var md=__webpack_require__(1583)("./".concat(name));return md.default=md.default.replace(/\(.\/.*md\)/g,(function(substring){var root=window.top.location.href.split("/?")[0],path="?path=/info/".concat(_constants__WEBPACK_IMPORTED_MODULE_1__.a.toLowerCase()),dashed=substring.split("/")[1].split(".")[0].replace(/\.?([A-Z])/g,(function(x){return"-".concat(x.toLowerCase())}));return"(".concat(root).concat(path).concat(dashed,"--get-read-me-story)")})),md},getLeftToRightIconTransform=function getLeftToRightIconTransform(){return"rtl"===Object(_pxblue_storybook_rtl_addon__WEBPACK_IMPORTED_MODULE_2__.getDirection)()?{transform:"scaleX(-1)"}:void 0},getBodyFiller=function getBodyFiller(){return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div",{style:{padding:16}},"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas iaculis vulputate arcu, quis vulputate mauris aliquet in. Praesent sollicitudin erat at augue cursus, a scelerisque odio tristique. Aenean quis dui in nisi condimentum viverra eleifend sed odio. Vestibulum a lacinia leo. Proin congue purus vulputate metus vestibulum eleifend. Suspendisse sit amet orci magna. Suspendisse eu odio ut purus ultrices ornare id eu dolor. Cras porttitor semper feugiat. Sed vel ultricies risus, vel dignissim arcu. Vestibulum quis interdum sem. Morbi bibendum tortor ligula, non pellentesque ante ullamcorper sed. Duis ornare felis eget justo faucibus, id tristique felis dignissim. Nullam sapien metus, feugiat egestas convallis eu, vehicula et turpis. Phasellus interdum, justo sit amet maximus pellentesque, eros orci dictum diam, id bibendum risus neque non risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas iaculis vulputate arcu, quis vulputate mauris aliquet in. Praesent sollicitudin erat at augue cursus, a scelerisque odio tristique. Aenean quis dui in nisi condimentum viverra eleifend sed odio. Vestibulum a lacinia leo. Proin congue purus vulputate metus vestibulum eleifend. Suspendisse sit amet orci magna. Suspendisse eu odio ut purus ultrices ornare id eu dolor. Cras porttitor semper feugiat. Sed vel ultricies risus, vel dignissim arcu. Vestibulum quis interdum sem. Morbi bibendum tortor ligula, non pellentesque ante ullamcorper sed. Duis ornare felis eget justo faucibus, id tristique felis dignissim. Nullam sapien metus, feugiat egestas convallis eu, vehicula et turpis. Phasellus interdum, justo sit amet maximus pellentesque, eros orci dictum diam, id bibendum risus neque non risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas iaculis vulputate arcu, quis vulputate mauris aliquet in. Praesent sollicitudin erat at augue cursus, a scelerisque odio tristique. Aenean quis dui in nisi condimentum viverra eleifend sed odio. Vestibulum a lacinia leo. Proin congue purus vulputate metus vestibulum eleifend. Suspendisse sit amet orci magna. Suspendisse eu odio ut purus ultrices ornare id eu dolor. Cras porttitor semper feugiat. Sed vel ultricies risus, vel dignissim arcu. Vestibulum quis interdum sem. Morbi bibendum tortor ligula, non pellentesque ante ullamcorper sed. Duis ornare felis eget justo faucibus, id tristique felis dignissim. Nullam sapien metus, feugiat egestas convallis eu, vehicula et turpis. Phasellus interdum, justo sit amet maximus pellentesque, eros orci dictum diam, id bibendum risus neque non risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas iaculis vulputate arcu, quis vulputate mauris aliquet in. Praesent sollicitudin erat at augue cursus, a scelerisque odio tristique. Aenean quis dui in nisi condimentum viverra eleifend sed odio. Vestibulum a lacinia leo. Proin congue purus vulputate metus vestibulum eleifend. Suspendisse sit amet orci magna. Suspendisse eu odio ut purus ultrices ornare id eu dolor. Cras porttitor semper feugiat. Sed vel ultricies risus, vel dignissim arcu. Vestibulum quis interdum sem. Morbi bibendum tortor ligula, non pellentesque ante ullamcorper sed. Duis ornare felis eget justo faucibus, id tristique felis dignissim. Nullam sapien metus, feugiat egestas convallis eu, vehicula et turpis. Phasellus interdum, justo sit amet maximus pellentesque, eros orci dictum diam, id bibendum risus neque non risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas iaculis vulputate arcu, quis vulputate mauris aliquet in. Praesent sollicitudin erat at augue cursus, a scelerisque odio tristique. Aenean quis dui in nisi condimentum viverra eleifend sed odio. Vestibulum a lacinia leo. Proin congue purus vulputate metus vestibulum eleifend. Suspendisse sit amet orci magna. Suspendisse eu odio ut purus ultrices ornare id eu dolor. Cras porttitor semper feugiat. Sed vel ultricies risus, vel dignissim arcu. Vestibulum quis interdum sem. Morbi bibendum tortor ligula, non pellentesque ante ullamcorper sed. Duis ornare felis eget justo faucibus, id tristique felis dignissim. Nullam sapien metus, feugiat egestas convallis eu, vehicula et turpis. Phasellus interdum, justo sit amet maximus pellentesque, eros orci dictum diam, id bibendum risus neque non risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas iaculis vulputate arcu, quis vulputate mauris aliquet in. Praesent sollicitudin erat at augue cursus, a scelerisque odio tristique. Aenean quis dui in nisi condimentum viverra eleifend sed odio. Vestibulum a lacinia leo. Proin congue purus vulputate metus vestibulum eleifend. Suspendisse sit amet orci magna. Suspendisse eu odio ut purus ultrices ornare id eu dolor. Cras porttitor semper feugiat. Sed vel ultricies risus, vel dignissim arcu. Vestibulum quis interdum sem. Morbi bibendum tortor ligula, non pellentesque ante ullamcorper sed. Duis ornare felis eget justo faucibus, id tristique felis dignissim. Nullam sapien metus, feugiat egestas convallis eu, vehicula et turpis. Phasellus interdum, justo sit amet maximus pellentesque, eros orci dictum diam, id bibendum risus neque non risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas iaculis vulputate arcu, quis vulputate mauris aliquet in. Praesent sollicitudin erat at augue cursus, a scelerisque odio tristique. Aenean quis dui in nisi condimentum viverra eleifend sed odio. Vestibulum a lacinia leo. Proin congue purus vulputate metus vestibulum eleifend. Suspendisse sit amet orci magna. Suspendisse eu odio ut purus ultrices ornare id eu dolor. Cras porttitor semper feugiat. Sed vel ultricies risus, vel dignissim arcu. Vestibulum quis interdum sem. Morbi bibendum tortor ligula, non pellentesque ante ullamcorper sed. Duis ornare felis eget justo faucibus, id tristique felis dignissim. Nullam sapien metus, feugiat egestas convallis eu, vehicula et turpis. Phasellus interdum, justo sit amet maximus pellentesque, eros orci dictum diam, id bibendum risus neque non risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas iaculis vulputate arcu, quis vulputate mauris aliquet in. Praesent sollicitudin erat at augue cursus, a scelerisque odio tristique. Aenean quis dui in nisi condimentum viverra eleifend sed odio. Vestibulum a lacinia leo. Proin congue purus vulputate metus vestibulum eleifend. Suspendisse sit amet orci magna. Suspendisse eu odio ut purus ultrices ornare id eu dolor. Cras porttitor semper feugiat. Sed vel ultricies risus, vel dignissim arcu. Vestibulum quis interdum sem. Morbi bibendum tortor ligula, non pellentesque ante ullamcorper sed. Duis ornare felis eget justo faucibus, id tristique felis dignissim. Nullam sapien metus, feugiat egestas convallis eu, vehicula et turpis. Phasellus interdum, justo sit amet maximus pellentesque, eros orci dictum diam, id bibendum risus neque non risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas iaculis vulputate arcu, quis vulputate mauris aliquet in. Praesent sollicitudin erat at augue cursus, a scelerisque odio tristique. Aenean quis dui in nisi condimentum viverra eleifend sed odio. Vestibulum a lacinia leo. Proin congue purus vulputate metus vestibulum eleifend. Suspendisse sit amet orci magna. Suspendisse eu odio ut purus ultrices ornare id eu dolor. Cras porttitor semper feugiat. Sed vel ultricies risus, vel dignissim arcu. Vestibulum quis interdum sem. Morbi bibendum tortor ligula, non pellentesque ante ullamcorper sed. Duis ornare felis eget justo faucibus, id tristique felis dignissim. Nullam sapien metus, feugiat egestas convallis eu, vehicula et turpis. Phasellus interdum, justo sit amet maximus pellentesque, eros orci dictum diam, id bibendum risus neque non risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas iaculis vulputate arcu, quis vulputate mauris aliquet in. Praesent sollicitudin erat at augue cursus, a scelerisque odio tristique. Aenean quis dui in nisi condimentum viverra eleifend sed odio. Vestibulum a lacinia leo. Proin congue purus vulputate metus vestibulum eleifend. Suspendisse sit amet orci magna. Suspendisse eu odio ut purus ultrices ornare id eu dolor. Cras porttitor semper feugiat. Sed vel ultricies risus, vel dignissim arcu. Vestibulum quis interdum sem. Morbi bibendum tortor ligula, non pellentesque ante ullamcorper sed. Duis ornare felis eget justo faucibus, id tristique felis dignissim. Nullam sapien metus, feugiat egestas convallis eu, vehicula et turpis. Phasellus interdum, justo sit amet maximus pellentesque, eros orci dictum diam, id bibendum risus neque non risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas iaculis vulputate arcu, quis vulputate mauris aliquet in. Praesent sollicitudin erat at augue cursus, a scelerisque odio tristique. Aenean quis dui in nisi condimentum viverra eleifend sed odio. Vestibulum a lacinia leo. Proin congue purus vulputate metus vestibulum eleifend. Suspendisse sit amet orci magna. Suspendisse eu odio ut purus ultrices ornare id eu dolor. Cras porttitor semper feugiat. Sed vel ultricies risus, vel dignissim arcu. Vestibulum quis interdum sem. Morbi bibendum tortor ligula, non pellentesque ante ullamcorper sed. Duis ornare felis eget justo faucibus, id tristique felis dignissim. Nullam sapien metus, feugiat egestas convallis eu, vehicula et turpis. Phasellus interdum, justo sit amet maximus pellentesque, eros orci dictum diam, id bibendum risus neque non risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas iaculis vulputate arcu, quis vulputate mauris aliquet in. Praesent sollicitudin erat at augue cursus, a scelerisque odio tristique. Aenean quis dui in nisi condimentum viverra eleifend sed odio. Vestibulum a lacinia leo. Proin congue purus vulputate metus vestibulum eleifend. Suspendisse sit amet orci magna. Suspendisse eu odio ut purus ultrices ornare id eu dolor. Cras porttitor semper feugiat. Sed vel ultricies risus, vel dignissim arcu. Vestibulum quis interdum sem. Morbi bibendum tortor ligula, non pellentesque ante ullamcorper sed. Duis ornare felis eget justo faucibus, id tristique felis dignissim. Nullam sapien metus, feugiat egestas convallis eu, vehicula et turpis. Phasellus interdum, justo sit amet maximus pellentesque, eros orci dictum diam, id bibendum risus neque non risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas iaculis vulputate arcu, quis vulputate mauris aliquet in. Praesent sollicitudin erat at augue cursus, a scelerisque odio tristique. Aenean quis dui in nisi condimentum viverra eleifend sed odio. Vestibulum a lacinia leo. Proin congue purus vulputate metus vestibulum eleifend. Suspendisse sit amet orci magna. Suspendisse eu odio ut purus ultrices ornare id eu dolor. Cras porttitor semper feugiat. Sed vel ultricies risus, vel dignissim arcu. Vestibulum quis interdum sem. Morbi bibendum tortor ligula, non pellentesque ante ullamcorper sed. Duis ornare felis eget justo faucibus, id tristique felis dignissim. Nullam sapien metus, feugiat egestas convallis eu, vehicula et turpis. Phasellus interdum, justo sit amet maximus pellentesque, eros orci dictum diam, id bibendum risus neque non risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas iaculis vulputate arcu, quis vulputate mauris aliquet in. Praesent sollicitudin erat at augue cursus, a scelerisque odio tristique. Aenean quis dui in nisi condimentum viverra eleifend sed odio. Vestibulum a lacinia leo. Proin congue purus vulputate metus vestibulum eleifend. Suspendisse sit amet orci magna. Suspendisse eu odio ut purus ultrices ornare id eu dolor. Cras porttitor semper feugiat. Sed vel ultricies risus, vel dignissim arcu. Vestibulum quis interdum sem. Morbi bibendum tortor ligula, non pellentesque ante ullamcorper sed. Duis ornare felis eget justo faucibus, id tristique felis dignissim. Nullam sapien metus, feugiat egestas convallis eu, vehicula et turpis. Phasellus interdum, justo sit amet maximus pellentesque, eros orci dictum diam, id bibendum risus neque non risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas iaculis vulputate arcu, quis vulputate mauris aliquet in. Praesent sollicitudin erat at augue cursus, a scelerisque odio tristique. Aenean quis dui in nisi condimentum viverra eleifend sed odio. Vestibulum a lacinia leo. Proin congue purus vulputate metus vestibulum eleifend. Suspendisse sit amet orci magna. Suspendisse eu odio ut purus ultrices ornare id eu dolor. Cras porttitor semper feugiat. Sed vel ultricies risus, vel dignissim arcu. Vestibulum quis interdum sem. Morbi bibendum tortor ligula, non pellentesque ante ullamcorper sed. Duis ornare felis eget justo faucibus, id tristique felis dignissim. Nullam sapien metus, feugiat egestas convallis eu, vehicula et turpis. Phasellus interdum, justo sit amet maximus pellentesque, eros orci dictum diam, id bibendum risus neque non risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas iaculis vulputate arcu, quis vulputate mauris aliquet in. Praesent sollicitudin erat at augue cursus, a scelerisque odio tristique. Aenean quis dui in nisi condimentum viverra eleifend sed odio. Vestibulum a lacinia leo. Proin congue purus vulputate metus vestibulum eleifend. Suspendisse sit amet orci magna. Suspendisse eu odio ut purus ultrices ornare id eu dolor. Cras porttitor semper feugiat. Sed vel ultricies risus, vel dignissim arcu. Vestibulum quis interdum sem. Morbi bibendum tortor ligula, non pellentesque ante ullamcorper sed. Duis ornare felis eget justo faucibus, id tristique felis dignissim. Nullam sapien metus, feugiat egestas convallis eu, vehicula et turpis. Phasellus interdum, justo sit amet maximus pellentesque, eros orci dictum diam, id bibendum risus neque non risus.")}},1575:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/pxblue-react-alpha.a7cce419.svg"},1576:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/pxblue-react-beta.0a85a594.svg"},1577:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/pxblue-react.004ac03a.svg"},1579:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),function(module){var _storybook_react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(164);module._StorybookPreserveDecorators=!0,Object(_storybook_react__WEBPACK_IMPORTED_MODULE_0__.configure)([__webpack_require__(1580),__webpack_require__(1627)],module)}.call(this,__webpack_require__(679)(module))},1580:function(module,exports,__webpack_require__){var map={"./welcome.stories.tsx":680};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id=1580},1583:function(module,exports,__webpack_require__){var map={"./AppBar.md":681,"./ChannelValue.md":1584,"./Drawer.md":1585,"./DropdownToolbar.md":1586,"./EmptyState.md":1587,"./Hero.md":1588,"./InfoListItem.md":1589,"./ListItemTag.md":1590,"./README.md":1591,"./ScoreCard.md":1592,"./Spacer.md":1593,"./ThreeLiner.md":682,"./UserMenu.md":683,"./images/appBar.gif":1594,"./images/appBar.png":1595,"./images/appBarAnatomy1.png":1596,"./images/appBarAnatomy2.png":1597,"./images/appBarCollapsed.png":1598,"./images/channelValue.png":1599,"./images/channelValueAnatomy.png":1600,"./images/drawer.png":1601,"./images/drawerAnatomy.png":1602,"./images/drawerHeaderAnatomy.png":1603,"./images/drawerLayout.png":1604,"./images/drawerNavGroupAnatomy.png":1605,"./images/dropdownToolbar.png":1606,"./images/dropdownToolbarAnatomy.png":1607,"./images/emptyState.png":1608,"./images/emptyStateAnatomy.png":1609,"./images/heroAnatomy.png":1610,"./images/heroes.png":1611,"./images/infoListItem.png":1612,"./images/listItemTag.png":1613,"./images/navItemAnatomy.png":1614,"./images/railAnatomy.png":1615,"./images/scoreCard.png":1616,"./images/scoreCardAnatomy.png":1617,"./images/scoreCard_alt.png":1618,"./images/spacer.png":1619,"./images/userMenuAnatomy.png":1620,"./images/userMenuAvatar.png":1621,"./images/userMenuOpened.png":1622,"./images/userMenuOpenedMobile.png":1623};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id=1583},1584:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='# Channel Value\n\nThe `<ChannelValue>` component is used to display a channel value (and units). This component abstracts the styles used to display the channel and units as well as an optional inline icon. These are used as part of the [`<Hero>`](./Hero.md) component, but can also be used inline (e.g., in a list).\n\n<div style="text-align:center; width: 100%">\n    <img width="100%" style="max-width: 600px" alt="Channel Value in Hero" src="./images/heroes.png">\n    <hr />\n    <img width="100%" style="max-width: 600px" alt="Channel Value in a list item" src="./images/channelValue.png">\n</div>\n\n## Usage\n\n<div style="text-align:center; width: 100%">\n    <img width="100%" style="max-width: 400px" alt="Channel Value Anatomy" src="./images/channelValueAnatomy.png">\n</div>\n\n```tsx\nimport { ChannelValue } from \'@pxblue/react-components\';\n...\n<ChannelValue value={100} units={\'%\'} icon={<Icon/>} />\n```\n\n## API\n\n<div style="overflow: auto;">\n\n| Prop Name | Description                                    | Type                  | Required | Default   |\n| --------- | ---------------------------------------------- | --------------------- | -------- | --------- |\n| color     | The color of the font                          | `string`              | no       | \'inherit\' |\n| classes   | Style overrides                                | `ChannelValueClasses` | no       |           |\n| fontSize  | The size of the font                           | `string` \\| `number`  | no       | \'inherit\' |\n| icon      | The inline icon to display                     | `JSX.Element`         | no       |           |\n| prefix    | Show units before the value                    | `boolean`             | no       | false     |\n| units     | The text to display for the units (light text) | `string`              | no       |           |\n| value     | The value (bold text) to display               | `string` \\| `number`  | yes      |           |\n\n</div>\n\nAny other props supplied will be provided to the root element (`span`).\n\n### Classes\n\nYou can override the classes used by PX Blue by passing a `classes` prop. It supports the following keys:\n\n| Name  | Description                         |\n| ----- | ----------------------------------- |\n| root  | Styles applied to the root element  |\n| icon  | Styles applied to the icon element  |\n| units | Styles applied to the units element |\n| value | Styles applied to the value element |\n'},1585:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='# Drawer\n\nThe `<Drawer>` component is a wrapper around the [Material UI Drawer](https://material-ui.com/api/drawer/) that adds specific PX Blue functionality and styling. It is used to organize content (typically navigation links) in a collapsible side panel. The PX Blue Drawer includes helper components for `<DrawerHeader>`, `<DrawerSubheader>`, `<DrawerBody>`, `<DrawerNavGroup>`, `<DrawerNavItem>`, `<DrawerRailItem>`, `<DrawerFooter>`, and `<DrawerLayout>` to help organize the content.\n\n<div style="width: 100%; text-align: center">\n    <img width="100%" style="max-width: 200px" alt="Nested Drawer" src="./images/drawer.png">\n</div>\n\n## Drawer\n\nThe `<Drawer>` component is the parent container, which manages the overall state of the drawer and renders the child components.\n\n<div style="width: 100%; text-align: center">\n    <img width="100%" style="max-width: 500px" alt="Drawer Anatomy" src="./images/drawerAnatomy.png">\n</div>\n\n### Drawer Usage\n\n```tsx\nimport { Drawer, DrawerHeader, DrawerSubheader, DrawerBody, DrawerNavGroup, DrawerFooter } from \'@pxblue/react-components\';\n\n// Constructing the drawer using the items object\n<Drawer>\n    <DrawerHeader />\n    <DrawerSubheader />\n    <DrawerBody>\n        <DrawerNavGroup items={[]}/>\n        <DrawerNavGroup items={[]}/>\n    </DrawerBody>\n    <DrawerFooter />\n</Drawer>\n\n// Constructing the drawer declaratively\n<Drawer>\n    <DrawerHeader />\n    <DrawerSubheader />\n    <DrawerBody>\n        <DrawerNavGroup>\n            <DrawerNavItem />\n            <DrawerNavItem>\n                <DrawerNavItem />\n                <DrawerNavItem />\n            </DrawerNavItem>\n        </DrawerNavGroup>\n    </DrawerBody>\n    <DrawerFooter />\n</Drawer>\n\n// a responsive Drawer using the variant prop\nimport { useMediaQuery } from \'@material-ui/core\';\nimport { useTheme } from \'@material-ui/core/styles\';\nconst theme = useTheme();\nconst xsDown = useMediaQuery(theme.breakpoints.down(\'xs\'));\n\n<Drawer\n    variant={xsDown ? \'temporary\' : \'persistent\'}\n>\n</Drawer>\n```\n\n### Drawer API\n\n<div style="overflow: auto;">\n\n| Prop Name                       | Description                                                                  | Type                                                         | Required | Default           |\n| ------------------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------ | -------- | ----------------- |\n| activeItem                      | itemID for the \'active\' item                                                 | `string`                                                     | no       |                   |\n| classes                         | Style overrides                                                              | `DrawerClasses`                                              | no       |                   |\n| condensed                       | Show condensed nav items without labels (`rail` variant only)                | `boolean`                                                    | no       | `false`           |\n| noLayout                        | Set to true if used without a `<DrawerLayout>`                               | `boolean`                                                    | no       | `false`           |\n| onItemSelect                    | A callback function to execute whenever an item is clicked                   | `(id: string) => void`                                       | no       |                   |\n| open                            | Controls the open/closed state of the drawer                                 | `boolean`                                                    | yes      |                   |\n| openOnHover                     | Automatically open the drawer on hover when closed (persistent variant only) | `boolean`                                                    | no       | `true`            |\n| openOnHoverDelay                | Delay (ms) before triggering open on hover (persistent variant only)         | `number`                                                     | no       | `500`             |\n| sideBorder                      | Whether to use a side border for the drawer instead of a shadow              | `boolean`                                                    | no       | `false`           |\n| variant                         | The variant to use (see below)                                               | `\'permanent\'` \\| `\'persistent\'` \\| `\'temporary\'` \\| `\'rail\'` | no       | `persistent`      |\n| width                           | Sets the width of the drawer when open                                       | `number` \\| `string`                                         | no       | `22.5rem (360px)` |\n| [...sharedProps](#shared-props) | Props that can be set at any level in the drawer hierarchy                   | -                                                            | -        |                   |\n\n</div>\n\nAny other props will be provided to the root element [**Material UI Drawer**](https://material-ui.com/api/drawer/).\n\nThe `Drawer` has four `variant`s:\n\n-   **Permanent**: Always open, even when `open` is set to false.\n-   **Persistent**: When `open` is set to false, the `<Drawer>` collapses itself as a navigation rail, and hover will make it expand temporarily; when `open` is set to true, it behaves like a permanent `<Drawer>`.\n-   **Temporary**: When `open` is set to false, the `<Drawer>` is hidden; when `open` is set to true, it slides in.\n-   **Rail**: An always collapsed version of the `<Drawer>` that only displays an icons and titles.\n\n> **Note on using multiple drawers**: If your application uses multiple `<Drawer>`s, each `<DrawerLayout>` will automatically adjust based on the state of the nearest `<Drawer>`. If you are using a `<Drawer>` without a `<DrawerLayout>`, you should set the `noLayout` property to true on the `<Drawer>` to prevent inadvertently affecting the styles of any `<DrawerLayout>`s.\n\n#### Classes\n\nYou can override the classes used by PX Blue by passing a `classes` prop. The Drawer supports the following keys:\n\n| Name       | Description                                                    |\n| ---------- | -------------------------------------------------------------- |\n| root       | MUI Drawer style override for the root element                 |\n| content    | Styles applied to the drawer content container                 |\n| expanded   | Styles applied to the root element when the drawer is expanded |\n| paper      | MUI Drawer style override for the underlying paper element     |\n| sideBorder | Styles applied when sideBorder is set to true                  |\n\n## Drawer Header\n\nThe `<DrawerHeader>` contains the content at the top of the `<Drawer>`. By default, it renders multiple lines of text in the PX Blue style. If you supply a `titleContent`, you can render your own custom content in the title area.\n\n<div style="width: 100%; text-align: center">\n    <img width="100%" style="max-width: 600px" alt="Drawer Header Anatomy" src="./images/drawerHeaderAnatomy.png">\n</div>\n\n### Drawer Header API\n\n<div style="overflow: auto;">\n\n| Prop Name         | Description                                    | Type                  | Required | Default                      |\n| ----------------- | ---------------------------------------------- | --------------------- | -------- | ---------------------------- |\n| backgroundColor   | The color used for the background              | `string`              | no       | `theme.palette.primary.main` |\n| backgroundImage   | An image to display in the header              | `string`              | no       |                              |\n| backgroundOpacity | The opacity of the background image            | `number`              | no       | `0.3`                        |\n| classes           | Style overrides                                | `DrawerHeaderClasses` | no       |                              |\n| divider           | Optional divider which appears beneath header  | `boolean`             | no       | `false`                      |\n| fontColor         | The color of the text elements                 | `string`              | no       | dynamic based on background  |\n| icon              | A component to render for the icon             | `ReactNode`           | no       |                              |\n| onIconClick       | A function to execute when the icon is clicked | `function`            | no       | `() => {}`                   |\n| subtitle          | The text to show on the second line            | `string`              | no       |                              |\n| title             | The text to show on the first line             | `string`              | no       |                              |\n| titleContent      | Custom content for header title area           | `ReactNode`           | no       |                              |\n\n</div>\n\nAny other props will be provided to the root element [**Material UI Toolbar**](https://material-ui.com/api/toolbar/).\n\n#### Classes\n\nYou can override the classes used by PX Blue by passing a `classes` prop. The `<DrawerHeader>` supports the following keys:\n\n| Name             | Description                                      |\n| ---------------- | ------------------------------------------------ |\n| root             | Styles applied to the root element               |\n| background       | Styles applied to the header background          |\n| content          | Styles applied to the content container          |\n| navigation       | Styles applied to the icon element               |\n| nonClickableIcon | Styles applied to the non-clickable icon element |\n| railIcon         | Styles applied to the icon when using rail style |\n| subtitle         | Styles applied to the subtitle element           |\n| title            | Styles applied to the title element              |\n\n## Drawer Subheader\n\nThe `<DrawerSubheader>` is an optional section that renders below the header and above the body of the `<Drawer>`. It can be used to support custom content (passed as children), such as filtering options or to display additional information.\n\n### Drawer Subheader Usage\n\n```tsx\nimport DrawerSubheader from \'@pxblue/react-components/core/Drawer\';\n...\n<DrawerSubheader>\n    <div>Custom Subheader Content</div>\n</DrawerSubheader>\n```\n\n### Drawer Subheader API\n\n<div style="overflow: auto;">\n\n| Prop Name             | Description                                        | Type      | Required | Default |\n| --------------------- | -------------------------------------------------- | --------- | -------- | ------- |\n| divider               | Optional divider which appears below the Subheader | `boolean` | no       | `true`  |\n| hideContentOnCollapse | Hide subheader contents when drawer is closed      | `boolean` | no       | `true`  |\n\n</div>\n\nAny other props supplied will be provided to the root element (`div`).\n\n## Drawer Body\n\nThe `<DrawerBody>` is a wrapper for the main content of the Drawer. The typical use case is to display `<DrawerNavGroup>` elements, but custom elements (e.g., for spacing) are accepted as well.\n\n### Drawer Body Usage\n\n```tsx\nimport DrawerBody from \'@pxblue/react-components/core/Drawer\';\n...\n<DrawerBody>\n    <DrawerNavGroup title={\'Nav Items\'} items={...} />\n    <DrawerNavGroup title={\'More Nav Items\'} items={...} />\n</DrawerBody>\n```\n\n### Drawer Body API\n\n<div style="overflow: auto;">\n\n| Prop Name                       | Description                                                | Type                | Required | Default |\n| ------------------------------- | ---------------------------------------------------------- | ------------------- | -------- | ------- |\n| classes                         | Style overrides                                            | `DrawerBodyClasses` | no       |         |\n| [...sharedProps](#shared-props) | Props that can be set at any level in the drawer hierarchy | -                   | -        |         |\n\n</div>\n\nAny other props supplied will be provided to the root element (`div`).\n\n#### Classes\n\nYou can override the classes used by PX Blue by passing a `classes` prop. The `<DrawerBody>` supports the following keys:\n\n| Name | Description                        |\n| ---- | ---------------------------------- |\n| root | Styles applied to the root element |\n\n## Drawer Nav Group\n\nA `<DrawerNavGroup>` is used inside of the `<DrawerBody>` to organize links/content. Each group consists of an (optional) group title and a series of navigation items. Most visual props are inherited from the `<DrawerBody>` but can be overridden at the NavGroup level if desired.\n\nThe `items` property supports nested items to generate collapsible sections in the menu. This can be used to create an arbitrary tree depth, but we do not recommend going more than two levels deep in a navigation Drawer. You can also build the navigation links declaratively by passing either `<DrawerNavItem>` or `<DrawerRailItem>` children to the `<DrawerNavGroup>`.\n\n<div style="width: 100%; text-align: center">\n    <img width="100%" style="max-width: 600px" alt="Drawer Nav Group Anatomy" src="./images/drawerNavGroupAnatomy.png">\n</div>\n\n### Drawer Nav Group API\n\n<div style="overflow: auto;">\n\n| Prop Name                       | Description                                                | Type                    | Required | Default                     |\n| ------------------------------- | ---------------------------------------------------------- | ----------------------- | -------- | --------------------------- |\n| classes                         | Style overrides                                            | `DrawerNavGroupClasses` | no       |                             |\n| items                           | List of items to render                                    | `NavItem[]`             | yes      |                             |\n| title                           | Text to display in the group header                        | `string`                | no       |                             |\n| titleColor                      | Color used for the title text                              | `string`                | no       | varies for light/dark theme |\n| titleContent                    | Custom element, substitute for title                       | `ReactNode`             | no       |                             |\n| [...sharedProps](#shared-props) | Props that can be set at any level in the drawer hierarchy | -                       | -        |                             |\n\n</div>\n\nAny other props will be provided to the root element [**Material UI List**](https://material-ui.com/api/list/).\n\n#### Classes\n\nYou can override the classes used by PX Blue by passing a `classes` prop. The `<DrawerNavGroup>` supports the following keys:\n\n| Name      | Description                                  |\n| --------- | -------------------------------------------- |\n| root      | Styles applied to the root element           |\n| title     | Styles applied to the title text element     |\n| subheader | Styles applied to the List subheader element |\n\n## Drawer Footer\n\nThe `<DrawerFooter>` is an optional section that renders at the bottom of the `<Drawer>`. It can be used to add any custom content (as children).\n\n### Usage\n\n```tsx\nimport DrawerFooter from \'@pxblue/react-components/core/Drawer\';\n...\n<DrawerFooter>\n    <div>Custom Footer goes here</div>\n</DrawerFooter>\n```\n\n### Drawer Footer API\n\n<div style="overflow: auto;">\n\n| Prop Name             | Description                                 | Type      | Required | Default |\n| --------------------- | ------------------------------------------- | --------- | -------- | ------- |\n| backgroundColor       | The color used for the background           | `string`  | no       |         |\n| divider               | Optional divider which appears above footer | `boolean` | no       | `true`  |\n| hideContentOnCollapse | Hide footer contents when drawer is closed  | `boolean` | no       | `true`  |\n\n</div>\n\nAny other props supplied will be provided to the root element (`div`).\n\n## Drawer Nav Item\n\nThe `<DrawerNavItem>` is an individual line item in the `<Drawer>`. These can be generated for you by using the `items` prop of the `<DrawerNavGroup>` and passing in an array of objects with the following API. You can also create these line items by directly passing them as children to the `<DrawerNavGroup>`. Each `<DrawerNavItem>` also supports the ability to nest items (using its own `items` prop or children). When using the rail variant of the `<Drawer>`, you should use `<DrawerRailItem>` instead (see below).\n\n<div style="width: 100%; text-align: center">\n    <img width="100%" style="max-width: 600px" alt="Nav Item Anatomy" src="./images/navItemAnatomy.png">\n</div>\n\n### Drawer Nav Item API\n\n<div style="overflow: auto;">\n\n| Prop Name                       | Description                                                                                                                                       | Type                      | Required | Default |\n| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- | -------- | ------- |\n| classes                         | Style overrides                                                                                                                                   | `DrawerNavItemClasses`    | no       |         |\n| depth\\*                         | The nested depth of the item                                                                                                                      | `number`                  | no       | 0       |\n| hidden                          | Sets whether to hide the nav item                                                                                                                 | `boolean`                 | no       |         |\n| hidePadding                     | Remove left padding if no icon is used                                                                                                            | `boolean`                 | no       | false   |\n| icon                            | A component to render for the left icon                                                                                                           | `JSX.Element`             | no       |         |\n| isInActiveTree\\*                | Sets whether the item is a parent of the currently active item (managed automatically)                                                            | `boolean`                 | no       |         |\n| itemID                          | A unique identifier of the NavItem. Item will have \'active\' style when this matches activeItem                                                    | `string`                  | yes      |         |\n| items                           | The items nested under this item                                                                                                                  | `NestedNavItem[]`         | no       |         |\n| notifyActiveParent\\*            | Callback function to the parent element to update active hierarchy styles                                                                         | `(ids: string[]) => void` | no       |         |\n| onClick                         | A function to execute when clicked                                                                                                                | `function`                | no       |         |\n| rightComponent                  | An icon/component to display to the right                                                                                                         | `ReactNode`               | no       |         |\n| statusColor                     | Status stripe and icon color                                                                                                                      | `string`                  | no       |         |\n| subtitle                        | The text to show on the second line                                                                                                               | `string`                  | no       |         |\n| title                           | The text to show on the first line                                                                                                                | `string`                  | yes      |         |\n| disableRailTooltip              | Sets whether to disable the tooltip on hover for the condensed `rail` variant                                                                     | `boolean`                 | no       |         |\n| InfoListItemProps               | Used to override [InfoListItem](https://pxblue-components.github.io/react/?path=/info/components-info-list-item--get-read-me-story) default props | `InfoListItemProps`       | no       |         |\n| [...sharedProps](#shared-props) | Props that can be set at any level in the drawer hierarchy                                                                                        | -                         | -        |         |\n\n</div>\n\n> \\*These props are managed automatically when using the `<DrawerNavItem>` inside of a `<DrawerNavGroup>`.\n\n#### Classes\n\nYou can override the classes used by PX Blue by passing a `classes` prop. The `<DrawerNavItem>` supports the following keys:\n\n| Name             | Description                                                     |\n| ---------------- | --------------------------------------------------------------- |\n| root             | Styles applied to the root element wrapping the InfoListItem    |\n| active           | Styles applied to the active item highlight element             |\n| expandIcon       | Styles applied to the expand/collapse icon wrapper              |\n| infoListItemRoot | Styles applied to the InfoListItem root element                 |\n| nestedListGroup  | Styles applied to wrapper surrounded nested children            |\n| nestedTitle      | Styles applied to the title text if the item is a nested item   |\n| title            | Styles applied to the title text                                |\n| titleActive      | Styles applied to the title text if the item is the active item |\n| ripple           | Styles applied to the ripple                                    |\n\n### Tips\n\nYou can render the `<DrawerNavItem>` as a link by setting the `component` prop in the `InfoListItemProps` to a [`Link`](https://reactrouter.com/web/api/Link) component from `react-router-dom` (recommended), or the native HTML anchor tag `\'a\'`. This allows you to perform helpful actions such as opening a link in a new browser tab via right-click.\n\n```tsx\n\nimport { Link } from \'react-router-dom\';\n// Using items prop\n<DrawerNavGroup items={[\n    itemID: \'overview\',\n    title: \'Overview\',\n    // @ts-ignore\n    InfoListItemProps: { component: Link, to: \'/overview\' },\n]}/>\n\n// Declaratively\n<DrawerNavItem\n    itemID={\'overview\'}\n    title={\'Overview\'}\n    // @ts-ignore\n    InfoListItemProps={{ component: Link, to: \'/overview\' }}\n/>\n```\n\n## Drawer Rail Item\n\nWhen using the `rail` variant of the `<Drawer>`, you should use `<DrawerRailItem>` instead of `<DrawerNavItem>`. The `<DrawerRailItem>` is a simplified version of the `<DrawerNavItem>` that renders the `icon` and `title` only. When using the `condensed` version of the `<Drawer>`, the `title` will also be hidden. The `<DrawerRailItem>` cannot be nested.\n\n<div style="width: 100%; text-align: center">\n    <img width="100%" alt="Rail Anatomy" src="./images/railAnatomy.png">\n</div>\n\n### Drawer Rail Item API\n\n<div style="overflow: auto;">\n\n| Prop Name                       | Description                                                                                     | Type                    | Required | Default |\n| ------------------------------- | ----------------------------------------------------------------------------------------------- | ----------------------- | -------- | ------- |\n| classes                         | Style overrides                                                                                 | `DrawerRailItemClasses` | no       |         |\n| condensed\\*                     | Show condensed nav items without labels (`rail` variant only)                                   | `boolean`               | no       | `false` |\n| hidden                          | Sets whether to hide the rail item                                                              | `boolean`               | no       |         |\n| icon                            | A component to render for the left icon                                                         | `JSX.Element`           | yes      |         |\n| itemID                          | An unique identifier of the NavItem. Item will have \'active\' style when this matches activeItem | `string`                | yes      |         |\n| onClick                         | A function to execute when clicked                                                              | `function`              | no       |         |\n| statusColor                     | Status stripe and icon color                                                                    | `string`                | no       |         |\n| title                           | The text to show on the first line                                                              | `string`                | no       |         |\n| ButtonBaseProps                 | Used to override [ButtonBase](https://material-ui.com/api/button-base/) default props           | `InfoListItemProps`     | no       |         |\n| disableRailTooltip              | Sets whether to disable the tooltip on hover                                                    | `boolean`               | no       |         |\n| [...sharedProps](#shared-props) | Props that can be set at any level in the drawer hierarchy                                      | -                       | -        |         |\n\n</div>\n\n> \\*These props are managed automatically when using the `<DrawerRailItem>` inside of a `<Drawer>`.\n\n#### Classes\n\nYou can override the classes used by PX Blue by passing a `classes` prop. The `<DrawerRailItem>` supports the following keys:\n\n| Name         | Description                                                     |\n| ------------ | --------------------------------------------------------------- |\n| root         | Styles applied to the root element wrapping the InfoListItem    |\n| active       | Styles applied to the active item highlight element             |\n| condensed    | Styles applied to the root element when condensed is true       |\n| divider      | Styles applied to the divider element                           |\n| icon         | Styles applied to the icon wrapper                              |\n| statusStripe | Styles applied to the status stripe                             |\n| title        | Styles applied to the title text                                |\n| titleActive  | Styles applied to the title text if the item is the active item |\n| ripple       | Styles applied to the ripple                                    |\n\n### Tips\n\nYou can render the `<DrawerRailItem>` as a link by setting the `component` prop in the `ButtonBaseProps` to a [`Link`](https://reactrouter.com/web/api/Link) component from `react-router-dom` (recommended), or the native HTML anchor tag `\'a\'`. This allows you to perform helpful actions such as opening a link in a new browser tab via right-click.\n\n```tsx\n\nimport { Link } from \'react-router-dom\';\n// Using items prop\n<DrawerNavGroup items={[\n    itemID: \'overview\',\n    title: \'Overview\',\n    // @ts-ignore\n    ButtonBaseProps: { component: Link, to: \'/overview\' },\n]}/>\n\n// Declaratively\n<DrawerRailItem\n    itemID={\'overview\'}\n    title={\'Overview\'}\n    // @ts-ignore\n    ButtonBaseProps={{ component: Link, to: \'/overview\' }}\n/>\n```\n\n## Shared Props\n\nThe following props can be set at any level in the drawer hierarchy (`<Drawer>`, `<DrawerBody>`, `<DrawerNavGroup>`, `<DrawerNavItem>`, or `<DrawerRailItem>`). If they are set on a parent, they will be used for all children. For more customization, you can set these props on individual children and they will override any value set on the parent.\n\n<div style="overflow: auto;">\n\n| Name                      | Description                                               | Type      | Required | Default                     |\n| ------------------------- | --------------------------------------------------------- | --------- | -------- | --------------------------- |\n| activeItemBackgroundColor | Background color for the \'active\' item                    | `string`  | no       | varies for light/dark theme |\n| activeItemFontColor       | Font color for the \'active\' item                          | `string`  | no       | varies for light/dark theme |\n| activeItemIconColor       | Icon color for the \'active\' item                          | `string`  | no       | varies for light/dark theme |\n| backgroundColor           | Color used for the background of the element              | `string`  | no       |                             |\n| divider                   | Whether to show a line between all items                  | `boolean` | no       | false                       |\n| itemFontColor             | The color used for the item text                          | `string`  | no       | varies for light/dark theme |\n| itemIconColor             | The color used for the icon                               | `string`  | no       | varies for light/dark theme |\n| ripple                    | Whether to apply material ripple effect to items on click | `boolean` | no       | true                        |\n\n</div>\n\nThe following are additional shared props that will apply when using a non-rail variant of the `<Drawer>`. They will have no effect on `<DrawerRailItem>`s.\n\n<div style="overflow: auto;">\n\n| Prop Name                     | Description                                                                   | Type                    | Required | Default                                                      |\n| ----------------------------- | ----------------------------------------------------------------------------- | ----------------------- | -------- | ------------------------------------------------------------ |\n| activeItemBackgroundShape     | shape of the active item background highlight                                 | `\'round\'` \\| `\'square\'` | no       | square                                                       |\n| chevron                       | Whether to have chevrons for all menu items                                   | `boolean`               | no       |                                                              |\n| collapseIcon                  | Icon used to collapse drawer                                                  | `JSX.Element`           | no       | `expandIcon` rotated 180 degrees                             |\n| expandIcon                    | Icon used to expand drawer                                                    | `JSX.Element`           | no       | `<ExpandMore />` at top-level, `<ArrowDropDown />` otherwise |\n| hidePadding                   | Whether to hide the paddings reserved for menu item icons                     | `boolean`               | no       |                                                              |\n| disableActiveItemParentStyles | If true, NavItems will not have a bold title when a child NavItem is selected | `boolean`               | no       | `false`                                                      |\n| nestedBackgroundColor         | background color for nested menu items                                        | `string`                | no       | theme.palette.type === \'light\' ? white[200] : darkBlack[100] |\n| nestedDivider                 | Whether to show a line between nested menu items                              | `boolean`               | no       | false                                                        |\n\n</div>\n\n# Drawer Layout\n\nThe `<DrawerLayout>` component is used to provide the appropriate resizing behavior for your main application content when used in conjunction with a PX Blue `<Drawer>`. It accepts a `<Drawer>` as a prop, and the main page content is passed in through child elements.\n\n<div style="width: 100%; text-align: center">\n    <img width="100%" style="max-width: 600px" alt="DrawerLayout with labels" src="./images/drawerLayout.png">\n</div>\n\n## Drawer Layout Usage\n\n```tsx\nimport { Drawer, DrawerLayout } from \'@pxblue/react-components\';\n...\n<DrawerLayout drawer={<Drawer ... />}>\n    <>\n        /* Page content goes here */\n    </>\n</DrawerLayout>\n```\n\n### Drawer Layout API\n\n<div style="overflow: auto;">\n\n| Prop Name | Description                     | Type                                 | Required | Default |\n| --------- | ------------------------------- | ------------------------------------ | -------- | ------- |\n| classes   | Style overrides                 | `DrawerLayoutClasses`                | no       |         |\n| drawer    | Drawer component to be embedded | `ReactElement<DrawerComponentProps>` | yes      |         |\n\n</div>\n\nAny other props supplied will be provided to the root element (`div`).\n\n> **Note on Scrolling**: When using client-side routing in your application, you may notice that the window scroll position does not reset when navigating to new routes. To address this issue, you will need to manually update the scroll position when new pages are loaded. If you are using React Router they have [several examples](https://reacttraining.com/react-router/web/guides/scroll-restoration) on how to implement this in your application.\n\n#### Classes\n\nYou can override the classes used by PX Blue by passing a `classes` prop. The `<DrawerLayout>` supports the following keys:\n\n| Name     | Description                                                    |\n| -------- | -------------------------------------------------------------- |\n| root     | Styles applied to the root element                             |\n| content  | Styles applied to the body content container                   |\n| drawer   | Styles applied to the drawer container                         |\n| expanded | Styles applied to the root element when the drawer is expanded |\n'},1586:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='# Dropdown Toolbar\n\nThe `<DropdownToolbar>` component is used to display a toolbar with a dropdown menu for a subtitle. The Menu can be populated via the `menuGroups` prop, or can be entirely customized by supplying your own `<Menu>` via the `menu` prop.\n\n<div style="width: 100%; text-align: center">\n    <img width="100%" style="max-width: 600px" alt="Dropdown Toolbar" src="./images/dropdownToolbar.png">\n</div>\n\n## Usage\n\n<div style="width: 100%; text-align: center">\n    <img width="100%" style="max-width: 600px" alt="Dropdown Toolbar" src="./images/dropdownToolbarAnatomy.png">\n</div>\n\n```tsx\nimport { DropdownToolbar } from \'@pxblue/react-components\';\n...\n<DropdownToolbar title={"Title"} subtitle={"Subtitle"} menuGroups={[\n  {\n    items: [{\n        title: "Menu Item 1";\n        onClick: () => {};\n      },\n      {\n        title: "Menu Item 2";\n        onClick: () => {};\n      },\n      {\n        title: "Menu Item 3";\n        onClick: () => {};\n      }\n    ]\n  }\n]}/>\n```\n\n## API\n\n<div style="overflow: auto;">\n\n| Prop Name      | Description                                | Type                     | Required | Default |\n| -------------- | ------------------------------------------ | ------------------------ | -------- | ------- |\n| classes        | Style Overrides                            | `DropdownToolbarClasses` | no       |         |\n| menu           | Custom content to be displayed in the menu | Material-UI `Menu`       | no       |         |\n| menuGroups     | Groups of menu items to display            | `ToolbarMenuGroups[]`    | no       |         |\n| MenuProps      | Property overrides for the MUI Menu        | `MenuProps`              | no       |         |\n| navigationIcon | Navigation Icon to be displayed            | `JSX.Element`            | no       |         |\n| onClose        | Function called when the menu is closed    | `Function`               | no       |         |\n| onOpen         | Function called when the menu is opened    | `Function`               | no       |         |\n| subtitle       | Subtitle text to be displayed              | `string`                 | no       |         |\n| title          | Title text to be displayed                 | `string`                 | yes      |         |\n\n</div>\n\nAny other props supplied will be provided to the root element ([`Toolbar`](https://material-ui.com/api/toolbar/)).\n\n### Classes\n\nYou can override the classes used by PX Blue by passing a `classes` prop. It supports the following keys:\n\n| Name            | Description                                            |\n| --------------- | ------------------------------------------------------ |\n| root            | Styles applied to the root element                     |\n| menuItem        | Styles applied to the menu item                        |\n| navigation      | Styles applied to the navigationIcon                   |\n| subtitle        | Styles applied to the subtitle text                    |\n| subtitleContent | Styles applied to subtitle and dropdownArrow container |\n| textContent     | Styles applied to title and subtitle container         |\n| title           | Styles applied to the title text                       |\n\n### Toolbar Menu Groups Object\n\nThe `menuGroups` prop of the `<DropdownToolbar>` includes many properties from the [`<DrawerNavGroup>`](https://pxblue-components.github.io/react/?path=/info/components-drawer--get-read-me-story) array found within a [`<DrawerBody>`](https://pxblue-components.github.io/react/?path=/info/components-drawer--get-read-me-story).\n\n<div style="overflow: auto;">\n\n| Prop Name | Description                         | Type                | Required | Default |\n| --------- | ----------------------------------- | ------------------- | -------- | ------- |\n| fontColor | The color used for the text         | `string`            | no       |         |\n| iconColor | The color used for icons            | `string`            | no       |         |\n| items     | List of navigation items to render  | `ToolbarMenuItem[]` | yes      |         |\n| title     | Text to display in the group header | `string`            | no       |         |\n\n</div>\n\n### Toolbar Menu Item Object\n\n<div style="overflow: auto;">\n\n| Attribute   | Description                         | Type          | Required | Default |\n| ----------- | ----------------------------------- | ------------- | -------- | ------- |\n| chevron     | Show chevron icon to the right      | `boolean`     | no       | false   |\n| divider     | Show a divider line below the item  | `boolean`     | no       |         |\n| icon        | A component to render for the icon  | `JSX.Element` | no       |         |\n| onClick     | A function to execute when clicked  | `function`    | no       |         |\n| statusColor | Status stripe and icon color        | `string`      | no       |         |\n| subtitle    | The text to show on the second line | `string`      | no       |         |\n| title       | The text to show on the first line  | `string`      | yes      |         |\n\n</div>\n'},1587:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='# Empty State\n\nThe `<EmptyState>` component is an element that can be used as a placeholder when no data is present (such as an empty list, or a placeholder page for future content). This is only used when no data is available, rather than during loading (see [empty states pattern](https://pxblue.github.io/patterns/empty-states)).\n\n<div style="width: 100%; text-align: center">\n    <img width="100%" style="max-width: 200px" alt="Empty State component with action button" src="./images/emptyState.png">\n</div>\n\n## Usage\n\n<div style="width: 100%; text-align: center">\n    <img width="100%" style="max-width: 600px" alt="Empty State Anatomy" src="./images/emptyStateAnatomy.png">\n</div>\n\n```tsx\nimport { EmptyState } from \'@pxblue/react-components\';\n\n<EmptyState icon={<AlertIcon fontSize={\'inherit\'} />} title={\'No Alarms Found\'} />;\n```\n\n## API\n\n<div style="overflow: auto;">\n\n| Prop Name   | Description                           | Type                | Required | Default |\n| ----------- | ------------------------------------- | ------------------- | -------- | ------- |\n| actions     | Additional components to render below | `ReactNode`         | no       |         |\n| classes     | Style overrides                       | `EmptyStateClasses` | no       |         |\n| icon        | The primary icon                      | `ReactNode`         | yes      |         |\n| description | The secondary text to display         | `ReactNode`         | no       |         |\n| title       | The main text to display              | `ReactNode`         | yes      |         |\n\n</div>\n\nAny other props supplied will be provided to the root element (`div`).\n\n### Classes\n\nYou can override the classes used by PX Blue by passing a `classes` prop. It supports the following keys:\n\n| Name        | Description                        |\n| ----------- | ---------------------------------- |\n| root        | Styles applied to the root element |\n| actions     | Styles applied to the actions      |\n| description | Styles applied to the description  |\n| icon        | Styles applied to the icon         |\n| title       | Styles applied to the title        |\n'},1588:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default="# Hero\n\nThe PX Blue `<Hero>` components are used to call attention to particular values that are of the most importance to the user. These are typically displayed in a banner.\n\n<div style=\"width: 100%; text-align:center\">\n<img width=\"100%\" style=\"max-width: 600px\" alt=\"Hero Banner\" src=\"./images/heroes.png\">\n</div>\n\nThe `<Hero>` component displays a particular icon, value/units, and a label. The icon property will accept any valid component - this will typically be a Material icon, [PX Blue icon](https://github.com/pxblue/icons), or [Progress Icon](https://github.com/pxblue/icons/tree/master/progress). It will also accept Text/Emoji values.\n\nThe value section of the Hero utilizes a [`<ChannelValue>`](./ChannelValue.md) component. To display a single simple value, the information can be passed as props (`value`, `units`, `valueIcon`). For more complex values (such as a duration that displays hours and minutes), you can pass in `<ChannelValue>` components as children and they will be displayed inline.\n\n## Hero Usage\n\n<div style=\"width: 100%; text-align: center\">\n    <img width=\"100%\" style=\"max-width: 500px\" alt=\"Hero Anatomy\" src=\"./images/heroAnatomy.png\">\n</div>\n\n```tsx\nimport { Hero } from '@pxblue/react-components';\n\n// Simple usage passing props\n<Hero\n    icon={<Icon/>}\n    label={'Label'}\n    value={99}\n    units={'%'}\n/>\n// Complex example with multiple values as children\n<Hero\n    icon={<Icon/>}\n    label={'Label'}\n>\n    <ChannelValue value={1} units={'h'} />\n    <ChannelValue value={26} units={'m'} />\n</Hero>\n```\n\n## Hero API\n\n<div style=\"overflow: auto;\">\n\n| Prop Name           | Description                             | Type                    | Required | Default       |\n| ------------------- | --------------------------------------- | ----------------------- | -------- | ------------- |\n| classes             | Style overrides                         | `HeroClasses`           | no       |               |\n| fontSize            | The text size for the value line        | `'normal'` \\| `'small'` | no       | 'normal'      |\n| icon                | The primary icon                        | `ReactNode`             | yes      |               |\n| iconBackgroundColor | The color used behind the primary icon  | `string`                | no       | 'transparent' |\n| iconSize            | The size of the primary icon (min 10px) | `number` \\| `string`    | no       | 36            |\n| label               | The text shown below the `ChannelValue` | `string`                | yes      |               |\n| units               | Text to show after the value            | `string`                | no       |               |\n| value               | The value for the channel               | `string` \\| `number`    | no       |               |\n| valueIcon           | The inline icon with the value          | `JSX.Element`           | no       |               |\n\n</div>\n\nAny other props supplied will be provided to the root element (`div`).\n\n### Classes\n\nYou can override the classes used by PX Blue by passing a `classes` prop. It supports the following keys:\n\n| Name   | Description                         |\n| ------ | ----------------------------------- |\n| root   | Styles applied to the root element  |\n| icon   | Styles applied to the icon element  |\n| label  | Styles applied to the label element |\n| values | Styles applied to the value element |\n\n# Hero Banner\n\nThe `<HeroBanner>` component is a simple wrapper component that is used to contain `<Hero>`s. It creates the flex container and sets up the spacing rules to display them. It accepts up to four `<Hero>` components as its children.\n\n## Hero Banner Usage\n\n```tsx\nimport HeroBanner from '@pxblue/react-components/core/HeroBanner';\nimport Hero from '@pxblue/react-components/core/Hero';\n...\n<HeroBanner divider>\n    <Hero/>\n    <Hero/>\n    <Hero/>\n    <Hero/>\n</HeroBanner>\n```\n\n## Hero Banner API\n\n<div style=\"overflow: auto;\">\n\n| Prop Name | Description                        | Type                | Required | Default |\n| --------- | ---------------------------------- | ------------------- | -------- | ------- |\n| classes   | Style overrides                    | `HeroBannerClasses` | no       |         |\n| divider   | Whether to show the line separator | `boolean`           | no       | false   |\n| limit     | Max number of children to display  | `number`            | no       | 4       |\n\n</div>\n\nAny other props supplied will be provided to the root element (`div`).\n\n### Classes\n\nYou can override the classes used by PX Blue by passing a `classes` prop. It supports the following keys:\n\n| Name | Description                        |\n| ---- | ---------------------------------- |\n| root | Styles applied to the root element |\n"},1589:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default="# Info List Item\n\nThe `<InfoListItem>` is intended to be used in [`<List>`](https://material-ui.com/api/list/) views. It positions a title as well as optional subtitle(s), icon, and status stripe.\n\n<img width=\"100%\" alt=\"Info List Items in a variety of styles\" src=\"./images/infoListItem.png\">\n\n## Usage\n\n```tsx\nimport { InfoListItem } from '@pxblue/react-components';\nimport { GradeA, Leaf, CurrentCircled, VoltageCircled, Temp } from '@pxblue/icons-mui';\nimport * as Colors from '@pxblue/colors';\n...\n<InfoListItem\n    title={'Status'}\n    divider={'full'}\n    statusColor={Colors.green[500]}\n    subtitleSeparator={'/'}\n    icon={<Leaf color={'inherit'} />}\n/>\n```\n\n## API\n\n<div style=\"overflow: auto;\">\n\n| Prop Name         | Description                                      | Type                                 | Required | Default        |\n| ----------------- | ------------------------------------------------ | ------------------------------------ | -------- | -------------- |\n| avatar            | Show colored background for icon                 | `boolean`                            | no       | false          |\n| backgroundColor   | The color used for the background                | `string`                             | no       |                |\n| chevron           | Add a chevron icon on the right                  | `boolean`                            | no       | false          |\n| classes           | Style overrides                                  | `InfoListItemClasses`                | no       |                |\n| dense             | Smaller height row with less padding             | `boolean`                            | no       | false          |\n| divider           | Show a row separator below the row               | `'full'` \\| `'partial'`              | no       |                |\n| fontColor         | Main text color                                  | `string`                             | no       |                |\n| hidePadding       | Remove left padding if no icon is used           | `boolean`                            | no       | false          |\n| icon              | A component to render for the icon               | `JSX.Element`                        | no       |                |\n| iconAlign         | Icon alignment when `avatar` is set to false     | `'left'` \\| `'center'` \\| `'right'`  | no       | 'left'         |\n| iconColor         | Color override for the row icon                  | `string`                             | no       |                |\n| info              | The text to show on the third line               | `string` \\| `Array<React.ReactNode>` | no       |                |\n| leftComponent     | Component to render on the left side             | `ReactNode`                          | no       |                |\n| onClick           | A function to execute when clicked               | `function`                           | no       |                |\n| rightComponent    | Component to render on the right side            | `ReactNode`                          | no       |                |\n| ripple            | Whether to apply material ripple effect on click | `boolean`                            | no       | false          |\n| statusColor       | Status stripe and icon color                     | `string`                             | no       |                |\n| subtitle          | The text to show on the second line              | `string` \\| `Array<React.ReactNode>` | no       |                |\n| subtitleSeparator | Separator character for subtitle and info        | `string`                             | no       | '·' ('\\u00B7') |\n| title             | The text to show on the first line               | `ReactNode`                          | yes      |                |\n| wrapInfo          | Whether to wrap info on overflow                 | `boolean`                            | no       | false          |\n| wrapSubtitle      | Whether to wrap subtitle on overflow             | `boolean`                            | no       | false          |\n| wrapTitle         | Whether to wrap title on overflow                | `boolean`                            | no       | false          |\n\n</div>\n\nAny other props will be provided to the root element [**Material UI ListItem**](https://material-ui.com/api/list-item/).\n\n### Classes\n\nYou can override the classes used by PX Blue by passing a `classes` prop. It supports the following keys:\n\n| Name           | Description                                         |\n| -------------- | --------------------------------------------------- |\n| root           | Styles applied to the root element                  |\n| avatar         | Styles applied to the Avatar element                |\n| divider        | Styles applied to the divider element               |\n| icon           | Styles applied to the icon element                  |\n| info           | Styles applied to the third line of text element    |\n| listItemText   | Styles applied to the title/subtitle wrapper        |\n| rightComponent | Styles applied to the rightComponent parent element |\n| separator      | Styles applied to subtitle delimiter                |\n| statusStripe   | Styles applied to the status stripe element         |\n| subtitle       | Styles applied to the subtitle element              |\n| title          | Styles applied to the title element                 |\n\n## Tips\n\nYou can render the `<InfoListItem>` as a link by using the [`<Link>`](https://reactrouter.com/web/api/Link) component from `react-router-dom` (recommended), or the native anchor tag `<a>`. This allows you to perform helpful actions such as opening a link in a new browser tab.\n\n```tsx\nimport { Link } from 'react-router-dom';\n\n<InfoListItem\n    ...\n    component={Link}\n    // @ts-ignore\n    to={'/overview'}\n    button\n/>\n```\n\n```tsx\n<InfoListItem\n    ...\n    component={'a'}\n    // @ts-ignore\n    href={'eaton.com'}\n    button\n/>\n```\n"},1590:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default="# List Item Tag\n\n`<ListItemTag>` is a text item with a colored background and rounded corners that is used to tag lists.\n\n<img width=\"100%\" alt=\"List Item Tag\" src=\"./images/listItemTag.png\">\n\n## Usage\n\n```tsx\nimport { ListItemTag } from '@pxblue/react-components';\n\n<ListItemTag label={'Foo Bar'} backgroundColor={'gold'} fontColor={'black'} />;\n```\n\n## API\n\n<div style=\"overflow: auto;\">\n\n| Prop Name       | Description                   | Type     | Required | Default                     |\n| --------------- | ----------------------------- | -------- | -------- | --------------------------- |\n| label           | The label text                | `string` | yes      |                             |\n| fontColor       | Color of the label            | `string` | no       | varies for light/dark theme |\n| backgroundColor | Color of the label background | `string` | no       | varies for light/dark theme |\n\n</div>\n\nAny other props will be provided to the root element [**Material UI Typography**](https://material-ui.com/api/typography/).\n\n### Classes\n\nYou can override the classes used by PX Blue by passing a `classes` prop. It supports the following keys:\n\n| Name | Description                        |\n| ---- | ---------------------------------- |\n| root | Styles applied to the root element |\n"},1591:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default="# React Components\n\nWe currently have the following components available for React applications:\n\n-   [Channel Value](https://github.com/pxblue/react-component-library/blob/dev/docs/ChannelValue.md)\n-   [Drawer](https://github.com/pxblue/react-component-library/blob/dev/docs/Drawer.md)\n-   [Drawer Layout](https://github.com/pxblue/react-component-library/blob/dev/docs/DrawerLayout.md)\n-   [Empty State](https://github.com/pxblue/react-component-library/blob/dev/docs/EmptyState.md)\n-   [Hero & Hero Banner](https://github.com/pxblue/react-component-library/blob/dev/docs/Hero.md)\n-   [Info List Item](https://github.com/pxblue/react-component-library/blob/dev/docs/InfoListItem.md)\n-   [List Item Tag](https://github.com/pxblue/react-component-library/blob/dev/docs/ListItemTag.md)\n-   [Score Card](https://github.com/pxblue/react-component-library/blob/dev/docs/ScoreCard.md)\n-   [Spacer](https://github.com/pxblue/react-component-library/blob/dev/docs/Spacer.md)\n-   [User Menu](https://github.com/pxblue/react-component-library/blob/dev/docs/UserMenu.md)\n"},1592:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='# Score Card\n\nCard component that calls attention to particular values.\n\n<div style="align-items: center; text-align: center; width: 100%; display: flex; justify-content: space-evenly; margin-bottom: 20px">\n    <img width="40%" alt="Score Card with multiple highlighted values" src="./images/scoreCard.png"><br/>\n    <img width="40%" alt="Score Card with single badge-style value" src="./images/scoreCard_alt.png"><br/>\n</div>\n\n## Usage\n\n<div style="align-items: center; text-align: center; width: 100%; display: flex; justify-content: space-evenly; margin-bottom: 20px">\n    <img width="80%" alt="Score Card with labels on different parts" src="./images/scoreCardAnatomy.png"><br/>\n</div>\n\n```tsx\nimport { Hero, HeroBanner, ScoreCard } from \'@pxblue/react-components\';\nimport { List, Card, ListItem, ListItemText, ListItemSecondaryAction } from \'@material-ui/core\';\nimport * as Colors from \'@pxblue/colors\';\nimport MoreVert from \'@material-ui/icons/MoreVert\';\nimport { Temp } from \'@pxblue/icons-mui\';\n\n...\n<ScoreCard\n    headerColor={Colors.red[500]}\n    headerTitle={\'Substation 3\'}\n    headerFontColor={Colors.white[50]}\n    actionItems={[\n        <MoreVert onClick={() => {}} />,\n    ]}\n    badge={\n        <HeroBanner>\n            <Hero\n                icon={<Temp fontSize={\'inherit\'} htmlColor={Colors.black[500]} />}\n                label={\'Temperature\'}\n                iconSize={48}\n                value={98}\n                units={\'°F\'}\n                fontSize={\'normal\'}\n            />\n        </HeroBanner>\n    }\n    actionRow={\n        <List>\n            <ListItem>\n                <ListItemText primary="View Location" />\n                <ListItemSecondaryAction> <ChevronRight /> </ListItemSecondaryAction>\n            </ListItem>\n        </List>\n    }\n>\n    {/* Card Body Content */}\n</ScoreCard>\n```\n\n## API\n\n<div style="overflow: auto;">\n\n| Prop Name             | Description                                 | Type               | Required | Default                      |\n| --------------------- | ------------------------------------------- | ------------------ | -------- | ---------------------------- |\n| actionItems           | Icons to show to the right of the text      | `JSX.Element[]`    | no       |                              |\n| actionLimit           | Max number of actionItems in the header     | `number`           | no       | 3                            |\n| actionRow             | Component to render for the footer          | `JSX.Element`      | no       |                              |\n| badge                 | The component to render in the callout area | `JSX.Element`      | no       |                              |\n| badgeOffset           | Vertical offset for the badge component     | `number`           | no       | 0                            |\n| classes               | Style overrides                             | `ScoreCardClasses` | no       |                              |\n| headerBackgroundImage | An image to display in the header           | `string`           | no       |                              |\n| headerColor           | The color of the header                     | `string`           | no       | `theme.palette.primary.main` |\n| headerFontColor       | The color for text and icons in header      | `string`           | no       | `white`                      |\n| headerInfo            | Tertiary text                               | `string`           | no       |                              |\n| headerTitle           | The primary text                            | `string`           | yes      |                              |\n| headerSubtitle        | The secondary text                          | `string`           | no       |                              |\n\n</div>\n\nAny other props will be provided to the root element [**Material UI Card**](https://material-ui.com/api/card/).\n\n### Classes\n\nYou can override the classes used by PX Blue by passing a `classes` prop. It supports the following keys:\n\n| Name             | Description                                             |\n| ---------------- | ------------------------------------------------------- |\n| root             | Styles applied to the root element                      |\n| actionItems      | Styles applied to the action items container            |\n| badgeWrapper     | Styles applied to the badge container                   |\n| bodyWrapper      | Styles applied to the child nodes container             |\n| content          | Styles applied to justify all body content              |\n| header           | Styles applied to the header container                  |\n| headerBackground | Styles applied to header background image               |\n| headerContent    | Styles applied to the header text and actions container |\n| headerInfo       | Styles applied to the tertiary text element             |\n| headerTitle      | Styles applied to the title element                     |\n| headerSubtitle   | Styles applied to the subtitle element                  |\n'},1593:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='# Spacer\n\nAn invisible utility component that acts as a spacer element in various layouts. It works with flexbox sizing or fixed sizing.\n\n<div style="width: 100%; text-align:center">\n    <img width="40%" alt="Spacer used in Drawer Body" src="./images/spacer.png"><br/>\n</div>\n\n## Usage\n\n```tsx\nimport { Spacer } from \'@pxblue/react-components\';\n...\n<div style={{display: \'flex\'}}>\n    {/* Left Content */}\n    <Spacer flex={1}/>\n    {/* Right Content */}\n</div>\n```\n\n## API\n\n<div style="overflow: auto;">\n\n| Prop Name | Description                             | Type                 | Required | Default | Examples                  |\n| --------- | --------------------------------------- | -------------------- | -------- | ------- | ------------------------- |\n| classes   | Classes object to override styles       | `SpacerClasses`      | no       |         | {root: \'customRootClass\'} |\n| flex      | Flex grow/shrink value for flex layouts | `number`             | no       | 1       |                           |\n| height    | Height (in px) for static layouts       | `number` \\| `string` | no       |         |                           |\n| width     | Width (in px) for static layouts        | `number` \\| `string` | no       |         |                           |\n\n</div>\n\nAny other props supplied will be provided to the root element (`div`).\n\n### Classes\n\nYou can override the classes used by PX Blue by passing a `classes` prop. It supports the following keys:\n\n| Name | Description                        |\n| ---- | ---------------------------------- |\n| root | Styles applied to the root element |\n'},1594:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/appBar.d5d8b5df.gif"},1595:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/appBar.8cb18b47.png"},1596:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/appBarAnatomy1.4cfb5fda.png"},1597:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/appBarAnatomy2.366110aa.png"},1598:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/appBarCollapsed.948314dd.png"},1599:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/channelValue.361119ef.png"},1600:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/channelValueAnatomy.0f49d559.png"},1601:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/drawer.ef0d0601.png"},1602:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/drawerAnatomy.7a75b4cc.png"},1603:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/drawerHeaderAnatomy.e10d8c86.png"},1604:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/drawerLayout.9ed60ec4.png"},1605:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/drawerNavGroupAnatomy.cbd498bd.png"},1606:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/dropdownToolbar.139902cf.png"},1607:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/dropdownToolbarAnatomy.5f87d1ca.png"},1608:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/emptyState.33629f3e.png"},1609:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/emptyStateAnatomy.c31810c2.png"},1610:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/heroAnatomy.4452f758.png"},1611:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/heroes.983e0866.png"},1612:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/infoListItem.ffb442ca.png"},1613:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/listItemTag.185ee093.png"},1614:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/navItemAnatomy.5bec9156.png"},1615:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/railAnatomy.1aba7bb5.png"},1616:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/scoreCard.b52ac8b3.png"},1617:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/scoreCardAnatomy.f6a0199d.png"},1618:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/scoreCard_alt.7208b0da.png"},1619:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/spacer.20404dde.png"},1620:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/userMenuAnatomy.21661f89.png"},1621:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/userMenuAvatar.abebf922.png"},1622:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/userMenuOpened.d17b1abb.png"},1623:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/userMenuOpenedMobile.89f03cad.png"},1624:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/circles-bg.8d837a68.svg"},1626:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/pxb-icon.c26b974a.svg"},1627:function(module,exports,__webpack_require__){var map={"./app-bar/_module.stories.tsx":1880,"./channel-value/_module.stories.tsx":1879,"./drawer/_module.stories.tsx":1874,"./dropdown-toolbar/_module.stories.tsx":1876,"./empty-state/_module.stories.tsx":1881,"./hero/_module.stories.tsx":1877,"./info-list-item/_module.stories.tsx":1873,"./list-item-tag/_module.stories.tsx":1882,"./score-card/_module.stories.tsx":1878,"./spacer/_module.stories.tsx":1884,"./three-liner/_module.stories.tsx":1885,"./user-menu/_module.stories.tsx":1875,"./welcome.stories.tsx":680};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id=1627},1871:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/EatonLogo.bb857d1a.svg"},1873:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"getReadMeStory",(function(){return utils.d})),__webpack_require__.d(__webpack_exports__,"withBasicUsage",(function(){return withBasicUsage})),__webpack_require__.d(__webpack_exports__,"withSubtitle",(function(){return withSubtitle})),__webpack_require__.d(__webpack_exports__,"withIcon",(function(){return withIcon})),__webpack_require__.d(__webpack_exports__,"withArrayForSubtitles",(function(){return withArrayForSubtitles})),__webpack_require__.d(__webpack_exports__,"withAvatar",(function(){return withAvatar})),__webpack_require__.d(__webpack_exports__,"withBackgroundColor",(function(){return withBackgroundColor})),__webpack_require__.d(__webpack_exports__,"withLeftComponent",(function(){return withLeftComponent})),__webpack_require__.d(__webpack_exports__,"withRightComponent",(function(){return withRightComponent})),__webpack_require__.d(__webpack_exports__,"withFullConfig",(function(){return withFullConfig})),__webpack_require__.d(__webpack_exports__,"withinFullList",(function(){return withinFullList}));var react_components=__webpack_require__(5),react=__webpack_require__(0),react_default=__webpack_require__.n(react),constants=__webpack_require__(19),utils=__webpack_require__(14),dist=__webpack_require__(54),storybook_dark_mode_dist=__webpack_require__(53),colors_dist=__webpack_require__(9),List=__webpack_require__(460),addon_knobs_dist=__webpack_require__(2),withBasicUsage=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){return react_default.a.createElement(react_components.InfoListItem,{title:Object(addon_knobs_dist.text)("title","Info List Item")})}),{__STORY__:"import { InfoListItem } from '@pxblue/react-components';\nimport { text } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\nimport { WITH_MIN_PROPS_STORY_NAME } from '../../src/constants';\n\nexport const withBasicUsage = (): StoryFnReactReturnType => <InfoListItem title={text('title', 'Info List Item')} />;\n\nwithBasicUsage.story = { name: WITH_MIN_PROPS_STORY_NAME };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-basic-usage.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/info-list-item",__IDS_TO_FRAMEWORKS__:{}}));withBasicUsage.story={name:constants.d};__webpack_require__(12).withSource;var withSubtitle=(0,__webpack_require__(12).addSource)((function(){return react_default.a.createElement(react_components.InfoListItem,{title:Object(addon_knobs_dist.text)("title","Info List Item"),subtitle:Object(addon_knobs_dist.text)("subtitle","this is a subtitle within an InfoListItem")})}),{__STORY__:"import { InfoListItem } from '@pxblue/react-components';\nimport { text } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\n\nexport const withSubtitle = (): StoryFnReactReturnType => (\n    <InfoListItem\n        title={text('title', 'Info List Item')}\n        subtitle={text('subtitle', 'this is a subtitle within an InfoListItem')}\n    />\n);\n\nwithSubtitle.story = { name: 'with subtitle' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-subtitle.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/info-list-item",__IDS_TO_FRAMEWORKS__:{}});withSubtitle.story={name:"with subtitle"};var Alarm=__webpack_require__(1949),withIcon=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){return react_default.a.createElement(react_components.InfoListItem,{title:"Info List Item",subtitle:"with an icon",icon:react_default.a.createElement(Alarm.a,null),iconAlign:Object(addon_knobs_dist.select)("iconAlign",["left","center","right"],"left"),iconColor:Object(addon_knobs_dist.color)("iconColor",colors_dist.black[500])})}),{__STORY__:"import * as Colors from '@pxblue/colors';\nimport { Alarm } from '@material-ui/icons';\nimport { InfoListItem } from '@pxblue/react-components';\nimport { color, select } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\n\nexport const withIcon = (): StoryFnReactReturnType => (\n    <InfoListItem\n        title={'Info List Item'}\n        subtitle={'with an icon'}\n        icon={<Alarm />}\n        iconAlign={select('iconAlign', ['left', 'center', 'right'], 'left')}\n        iconColor={color('iconColor', Colors.black[500])}\n    />\n);\n\nwithIcon.story = { name: 'with icon' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-icon.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/info-list-item",__IDS_TO_FRAMEWORKS__:{}}));withIcon.story={name:"with icon"};var icons_mui=__webpack_require__(33),withArrayForSubtitles=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){return react_default.a.createElement(react_components.InfoListItem,{title:"Temperature",subtitle:[react_default.a.createElement(react_components.ChannelValue,{value:"50",units:"°C",key:"cv1"}),react_default.a.createElement(react_components.ChannelValue,{value:"55",units:"°C",key:"cv2"})],subtitleSeparator:Object(addon_knobs_dist.text)("subtitleSeparator","·"),icon:react_default.a.createElement(icons_mui.Temp,null)})}),{__STORY__:"import { Temp } from '@pxblue/icons-mui';\nimport { ChannelValue, InfoListItem } from '@pxblue/react-components';\nimport { text } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\n\nexport const withArrayForSubtitles = (): StoryFnReactReturnType => (\n    <InfoListItem\n        title={'Temperature'}\n        subtitle={[\n            <ChannelValue value={'50'} units={'°C'} key=\"cv1\" />,\n            <ChannelValue value={'55'} units={'°C'} key=\"cv2\" />,\n        ]}\n        subtitleSeparator={text('subtitleSeparator', '·')}\n        icon={<Temp />}\n    />\n);\n\nwithArrayForSubtitles.story = { name: 'with array for subtitles' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-array-for-subtitles.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/info-list-item",__IDS_TO_FRAMEWORKS__:{}}));withArrayForSubtitles.story={name:"with array for subtitles"};__webpack_require__(12).withSource;var withAvatar=(0,__webpack_require__(12).addSource)((function(){return react_default.a.createElement(react_components.InfoListItem,{avatar:!0,title:"Info List Item",subtitle:"with an avatar",statusColor:Object(addon_knobs_dist.color)("statusColor",colors_dist.green[700]),icon:react_default.a.createElement(icons_mui.GradeA,null)})}),{__STORY__:"import * as Colors from '@pxblue/colors';\nimport { GradeA } from '@pxblue/icons-mui';\nimport { InfoListItem } from '@pxblue/react-components';\nimport { color } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\n\nexport const withAvatar = (): StoryFnReactReturnType => (\n    <InfoListItem\n        avatar\n        title={'Info List Item'}\n        subtitle={'with an avatar'}\n        statusColor={color('statusColor', Colors.green[700])}\n        icon={<GradeA />}\n    />\n);\n\nwithAvatar.story = { name: 'with avatar' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-avatar.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/info-list-item",__IDS_TO_FRAMEWORKS__:{}});withAvatar.story={name:"with avatar"};__webpack_require__(12).withSource;var withBackgroundColor=(0,__webpack_require__(12).addSource)((function(){return react_default.a.createElement(react_components.InfoListItem,{title:"Info List Item",subtitle:"with a configurable background color",fontColor:colors_dist.black[500],iconColor:colors_dist.black[500],icon:react_default.a.createElement(icons_mui.Leaf,null),backgroundColor:Object(addon_knobs_dist.color)("backgroundColor",colors_dist.white[50])})}),{__STORY__:"import * as Colors from '@pxblue/colors';\nimport { Leaf } from '@pxblue/icons-mui';\nimport { InfoListItem } from '@pxblue/react-components';\nimport { color } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\n\nexport const withBackgroundColor = (): StoryFnReactReturnType => (\n    <InfoListItem\n        title={'Info List Item'}\n        subtitle={'with a configurable background color'}\n        fontColor={Colors.black[500]}\n        iconColor={Colors.black[500]}\n        icon={<Leaf />}\n        backgroundColor={color('backgroundColor', Colors.white[50])}\n    />\n);\n\nwithBackgroundColor.story = { name: 'with background color' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-background-color.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/info-list-item",__IDS_TO_FRAMEWORKS__:{}});withBackgroundColor.story={name:"with background color"};var storybook_rtl_addon_dist=__webpack_require__(84),withLeftComponent=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){var dir=Object(storybook_rtl_addon_dist.getDirection)();return react_default.a.createElement(react_components.InfoListItem,{title:"Info List Item",subtitle:"with a timestamp as a left component",icon:react_default.a.createElement(icons_mui.Device,null),leftComponent:react_default.a.createElement("div",{style:{display:"flex",flexDirection:"column",marginRight:"ltr"===dir?16:0,marginLeft:"rtl"===dir?16:0}},react_default.a.createElement("div",null,"8:32 ",react_default.a.createElement("strong",null,"AM")),react_default.a.createElement("div",null,"11/21/21"))})}),{__STORY__:"import { Device } from '@pxblue/icons-mui';\nimport { InfoListItem } from '@pxblue/react-components';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport { getDirection } from '@pxblue/storybook-rtl-addon';\n\nimport React from 'react';\n\nexport const withLeftComponent = (): StoryFnReactReturnType => {\n    const dir = getDirection();\n\n    return (\n        <InfoListItem\n            title={'Info List Item'}\n            subtitle={'with a timestamp as a left component'}\n            icon={<Device />}\n            leftComponent={\n                <div\n                    style={{\n                        display: 'flex',\n                        flexDirection: 'column',\n                        marginRight: dir === 'ltr' ? 16 : 0,\n                        marginLeft: dir === 'rtl' ? 16 : 0,\n                    }}\n                >\n                    <div>\n                        8:32 <strong>AM</strong>\n                    </div>\n                    <div>11/21/21</div>\n                </div>\n            }\n        />\n    );\n};\n\nwithLeftComponent.story = { name: 'with leftComponent' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-leftComponent.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/info-list-item",__IDS_TO_FRAMEWORKS__:{}}));withLeftComponent.story={name:"with leftComponent"};__webpack_require__(12).withSource;var withRightComponent=(0,__webpack_require__(12).addSource)((function(){return react_default.a.createElement(react_components.InfoListItem,{title:"Info List Item",subtitle:"with a ChannelValue component on the right side",icon:react_default.a.createElement(icons_mui.Device,null),rightComponent:react_default.a.createElement(react_components.ChannelValue,{value:Object(addon_knobs_dist.text)("leftComponent.ChannelValue.value","15"),units:Object(addon_knobs_dist.text)("leftComponent.ChannelValue.units","A")})})}),{__STORY__:"import { Device } from '@pxblue/icons-mui';\nimport { InfoListItem, ChannelValue } from '@pxblue/react-components';\nimport { text } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\n\nexport const withRightComponent = (): StoryFnReactReturnType => (\n    <InfoListItem\n        title={'Info List Item'}\n        subtitle={'with a ChannelValue component on the right side'}\n        icon={<Device />}\n        rightComponent={\n            <ChannelValue\n                value={text('leftComponent.ChannelValue.value', '15')}\n                units={text('leftComponent.ChannelValue.units', 'A')}\n            />\n        }\n    />\n);\n\nwithRightComponent.story = { name: 'with rightComponent' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-rightComponent.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/info-list-item",__IDS_TO_FRAMEWORKS__:{}});withRightComponent.story={name:"with rightComponent"};var addon_actions_dist=__webpack_require__(15),withFullConfig=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){var divider=Object(addon_knobs_dist.select)("divider",["none","full","partial"],"full"),appliedDivider="none"===divider?void 0:divider;return react_default.a.createElement(react_components.InfoListItem,{title:Object(addon_knobs_dist.text)("title","Info List Item"),subtitle:Object(addon_knobs_dist.text)("subtitle","with all customizable properties"),info:Object(addon_knobs_dist.text)("info","more info..."),icon:Object(addon_knobs_dist.boolean)("Show Icon",!0)?react_default.a.createElement(icons_mui.Device,null):void 0,hidePadding:Object(addon_knobs_dist.boolean)("hidePadding",!1),statusColor:Object(addon_knobs_dist.color)("statusColor",colors_dist.blue[500]),iconAlign:Object(addon_knobs_dist.select)("iconAlign",["left","center","right"],"left"),iconColor:Object(addon_knobs_dist.color)("iconColor",colors_dist.black[500]),fontColor:Object(addon_knobs_dist.color)("fontColor",colors_dist.black[500]),backgroundColor:Object(addon_knobs_dist.color)("backgroundColor",colors_dist.white[50]),avatar:Object(addon_knobs_dist.boolean)("avatar",!1),chevron:Object(addon_knobs_dist.boolean)("chevron",!0),dense:Object(addon_knobs_dist.boolean)("dense",!1),divider:appliedDivider,ripple:Object(addon_knobs_dist.boolean)("ripple",!1),onClick:Object(addon_actions_dist.action)("clicked"),wrapTitle:Object(addon_knobs_dist.boolean)("wrapTitle",!1),wrapSubtitle:Object(addon_knobs_dist.boolean)("wrapSubtitle",!1),wrapInfo:Object(addon_knobs_dist.boolean)("wrapInfo",!1),disabled:Object(addon_knobs_dist.boolean)("disabled",!1)})}),{__STORY__:"import * as Colors from '@pxblue/colors';\nimport { Device } from '@pxblue/icons-mui';\n\nimport { InfoListItem } from '@pxblue/react-components';\nimport { action } from '@storybook/addon-actions';\nimport { boolean, color, select, text } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\nimport { WITH_FULL_CONFIG_STORY_NAME } from '../../src/constants';\n\nexport const withFullConfig = (): StoryFnReactReturnType => {\n    const divider = select('divider', ['none', 'full', 'partial'], 'full');\n    const appliedDivider = divider === 'none' ? undefined : divider;\n\n    return (\n        <InfoListItem\n            title={text('title', 'Info List Item')}\n            subtitle={text('subtitle', 'with all customizable properties')}\n            info={text('info', 'more info...')}\n            icon={boolean('Show Icon', true) ? <Device /> : undefined}\n            hidePadding={boolean('hidePadding', false)}\n            statusColor={color('statusColor', Colors.blue[500])}\n            iconAlign={select('iconAlign', ['left', 'center', 'right'], 'left')}\n            iconColor={color('iconColor', Colors.black[500])}\n            fontColor={color('fontColor', Colors.black[500])}\n            backgroundColor={color('backgroundColor', Colors.white[50])}\n            avatar={boolean('avatar', false)}\n            chevron={boolean('chevron', true)}\n            dense={boolean('dense', false)}\n            divider={appliedDivider}\n            ripple={boolean('ripple', false)}\n            onClick={action('clicked')}\n            wrapTitle={boolean('wrapTitle', false)}\n            wrapSubtitle={boolean('wrapSubtitle', false)}\n            wrapInfo={boolean('wrapInfo', false)}\n            disabled={boolean('disabled', false)}\n        />\n    );\n};\n\nwithFullConfig.story = { name: WITH_FULL_CONFIG_STORY_NAME };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-full-config.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/info-list-item",__IDS_TO_FRAMEWORKS__:{}}));withFullConfig.story={name:constants.c};__webpack_require__(12).withSource;var withinFullList=(0,__webpack_require__(12).addSource)((function(){var divider=Object(addon_knobs_dist.select)("divider",["none","full","partial"],"full"),appliedDivider="none"===divider?void 0:divider,alertColor=Object(storybook_dark_mode_dist.useDarkMode)()?colors_dist.red[300]:colors_dist.red[500];return react_default.a.createElement(react_default.a.Fragment,null,react_default.a.createElement(react_components.InfoListItem,{dense:!0,title:"Status",divider:appliedDivider,statusColor:colors_dist.green[500],subtitleSeparator:"/",icon:react_default.a.createElement(icons_mui.DeviceActivating,{color:"inherit"}),iconAlign:"center",rightComponent:react_default.a.createElement(react_components.ChannelValue,{fontSize:"1rem",value:"Online, ESS+"})}),react_default.a.createElement(react_components.InfoListItem,{title:"Input Voltage",divider:appliedDivider,avatar:!0,subtitle:["Phase A","Phase B","Phase C"],icon:react_default.a.createElement(icons_mui.GradeA,null),rightComponent:react_default.a.createElement("span",null,react_default.a.createElement(react_components.ChannelValue,{fontSize:"1rem",value:478,units:"V"}),","," ",react_default.a.createElement(react_components.ChannelValue,{fontSize:"1rem",value:479,units:"V"}),","," ",react_default.a.createElement(react_components.ChannelValue,{fontSize:"1rem",value:473,units:"V"}))}),react_default.a.createElement(react_components.InfoListItem,{title:"Output Voltage",divider:appliedDivider,avatar:!0,statusColor:colors_dist.red[500],fontColor:alertColor,iconColor:colors_dist.white[50],subtitle:["Phase A","Phase B","Phase C"],icon:react_default.a.createElement(icons_mui.GradeA,{color:"inherit"}),disabled:Object(addon_knobs_dist.boolean)("Disable item",!1),rightComponent:react_default.a.createElement("span",{style:{color:alertColor}},react_default.a.createElement(react_components.ChannelValue,{fontSize:"1rem",value:480,units:"V"}),","," ",react_default.a.createElement(react_components.ChannelValue,{fontSize:"1rem",value:480,units:"V"}),","," ",react_default.a.createElement(react_components.ChannelValue,{fontSize:"1rem",value:480,units:"V"}))}),react_default.a.createElement(react_components.InfoListItem,{dense:!0,title:"Output Current",divider:appliedDivider,icon:react_default.a.createElement(icons_mui.Device,{color:"inherit"}),rightComponent:react_default.a.createElement("span",null,react_default.a.createElement(react_components.ChannelValue,{fontSize:"1rem",value:15,units:"A"}),","," ",react_default.a.createElement(react_components.ChannelValue,{fontSize:"1rem",value:14.9,units:"A"}),","," ",react_default.a.createElement(react_components.ChannelValue,{fontSize:"1rem",value:15,units:"A"})),iconAlign:"center"}),react_default.a.createElement(react_components.InfoListItem,{dense:!0,title:"Temperature",divider:appliedDivider,icon:react_default.a.createElement(icons_mui.Temp,null),rightComponent:react_default.a.createElement(react_components.ChannelValue,{fontSize:"1rem",value:68,units:"°F"}),iconAlign:"center"}))}),{__STORY__:"import * as Colors from '@pxblue/colors';\nimport { Device, GradeA, DeviceActivating, Temp } from '@pxblue/icons-mui';\nimport { ChannelValue, InfoListItem } from '@pxblue/react-components';\nimport { boolean, select } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\nimport { useDarkMode } from 'storybook-dark-mode';\n\nexport const withinFullList = (): StoryFnReactReturnType => {\n    const divider = select('divider', ['none', 'full', 'partial'], 'full');\n    const appliedDivider = divider === 'none' ? undefined : divider;\n    const alertColor = useDarkMode() ? Colors.red[300] : Colors.red[500];\n\n    return (\n        <>\n            <InfoListItem\n                dense\n                title={'Status'}\n                divider={appliedDivider}\n                statusColor={Colors.green[500]}\n                subtitleSeparator={'/'}\n                icon={<DeviceActivating color={'inherit'} />}\n                iconAlign={'center'}\n                rightComponent={<ChannelValue fontSize={'1rem'} value={'Online, ESS+'} />}\n            />\n            <InfoListItem\n                title={'Input Voltage'}\n                divider={appliedDivider}\n                avatar\n                subtitle={['Phase A', 'Phase B', 'Phase C']}\n                icon={<GradeA />}\n                rightComponent={\n                    <span>\n                        <ChannelValue fontSize={'1rem'} value={478} units={'V'} />,{' '}\n                        <ChannelValue fontSize={'1rem'} value={479} units={'V'} />,{' '}\n                        <ChannelValue fontSize={'1rem'} value={473} units={'V'} />\n                    </span>\n                }\n            />\n            <InfoListItem\n                title={'Output Voltage'}\n                divider={appliedDivider}\n                avatar\n                statusColor={Colors.red[500]}\n                fontColor={alertColor}\n                iconColor={Colors.white[50]}\n                subtitle={['Phase A', 'Phase B', 'Phase C']}\n                icon={<GradeA color={'inherit'} />}\n                disabled={boolean('Disable item', false)}\n                rightComponent={\n                    <span style={{ color: alertColor }}>\n                        <ChannelValue fontSize={'1rem'} value={480} units={'V'} />,{' '}\n                        <ChannelValue fontSize={'1rem'} value={480} units={'V'} />,{' '}\n                        <ChannelValue fontSize={'1rem'} value={480} units={'V'} />\n                    </span>\n                }\n            />\n            <InfoListItem\n                dense\n                title={'Output Current'}\n                divider={appliedDivider}\n                icon={<Device color={'inherit'} />}\n                rightComponent={\n                    <span>\n                        <ChannelValue fontSize={'1rem'} value={15} units={'A'} />,{' '}\n                        <ChannelValue fontSize={'1rem'} value={14.9} units={'A'} />,{' '}\n                        <ChannelValue fontSize={'1rem'} value={15} units={'A'} />\n                    </span>\n                }\n                iconAlign={'center'}\n            />\n            <InfoListItem\n                dense\n                title={'Temperature'}\n                divider={appliedDivider}\n                icon={<Temp />}\n                rightComponent={<ChannelValue fontSize={'1rem'} value={68} units={'°F'} />}\n                iconAlign={'center'}\n            />\n        </>\n    );\n};\n\nwithinFullList.story = { name: 'within a full list' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/within-full-list.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/info-list-item",__IDS_TO_FRAMEWORKS__:{}});withinFullList.story={name:"within a full list"};var __assign=function(){return(__assign=Object.assign||function(t){for(var s,i=1,n=arguments.length;i<n;i++)for(var p in s=arguments[i])Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p]);return t}).apply(this,arguments)},infoListModule={title:constants.a+"/Info List Item",component:react_components.InfoListItem,decorators:[utils.g,function(storyFn){return react_default.a.createElement(List.a,{style:{margin:20,width:"90%",backgroundColor:Object(storybook_dark_mode_dist.useDarkMode)()?colors_dist.black[900]:"white",padding:0}},storyFn())},dist.withA11y],parameters:__assign(__assign({},utils.f),{notes:{markdown:Object(utils.c)("InfoListItem.md")}})};__webpack_exports__.default=infoListModule},1874:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"getReadMeStory",(function(){return utils.d})),__webpack_require__.d(__webpack_exports__,"withBasicConfig",(function(){return withBasicConfig})),__webpack_require__.d(__webpack_exports__,"withDifferentVariants",(function(){return withDifferentVariants})),__webpack_require__.d(__webpack_exports__,"withCustomHeader",(function(){return withCustomHeader})),__webpack_require__.d(__webpack_exports__,"withSubheader",(function(){return withSubheader})),__webpack_require__.d(__webpack_exports__,"withMultipleNavGroups",(function(){return withMultipleNavGroups})),__webpack_require__.d(__webpack_exports__,"withNestedListItems",(function(){return withNestedListItems})),__webpack_require__.d(__webpack_exports__,"withFooter",(function(){return withFooter})),__webpack_require__.d(__webpack_exports__,"withFullConfig",(function(){return withFullConfig})),__webpack_require__.d(__webpack_exports__,"inDrawerLayout",(function(){return inDrawerLayout}));var react_components=__webpack_require__(5),react=__webpack_require__(0),react_default=__webpack_require__.n(react),constants=__webpack_require__(19),utils=__webpack_require__(14),dist=__webpack_require__(54),Person=__webpack_require__(1919),Today=__webpack_require__(1920),Accessibility=__webpack_require__(1921),NotificationsActive=__webpack_require__(1922),Menu=__webpack_require__(1915),addon_knobs_dist=__webpack_require__(2),withBasicConfig=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){var _a=Object(react.useState)(""),selected=_a[0],setSelected=_a[1],navGroupItems=[{title:"Identity Management",itemID:"1",icon:react_default.a.createElement(Person.a,null),onClick:function(){return setSelected("1")}},{title:"Calendar",itemID:"2",icon:react_default.a.createElement(Today.a,null),onClick:function(){return setSelected("2")}},{title:"Accessibility",itemID:"3",icon:react_default.a.createElement(Accessibility.a,null),onClick:function(){return setSelected("3")}},{title:"Notifications",itemID:"4",icon:react_default.a.createElement(NotificationsActive.a,null),onClick:function(){return setSelected("4")}}];return react_default.a.createElement(react_components.Drawer,{open:Object(addon_knobs_dist.boolean)("open",!0),activeItem:selected},react_default.a.createElement(react_components.DrawerHeader,{icon:react_default.a.createElement(Menu.a,null),title:Object(addon_knobs_dist.text)("title","Simple Drawer")}),react_default.a.createElement(react_components.DrawerBody,null,react_default.a.createElement(react_components.DrawerNavGroup,{items:navGroupItems})))}),{__STORY__:"import { Accessibility, Menu, NotificationsActive, Person, Today } from '@material-ui/icons';\nimport { Drawer, DrawerBody, DrawerHeader, DrawerNavGroup, NavItem } from '@pxblue/react-components';\nimport { boolean, text } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React, { useState } from 'react';\nimport { WITH_MIN_PROPS_STORY_NAME } from '../../src/constants';\n\nexport const withBasicConfig = (): StoryFnReactReturnType => {\n    const [selected, setSelected] = useState('');\n\n    const navGroupItems: NavItem[] = [\n        {\n            title: 'Identity Management',\n            itemID: '1',\n            icon: <Person />,\n            onClick: (): void => setSelected('1'),\n        },\n        {\n            title: 'Calendar',\n            itemID: '2',\n            icon: <Today />,\n            onClick: (): void => setSelected('2'),\n        },\n        {\n            title: 'Accessibility',\n            itemID: '3',\n            icon: <Accessibility />,\n            onClick: (): void => setSelected('3'),\n        },\n        {\n            title: 'Notifications',\n            itemID: '4',\n            icon: <NotificationsActive />,\n            onClick: (): void => setSelected('4'),\n        },\n    ];\n\n    return (\n        <Drawer open={boolean('open', true)} activeItem={selected}>\n            <DrawerHeader icon={<Menu />} title={text('title', 'Simple Drawer')} />\n            <DrawerBody>\n                <DrawerNavGroup items={navGroupItems} />\n            </DrawerBody>\n        </Drawer>\n    );\n};\n\nwithBasicConfig.story = { name: WITH_MIN_PROPS_STORY_NAME };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-basic-config.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/drawer",__IDS_TO_FRAMEWORKS__:{}}));withBasicConfig.story={name:constants.d};var Settings=__webpack_require__(1918),Gavel=__webpack_require__(1923),withDifferentVariants=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){var _a=Object(react.useState)(""),selected=_a[0],setSelected=_a[1],navGroupItems=[{title:"Settings",itemID:"1",icon:react_default.a.createElement(Settings.a,null),onClick:function(){return setSelected("1")}},{title:"Legal",itemID:"2",icon:react_default.a.createElement(Gavel.a,null),onClick:function(){return setSelected("2")}}];return react_default.a.createElement(react_components.Drawer,{open:Object(addon_knobs_dist.boolean)("open",!0),variant:Object(addon_knobs_dist.select)("variant",["permanent","persistent","temporary","rail"],"persistent"),condensed:Object(addon_knobs_dist.boolean)("condensed (rail only)",!1),ModalProps:{disableEnforceFocus:!0},activeItem:selected},react_default.a.createElement(react_components.DrawerHeader,{icon:react_default.a.createElement(Menu.a,null),title:"Drawer with variants"}),react_default.a.createElement(react_components.DrawerBody,null,react_default.a.createElement(react_components.DrawerNavGroup,{items:navGroupItems})))}),{__STORY__:"import { Drawer, DrawerBody, DrawerHeader, DrawerNavGroup, NavItem } from '@pxblue/react-components';\nimport { boolean, select } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React, { useState } from 'react';\nimport { Menu, Gavel, Settings } from '@material-ui/icons';\n\nexport const withDifferentVariants = (): StoryFnReactReturnType => {\n    const [selected, setSelected] = useState('');\n\n    const navGroupItems: NavItem[] = [\n        {\n            title: 'Settings',\n            itemID: '1',\n            icon: <Settings />,\n            onClick: (): void => setSelected('1'),\n        },\n        {\n            title: 'Legal',\n            itemID: '2',\n            icon: <Gavel />,\n            onClick: (): void => setSelected('2'),\n        },\n    ];\n\n    return (\n        <Drawer\n            open={boolean('open', true)}\n            variant={select('variant', ['permanent', 'persistent', 'temporary', 'rail'], 'persistent')}\n            condensed={boolean('condensed (rail only)', false)}\n            ModalProps={{\n                disableEnforceFocus: true,\n            }}\n            activeItem={selected}\n        >\n            <DrawerHeader icon={<Menu />} title={'Drawer with variants'} />\n            <DrawerBody>\n                <DrawerNavGroup items={navGroupItems} />\n            </DrawerBody>\n        </Drawer>\n    );\n};\n\nwithDifferentVariants.story = { name: 'with different variants' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-different-variants.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/drawer",__IDS_TO_FRAMEWORKS__:{}}));withDifferentVariants.story={name:"with different variants"};var Typography=__webpack_require__(110),Drawer=__webpack_require__(35),with_custom_header_addSourceDecorator=(__webpack_require__(12).withSource,__webpack_require__(12).addSource),farmBgImage=__webpack_require__(326),withCustomHeader=with_custom_header_addSourceDecorator((function(){var _a=Object(react.useState)(""),selected=_a[0],setSelected=_a[1],navGroupItems=[{title:"Identity Management",itemID:"1",icon:react_default.a.createElement(Person.a,null),onClick:function(){return setSelected("1")}},{title:"Calendar",itemID:"2",icon:react_default.a.createElement(Today.a,null),onClick:function(){return setSelected("2")}},{title:"Accessibility",itemID:"3",icon:react_default.a.createElement(Accessibility.a,null),onClick:function(){return setSelected("3")}},{title:"Notifications",itemID:"4",icon:react_default.a.createElement(NotificationsActive.a,null),onClick:function(){return setSelected("4")}}];return react_default.a.createElement(Drawer.Drawer,{open:Object(addon_knobs_dist.boolean)("open",!0),activeItem:selected},react_default.a.createElement(Drawer.DrawerHeader,{backgroundImage:farmBgImage,backgroundOpacity:.5,icon:react_default.a.createElement(Menu.a,null),titleContent:react_default.a.createElement("div",{style:{display:"flex",justifyContent:"space-between",zIndex:1,padding:"0 16px",alignItems:"center",width:"100%",height:"100%"}},react_default.a.createElement("div",null,react_default.a.createElement(Typography.a,{variant:"subtitle2"},"Customizable"),react_default.a.createElement(Typography.a,{variant:"h6",style:{marginTop:"-10px"}},"Header Content")),react_default.a.createElement(react_components.ListItemTag,{style:{marginBottom:16},label:"v1.0.3"}))}),react_default.a.createElement(Drawer.DrawerBody,null,react_default.a.createElement(Drawer.DrawerNavGroup,{items:navGroupItems})))}),{__STORY__:"import { Typography } from '@material-ui/core';\nimport { Drawer, DrawerBody, DrawerHeader, DrawerNavGroup, NavItem } from '@pxblue/react-components/core/Drawer';\nimport { boolean } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React, { useState } from 'react';\nimport { ListItemTag } from '@pxblue/react-components';\nimport { Accessibility, NotificationsActive, Person, Today, Menu } from '@material-ui/icons';\n\nconst farmBgImage = require('../../assets/farm.jpg');\n\nexport const withCustomHeader = (): StoryFnReactReturnType => {\n    const [selected, setSelected] = useState('');\n\n    const navGroupItems: NavItem[] = [\n        {\n            title: 'Identity Management',\n            itemID: '1',\n            icon: <Person />,\n            onClick: (): void => setSelected('1'),\n        },\n        {\n            title: 'Calendar',\n            itemID: '2',\n            icon: <Today />,\n            onClick: (): void => setSelected('2'),\n        },\n        {\n            title: 'Accessibility',\n            itemID: '3',\n            icon: <Accessibility />,\n            onClick: (): void => setSelected('3'),\n        },\n        {\n            title: 'Notifications',\n            itemID: '4',\n            icon: <NotificationsActive />,\n            onClick: (): void => setSelected('4'),\n        },\n    ];\n\n    return (\n        <Drawer open={boolean('open', true)} activeItem={selected}>\n            <DrawerHeader\n                backgroundImage={farmBgImage}\n                backgroundOpacity={0.5}\n                icon={<Menu />}\n                titleContent={\n                    <div\n                        style={{\n                            display: 'flex',\n                            justifyContent: 'space-between',\n                            zIndex: 1,\n                            padding: '0 16px',\n                            alignItems: 'center',\n                            width: '100%',\n                            height: '100%',\n                        }}\n                    >\n                        <div>\n                            <Typography variant=\"subtitle2\">Customizable</Typography>\n                            <Typography variant=\"h6\" style={{ marginTop: '-10px' }}>\n                                Header Content\n                            </Typography>\n                        </div>\n                        <ListItemTag style={{ marginBottom: 16 }} label={'v1.0.3'} />\n                    </div>\n                }\n            />\n            <DrawerBody>\n                <DrawerNavGroup items={navGroupItems} />\n            </DrawerBody>\n        </Drawer>\n    );\n};\n\nwithCustomHeader.story = { name: 'with custom header' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-custom-header.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/drawer",__IDS_TO_FRAMEWORKS__:{}});withCustomHeader.story={name:"with custom header"};var TextField=__webpack_require__(1924),IconButton=__webpack_require__(459),Accordion=__webpack_require__(1927),AccordionSummary=__webpack_require__(1928),AccordionDetails=__webpack_require__(1929),InputAdornment=__webpack_require__(1925),SvgIcon=__webpack_require__(731),SvgIcon_default=__webpack_require__.n(SvgIcon),Search=__webpack_require__(1926),with_subheader_addSourceDecorator=(__webpack_require__(12).withSource,__webpack_require__(12).addSource),filter=react_default.a.createElement(TextField.a,{id:"outlined-basic",label:"filter",variant:"outlined",fullWidth:!0,InputProps:{endAdornment:react_default.a.createElement(InputAdornment.a,{position:"end"},react_default.a.createElement(IconButton.a,{"aria-label":"filter button",edge:"end"},react_default.a.createElement(Search.a,null)))}}),accordion=react_default.a.createElement(Accordion.a,null,react_default.a.createElement(AccordionSummary.a,{expandIcon:react_default.a.createElement(SvgIcon_default.a,null),"aria-controls":"panel1a-content",id:"panel1a-header"},react_default.a.createElement(Typography.a,null,"Expansion Panel 1")),react_default.a.createElement(AccordionDetails.a,null,react_default.a.createElement(Typography.a,null,"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."))),withSubheader=with_subheader_addSourceDecorator((function(){var _a=Object(react.useState)(""),selected=_a[0],setSelected=_a[1],subheaderContent=Object(addon_knobs_dist.optionsKnob)("Subheader Content",{filter:"Filter",accordion:"Accordion"},"Filter",{display:"inline-radio"}),navGroupItems=[{title:"Identity Management",itemID:"1",icon:react_default.a.createElement(Person.a,null),onClick:function(){return setSelected("1")}},{title:"Calendar",itemID:"2",icon:react_default.a.createElement(Today.a,null),onClick:function(){return setSelected("2")}},{title:"Accessibility",itemID:"3",icon:react_default.a.createElement(Accessibility.a,null),onClick:function(){return setSelected("3")}},{title:"Notifications",itemID:"4",icon:react_default.a.createElement(NotificationsActive.a,null),onClick:function(){return setSelected("4")}}];return react_default.a.createElement(Drawer.Drawer,{open:Object(addon_knobs_dist.boolean)("open",!0),activeItem:selected},react_default.a.createElement(Drawer.DrawerHeader,{icon:react_default.a.createElement(Menu.a,null),title:"Subheader Demo",subtitle:"See the DrawerSubheader below"}),react_default.a.createElement(Drawer.DrawerSubheader,{hideContentOnCollapse:Object(addon_knobs_dist.boolean)("hideContentOnCollapse",!0),divider:Object(addon_knobs_dist.boolean)("divider",!0)},react_default.a.createElement("div",{style:{display:"flex",justifyContent:"center",padding:"1rem 16px"}},"Filter"===subheaderContent?filter:accordion)),react_default.a.createElement(Drawer.DrawerBody,null,react_default.a.createElement(Drawer.DrawerNavGroup,{items:navGroupItems})))}),{__STORY__:"import { Accordion, AccordionDetails, AccordionSummary, IconButton, TextField, Typography } from '@material-ui/core';\nimport InputAdornment from '@material-ui/core/InputAdornment';\nimport ExpandMoreIcon from '@material-ui/core/SvgIcon/SvgIcon';\nimport {\n    Drawer,\n    DrawerBody,\n    DrawerHeader,\n    DrawerNavGroup,\n    DrawerSubheader,\n    NavItem,\n} from '@pxblue/react-components/core/Drawer';\nimport { boolean, optionsKnob } from '@storybook/addon-knobs';\nimport { OptionsKnobOptionsDisplay } from '@storybook/addon-knobs/dist/components/types/Options';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React, { useState } from 'react';\nimport { Accessibility, NotificationsActive, Person, Today, Menu, Search } from '@material-ui/icons';\n\nconst filter = (\n    <TextField\n        id=\"outlined-basic\"\n        label=\"filter\"\n        variant=\"outlined\"\n        fullWidth\n        InputProps={{\n            endAdornment: (\n                <InputAdornment position=\"end\">\n                    <IconButton aria-label=\"filter button\" edge={'end'}>\n                        <Search />\n                    </IconButton>\n                </InputAdornment>\n            ),\n        }}\n    />\n);\nconst accordion = (\n    <Accordion>\n        <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls=\"panel1a-content\" id=\"panel1a-header\">\n            <Typography>Expansion Panel 1</Typography>\n        </AccordionSummary>\n        <AccordionDetails>\n            <Typography>\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet\n                blandit leo lobortis eget.\n            </Typography>\n        </AccordionDetails>\n    </Accordion>\n);\n\nexport const withSubheader = (): StoryFnReactReturnType => {\n    const [selected, setSelected] = useState('');\n\n    const valuesObj = {\n        filter: 'Filter',\n        accordion: 'Accordion',\n    };\n    const optionsObj = {\n        display: 'inline-radio' as OptionsKnobOptionsDisplay,\n    };\n    const subheaderContent = optionsKnob('Subheader Content', valuesObj, 'Filter', optionsObj);\n\n    const navGroupItems: NavItem[] = [\n        {\n            title: 'Identity Management',\n            itemID: '1',\n            icon: <Person />,\n            onClick: (): void => setSelected('1'),\n        },\n        {\n            title: 'Calendar',\n            itemID: '2',\n            icon: <Today />,\n            onClick: (): void => setSelected('2'),\n        },\n        {\n            title: 'Accessibility',\n            itemID: '3',\n            icon: <Accessibility />,\n            onClick: (): void => setSelected('3'),\n        },\n        {\n            title: 'Notifications',\n            itemID: '4',\n            icon: <NotificationsActive />,\n            onClick: (): void => setSelected('4'),\n        },\n    ];\n\n    return (\n        <Drawer open={boolean('open', true)} activeItem={selected}>\n            <DrawerHeader icon={<Menu />} title={'Subheader Demo'} subtitle={'See the DrawerSubheader below'} />\n            <DrawerSubheader\n                hideContentOnCollapse={boolean('hideContentOnCollapse', true)}\n                divider={boolean('divider', true)}\n            >\n                <div\n                    style={{\n                        display: 'flex',\n                        justifyContent: 'center',\n                        padding: '1rem 16px',\n                    }}\n                >\n                    {subheaderContent === 'Filter' ? filter : accordion}\n                </div>\n            </DrawerSubheader>\n            <DrawerBody>\n                <DrawerNavGroup items={navGroupItems} />\n            </DrawerBody>\n        </Drawer>\n    );\n};\n\nwithSubheader.story = { name: 'with subheader' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-subheader.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/drawer",__IDS_TO_FRAMEWORKS__:{}});withSubheader.story={name:"with subheader"};__webpack_require__(12).withSource;var withMultipleNavGroups=(0,__webpack_require__(12).addSource)((function(){var _a=Object(react.useState)(""),selected=_a[0],setSelected=_a[1],navGroupItems1=[{title:"Identity Management",itemID:"1",icon:react_default.a.createElement(Person.a,null),onClick:function(){return setSelected("1")}},{title:"Calendar",itemID:"2",icon:react_default.a.createElement(Today.a,null),onClick:function(){return setSelected("2")}},{title:"Accessibility",itemID:"3",icon:react_default.a.createElement(Accessibility.a,null),onClick:function(){return setSelected("3")}},{title:"Notifications",itemID:"4",icon:react_default.a.createElement(NotificationsActive.a,null),onClick:function(){return setSelected("4")}}],navGroupItems2=[{title:"Settings",itemID:"2-1",icon:react_default.a.createElement(Settings.a,null),onClick:function(){return setSelected("2-1")}},{title:"Legal",itemID:"2-2",icon:react_default.a.createElement(Gavel.a,null),onClick:function(){return setSelected("2-2")}}];return react_default.a.createElement(Drawer.Drawer,{open:Object(addon_knobs_dist.boolean)("open",!0),activeItem:selected},react_default.a.createElement(Drawer.DrawerHeader,{icon:react_default.a.createElement(Menu.a,null),title:"PX Blue Drawer",subtitle:"with multiple navigation groups"}),react_default.a.createElement(Drawer.DrawerBody,null,react_default.a.createElement(Drawer.DrawerNavGroup,{title:Object(addon_knobs_dist.text)("navGroup[0].title","First DrawerNavGroup"),items:navGroupItems1}),Object(addon_knobs_dist.boolean)("Add Spacer",!0)&&react_default.a.createElement(react_components.Spacer,null),react_default.a.createElement(Drawer.DrawerNavGroup,{title:Object(addon_knobs_dist.text)("navGroup[1].title","Second DrawerNavGroup"),items:navGroupItems2})))}),{__STORY__:"import { Accessibility, Gavel, Menu, NotificationsActive, Person, Settings, Today } from '@material-ui/icons';\nimport { Spacer } from '@pxblue/react-components';\nimport { Drawer, DrawerBody, DrawerHeader, DrawerNavGroup, NavItem } from '@pxblue/react-components/core/Drawer';\nimport { boolean, text } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React, { useState } from 'react';\n\nexport const withMultipleNavGroups = (): StoryFnReactReturnType => {\n    const [selected, setSelected] = useState('');\n\n    const navGroupItems1: NavItem[] = [\n        {\n            title: 'Identity Management',\n            itemID: '1',\n            icon: <Person />,\n            onClick: (): void => setSelected('1'),\n        },\n        {\n            title: 'Calendar',\n            itemID: '2',\n            icon: <Today />,\n            onClick: (): void => setSelected('2'),\n        },\n        {\n            title: 'Accessibility',\n            itemID: '3',\n            icon: <Accessibility />,\n            onClick: (): void => setSelected('3'),\n        },\n        {\n            title: 'Notifications',\n            itemID: '4',\n            icon: <NotificationsActive />,\n            onClick: (): void => setSelected('4'),\n        },\n    ];\n\n    const navGroupItems2: NavItem[] = [\n        {\n            title: 'Settings',\n            itemID: '2-1',\n            icon: <Settings />,\n            onClick: (): void => setSelected('2-1'),\n        },\n        {\n            title: 'Legal',\n            itemID: '2-2',\n            icon: <Gavel />,\n            onClick: (): void => setSelected('2-2'),\n        },\n    ];\n\n    return (\n        <Drawer open={boolean('open', true)} activeItem={selected}>\n            <DrawerHeader icon={<Menu />} title={'PX Blue Drawer'} subtitle={'with multiple navigation groups'} />\n            <DrawerBody>\n                <DrawerNavGroup title={text('navGroup[0].title', 'First DrawerNavGroup')} items={navGroupItems1} />\n                {boolean('Add Spacer', true) && <Spacer />}\n                <DrawerNavGroup title={text('navGroup[1].title', 'Second DrawerNavGroup')} items={navGroupItems2} />\n            </DrawerBody>\n        </Drawer>\n    );\n};\n\nwithMultipleNavGroups.story = { name: 'with multiple Drawer Nav Groups' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-multiple-DrawerNavGroups.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/drawer",__IDS_TO_FRAMEWORKS__:{}});withMultipleNavGroups.story={name:"with multiple Drawer Nav Groups"};var Add=__webpack_require__(1930),PinDrop=__webpack_require__(1931),Remove=__webpack_require__(1932),AddAPhoto=__webpack_require__(1933),MenuBook=__webpack_require__(1934),Group=__webpack_require__(1935),icons_Menu=__webpack_require__(346),Menu_default=__webpack_require__.n(icons_Menu),colors_dist=__webpack_require__(9),with_nested_list_items_addSourceDecorator=(__webpack_require__(12).withSource,__webpack_require__(12).addSource),getIcon=function(icon){switch(icon){case"<Add />":return react_default.a.createElement(Add.a,null);case"<PinDrop />":return react_default.a.createElement(PinDrop.a,null);case"<Remove />":return react_default.a.createElement(Remove.a,null);case"<AddAPhoto />":return react_default.a.createElement(AddAPhoto.a,null);case"undefined":default:return}},withNestedListItems=with_nested_list_items_addSourceDecorator((function(){var _a=Object(react.useState)(""),selected=_a[0],setSelected=_a[1],open=Object(addon_knobs_dist.boolean)("open",!0,"DrawerNavGroup"),divider=Object(addon_knobs_dist.boolean)("divider",!0,"DrawerNavGroup"),nestedDivider=Object(addon_knobs_dist.boolean)("nestedDivider",!1,"DrawerNavGroup"),chevron=Object(addon_knobs_dist.boolean)("chevron",!1,"DrawerNavGroup"),nestedBackgroundColor=Object(addon_knobs_dist.color)("nestedBackgroundColor","","DrawerNavGroup"),groupUseExpandIcon=Object(addon_knobs_dist.select)("expandIcon",["undefined","<Add />","<PinDrop />"],"undefined","DrawerNavGroup"),groupUseCollapseIcon=Object(addon_knobs_dist.select)("collapseIcon",["undefined","<Remove />","<Groups />"],"undefined","DrawerNavGroup"),showIcon=Object(addon_knobs_dist.boolean)("Show Top-Level Icons",!0,"NavItem"),hidePadding=Object(addon_knobs_dist.boolean)("hidePadding",!1,"NavItem"),useRightComponent=Object(addon_knobs_dist.select)("rightComponent",["undefined","<ListItemTag />","<ChannelValue />"],"undefined","NavItem"),itemUseExpandIcon=Object(addon_knobs_dist.select)("expandIcon",["undefined","<Add />","<PinDrop />"],"undefined","NavItem"),itemUseCollapseIcon=Object(addon_knobs_dist.select)("collapseIcon",["undefined","<Remove />","<AddAPhoto />"],"undefined","NavItem"),rightComponent=function(){switch(useRightComponent){case"undefined":return;case"<ListItemTag />":return react_default.a.createElement(react_components.ListItemTag,{label:"56+",backgroundColor:colors_dist.gold[50],fontColor:colors_dist.gold[800]});case"<ChannelValue />":return react_default.a.createElement(react_components.ChannelValue,{value:2,units:"V"})}}();return react_default.a.createElement(Drawer.Drawer,{open:open,key:"drawer",activeItem:selected},react_default.a.createElement(Drawer.DrawerHeader,{title:"Power Xpert Blue",icon:react_default.a.createElement(Menu_default.a,null)}),react_default.a.createElement(react_components.DrawerBody,{disableActiveItemParentStyles:Object(addon_knobs_dist.boolean)("disableActiveItemParentStyles",!1,"DrawerNavGroup")},react_default.a.createElement(react_components.DrawerNavGroup,{divider:divider,nestedDivider:nestedDivider,hidePadding:hidePadding,chevron:chevron,nestedBackgroundColor:nestedBackgroundColor,expandIcon:getIcon(groupUseExpandIcon),collapseIcon:getIcon(groupUseCollapseIcon),items:[{title:"User Guide",icon:showIcon?react_default.a.createElement(MenuBook.a,null):void 0,itemID:"User Guide",rightComponent:rightComponent,expandIcon:getIcon(itemUseExpandIcon),collapseIcon:getIcon(itemUseCollapseIcon),items:[{title:"Getting Started",itemID:"Getting Started",subtitle:"Introduction to Eaton",onClick:function(){setSelected("Getting Started")}},{title:"Tutorials",itemID:"Tutorials",items:[{title:"For Developers",itemID:"For Developers",onClick:function(){setSelected("For Developers")}},{title:"For Designers",itemID:"For Designers",items:[{title:"Component Library",itemID:"Component Library",onClick:function(){setSelected("Component Library")}},{title:"Typography Rules",itemID:"Typography Rules",onClick:function(){setSelected("Typography Rules")}},{title:"Theme Rules",itemID:"Theme Rules",onClick:function(){setSelected("Theme Rules")}}]}]},{title:"Environment Setup",itemID:"Environment Setup",onClick:function(){setSelected("Environment Setup")}}]},{title:"Community",itemID:"Community",icon:showIcon?react_default.a.createElement(Group.a,null):void 0,onClick:function(){setSelected("Community")},items:[{title:"License",itemID:"License",onClick:function(){setSelected("License")}},{title:"Contribute",itemID:"Contribute",items:[{title:"Hall of Fame",itemID:"Hall of Fame",onClick:function(){setSelected("Hall of Fame")}},{title:"Contributing Guide",itemID:"Contributing Guide",onClick:function(){setSelected("Contributing Guide")}}]}]},{title:"Accessibility",itemID:"Accessibility",icon:showIcon?react_default.a.createElement(Accessibility.a,null):void 0,onClick:function(){setSelected("Accessibility")}},{title:"Notifications",itemID:"Notifications",icon:showIcon?react_default.a.createElement(NotificationsActive.a,null):void 0,onClick:function(){setSelected("Notifications")}}]})))}),{__STORY__:"import {\n    Accessibility,\n    Add,\n    AddAPhoto,\n    NotificationsActive,\n    Group,\n    MenuBook,\n    PinDrop,\n    Remove,\n} from '@material-ui/icons';\nimport MenuIcon from '@material-ui/icons/Menu';\nimport * as Colors from '@pxblue/colors';\nimport { ChannelValue, DrawerBody, DrawerNavGroup, ListItemTag } from '@pxblue/react-components';\nimport { Drawer, DrawerHeader } from '@pxblue/react-components/core/Drawer';\nimport { boolean, select, color } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React, { useState } from 'react';\n\nconst userGuide = 'User Guide';\nconst license = 'License';\nconst accessibility = 'Accessibility';\nconst notifications = 'Notifications';\nconst gettingStarted = 'Getting Started';\nconst tutorials = 'Tutorials';\nconst forDevelopers = 'For Developers';\nconst forDesigners = 'For Designers';\nconst environmentSetup = 'Environment Setup';\nconst community = 'Community';\nconst hallOfFame = 'Hall of Fame';\nconst contribute = 'Contribute';\nconst contributingGuide = 'Contributing Guide';\nconst componentLibrary = 'Component Library';\nconst typographyRules = 'Typography Rules';\nconst themeRules = 'Theme Rules';\n\nconst getIcon = (icon: string): JSX.Element | undefined => {\n    switch (icon) {\n        case '<Add />':\n            return <Add />;\n        case '<PinDrop />':\n            return <PinDrop />;\n        case '<Remove />':\n            return <Remove />;\n        case '<AddAPhoto />':\n            return <AddAPhoto />;\n        case 'undefined':\n        default:\n            return undefined;\n    }\n};\n\nexport const withNestedListItems = (): StoryFnReactReturnType => {\n    const [selected, setSelected] = useState('');\n    const DrawerNavGroupID = 'DrawerNavGroup';\n    const open = boolean('open', true, DrawerNavGroupID);\n    const divider = boolean('divider', true, DrawerNavGroupID);\n    const nestedDivider = boolean('nestedDivider', false, DrawerNavGroupID);\n    const chevron = boolean('chevron', false, DrawerNavGroupID);\n    const nestedBackgroundColor = color('nestedBackgroundColor', '', DrawerNavGroupID);\n    const groupUseExpandIcon = select(\n        'expandIcon',\n        ['undefined', '<Add />', '<PinDrop />'],\n        'undefined',\n        DrawerNavGroupID\n    );\n    const groupUseCollapseIcon = select(\n        'collapseIcon',\n        ['undefined', '<Remove />', '<Groups />'],\n        'undefined',\n        DrawerNavGroupID\n    );\n\n    const NavItemID = 'NavItem';\n    const showIcon = boolean('Show Top-Level Icons', true, NavItemID);\n    const hidePadding = boolean('hidePadding', false, NavItemID);\n    const useRightComponent = select(\n        'rightComponent',\n        ['undefined', '<ListItemTag />', '<ChannelValue />'],\n        'undefined',\n        NavItemID\n    );\n    const itemUseExpandIcon = select('expandIcon', ['undefined', '<Add />', '<PinDrop />'], 'undefined', NavItemID);\n    const itemUseCollapseIcon = select(\n        'collapseIcon',\n        ['undefined', '<Remove />', '<AddAPhoto />'],\n        'undefined',\n        NavItemID\n    );\n\n    const rightComponent = ((): JSX.Element | undefined => {\n        switch (useRightComponent) {\n            case 'undefined':\n                return undefined;\n            case '<ListItemTag />':\n                return <ListItemTag label=\"56+\" backgroundColor={Colors.gold[50]} fontColor={Colors.gold[800]} />;\n            case '<ChannelValue />':\n                return <ChannelValue value={2} units={'V'} />;\n            default:\n                break;\n        }\n    })();\n\n    const drawerItemList = (): JSX.Element => (\n        <DrawerBody disableActiveItemParentStyles={boolean('disableActiveItemParentStyles', false, DrawerNavGroupID)}>\n            <DrawerNavGroup\n                divider={divider}\n                nestedDivider={nestedDivider}\n                hidePadding={hidePadding}\n                chevron={chevron}\n                nestedBackgroundColor={nestedBackgroundColor}\n                expandIcon={getIcon(groupUseExpandIcon)}\n                collapseIcon={getIcon(groupUseCollapseIcon)}\n                items={[\n                    {\n                        title: userGuide,\n                        icon: showIcon ? <MenuBook /> : undefined,\n                        itemID: userGuide,\n                        rightComponent: rightComponent,\n                        expandIcon: getIcon(itemUseExpandIcon),\n                        collapseIcon: getIcon(itemUseCollapseIcon),\n                        items: [\n                            {\n                                title: gettingStarted,\n                                itemID: gettingStarted,\n                                subtitle: 'Introduction to Eaton',\n                                onClick: (): void => {\n                                    setSelected(gettingStarted);\n                                },\n                            },\n                            {\n                                title: tutorials,\n                                itemID: tutorials,\n                                items: [\n                                    {\n                                        title: forDevelopers,\n                                        itemID: forDevelopers,\n                                        onClick: (): void => {\n                                            setSelected(forDevelopers);\n                                        },\n                                    },\n                                    {\n                                        title: forDesigners,\n                                        itemID: forDesigners,\n                                        items: [\n                                            {\n                                                title: componentLibrary,\n                                                itemID: componentLibrary,\n                                                onClick: (): void => {\n                                                    setSelected(componentLibrary);\n                                                },\n                                            },\n                                            {\n                                                title: typographyRules,\n                                                itemID: typographyRules,\n                                                onClick: (): void => {\n                                                    setSelected(typographyRules);\n                                                },\n                                            },\n                                            {\n                                                title: themeRules,\n                                                itemID: themeRules,\n                                                onClick: (): void => {\n                                                    setSelected(themeRules);\n                                                },\n                                            },\n                                        ],\n                                    },\n                                ],\n                            },\n                            {\n                                title: environmentSetup,\n                                itemID: environmentSetup,\n                                onClick: (): void => {\n                                    setSelected(environmentSetup);\n                                },\n                            },\n                        ],\n                    },\n                    {\n                        title: community,\n                        itemID: community,\n                        icon: showIcon ? <Group /> : undefined,\n                        onClick: (): void => {\n                            setSelected(community);\n                        },\n                        items: [\n                            {\n                                title: license,\n                                itemID: license,\n                                onClick: (): void => {\n                                    setSelected(license);\n                                },\n                            },\n                            {\n                                title: contribute,\n                                itemID: contribute,\n                                items: [\n                                    {\n                                        title: hallOfFame,\n                                        itemID: hallOfFame,\n                                        onClick: (): void => {\n                                            setSelected(hallOfFame);\n                                        },\n                                    },\n                                    {\n                                        title: contributingGuide,\n                                        itemID: contributingGuide,\n                                        onClick: (): void => {\n                                            setSelected(contributingGuide);\n                                        },\n                                    },\n                                ],\n                            },\n                        ],\n                    },\n                    {\n                        title: accessibility,\n                        itemID: accessibility,\n                        icon: showIcon ? <Accessibility /> : undefined,\n                        onClick: (): void => {\n                            setSelected(accessibility);\n                        },\n                    },\n                    {\n                        title: notifications,\n                        itemID: notifications,\n                        icon: showIcon ? <NotificationsActive /> : undefined,\n                        onClick: (): void => {\n                            setSelected(notifications);\n                        },\n                    },\n                ]}\n            />\n        </DrawerBody>\n    );\n\n    return (\n        <Drawer open={open} key={'drawer'} activeItem={selected}>\n            <DrawerHeader title={'Power Xpert Blue'} icon={<MenuIcon />} />\n            {drawerItemList()}\n        </Drawer>\n    );\n};\n\nwithNestedListItems.story = { name: 'with nested list items' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-nested-list-items.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/drawer",__IDS_TO_FRAMEWORKS__:{}});withNestedListItems.story={name:"with nested list items"};var storybook_dark_mode_dist=__webpack_require__(53),EatonLogoLight=__webpack_require__(215),EatonLogoLight_default=__webpack_require__.n(EatonLogoLight),EatonLogoDark=__webpack_require__(216),EatonLogoDark_default=__webpack_require__.n(EatonLogoDark),withFooter=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){var _a=Object(react.useState)(""),selected=_a[0],setSelected=_a[1],navGroupItems=[{title:"Settings",itemID:"1",icon:react_default.a.createElement(Settings.a,null),onClick:function(){return setSelected("1")}},{title:"Legal",itemID:"2",icon:react_default.a.createElement(Gavel.a,null),onClick:function(){return setSelected("2")}}];return react_default.a.createElement(Drawer.Drawer,{open:Object(addon_knobs_dist.boolean)("open",!0),activeItem:selected},react_default.a.createElement(Drawer.DrawerHeader,{icon:react_default.a.createElement(Menu.a,null),title:"Footer Example"}),react_default.a.createElement(Drawer.DrawerBody,null,react_default.a.createElement(Drawer.DrawerNavGroup,{items:navGroupItems})),react_default.a.createElement(Drawer.DrawerFooter,{backgroundColor:Object(addon_knobs_dist.color)("backgroundColor",colors_dist.white[50]),hideContentOnCollapse:Object(addon_knobs_dist.boolean)("hideContentOnCollapse",!0),divider:Object(addon_knobs_dist.boolean)("divider",!0)},react_default.a.createElement("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",flexDirection:"row",padding:16}},react_default.a.createElement("img",{src:Object(storybook_dark_mode_dist.useDarkMode)()?EatonLogoDark_default.a:EatonLogoLight_default.a,alt:"Eaton Logo",height:28,width:"auto"}),react_default.a.createElement("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center"}},react_default.a.createElement(Typography.a,{variant:"caption"},"Copyright © Eaton "+(new Date).getFullYear()),react_default.a.createElement(Typography.a,{variant:"caption"},"All Rights Reserved")))))}),{__STORY__:"import { Gavel, Menu, Settings } from '@material-ui/icons';\nimport * as Colors from '@pxblue/colors';\nimport {\n    Drawer,\n    DrawerBody,\n    DrawerFooter,\n    DrawerHeader,\n    DrawerNavGroup,\n    NavItem,\n} from '@pxblue/react-components/core/Drawer';\nimport { boolean, color } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React, { useState } from 'react';\nimport { useDarkMode } from 'storybook-dark-mode';\nimport { Typography } from '@material-ui/core';\nimport EatonFooterLogoLight from '../../assets/EatonLogoLight.png';\nimport EatonFooterLogoDark from '../../assets/EatonLogoDark.png';\n\nexport const withFooter = (): StoryFnReactReturnType => {\n    const [selected, setSelected] = useState('');\n\n    const navGroupItems: NavItem[] = [\n        {\n            title: 'Settings',\n            itemID: '1',\n            icon: <Settings />,\n            onClick: (): void => setSelected('1'),\n        },\n        {\n            title: 'Legal',\n            itemID: '2',\n            icon: <Gavel />,\n            onClick: (): void => setSelected('2'),\n        },\n    ];\n\n    return (\n        <Drawer open={boolean('open', true)} activeItem={selected}>\n            <DrawerHeader icon={<Menu />} title={'Footer Example'} />\n            <DrawerBody>\n                <DrawerNavGroup items={navGroupItems} />\n            </DrawerBody>\n\n            <DrawerFooter\n                backgroundColor={color('backgroundColor', Colors.white[50])}\n                hideContentOnCollapse={boolean('hideContentOnCollapse', true)}\n                divider={boolean('divider', true)}\n            >\n                <div\n                    style={{\n                        display: 'flex',\n                        justifyContent: 'space-between',\n                        alignItems: 'center',\n                        flexDirection: 'row',\n                        padding: 16,\n                    }}\n                >\n                    <img\n                        src={useDarkMode() ? EatonFooterLogoDark : EatonFooterLogoLight}\n                        alt=\"Eaton Logo\"\n                        height={28}\n                        width={'auto'}\n                    />\n                    <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>\n                        <Typography\n                            variant={'caption'}\n                        >{`Copyright \\u00A9 Eaton ${new Date().getFullYear()}`}</Typography>\n                        <Typography variant={'caption'}>All Rights Reserved</Typography>\n                    </div>\n                </div>\n            </DrawerFooter>\n        </Drawer>\n    );\n};\n\nwithFooter.story = { name: 'with footer' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-footer.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/drawer",__IDS_TO_FRAMEWORKS__:{}}));withFooter.story={name:"with footer"};var FitnessCenter=__webpack_require__(1936),Dashboard=__webpack_require__(1937),Toc=__webpack_require__(1938),Devices=__webpack_require__(1939),Event=__webpack_require__(1940),MoveToInbox=__webpack_require__(732),MoveToInbox_default=__webpack_require__.n(MoveToInbox),Send=__webpack_require__(733),Send_default=__webpack_require__.n(Send),__assign=function(){return(__assign=Object.assign||function(t){for(var s,i=1,n=arguments.length;i<n;i++)for(var p in s=arguments[i])Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p]);return t}).apply(this,arguments)},with_full_config_addSourceDecorator=(__webpack_require__(12).withSource,__webpack_require__(12).addSource),topologyBgImage=__webpack_require__(200),with_full_config_farmBgImage=__webpack_require__(326),with_full_config_getIcon=function(icon){switch(icon){case"<Add />":return react_default.a.createElement(Add.a,null);case"<PinDrop />":return react_default.a.createElement(PinDrop.a,null);case"<Remove />":return react_default.a.createElement(Remove.a,null);case"<AddAPhoto />":return react_default.a.createElement(AddAPhoto.a,null);case"<Menu />":return react_default.a.createElement(Menu.a,null);case"<FitnessCenter />":return react_default.a.createElement(FitnessCenter.a,null);case"<Dashboard />":return react_default.a.createElement(Dashboard.a,null);case"undefined":default:return}},headerBackgroundImageOptions={Pattern:topologyBgImage,Farm:with_full_config_farmBgImage,undefined:void 0},withFullConfig=with_full_config_addSourceDecorator((function(){var _a=Object(react.useState)(""),selected=_a[0],setSelected=_a[1],isDarkMode=Object(storybook_dark_mode_dist.useDarkMode)(),drawerKnobs={activeItemBackgroundColor:Object(addon_knobs_dist.color)("activeItemBackgroundColor",colors_dist.blue[50],"Drawer"),activeItemFontColor:Object(addon_knobs_dist.color)("activeItemFontColor",colors_dist.blue[500],"Drawer"),activeItemIconColor:Object(addon_knobs_dist.color)("activeItemIconColor",colors_dist.blue[500],"Drawer"),activeItemBackgroundShape:Object(addon_knobs_dist.select)("activeItemBackgroundShape",["round","square"],"square","Drawer"),chevron:Object(addon_knobs_dist.boolean)("chevron",!1,"Drawer"),collapseIcon:with_full_config_getIcon(Object(addon_knobs_dist.select)("collapseIcon",["undefined","<Remove />","<AddAPhoto />"],"undefined","Drawer")),disableActiveItemParentStyles:Object(addon_knobs_dist.boolean)("disableActiveItemParentStyles",!0,"Drawer"),divider:Object(addon_knobs_dist.boolean)("divider",!0,"Drawer"),expandIcon:with_full_config_getIcon(Object(addon_knobs_dist.select)("expandIcon",["undefined","<Add />","<PinDrop />"],"undefined","Drawer")),hidePadding:Object(addon_knobs_dist.boolean)("hidePadding",!1,"Drawer"),itemFontColor:Object(addon_knobs_dist.color)("itemFontColor",colors_dist.black[500],"Drawer"),itemIconColor:Object(addon_knobs_dist.color)("itemIconColor",colors_dist.black[500],"Drawer"),nestedBackgroundColor:Object(addon_knobs_dist.color)("nestedBackgroundColor",colors_dist.white[200],"Drawer"),nestedDivider:Object(addon_knobs_dist.boolean)("nestedDivider",!1,"Drawer"),open:Object(addon_knobs_dist.boolean)("open",!0,"Drawer"),openOnHover:Object(addon_knobs_dist.boolean)("openOnHover (persistent only)",!0,"Drawer"),openOnHoverDelay:Object(addon_knobs_dist.number)("openOnHoverDelay (persistent only)",500,{range:!0,min:100,max:1e3,step:100},"Drawer"),ripple:Object(addon_knobs_dist.boolean)("ripple",!0,"Drawer"),sideBorder:Object(addon_knobs_dist.boolean)("sideBorder",!0,"Drawer"),variant:Object(addon_knobs_dist.select)("variant",["permanent","persistent","temporary","rail"],"persistent","Drawer"),condensed:Object(addon_knobs_dist.boolean)("condensed (rail only)",!1,"Drawer"),width:Object(addon_knobs_dist.number)("width",350,{range:!0,min:200,max:700,step:50},"Drawer")},headerKnobs={backgroundColor:Object(addon_knobs_dist.color)("backgroundColor",colors_dist.blue[500],"Header"),backgroundImage:headerBackgroundImageOptions[Object(addon_knobs_dist.select)("backgroundImage",["undefined","Pattern","Farm"],"Pattern","Header")],divider:Object(addon_knobs_dist.boolean)("divider",!1,"Header"),backgroundOpacity:Object(addon_knobs_dist.number)("backgroundOpacity",.4,{range:!0,min:0,max:1,step:.1},"Header"),fontColor:Object(addon_knobs_dist.color)("fontColor",colors_dist.white[50],"Header"),icon:with_full_config_getIcon(Object(addon_knobs_dist.select)("icon",["<Menu />","<FitnessCenter />","undefined"],"<Menu />","Header")),subtitle:Object(addon_knobs_dist.text)("subtitle","Organize your menu items here","Header"),title:Object(addon_knobs_dist.text)("title","PX Blue Drawer","Header")},bodyKnobs={backgroundColor:Object(addon_knobs_dist.color)("backgroundColor","transparent","Body")},navGroupKnobs={title:Object(addon_knobs_dist.text)("drawerNavGroup[0].title","NavGroup 1","NavGroup"),titleColor:Object(addon_knobs_dist.color)("drawerNavGroup[0].titleColor",colors_dist.black[500],"NavGroup")},navItemKnobs={hidden:Object(addon_knobs_dist.boolean)("hidden",!1,"NavItem"),icon:with_full_config_getIcon(Object(addon_knobs_dist.select)("icon",["<Dashboard />","<FitnessCenter />","undefined"],"<Dashboard />","NavItem")),statusColor:Object(addon_knobs_dist.color)("statusColor",colors_dist.green[300],"NavItem"),subtitle:Object(addon_knobs_dist.text)("subtitle","Learn more about us","NavItem"),title:Object(addon_knobs_dist.text)("title","Overview","NavItem"),disableRailTooltip:Object(addon_knobs_dist.boolean)("disableRailTooltip",!1,"NavItem")},footerKnobs={hideContentOnCollapse:Object(addon_knobs_dist.boolean)("hideContentOnCollapse",!0,"Footer"),divider:Object(addon_knobs_dist.boolean)("divider",!0,"Footer")},links1=[{hidden:navItemKnobs.hidden,icon:navItemKnobs.icon,statusColor:navItemKnobs.statusColor,subtitle:navItemKnobs.subtitle,title:navItemKnobs.title||"title",disableRailTooltip:navItemKnobs.disableRailTooltip,itemID:"0",items:[{title:"Monthly Report",itemID:"Monthly Report",onClick:function(){setSelected("Monthly Report")}},{title:"Annual Report",itemID:"Annual Report",onClick:function(){setSelected("Annual Report")}}]},{title:"Timeline",itemID:"Timeline",onClick:function(){setSelected("Timeline")},icon:react_default.a.createElement(Toc.a,null)},{title:"Locations",itemID:"Locations",onClick:function(){setSelected("Locations")},icon:react_default.a.createElement(PinDrop.a,null)},{title:"Devices",itemID:"Devices",subtitle:"5 new warnings",statusColor:colors_dist.yellow[500],onClick:function(){setSelected("Devices")},icon:react_default.a.createElement(Devices.a,null)},{title:"Photos",itemID:"Photos",onClick:function(){setSelected("Photos")},icon:react_default.a.createElement(AddAPhoto.a,null)},{title:"Schedule",itemID:"Schedule",onClick:function(){setSelected("Schedule")},icon:react_default.a.createElement(Event.a,{style:Object(utils.b)()})}],links2=[{title:"User Guide",itemID:"User Guide",onClick:function(){setSelected("User Guide")},icon:react_default.a.createElement(MoveToInbox_default.a,null)},{title:"License Agreement",itemID:"License Agreement",subtitle:"For Eaton employees only",onClick:function(){setSelected("License Agreement")},icon:react_default.a.createElement(Send_default.a,{style:Object(utils.b)()})},{title:"Accessibility",itemID:"Accessibility",icon:react_default.a.createElement(Accessibility.a,null),items:[{title:"Color Contrast Guide",itemID:"Color Contrast Guide",onClick:function(){setSelected("Color Contrast Guide")}},{title:"Screen Reader",itemID:"Screen Reader",onClick:function(){setSelected("Screen Reader")}}]},{title:"Notifications",itemID:"Notifications",onClick:function(){setSelected("Notifications")},icon:react_default.a.createElement(NotificationsActive.a,null)}],showFooter=Object(addon_knobs_dist.boolean)("Show footer",!0,"Footer"),footerBackgroundColor=Object(addon_knobs_dist.color)("backgroundColor",colors_dist.white[50],"Footer");return react_default.a.createElement(react_components.Drawer,{key:"drawer",activeItem:selected,activeItemBackgroundColor:drawerKnobs.activeItemBackgroundColor,activeItemFontColor:drawerKnobs.activeItemFontColor,activeItemIconColor:drawerKnobs.activeItemIconColor,activeItemBackgroundShape:drawerKnobs.activeItemBackgroundShape,chevron:drawerKnobs.chevron,collapseIcon:drawerKnobs.collapseIcon,condensed:drawerKnobs.condensed,divider:drawerKnobs.divider,expandIcon:drawerKnobs.expandIcon,hidePadding:drawerKnobs.hidePadding,itemFontColor:drawerKnobs.itemFontColor,itemIconColor:drawerKnobs.itemIconColor,nestedBackgroundColor:drawerKnobs.nestedBackgroundColor,nestedDivider:drawerKnobs.nestedDivider,open:drawerKnobs.open,openOnHover:drawerKnobs.openOnHover,openOnHoverDelay:drawerKnobs.openOnHoverDelay,ripple:drawerKnobs.ripple,sideBorder:drawerKnobs.sideBorder,variant:drawerKnobs.variant,width:drawerKnobs.width,ModalProps:{disableEnforceFocus:!0}},react_default.a.createElement(react_components.DrawerHeader,{backgroundColor:headerKnobs.backgroundColor,backgroundImage:headerKnobs.backgroundImage,backgroundOpacity:headerKnobs.backgroundOpacity,divider:headerKnobs.divider,fontColor:headerKnobs.fontColor,icon:headerKnobs.icon,subtitle:headerKnobs.subtitle,title:headerKnobs.title}),react_default.a.createElement(react_components.DrawerBody,{backgroundColor:bodyKnobs.backgroundColor},react_default.a.createElement(react_components.DrawerNavGroup,{items:links1,title:navGroupKnobs.title,titleColor:navGroupKnobs.titleColor}),react_default.a.createElement(react_components.DrawerNavGroup,{items:links2,titleContent:react_default.a.createElement("div",{style:{display:"flex",justifyContent:"space-between",fontWeight:600}},react_default.a.createElement(Typography.a,{variant:"overline",style:{lineHeight:"unset"}},"NavGroup 2"),react_default.a.createElement("div",null,"Software Version v1.0.3"))})),showFooter&&react_default.a.createElement(react_components.DrawerFooter,__assign({backgroundColor:footerBackgroundColor},footerKnobs),react_default.a.createElement("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",flexDirection:"row",padding:16}},react_default.a.createElement("img",{src:isDarkMode?EatonLogoDark_default.a:EatonLogoLight_default.a,alt:"Eaton Logo",height:28,width:"auto"}),react_default.a.createElement("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center"}},react_default.a.createElement(Typography.a,{variant:"caption"},"Copyright © Eaton "+(new Date).getFullYear()),react_default.a.createElement(Typography.a,{variant:"caption"},"All Rights Reserved")))))}),{__STORY__:"import { Typography } from '@material-ui/core';\nimport {\n    Accessibility,\n    Add,\n    AddAPhoto,\n    Dashboard,\n    Devices,\n    Event,\n    FitnessCenter,\n    NotificationsActive,\n    Remove,\n    PinDrop,\n    Toc,\n    Menu,\n} from '@material-ui/icons';\nimport MoveToInboxIcon from '@material-ui/icons/MoveToInbox';\nimport SendIcon from '@material-ui/icons/Send';\nimport * as Colors from '@pxblue/colors';\nimport {\n    Drawer,\n    DrawerComponentProps,\n    DrawerBody,\n    DrawerFooter,\n    DrawerHeader,\n    DrawerNavGroup,\n    DrawerHeaderProps,\n    DrawerBodyProps,\n    DrawerNavGroupProps,\n    NavItem,\n    DrawerFooterProps,\n} from '@pxblue/react-components';\nimport { boolean, color, number, select, text } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React, { useState } from 'react';\nimport { WITH_FULL_CONFIG_STORY_NAME } from '../../src/constants';\nimport { getLeftToRightIconTransform } from '../../src/utils';\nimport { useDarkMode } from 'storybook-dark-mode';\nimport EatonFooterLogoLight from '../../assets/EatonLogoLight.png';\nimport EatonFooterLogoDark from '../../assets/EatonLogoDark.png';\n\nconst topologyBgImage = require('../../assets/topology_40.png');\nconst farmBgImage = require('../../assets/farm.jpg');\n\nconst userGuide = 'User Guide';\nconst accessibility = 'Accessibility';\nconst notifications = 'Notifications';\nconst overview = 'Overview';\nconst timeline = 'Timeline';\nconst locations = 'Locations';\nconst devices = 'Devices';\nconst photos = 'Photos';\nconst schedule = 'Schedule';\nconst agreement = 'License Agreement';\nconst monthlyReport = 'Monthly Report';\nconst annualReport = 'Annual Report';\nconst colorContrastGuide = 'Color Contrast Guide';\nconst screenReader = 'Screen Reader';\n\nconst getIcon = (icon: string): JSX.Element | undefined => {\n    switch (icon) {\n        case '<Add />':\n            return <Add />;\n        case '<PinDrop />':\n            return <PinDrop />;\n        case '<Remove />':\n            return <Remove />;\n        case '<AddAPhoto />':\n            return <AddAPhoto />;\n        case '<Menu />':\n            return <Menu />;\n        case '<FitnessCenter />':\n            return <FitnessCenter />;\n        case '<Dashboard />':\n            return <Dashboard />;\n        case 'undefined':\n        default:\n            return undefined;\n    }\n};\n\nconst headerBackgroundImageOptions = {\n    Pattern: topologyBgImage,\n    Farm: farmBgImage,\n    undefined: undefined,\n};\n\nexport const withFullConfig = (): StoryFnReactReturnType => {\n    const [selected, setSelected] = useState('');\n    const isDarkMode = useDarkMode();\n\n    // storybook tab names\n    const drawerGroupId = 'Drawer';\n    const headerGroupId = 'Header';\n    const bodyGroupId = 'Body';\n    const navGroupId = 'NavGroup';\n    const navItemId = 'NavItem';\n    const footerGroupId = 'Footer';\n\n    const drawerKnobs: DrawerComponentProps = {\n        activeItemBackgroundColor: color('activeItemBackgroundColor', Colors.blue[50], drawerGroupId),\n        activeItemFontColor: color('activeItemFontColor', Colors.blue[500], drawerGroupId),\n        activeItemIconColor: color('activeItemIconColor', Colors.blue[500], drawerGroupId),\n        activeItemBackgroundShape: select('activeItemBackgroundShape', ['round', 'square'], 'square', drawerGroupId),\n        chevron: boolean('chevron', false, drawerGroupId),\n        collapseIcon: getIcon(\n            select('collapseIcon', ['undefined', '<Remove />', '<AddAPhoto />'], 'undefined', drawerGroupId)\n        ),\n        disableActiveItemParentStyles: boolean('disableActiveItemParentStyles', true, drawerGroupId),\n        divider: boolean('divider', true, drawerGroupId),\n        expandIcon: getIcon(select('expandIcon', ['undefined', '<Add />', '<PinDrop />'], 'undefined', drawerGroupId)),\n        hidePadding: boolean('hidePadding', false, drawerGroupId),\n        itemFontColor: color('itemFontColor', Colors.black[500], drawerGroupId),\n        itemIconColor: color('itemIconColor', Colors.black[500], drawerGroupId),\n        nestedBackgroundColor: color('nestedBackgroundColor', Colors.white[200], drawerGroupId),\n        nestedDivider: boolean('nestedDivider', false, drawerGroupId),\n        open: boolean('open', true, drawerGroupId),\n        openOnHover: boolean('openOnHover (persistent only)', true, drawerGroupId),\n        openOnHoverDelay: number(\n            'openOnHoverDelay (persistent only)',\n            500,\n            {\n                range: true,\n                min: 100,\n                max: 1000,\n                step: 100,\n            },\n            drawerGroupId\n        ),\n        ripple: boolean('ripple', true, drawerGroupId),\n        sideBorder: boolean('sideBorder', true, drawerGroupId),\n        variant: select('variant', ['permanent', 'persistent', 'temporary', 'rail'], 'persistent', drawerGroupId),\n        condensed: boolean('condensed (rail only)', false, drawerGroupId),\n        width: number(\n            'width',\n            350,\n            {\n                range: true,\n                min: 200,\n                max: 700,\n                step: 50,\n            },\n            drawerGroupId\n        ),\n    };\n\n    const headerKnobs: DrawerHeaderProps = {\n        backgroundColor: color('backgroundColor', Colors.blue[500], headerGroupId),\n        backgroundImage:\n            headerBackgroundImageOptions[\n                select('backgroundImage', ['undefined', 'Pattern', 'Farm'], 'Pattern', headerGroupId)\n            ],\n        divider: boolean('divider', false, headerGroupId),\n        backgroundOpacity: number('backgroundOpacity', 0.4, { range: true, min: 0, max: 1, step: 0.1 }, headerGroupId),\n        fontColor: color('fontColor', Colors.white[50], headerGroupId),\n        icon: getIcon(select('icon', ['<Menu />', '<FitnessCenter />', 'undefined'], '<Menu />', headerGroupId)),\n        subtitle: text('subtitle', 'Organize your menu items here', headerGroupId),\n        title: text('title', 'PX Blue Drawer', headerGroupId),\n    };\n\n    const bodyKnobs: DrawerBodyProps = {\n        backgroundColor: color('backgroundColor', 'transparent', bodyGroupId),\n    };\n\n    const navGroupKnobs: Partial<DrawerNavGroupProps> = {\n        title: text('drawerNavGroup[0].title', 'NavGroup 1', navGroupId),\n        titleColor: color('drawerNavGroup[0].titleColor', Colors.black[500], navGroupId),\n    };\n\n    const navItemKnobs: Partial<NavItem> = {\n        hidden: boolean('hidden', false, navItemId),\n        icon: getIcon(select('icon', ['<Dashboard />', '<FitnessCenter />', 'undefined'], '<Dashboard />', navItemId)),\n        statusColor: color('statusColor', Colors.green[300], navItemId),\n        subtitle: text('subtitle', 'Learn more about us', navItemId),\n        title: text('title', overview, navItemId),\n        disableRailTooltip: boolean('disableRailTooltip', false, navItemId),\n    };\n\n    const footerKnobs: Partial<DrawerFooterProps> = {\n        hideContentOnCollapse: boolean('hideContentOnCollapse', true, footerGroupId),\n        divider: boolean('divider', true, footerGroupId),\n    };\n\n    // DrawerNavGroup.items\n    const links1 = [\n        {\n            hidden: navItemKnobs.hidden,\n            icon: navItemKnobs.icon,\n            statusColor: navItemKnobs.statusColor,\n            subtitle: navItemKnobs.subtitle,\n            // title is a required prop, using a placeholder in case the knob is empty\n            title: navItemKnobs.title || 'title',\n            disableRailTooltip: navItemKnobs.disableRailTooltip,\n            itemID: '0',\n            items: [\n                {\n                    title: monthlyReport,\n                    itemID: monthlyReport,\n                    onClick: (): void => {\n                        setSelected(monthlyReport);\n                    },\n                },\n                {\n                    title: annualReport,\n                    itemID: annualReport,\n                    onClick: (): void => {\n                        setSelected(annualReport);\n                    },\n                },\n            ],\n        },\n        {\n            title: timeline,\n            itemID: timeline,\n            onClick: (): void => {\n                setSelected(timeline);\n            },\n            icon: <Toc />,\n        },\n        {\n            title: locations,\n            itemID: locations,\n            onClick: (): void => {\n                setSelected(locations);\n            },\n            icon: <PinDrop />,\n        },\n        {\n            title: devices,\n            itemID: devices,\n            subtitle: '5 new warnings',\n            statusColor: Colors.yellow[500],\n            onClick: (): void => {\n                setSelected(devices);\n            },\n            icon: <Devices />,\n        },\n        {\n            title: photos,\n            itemID: photos,\n            onClick: (): void => {\n                setSelected(photos);\n            },\n            icon: <AddAPhoto />,\n        },\n        {\n            title: schedule,\n            itemID: schedule,\n            onClick: (): void => {\n                setSelected(schedule);\n            },\n            icon: <Event style={getLeftToRightIconTransform()} />,\n        },\n    ];\n\n    const links2 = [\n        {\n            title: userGuide,\n            itemID: userGuide,\n            onClick: (): void => {\n                setSelected(userGuide);\n            },\n            icon: <MoveToInboxIcon />,\n        },\n        {\n            title: agreement,\n            itemID: agreement,\n            subtitle: 'For Eaton employees only',\n            onClick: (): void => {\n                setSelected(agreement);\n            },\n            icon: <SendIcon style={getLeftToRightIconTransform()} />,\n        },\n        {\n            title: accessibility,\n            itemID: accessibility,\n            icon: <Accessibility />,\n            items: [\n                {\n                    title: colorContrastGuide,\n                    itemID: colorContrastGuide,\n                    onClick: (): void => {\n                        setSelected(colorContrastGuide);\n                    },\n                },\n                {\n                    title: screenReader,\n                    itemID: screenReader,\n                    onClick: (): void => {\n                        setSelected(screenReader);\n                    },\n                },\n            ],\n        },\n        {\n            title: notifications,\n            itemID: notifications,\n            onClick: (): void => {\n                setSelected(notifications);\n            },\n            icon: <NotificationsActive />,\n        },\n    ];\n\n    // Footer props\n    const showFooter = boolean('Show footer', true, footerGroupId);\n    const footerBackgroundColor = color('backgroundColor', Colors.white[50], footerGroupId);\n\n    // You can replace the knob props with your own values\n    return (\n        <Drawer\n            key={'drawer'}\n            activeItem={selected}\n            activeItemBackgroundColor={drawerKnobs.activeItemBackgroundColor}\n            activeItemFontColor={drawerKnobs.activeItemFontColor}\n            activeItemIconColor={drawerKnobs.activeItemIconColor}\n            activeItemBackgroundShape={drawerKnobs.activeItemBackgroundShape}\n            chevron={drawerKnobs.chevron}\n            collapseIcon={drawerKnobs.collapseIcon}\n            condensed={drawerKnobs.condensed}\n            divider={drawerKnobs.divider}\n            expandIcon={drawerKnobs.expandIcon}\n            hidePadding={drawerKnobs.hidePadding}\n            itemFontColor={drawerKnobs.itemFontColor}\n            itemIconColor={drawerKnobs.itemIconColor}\n            nestedBackgroundColor={drawerKnobs.nestedBackgroundColor}\n            nestedDivider={drawerKnobs.nestedDivider}\n            open={drawerKnobs.open}\n            openOnHover={drawerKnobs.openOnHover}\n            openOnHoverDelay={drawerKnobs.openOnHoverDelay}\n            ripple={drawerKnobs.ripple}\n            sideBorder={drawerKnobs.sideBorder}\n            variant={drawerKnobs.variant}\n            width={drawerKnobs.width}\n            ModalProps={{\n                disableEnforceFocus: true,\n            }}\n        >\n            <DrawerHeader\n                backgroundColor={headerKnobs.backgroundColor}\n                backgroundImage={headerKnobs.backgroundImage}\n                backgroundOpacity={headerKnobs.backgroundOpacity}\n                divider={headerKnobs.divider}\n                fontColor={headerKnobs.fontColor}\n                icon={headerKnobs.icon}\n                subtitle={headerKnobs.subtitle}\n                title={headerKnobs.title}\n            />\n            <DrawerBody backgroundColor={bodyKnobs.backgroundColor}>\n                <DrawerNavGroup items={links1} title={navGroupKnobs.title} titleColor={navGroupKnobs.titleColor} />\n                <DrawerNavGroup\n                    items={links2}\n                    titleContent={\n                        <div\n                            style={{\n                                display: 'flex',\n                                justifyContent: 'space-between',\n                                fontWeight: 600,\n                            }}\n                        >\n                            <Typography variant={'overline'} style={{ lineHeight: 'unset' }}>\n                                NavGroup 2\n                            </Typography>\n                            <div>Software Version v1.0.3</div>\n                        </div>\n                    }\n                />\n            </DrawerBody>\n\n            {showFooter && (\n                <DrawerFooter backgroundColor={footerBackgroundColor} {...footerKnobs}>\n                    <div\n                        style={{\n                            display: 'flex',\n                            justifyContent: 'space-between',\n                            alignItems: 'center',\n                            flexDirection: 'row',\n                            padding: 16,\n                        }}\n                    >\n                        <img\n                            src={isDarkMode ? EatonFooterLogoDark : EatonFooterLogoLight}\n                            alt=\"Eaton Logo\"\n                            height={28}\n                            width={'auto'}\n                        />\n                        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>\n                            <Typography\n                                variant={'caption'}\n                            >{`Copyright \\u00A9 Eaton ${new Date().getFullYear()}`}</Typography>\n                            <Typography variant={'caption'}>All Rights Reserved</Typography>\n                        </div>\n                    </div>\n                </DrawerFooter>\n            )}\n        </Drawer>\n    );\n};\n\nwithFullConfig.story = { name: WITH_FULL_CONFIG_STORY_NAME };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-full-config.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/drawer",__IDS_TO_FRAMEWORKS__:{}});withFullConfig.story={name:constants.c};__webpack_require__(12).withSource;var inDrawerLayout=(0,__webpack_require__(12).addSource)((function(){var variant=Object(addon_knobs_dist.select)("variant",["permanent","persistent","temporary","rail"],"persistent"),_a=Object(react.useState)(""),selected=_a[0],setSelected=_a[1],isDarkMode=Object(storybook_dark_mode_dist.useDarkMode)(),navGroupItems=[{title:"Identity Management",itemID:"1",icon:react_default.a.createElement(Person.a,null),onClick:function(){return setSelected("1")}},{title:"Calendar",itemID:"2",icon:react_default.a.createElement(Today.a,null),onClick:function(){return setSelected("2")}},{title:"Accessibility",itemID:"3",icon:react_default.a.createElement(Accessibility.a,null),onClick:function(){return setSelected("3")}},{title:"Notifications",itemID:"4",icon:react_default.a.createElement(NotificationsActive.a,null),onClick:function(){return setSelected("4")}}];return react_default.a.createElement(react_components.DrawerLayout,{drawer:react_default.a.createElement(Drawer.Drawer,{open:Object(addon_knobs_dist.boolean)("open",!0),width:Object(addon_knobs_dist.number)("width",350,{range:!0,min:200,max:700,step:50}),variant:variant,condensed:Object(addon_knobs_dist.boolean)("condensed (rail only)",!1),ModalProps:{disableEnforceFocus:!0},activeItem:selected},react_default.a.createElement(Drawer.DrawerHeader,{icon:react_default.a.createElement(Menu_default.a,null),titleContent:react_default.a.createElement("div",{style:{paddingLeft:16,paddingRight:16,display:"flex",height:"100%",flexDirection:"column",justifyContent:"center"}},react_default.a.createElement(Typography.a,{variant:"subtitle2",style:{fontWeight:100}},"PX Blue"),react_default.a.createElement(Typography.a,{variant:"h6",style:{marginTop:-8}},"DrawerLayout"))}),react_default.a.createElement(Drawer.DrawerBody,null,react_default.a.createElement(Drawer.DrawerNavGroup,{items:navGroupItems})),"rail"!==variant&&react_default.a.createElement(Drawer.DrawerFooter,null,react_default.a.createElement("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",flexDirection:"row",padding:16}},react_default.a.createElement("img",{src:isDarkMode?EatonLogoDark_default.a:EatonLogoLight_default.a,alt:"Eaton Logo",height:28,width:"auto"}),react_default.a.createElement("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center"}},react_default.a.createElement(Typography.a,{variant:"caption"},"Copyright © Eaton "+(new Date).getFullYear()),react_default.a.createElement(Typography.a,{variant:"caption"},"All Rights Reserved")))))},react_default.a.createElement("div",{style:{backgroundColor:"#777",color:"white",height:"100%",padding:"30px",boxSizing:"border-box"}},react_default.a.createElement(Typography.a,{variant:"h2"},"Body content goes here.")))}),{__STORY__:"import { Typography } from '@material-ui/core';\nimport MenuIcon from '@material-ui/icons/Menu';\nimport { DrawerLayout } from '@pxblue/react-components';\nimport {\n    Drawer,\n    DrawerBody,\n    DrawerFooter,\n    DrawerHeader,\n    DrawerNavGroup,\n    NavItem,\n} from '@pxblue/react-components/core/Drawer';\nimport { boolean, number, select } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React, { useState } from 'react';\nimport { useDarkMode } from 'storybook-dark-mode';\nimport EatonFooterLogoLight from '../../assets/EatonLogoLight.png';\nimport EatonFooterLogoDark from '../../assets/EatonLogoDark.png';\nimport { Person, Today, Accessibility, NotificationsActive } from '@material-ui/icons';\n\nexport const inDrawerLayout = (): StoryFnReactReturnType => {\n    const variant = select('variant', ['permanent', 'persistent', 'temporary', 'rail'], 'persistent');\n    const [selected, setSelected] = useState('');\n    const isDarkMode = useDarkMode();\n\n    const navGroupItems: NavItem[] = [\n        {\n            title: 'Identity Management',\n            itemID: '1',\n            icon: <Person />,\n            onClick: (): void => setSelected('1'),\n        },\n        {\n            title: 'Calendar',\n            itemID: '2',\n            icon: <Today />,\n            onClick: (): void => setSelected('2'),\n        },\n        {\n            title: 'Accessibility',\n            itemID: '3',\n            icon: <Accessibility />,\n            onClick: (): void => setSelected('3'),\n        },\n        {\n            title: 'Notifications',\n            itemID: '4',\n            icon: <NotificationsActive />,\n            onClick: (): void => setSelected('4'),\n        },\n    ];\n\n    return (\n        <DrawerLayout\n            drawer={\n                <Drawer\n                    open={boolean('open', true)}\n                    width={number('width', 350, {\n                        range: true,\n                        min: 200,\n                        max: 700,\n                        step: 50,\n                    })}\n                    variant={variant}\n                    condensed={boolean('condensed (rail only)', false)}\n                    ModalProps={{\n                        disableEnforceFocus: true,\n                    }}\n                    activeItem={selected}\n                >\n                    <DrawerHeader\n                        icon={<MenuIcon />}\n                        titleContent={\n                            <div\n                                style={{\n                                    paddingLeft: 16,\n                                    paddingRight: 16,\n                                    display: 'flex',\n                                    height: '100%',\n                                    flexDirection: 'column',\n                                    justifyContent: 'center',\n                                }}\n                            >\n                                <Typography variant={'subtitle2'} style={{ fontWeight: 100 }}>\n                                    PX Blue\n                                </Typography>\n                                <Typography variant={'h6'} style={{ marginTop: -8 }}>\n                                    DrawerLayout\n                                </Typography>\n                            </div>\n                        }\n                    />\n                    <DrawerBody>\n                        <DrawerNavGroup items={navGroupItems} />\n                    </DrawerBody>\n                    {variant !== 'rail' && (\n                        <DrawerFooter>\n                            <div\n                                style={{\n                                    display: 'flex',\n                                    justifyContent: 'space-between',\n                                    alignItems: 'center',\n                                    flexDirection: 'row',\n                                    padding: 16,\n                                }}\n                            >\n                                <img\n                                    src={isDarkMode ? EatonFooterLogoDark : EatonFooterLogoLight}\n                                    alt=\"Eaton Logo\"\n                                    height={28}\n                                    width={'auto'}\n                                />\n                                <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>\n                                    <Typography\n                                        variant={'caption'}\n                                    >{`Copyright \\u00A9 Eaton ${new Date().getFullYear()}`}</Typography>\n                                    <Typography variant={'caption'}>All Rights Reserved</Typography>\n                                </div>\n                            </div>\n                        </DrawerFooter>\n                    )}\n                </Drawer>\n            }\n        >\n            <div\n                style={{\n                    backgroundColor: '#777',\n                    color: 'white',\n                    height: '100%',\n                    padding: '30px',\n                    boxSizing: 'border-box',\n                }}\n            >\n                <Typography variant={'h2'}>Body content goes here.</Typography>\n            </div>\n        </DrawerLayout>\n    );\n};\n\ninDrawerLayout.story = { name: 'within a Drawer Layout' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/within-a-DrawerLayout.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/drawer",__IDS_TO_FRAMEWORKS__:{}});inDrawerLayout.story={name:"within a Drawer Layout"};var _module_stories_assign=function(){return(_module_stories_assign=Object.assign||function(t){for(var s,i=1,n=arguments.length;i<n;i++)for(var p in s=arguments[i])Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p]);return t}).apply(this,arguments)},drawerModule={title:constants.a+"/Drawer",component:react_components.Drawer,decorators:[utils.g,function(storyFn){return react_default.a.createElement("div",{style:{display:"flex",height:"100%",alignSelf:"flex-start",width:"100%",flex:"1 1 0px"}},storyFn())},dist.withA11y],parameters:_module_stories_assign(_module_stories_assign({},utils.f),{notes:{markdown:Object(utils.c)("Drawer.md")}})};__webpack_exports__.default=drawerModule},1875:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"getReadMeStory",(function(){return utils.d})),__webpack_require__.d(__webpack_exports__,"withBasicUsage",(function(){return withBasicUsage})),__webpack_require__.d(__webpack_exports__,"withCustomColors",(function(){return withCustomColors})),__webpack_require__.d(__webpack_exports__,"withNonTextAvatar",(function(){return withNonTextAvatar})),__webpack_require__.d(__webpack_exports__,"withMenuHeader",(function(){return withMenuHeader})),__webpack_require__.d(__webpack_exports__,"withMenuPlacementOptions",(function(){return withMenuPlacementOptions})),__webpack_require__.d(__webpack_exports__,"withCustomMenu",(function(){return withCustomMenu})),__webpack_require__.d(__webpack_exports__,"withFullConfig",(function(){return withFullConfig})),__webpack_require__.d(__webpack_exports__,"withinToolbar",(function(){return withinToolbar}));var react_components=__webpack_require__(5),constants=__webpack_require__(19),utils=__webpack_require__(14),dist=__webpack_require__(54),react=__webpack_require__(0),react_default=__webpack_require__.n(react),Avatar=__webpack_require__(716),Settings=__webpack_require__(1918),Email=__webpack_require__(1957),ExitToApp=__webpack_require__(1958),addon_actions_dist=__webpack_require__(15),addon_knobs_dist=__webpack_require__(2),withBasicUsage=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){var value=Object(addon_knobs_dist.text)("Avatar.value","AB"),avatar=react_default.a.createElement(Avatar.a,null,value);return react_default.a.createElement(react_components.UserMenu,{avatar:avatar,menuGroups:[{items:[{title:"Settings",icon:react_default.a.createElement(Settings.a,null),onClick:Object(addon_actions_dist.action)("click 'Settings'")},{title:"Contact Us",icon:react_default.a.createElement(Email.a,null),onClick:Object(addon_actions_dist.action)("click 'Contact Us'")},{title:"Log Out",icon:react_default.a.createElement(ExitToApp.a,{style:Object(utils.b)()}),onClick:Object(addon_actions_dist.action)("click 'Log Out'")}]}],onOpen:Object(addon_actions_dist.action)("open"),onClose:Object(addon_actions_dist.action)("close")})}),{__STORY__:"import React from 'react';\nimport { Avatar } from '@material-ui/core';\nimport { Email, ExitToApp, Settings } from '@material-ui/icons';\nimport { UserMenu } from '@pxblue/react-components';\nimport { action } from '@storybook/addon-actions';\nimport { text } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport { WITH_MIN_PROPS_STORY_NAME } from '../../src/constants';\nimport { getLeftToRightIconTransform } from '../../src/utils';\n\nexport const withBasicUsage = (): StoryFnReactReturnType => {\n    const value = text('Avatar.value', 'AB');\n    const avatar = <Avatar>{value}</Avatar>;\n    return (\n        <UserMenu\n            avatar={avatar}\n            menuGroups={[\n                {\n                    items: [\n                        {\n                            title: 'Settings',\n                            icon: <Settings />,\n                            onClick: action(\"click 'Settings'\"),\n                        },\n                        {\n                            title: 'Contact Us',\n                            icon: <Email />,\n                            onClick: action(\"click 'Contact Us'\"),\n                        },\n                        {\n                            title: 'Log Out',\n                            icon: <ExitToApp style={getLeftToRightIconTransform()} />,\n                            onClick: action(\"click 'Log Out'\"),\n                        },\n                    ],\n                },\n            ]}\n            onOpen={action('open')}\n            onClose={action('close')}\n        />\n    );\n};\n\nwithBasicUsage.story = { name: WITH_MIN_PROPS_STORY_NAME };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-basic-usage.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/user-menu",__IDS_TO_FRAMEWORKS__:{}}));withBasicUsage.story={name:constants.d};var makeStyles=__webpack_require__(456),colors_dist=__webpack_require__(9),withCustomColors=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){var classes=Object(makeStyles.a)({root:{color:Object(addon_knobs_dist.color)("fontColor",colors_dist.white[50],"Avatar"),backgroundColor:Object(addon_knobs_dist.color)("backgroundColor",colors_dist.blue[800],"Avatar")},paper:{backgroundColor:Object(addon_knobs_dist.color)("backgroundColor",colors_dist.white[50],"Menu")}})(),avatar=react_default.a.createElement(Avatar.a,{classes:{root:classes.root}},"CD");return react_default.a.createElement(react_components.UserMenu,{avatar:avatar,menuGroups:[{items:[{title:"Settings",icon:react_default.a.createElement(Settings.a,null),onClick:Object(addon_actions_dist.action)("click 'Settings'")},{title:"Contact Us",icon:react_default.a.createElement(Email.a,null),onClick:Object(addon_actions_dist.action)("click 'Contact Us'")},{title:"Log Out",icon:react_default.a.createElement(ExitToApp.a,{style:Object(utils.b)()}),onClick:Object(addon_actions_dist.action)("click 'Log Out'")}],fontColor:Object(addon_knobs_dist.color)("menuGroups.fontColor",colors_dist.black[500],"Menu"),iconColor:Object(addon_knobs_dist.color)("menuGroups.iconColor",colors_dist.black[500],"Menu")}],MenuProps:{classes:{paper:classes.paper}},onOpen:Object(addon_actions_dist.action)("open"),onClose:Object(addon_actions_dist.action)("close")})}),{__STORY__:"import { Avatar, makeStyles } from '@material-ui/core';\nimport * as Colors from '@pxblue/colors';\nimport { UserMenu } from '@pxblue/react-components';\nimport { action } from '@storybook/addon-actions';\nimport { color } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\nimport { Email, ExitToApp, Settings } from '@material-ui/icons';\nimport { getLeftToRightIconTransform } from '../../src/utils';\n\nexport const withCustomColors = (): StoryFnReactReturnType => {\n    const useStyles = makeStyles({\n        root: {\n            color: color('fontColor', Colors.white[50], 'Avatar'),\n            backgroundColor: color('backgroundColor', Colors.blue[800], 'Avatar'),\n        },\n        paper: {\n            backgroundColor: color('backgroundColor', Colors.white[50], 'Menu'),\n        },\n    });\n\n    const classes = useStyles();\n    const avatar = <Avatar classes={{ root: classes.root }}>CD</Avatar>;\n\n    return (\n        <UserMenu\n            avatar={avatar}\n            menuGroups={[\n                {\n                    items: [\n                        {\n                            title: 'Settings',\n                            icon: <Settings />,\n                            onClick: action(\"click 'Settings'\"),\n                        },\n                        {\n                            title: 'Contact Us',\n                            icon: <Email />,\n                            onClick: action(\"click 'Contact Us'\"),\n                        },\n                        {\n                            title: 'Log Out',\n                            icon: <ExitToApp style={getLeftToRightIconTransform()} />,\n                            onClick: action(\"click 'Log Out'\"),\n                        },\n                    ],\n                    fontColor: color('menuGroups.fontColor', Colors.black[500], 'Menu'),\n                    iconColor: color('menuGroups.iconColor', Colors.black[500], 'Menu'),\n                },\n            ]}\n            MenuProps={{ classes: { paper: classes.paper } }}\n            onOpen={action('open')}\n            onClose={action('close')}\n        />\n    );\n};\n\nwithCustomColors.story = { name: 'with custom colors' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-custom-colors.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/user-menu",__IDS_TO_FRAMEWORKS__:{}}));withCustomColors.story={name:"with custom colors"};var Pets=__webpack_require__(1959),with_non_text_avatar_addSourceDecorator=(__webpack_require__(12).withSource,__webpack_require__(12).addSource),tRex=__webpack_require__(713),withNonTextAvatar=with_non_text_avatar_addSourceDecorator((function(){var tRexAvatar=react_default.a.createElement(Avatar.a,{src:tRex,alt:"User Avatar"}),iconAvatar=react_default.a.createElement(Avatar.a,null,react_default.a.createElement(Pets.a,null));return react_default.a.createElement("div",{style:{display:"flex",width:"100px",justifyContent:"space-between"}},react_default.a.createElement(react_components.UserMenu,{avatar:tRexAvatar,menuGroups:[{items:[{title:"Settings",icon:react_default.a.createElement(Settings.a,null),onClick:Object(addon_actions_dist.action)("click 'Settings'")},{title:"Contact Us",icon:react_default.a.createElement(Email.a,null),onClick:Object(addon_actions_dist.action)("click 'Contact Us'")},{title:"Log Out",icon:react_default.a.createElement(ExitToApp.a,{style:Object(utils.b)()}),onClick:Object(addon_actions_dist.action)("click 'Log Out'")}]}],onOpen:Object(addon_actions_dist.action)("open"),onClose:Object(addon_actions_dist.action)("close")}),react_default.a.createElement(react_components.UserMenu,{avatar:iconAvatar,menuGroups:[{items:[{title:"Settings",icon:react_default.a.createElement(Settings.a,null),onClick:Object(addon_actions_dist.action)("click 'Settings'")},{title:"Contact Us",icon:react_default.a.createElement(Email.a,null),onClick:Object(addon_actions_dist.action)("click 'Contact Us'")},{title:"Log Out",icon:react_default.a.createElement(ExitToApp.a,{style:Object(utils.b)()}),onClick:Object(addon_actions_dist.action)("click 'Log Out'")}]}],onOpen:Object(addon_actions_dist.action)("open"),onClose:Object(addon_actions_dist.action)("close")}))}),{__STORY__:"import { Avatar } from '@material-ui/core';\nimport { UserMenu } from '@pxblue/react-components';\nimport { action } from '@storybook/addon-actions';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\nimport { Pets, Email, ExitToApp, Settings } from '@material-ui/icons';\nimport { getLeftToRightIconTransform } from '../../src/utils';\nconst tRex = require('../../assets/trex.jpeg');\n\nexport const withNonTextAvatar = (): StoryFnReactReturnType => {\n    const tRexAvatar = <Avatar src={tRex} alt={'User Avatar'} />;\n    const iconAvatar = (\n        <Avatar>\n            <Pets />\n        </Avatar>\n    );\n    return (\n        <div style={{ display: 'flex', width: '100px', justifyContent: 'space-between' }}>\n            <UserMenu\n                avatar={tRexAvatar}\n                menuGroups={[\n                    {\n                        items: [\n                            {\n                                title: 'Settings',\n                                icon: <Settings />,\n                                onClick: action(\"click 'Settings'\"),\n                            },\n                            {\n                                title: 'Contact Us',\n                                icon: <Email />,\n                                onClick: action(\"click 'Contact Us'\"),\n                            },\n                            {\n                                title: 'Log Out',\n                                icon: <ExitToApp style={getLeftToRightIconTransform()} />,\n                                onClick: action(\"click 'Log Out'\"),\n                            },\n                        ],\n                    },\n                ]}\n                onOpen={action('open')}\n                onClose={action('close')}\n            />\n            <UserMenu\n                avatar={iconAvatar}\n                menuGroups={[\n                    {\n                        items: [\n                            {\n                                title: 'Settings',\n                                icon: <Settings />,\n                                onClick: action(\"click 'Settings'\"),\n                            },\n                            {\n                                title: 'Contact Us',\n                                icon: <Email />,\n                                onClick: action(\"click 'Contact Us'\"),\n                            },\n                            {\n                                title: 'Log Out',\n                                icon: <ExitToApp style={getLeftToRightIconTransform()} />,\n                                onClick: action(\"click 'Log Out'\"),\n                            },\n                        ],\n                    },\n                ]}\n                onOpen={action('open')}\n                onClose={action('close')}\n            />\n        </div>\n    );\n};\n\nwithNonTextAvatar.story = { name: 'with non-text avatar' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-non-text-avatar.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/user-menu",__IDS_TO_FRAMEWORKS__:{}});withNonTextAvatar.story={name:"with non-text avatar"};__webpack_require__(12).withSource;var withMenuHeader=(0,__webpack_require__(12).addSource)((function(){var avatar=react_default.a.createElement(Avatar.a,null,"EM"),menuTitle=Object(addon_knobs_dist.text)("menuTitle","Menu Title"),menuSubtitle=Object(addon_knobs_dist.text)("menuSubtitle","Menu Subtitle");return react_default.a.createElement(react_components.UserMenu,{avatar:avatar,menuGroups:[{items:[{title:"Settings",icon:react_default.a.createElement(Settings.a,null),onClick:Object(addon_actions_dist.action)("click 'Settings'")},{title:"Contact Us",icon:react_default.a.createElement(Email.a,null),onClick:Object(addon_actions_dist.action)("click 'Contact Us'")},{title:"Log Out",icon:react_default.a.createElement(ExitToApp.a,{style:Object(utils.b)()}),onClick:Object(addon_actions_dist.action)("click 'Log Out'")}]}],menuTitle:menuTitle,menuSubtitle:menuSubtitle,onOpen:Object(addon_actions_dist.action)("open"),onClose:Object(addon_actions_dist.action)("close")})}),{__STORY__:"import { Avatar } from '@material-ui/core';\nimport { UserMenu } from '@pxblue/react-components';\nimport { action } from '@storybook/addon-actions';\nimport { text } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\nimport { Email, ExitToApp, Settings } from '@material-ui/icons';\nimport { getLeftToRightIconTransform } from '../../src/utils';\n\nexport const withMenuHeader = (): StoryFnReactReturnType => {\n    const avatar = <Avatar>EM</Avatar>;\n    const menuTitle = text('menuTitle', 'Menu Title');\n    const menuSubtitle = text('menuSubtitle', 'Menu Subtitle');\n    return (\n        <UserMenu\n            avatar={avatar}\n            menuGroups={[\n                {\n                    items: [\n                        {\n                            title: 'Settings',\n                            icon: <Settings />,\n                            onClick: action(\"click 'Settings'\"),\n                        },\n                        {\n                            title: 'Contact Us',\n                            icon: <Email />,\n                            onClick: action(\"click 'Contact Us'\"),\n                        },\n                        {\n                            title: 'Log Out',\n                            icon: <ExitToApp style={getLeftToRightIconTransform()} />,\n                            onClick: action(\"click 'Log Out'\"),\n                        },\n                    ],\n                },\n            ]}\n            menuTitle={menuTitle}\n            menuSubtitle={menuSubtitle}\n            onOpen={action('open')}\n            onClose={action('close')}\n        />\n    );\n};\n\nwithMenuHeader.story = { name: 'with a menu header' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-menu-header.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/user-menu",__IDS_TO_FRAMEWORKS__:{}});withMenuHeader.story={name:"with a menu header"};__webpack_require__(12).withSource;var withMenuPlacementOptions=(0,__webpack_require__(12).addSource)((function(){var anchorOriginHorizontal=Object(addon_knobs_dist.select)("MenuProps.anchorOrigin.horizontal",["left","center","right"],"left","Menu"),anchorOriginVertical=Object(addon_knobs_dist.select)("MenuProps.anchorOrigin.vertical",["top","center","bottom"],"top","Menu"),transformOriginHorizontal=Object(addon_knobs_dist.select)("MenuProps.transformOrigin.horizontal",["left","center","right"],"left","Menu"),transformOriginVertical=Object(addon_knobs_dist.select)("MenuProps.transformOrigin.vertical",["top","center","bottom"],"top","Menu");return react_default.a.createElement(react_components.UserMenu,{avatar:react_default.a.createElement(Avatar.a,null,"CD"),menuGroups:[{items:[{title:"Settings",icon:react_default.a.createElement(Settings.a,null),onClick:Object(addon_actions_dist.action)("click 'Settings'")},{title:"Contact Us",icon:react_default.a.createElement(Email.a,null),onClick:Object(addon_actions_dist.action)("click 'Contact Us'")},{title:"Log Out",icon:react_default.a.createElement(ExitToApp.a,{style:Object(utils.b)()}),onClick:Object(addon_actions_dist.action)("click 'Log Out'")}]}],MenuProps:{anchorOrigin:{horizontal:anchorOriginHorizontal,vertical:anchorOriginVertical},transformOrigin:{horizontal:transformOriginHorizontal,vertical:transformOriginVertical}},onOpen:Object(addon_actions_dist.action)("open"),onClose:Object(addon_actions_dist.action)("close")})}),{__STORY__:"import { Avatar } from '@material-ui/core';\nimport { UserMenu } from '@pxblue/react-components';\nimport { action } from '@storybook/addon-actions';\nimport { select } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\nimport { Email, ExitToApp, Settings } from '@material-ui/icons';\nimport { getLeftToRightIconTransform } from '../../src/utils';\n\nexport const withMenuPlacementOptions = (): StoryFnReactReturnType => {\n    const anchorOriginHorizontal = select(\n        'MenuProps.anchorOrigin.horizontal',\n        ['left', 'center', 'right'],\n        'left',\n        'Menu'\n    );\n    const anchorOriginVertical = select('MenuProps.anchorOrigin.vertical', ['top', 'center', 'bottom'], 'top', 'Menu');\n    const transformOriginHorizontal = select(\n        'MenuProps.transformOrigin.horizontal',\n        ['left', 'center', 'right'],\n        'left',\n        'Menu'\n    );\n    const transformOriginVertical = select(\n        'MenuProps.transformOrigin.vertical',\n        ['top', 'center', 'bottom'],\n        'top',\n        'Menu'\n    );\n\n    return (\n        <UserMenu\n            avatar={<Avatar>CD</Avatar>}\n            menuGroups={[\n                {\n                    items: [\n                        {\n                            title: 'Settings',\n                            icon: <Settings />,\n                            onClick: action(\"click 'Settings'\"),\n                        },\n                        {\n                            title: 'Contact Us',\n                            icon: <Email />,\n                            onClick: action(\"click 'Contact Us'\"),\n                        },\n                        {\n                            title: 'Log Out',\n                            icon: <ExitToApp style={getLeftToRightIconTransform()} />,\n                            onClick: action(\"click 'Log Out'\"),\n                        },\n                    ],\n                },\n            ]}\n            MenuProps={{\n                anchorOrigin: { horizontal: anchorOriginHorizontal, vertical: anchorOriginVertical },\n                transformOrigin: { horizontal: transformOriginHorizontal, vertical: transformOriginVertical },\n            }}\n            onOpen={action('open')}\n            onClose={action('close')}\n        />\n    );\n};\n\nwithMenuPlacementOptions.story = { name: 'with menu placement options' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-menu-placement-options.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/user-menu",__IDS_TO_FRAMEWORKS__:{}});withMenuPlacementOptions.story={name:"with menu placement options"};var Menu=__webpack_require__(325),Typography=__webpack_require__(110),Divider=__webpack_require__(685),MenuItem=__webpack_require__(1947),storybook_state_dist=__webpack_require__(467),with_custom_menu_addSourceDecorator=(__webpack_require__(12).withSource,__webpack_require__(12).addSource),EatonLogo=__webpack_require__(1871),with_custom_menu_tRex=__webpack_require__(713),store=new storybook_state_dist.Store({open:!1}),withCustomMenu=with_custom_menu_addSourceDecorator((function(){var avatar=react_default.a.createElement(Avatar.a,{src:with_custom_menu_tRex,alt:"User Avatar"}),open=function(){store.set({open:!0})},close=function(){store.set({open:!1})},menu=function(state){return react_default.a.createElement(Menu.a,{open:state.open,onClose:close},react_default.a.createElement("div",{key:"header",style:{position:"relative",padding:10}},react_default.a.createElement(Typography.a,{variant:"h6"},"Welcome, "),react_default.a.createElement(Typography.a,{style:{fontWeight:600,marginTop:"-10px"},variant:"h3"},"T-Rex"),react_default.a.createElement("div",{style:{position:"absolute",right:0,top:0,height:"100%",width:"100%",opacity:.2,backgroundSize:"cover",backgroundImage:"url("+with_custom_menu_tRex+")"}})),react_default.a.createElement(Divider.a,{key:"divider-1"}),react_default.a.createElement(MenuItem.a,{onClick:close,key:"account"},"My Account"),react_default.a.createElement(MenuItem.a,{onClick:close,key:"logout"},"Logout"),react_default.a.createElement(Divider.a,{key:"divider-2"}),react_default.a.createElement("img",{key:"footer",alt:"tRex",style:{textAlign:"center",padding:"12px 16px 0 16px",height:40},src:EatonLogo}))};return store.set({open:!1}),react_default.a.createElement(storybook_state_dist.State,{store:store},(function(state){return react_default.a.createElement(react_components.UserMenu,{avatar:avatar,onOpen:open,menu:menu(state)})}))}),{__STORY__:"import { Avatar, Divider, Menu, MenuItem, Typography } from '@material-ui/core';\nimport { UserMenu } from '@pxblue/react-components';\nimport { State, Store } from '@sambego/storybook-state';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\nconst EatonLogo = require('../../assets/EatonLogo.svg');\nconst tRex = require('../../assets/trex.jpeg');\n\ntype UserMenuState = {\n    open: boolean;\n};\nconst store = new Store<UserMenuState>({\n    open: false,\n});\n\nexport const withCustomMenu = (): StoryFnReactReturnType => {\n    const avatar = <Avatar src={tRex} alt={'User Avatar'} />;\n    const open = (): void => {\n        store.set({ open: true });\n    };\n    const close = (): void => {\n        store.set({ open: false });\n    };\n\n    const menu = (state: any): JSX.Element => (\n        <Menu open={state.open} onClose={close}>\n            <div key={'header'} style={{ position: 'relative', padding: 10 }}>\n                <Typography variant={'h6'}>Welcome, </Typography>\n                <Typography style={{ fontWeight: 600, marginTop: '-10px' }} variant={'h3'}>\n                    T-Rex\n                </Typography>\n                <div\n                    style={{\n                        position: 'absolute',\n                        right: 0,\n                        top: 0,\n                        height: '100%',\n                        width: '100%',\n                        opacity: 0.2,\n                        backgroundSize: 'cover',\n                        backgroundImage: `url(${tRex})`,\n                    }}\n                />\n            </div>\n            <Divider key={'divider-1'} />\n            <MenuItem onClick={close} key={'account'}>\n                My Account\n            </MenuItem>\n            <MenuItem onClick={close} key={'logout'}>\n                Logout\n            </MenuItem>\n            <Divider key={'divider-2'} />\n            <img\n                key={'footer'}\n                alt={'tRex'}\n                style={{ textAlign: 'center', padding: '12px 16px 0 16px', height: 40 }}\n                src={EatonLogo}\n            />\n        </Menu>\n    );\n\n    store.set({ open: false });\n\n    return (\n        <State store={store}>\n            {(state): JSX.Element => <UserMenu avatar={avatar} onOpen={open} menu={menu(state)} />}\n        </State>\n    );\n};\n\nwithCustomMenu.story = { name: 'with custom menu' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-custom-menu.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/user-menu",__IDS_TO_FRAMEWORKS__:{}});withCustomMenu.story={name:"with custom menu"};__webpack_require__(12).withSource;var withFullConfig=(0,__webpack_require__(12).addSource)((function(){var classes=Object(makeStyles.a)({root:{color:Object(addon_knobs_dist.color)("fontColor",colors_dist.white[50],"Avatar"),backgroundColor:Object(addon_knobs_dist.color)("backgroundColor",colors_dist.blue[800],"Avatar")},paper:{backgroundColor:Object(addon_knobs_dist.color)("backgroundColor",colors_dist.white[50],"Menu")}})(),avatar=react_default.a.createElement(Avatar.a,{classes:{root:classes.root}},Object(addon_knobs_dist.text)("Avatar.value","AB","Avatar")),menuTitle=Object(addon_knobs_dist.text)("menuTitle","Menu Title","Menu"),menuSubtitle=Object(addon_knobs_dist.text)("menuSubtitle","Menu Subtitle","Menu"),anchorOriginHorizontal=Object(addon_knobs_dist.select)("MenuProps.anchorOrigin.horizontal",["left","center","right"],"left","Menu"),anchorOriginVertical=Object(addon_knobs_dist.select)("MenuProps.anchorOrigin.vertical",["top","center","bottom"],"top","Menu"),transformOriginHorizontal=Object(addon_knobs_dist.select)("MenuProps.transformOrigin.horizontal",["left","center","right"],"left","Menu"),transformOriginVertical=Object(addon_knobs_dist.select)("MenuProps.transformOrigin.vertical",["top","center","bottom"],"top","Menu"),useBottomSheetAt=Object(addon_knobs_dist.number)("useBottomSheetAt",600,{range:!0,min:0,max:1e3,step:50},"Menu");return react_default.a.createElement(react_components.UserMenu,{avatar:avatar,menuGroups:[{items:[{title:"Settings",icon:react_default.a.createElement(Settings.a,null),onClick:Object(addon_actions_dist.action)("click 'Settings'")},{title:"Contact Us",icon:react_default.a.createElement(Email.a,null),onClick:Object(addon_actions_dist.action)("click 'Contact Us'")},{title:"Log Out",icon:react_default.a.createElement(ExitToApp.a,{style:Object(utils.b)()}),onClick:Object(addon_actions_dist.action)("click 'Log Out'")}],fontColor:Object(addon_knobs_dist.color)("menuGroups.fontColor",colors_dist.black[500],"Menu"),iconColor:Object(addon_knobs_dist.color)("menuGroups.iconColor",colors_dist.blue[800],"Menu"),title:Object(addon_knobs_dist.text)("menuGroups[0].title","Account Management","Menu")}],menuTitle:menuTitle,menuSubtitle:menuSubtitle,MenuProps:{classes:{paper:classes.paper},anchorOrigin:{horizontal:anchorOriginHorizontal,vertical:anchorOriginVertical},transformOrigin:{horizontal:transformOriginHorizontal,vertical:transformOriginVertical}},onOpen:Object(addon_actions_dist.action)("open"),onClose:Object(addon_actions_dist.action)("close"),useBottomSheetAt:useBottomSheetAt})}),{__STORY__:"import { Avatar, makeStyles } from '@material-ui/core';\nimport * as Colors from '@pxblue/colors';\nimport { UserMenu } from '@pxblue/react-components';\nimport { action } from '@storybook/addon-actions';\nimport { color, number, select, text } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\nimport { WITH_FULL_CONFIG_STORY_NAME } from '../../src/constants';\nimport { Email, ExitToApp, Settings } from '@material-ui/icons';\nimport { getLeftToRightIconTransform } from '../../src/utils';\n\nexport const withFullConfig = (): StoryFnReactReturnType => {\n    const useStyles = makeStyles({\n        root: {\n            color: color('fontColor', Colors.white[50], 'Avatar'),\n            backgroundColor: color('backgroundColor', Colors.blue[800], 'Avatar'),\n        },\n        paper: {\n            backgroundColor: color('backgroundColor', Colors.white[50], 'Menu'),\n        },\n    });\n\n    const classes = useStyles();\n    const avatar = <Avatar classes={{ root: classes.root }}>{text('Avatar.value', 'AB', 'Avatar')}</Avatar>;\n\n    const menuTitle = text('menuTitle', 'Menu Title', 'Menu');\n    const menuSubtitle = text('menuSubtitle', 'Menu Subtitle', 'Menu');\n\n    const anchorOriginHorizontal = select(\n        'MenuProps.anchorOrigin.horizontal',\n        ['left', 'center', 'right'],\n        'left',\n        'Menu'\n    );\n    const anchorOriginVertical = select('MenuProps.anchorOrigin.vertical', ['top', 'center', 'bottom'], 'top', 'Menu');\n    const transformOriginHorizontal = select(\n        'MenuProps.transformOrigin.horizontal',\n        ['left', 'center', 'right'],\n        'left',\n        'Menu'\n    );\n    const transformOriginVertical = select(\n        'MenuProps.transformOrigin.vertical',\n        ['top', 'center', 'bottom'],\n        'top',\n        'Menu'\n    );\n\n    const useBottomSheetAt = number(\n        'useBottomSheetAt',\n        600,\n        {\n            range: true,\n            min: 0,\n            max: 1000,\n            step: 50,\n        },\n        'Menu'\n    );\n\n    return (\n        <UserMenu\n            avatar={avatar}\n            menuGroups={[\n                {\n                    items: [\n                        {\n                            title: 'Settings',\n                            icon: <Settings />,\n                            onClick: action(\"click 'Settings'\"),\n                        },\n                        {\n                            title: 'Contact Us',\n                            icon: <Email />,\n                            onClick: action(\"click 'Contact Us'\"),\n                        },\n                        {\n                            title: 'Log Out',\n                            icon: <ExitToApp style={getLeftToRightIconTransform()} />,\n                            onClick: action(\"click 'Log Out'\"),\n                        },\n                    ],\n                    fontColor: color('menuGroups.fontColor', Colors.black[500], 'Menu'),\n                    iconColor: color('menuGroups.iconColor', Colors.blue[800], 'Menu'),\n                    title: text('menuGroups[0].title', 'Account Management', 'Menu'),\n                },\n            ]}\n            menuTitle={menuTitle}\n            menuSubtitle={menuSubtitle}\n            MenuProps={{\n                classes: { paper: classes.paper },\n                anchorOrigin: { horizontal: anchorOriginHorizontal, vertical: anchorOriginVertical },\n                transformOrigin: { horizontal: transformOriginHorizontal, vertical: transformOriginVertical },\n            }}\n            onOpen={action('open')}\n            onClose={action('close')}\n            useBottomSheetAt={useBottomSheetAt}\n        />\n    );\n};\n\nwithFullConfig.story = { name: WITH_FULL_CONFIG_STORY_NAME };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-full-config.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/user-menu",__IDS_TO_FRAMEWORKS__:{}});withFullConfig.story={name:constants.c};var AppBar=__webpack_require__(707),Toolbar=__webpack_require__(696),storybook_rtl_addon_dist=__webpack_require__(84),storybook_dark_mode_dist=__webpack_require__(53),withinToolbar=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){var useStyles=Object(makeStyles.a)({root:{height:40,minHeight:"initial"},title:{color:colors_dist.gray[600],fontSize:12,textAlign:"rtl"===Object(storybook_rtl_addon_dist.getDirection)()?"left":"right"}}),menuGroups=[{items:[{itemID:"1",title:"Settings",icon:react_default.a.createElement(Settings.a,null),onClick:Object(addon_actions_dist.action)("click 'Settings'")},{itemID:"2",title:"Contact Us",icon:react_default.a.createElement(Email.a,null),onClick:Object(addon_actions_dist.action)("click 'Contact Us'")},{itemID:"3",title:"Log Out",divider:!0,icon:react_default.a.createElement(ExitToApp.a,{style:Object(utils.b)()}),onClick:Object(addon_actions_dist.action)("click 'Log Out'")},{itemID:"4",title:"v1.03.54",InfoListItemProps:{classes:useStyles()}}]}];return react_default.a.createElement("div",{style:{width:"80%",height:150}},react_default.a.createElement(AppBar.a,{position:"relative",color:"primary",style:{marginTop:-32}},react_default.a.createElement(Toolbar.a,{style:{padding:"0 16px",minHeight:"unset",height:"4rem"}},react_default.a.createElement(Typography.a,{variant:"h6"},"Toolbar Title"),react_default.a.createElement(react_components.Spacer,{flex:1}),react_default.a.createElement(react_components.UserMenu,{avatar:react_default.a.createElement(Avatar.a,null),menuGroups:menuGroups,menuTitle:"Jane Doe",menuSubtitle:"Account Manager",onOpen:Object(addon_actions_dist.action)("open"),onClose:Object(addon_actions_dist.action)("close")}))),react_default.a.createElement("div",{style:{height:"100%",backgroundColor:Object(storybook_dark_mode_dist.useDarkMode)()?colors_dist.black[900]:colors_dist.white[50],padding:16}},react_default.a.createElement(Typography.a,{variant:"subtitle1"},"Body Content Goes Here")))}),{__STORY__:"import { AppBar, Avatar, makeStyles, Toolbar, Typography } from '@material-ui/core';\nimport { Spacer, UserMenu, UserMenuItem } from '@pxblue/react-components';\nimport { action } from '@storybook/addon-actions';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport { getDirection } from '@pxblue/storybook-rtl-addon';\nimport { getLeftToRightIconTransform } from '../../src/utils';\nimport React from 'react';\nimport * as Colors from '@pxblue/colors';\nimport { Email, ExitToApp, Settings } from '@material-ui/icons';\nimport { useDarkMode } from 'storybook-dark-mode';\n\nexport const withinToolbar = (): StoryFnReactReturnType => {\n    const useStyles = makeStyles({\n        root: {\n            height: 40,\n            minHeight: 'initial',\n        },\n        title: {\n            color: Colors.gray[600],\n            fontSize: 12,\n            textAlign: getDirection() === 'rtl' ? 'left' : 'right',\n        },\n    });\n\n    const menuItems: UserMenuItem[] = [\n        {\n            itemID: '1',\n            title: 'Settings',\n            icon: <Settings />,\n            onClick: action(\"click 'Settings'\"),\n        },\n        {\n            itemID: '2',\n            title: 'Contact Us',\n            icon: <Email />,\n            onClick: action(\"click 'Contact Us'\"),\n        },\n        {\n            itemID: '3',\n            title: 'Log Out',\n            divider: true,\n            icon: <ExitToApp style={getLeftToRightIconTransform()} />,\n            onClick: action(\"click 'Log Out'\"),\n        },\n        {\n            itemID: '4',\n            title: 'v1.03.54',\n            InfoListItemProps: {\n                classes: useStyles(),\n            },\n        },\n    ];\n\n    const menuGroups = [\n        {\n            items: menuItems,\n        },\n    ];\n\n    return (\n        <div style={{ width: '80%', height: 150 }}>\n            <AppBar position={'relative'} color={'primary'} style={{ marginTop: -32 }}>\n                <Toolbar style={{ padding: '0 16px', minHeight: 'unset', height: '4rem' }}>\n                    <Typography variant={'h6'}>Toolbar Title</Typography>\n                    <Spacer flex={1} />\n                    <UserMenu\n                        avatar={<Avatar />}\n                        menuGroups={menuGroups}\n                        menuTitle={'Jane Doe'}\n                        menuSubtitle={'Account Manager'}\n                        onOpen={action('open')}\n                        onClose={action('close')}\n                    />\n                </Toolbar>\n            </AppBar>\n            <div\n                style={{\n                    height: '100%',\n                    backgroundColor: useDarkMode() ? Colors.black[900] : Colors.white[50],\n                    padding: 16,\n                }}\n            >\n                <Typography variant={'subtitle1'}>Body Content Goes Here</Typography>\n            </div>\n        </div>\n    );\n};\n\nwithinToolbar.story = { name: 'within a toolbar' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/within-a-toolbar.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/user-menu",__IDS_TO_FRAMEWORKS__:{}}));withinToolbar.story={name:"within a toolbar"};var __assign=function(){return(__assign=Object.assign||function(t){for(var s,i=1,n=arguments.length;i<n;i++)for(var p in s=arguments[i])Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p]);return t}).apply(this,arguments)},userMenuModule={title:constants.a+"/User Menu",component:react_components.UserMenu,decorators:[utils.g,dist.withA11y],parameters:__assign(__assign({},utils.f),{notes:{markdown:__webpack_require__(683)}})};__webpack_exports__.default=userMenuModule},1876:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"getReadMeStory",(function(){return utils.d})),__webpack_require__.d(__webpack_exports__,"withBasicUsage",(function(){return withBasicUsage})),__webpack_require__.d(__webpack_exports__,"withNavIcon",(function(){return withNavIcon})),__webpack_require__.d(__webpack_exports__,"withCustomMenu",(function(){return withCustomMenu})),__webpack_require__.d(__webpack_exports__,"withMultipleMenuGroups",(function(){return withMultipleMenuGroups})),__webpack_require__.d(__webpack_exports__,"withMenuPlacementOptions",(function(){return withMenuPlacementOptions})),__webpack_require__.d(__webpack_exports__,"withFullConfig",(function(){return withFullConfig}));var react_components=__webpack_require__(5),constants=__webpack_require__(19),utils=__webpack_require__(14),dist=__webpack_require__(54),react=__webpack_require__(0),react_default=__webpack_require__.n(react),addon_knobs_dist=__webpack_require__(2),AppBar=__webpack_require__(707),addon_actions_dist=__webpack_require__(15),withBasicUsage=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){var menuGroups=[{items:[{title:"Item 1",onClick:Object(addon_actions_dist.action)("Item 1 selected")},{title:"Item 2",onClick:Object(addon_actions_dist.action)("Item 2 selected")},{title:"Item 3",onClick:Object(addon_actions_dist.action)("Item 3 selected")}]}];return react_default.a.createElement(AppBar.a,{color:"primary"},react_default.a.createElement(react_components.DropdownToolbar,{title:Object(addon_knobs_dist.text)("title","Title"),subtitle:Object(addon_knobs_dist.text)("subtitle","Subtitle"),menuGroups:menuGroups}))}),{__STORY__:"import { DropdownToolbar } from '@pxblue/react-components';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\nimport { WITH_MIN_PROPS_STORY_NAME } from '../../src/constants';\nimport { text } from '@storybook/addon-knobs';\nimport { AppBar } from '@material-ui/core';\nimport { action } from '@storybook/addon-actions';\n\nexport const withBasicUsage = (): StoryFnReactReturnType => {\n    const menuItems = [\n        { title: 'Item 1', onClick: action('Item 1 selected') },\n        { title: 'Item 2', onClick: action('Item 2 selected') },\n        { title: 'Item 3', onClick: action('Item 3 selected') },\n    ];\n\n    const menuGroups = [\n        {\n            items: menuItems,\n        },\n    ];\n\n    return (\n        <AppBar color={'primary'}>\n            <DropdownToolbar\n                title={text('title', 'Title')}\n                subtitle={text('subtitle', 'Subtitle')}\n                menuGroups={menuGroups}\n            ></DropdownToolbar>\n        </AppBar>\n    );\n};\n\nwithBasicUsage.story = { name: WITH_MIN_PROPS_STORY_NAME };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-basic-usage.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/dropdown-toolbar",__IDS_TO_FRAMEWORKS__:{}}));withBasicUsage.story={name:constants.d};var Menu=__webpack_require__(1915),ArrowBack=__webpack_require__(1941),withNavIcon=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){var menuGroups=[{items:[{title:"Item 1",onClick:Object(addon_actions_dist.action)("Item 1 selected")},{title:"Item 2",onClick:Object(addon_actions_dist.action)("Item 2 selected")},{title:"Item 3",onClick:Object(addon_actions_dist.action)("Item 3 selected")}]}];return react_default.a.createElement(AppBar.a,{color:"primary"},react_default.a.createElement(react_components.DropdownToolbar,{title:Object(addon_knobs_dist.text)("title","Title"),subtitle:Object(addon_knobs_dist.text)("subtitle","Subtitle"),navigationIcon:function(icon){switch(icon){case"<Menu />":return react_default.a.createElement(Menu.a,null);case"<ArrowBack />":return react_default.a.createElement(ArrowBack.a,{style:Object(utils.b)()});case"none":default:return}}(Object(addon_knobs_dist.select)("navigationIcon",["none","<Menu />","<ArrowBack />"],"<Menu />")),menuGroups:menuGroups}))}),{__STORY__:"import { DropdownToolbar } from '@pxblue/react-components';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\nimport { text, select } from '@storybook/addon-knobs';\nimport { AppBar } from '@material-ui/core';\nimport { ArrowBack, Menu } from '@material-ui/icons';\nimport { action } from '@storybook/addon-actions';\nimport { getLeftToRightIconTransform } from '../../src/utils';\n\nexport const withNavIcon = (): StoryFnReactReturnType => {\n    const menuItems = [\n        { title: 'Item 1', onClick: action('Item 1 selected') },\n        { title: 'Item 2', onClick: action('Item 2 selected') },\n        { title: 'Item 3', onClick: action('Item 3 selected') },\n    ];\n\n    const menuGroups = [\n        {\n            items: menuItems,\n        },\n    ];\n\n    const getIcon = (icon: string): JSX.Element | undefined => {\n        switch (icon) {\n            case '<Menu />':\n                return <Menu />;\n            case '<ArrowBack />':\n                return <ArrowBack style={getLeftToRightIconTransform()} />;\n            case 'none':\n            default:\n                return undefined;\n        }\n    };\n\n    return (\n        <AppBar color={'primary'}>\n            <DropdownToolbar\n                title={text('title', 'Title')}\n                subtitle={text('subtitle', 'Subtitle')}\n                navigationIcon={getIcon(select('navigationIcon', ['none', '<Menu />', '<ArrowBack />'], '<Menu />'))}\n                menuGroups={menuGroups}\n            ></DropdownToolbar>\n        </AppBar>\n    );\n};\n\nwithNavIcon.story = { name: 'with nav icon' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-nav-icon.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/dropdown-toolbar",__IDS_TO_FRAMEWORKS__:{}}));withNavIcon.story={name:"with nav icon"};var Menu_Menu=__webpack_require__(325),Business=__webpack_require__(1942),House=__webpack_require__(1943),Apartment=__webpack_require__(1944),colors_dist=__webpack_require__(9),withCustomMenu=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){return react_default.a.createElement(AppBar.a,{color:"primary"},react_default.a.createElement(react_components.DropdownToolbar,{title:"Title",subtitle:"Subtitle",menu:react_default.a.createElement(Menu_Menu.a,{open:!0},react_default.a.createElement(react_components.InfoListItem,{title:"Atlanta",icon:react_default.a.createElement(Business.a,null),iconColor:colors_dist.blue[500],onClick:Object(addon_actions_dist.action)("Atlanta selected"),dense:!0}),react_default.a.createElement(react_components.InfoListItem,{title:"Pittsburgh",icon:react_default.a.createElement(House.a,null),iconColor:colors_dist.red[500],statusColor:colors_dist.red[500],onClick:Object(addon_actions_dist.action)("Pittsburgh selected"),dense:!0}),react_default.a.createElement(react_components.InfoListItem,{title:"New York",icon:react_default.a.createElement(Apartment.a,null),iconColor:colors_dist.blue[500],onClick:Object(addon_actions_dist.action)("New York selected"),dense:!0}))}))}),{__STORY__:"import { DropdownToolbar, InfoListItem } from '@pxblue/react-components';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\nimport { AppBar, Menu } from '@material-ui/core';\nimport { Business, House, Apartment } from '@material-ui/icons';\nimport * as Colors from '@pxblue/colors';\nimport { action } from '@storybook/addon-actions';\n\nexport const withCustomMenu = (): StoryFnReactReturnType => {\n    const menu = (): JSX.Element => (\n        <Menu open={true}>\n            <InfoListItem\n                title={'Atlanta'}\n                icon={<Business />}\n                iconColor={Colors.blue[500]}\n                onClick={action('Atlanta selected')}\n                dense\n            />\n            <InfoListItem\n                title={'Pittsburgh'}\n                icon={<House />}\n                iconColor={Colors.red[500]}\n                statusColor={Colors.red[500]}\n                onClick={action('Pittsburgh selected')}\n                dense\n            />\n            <InfoListItem\n                title={'New York'}\n                icon={<Apartment />}\n                iconColor={Colors.blue[500]}\n                onClick={action('New York selected')}\n                dense\n            />\n        </Menu>\n    );\n\n    return (\n        <AppBar color={'primary'}>\n            <DropdownToolbar title={'Title'} subtitle={'Subtitle'} menu={menu()} />\n        </AppBar>\n    );\n};\n\nwithCustomMenu.story = { name: 'with custom menu' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-custom-menu.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/dropdown-toolbar",__IDS_TO_FRAMEWORKS__:{}}));withCustomMenu.story={name:"with custom menu"};__webpack_require__(12).withSource;var withMultipleMenuGroups=(0,__webpack_require__(12).addSource)((function(){var menuGroups=[{title:"MenuGroup 1",items:[{title:"Item 1",onClick:Object(addon_actions_dist.action)("Item 1 selected")},{title:"Item 2",onClick:Object(addon_actions_dist.action)("Item 2 selected")}]},{title:"MenuGroup 2",items:[{title:"Item 3",onClick:Object(addon_actions_dist.action)("Item 3 selected")},{title:"Item 4",onClick:Object(addon_actions_dist.action)("Item 4 selected")}]}];return react_default.a.createElement(AppBar.a,{color:"primary"},react_default.a.createElement(react_components.DropdownToolbar,{title:Object(addon_knobs_dist.text)("title","Title"),subtitle:Object(addon_knobs_dist.text)("subtitle","Subtitle"),menuGroups:menuGroups}))}),{__STORY__:"import { DropdownToolbar } from '@pxblue/react-components';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\nimport { text } from '@storybook/addon-knobs';\nimport { AppBar } from '@material-ui/core';\nimport { action } from '@storybook/addon-actions';\n\nexport const withMultipleMenuGroups = (): StoryFnReactReturnType => {\n    const menuItems = [\n        { title: 'Item 1', onClick: action('Item 1 selected') },\n        { title: 'Item 2', onClick: action('Item 2 selected') },\n    ];\n\n    const menuItems2 = [\n        { title: 'Item 3', onClick: action('Item 3 selected') },\n        { title: 'Item 4', onClick: action('Item 4 selected') },\n    ];\n\n    const menuGroups = [\n        {\n            title: 'MenuGroup 1',\n            items: menuItems,\n        },\n        {\n            title: 'MenuGroup 2',\n            items: menuItems2,\n        },\n    ];\n\n    return (\n        <AppBar color={'primary'}>\n            <DropdownToolbar\n                title={text('title', 'Title')}\n                subtitle={text('subtitle', 'Subtitle')}\n                menuGroups={menuGroups}\n            ></DropdownToolbar>\n        </AppBar>\n    );\n};\n\nwithMultipleMenuGroups.story = { name: 'with multiple menu groups' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-multiple-menu-groups.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/dropdown-toolbar",__IDS_TO_FRAMEWORKS__:{}});withMultipleMenuGroups.story={name:"with multiple menu groups"};__webpack_require__(12).withSource;var withMenuPlacementOptions=(0,__webpack_require__(12).addSource)((function(){var anchorOriginHorizontal=Object(addon_knobs_dist.select)("menuProps.anchorOrigin.horizontal",["left","center","right"],"left","Menu"),anchorOriginVertical=Object(addon_knobs_dist.select)("menuProps.anchorOrigin.vertical",["top","center","bottom"],"top","Menu"),transformOriginHorizontal=Object(addon_knobs_dist.select)("menuProps.transformOrigin.horizontal",["left","center","right"],"left","Menu"),transformOriginVertical=Object(addon_knobs_dist.select)("menuProps.transformOrigin.vertical",["top","center","bottom"],"top","Menu"),menuGroups=[{items:[{title:"Item 1",onClick:Object(addon_actions_dist.action)("Item 1 selected")},{title:"Item 2",onClick:Object(addon_actions_dist.action)("Item 2 selected")},{title:"Item 3",onClick:Object(addon_actions_dist.action)("Item 3 selected")}]}];return react_default.a.createElement(AppBar.a,{color:"primary"},react_default.a.createElement(react_components.DropdownToolbar,{title:"Title",subtitle:"Subtitle",menuGroups:menuGroups,MenuProps:{anchorOrigin:{horizontal:anchorOriginHorizontal,vertical:anchorOriginVertical},transformOrigin:{horizontal:transformOriginHorizontal,vertical:transformOriginVertical}}}))}),{__STORY__:"import { DropdownToolbar } from '@pxblue/react-components';\nimport { action } from '@storybook/addon-actions';\nimport { select } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\nimport { AppBar } from '@material-ui/core';\n\nexport const withMenuPlacementOptions = (): StoryFnReactReturnType => {\n    const anchorOriginHorizontal = select(\n        'menuProps.anchorOrigin.horizontal',\n        ['left', 'center', 'right'],\n        'left',\n        'Menu'\n    );\n    const anchorOriginVertical = select('menuProps.anchorOrigin.vertical', ['top', 'center', 'bottom'], 'top', 'Menu');\n    const transformOriginHorizontal = select(\n        'menuProps.transformOrigin.horizontal',\n        ['left', 'center', 'right'],\n        'left',\n        'Menu'\n    );\n    const transformOriginVertical = select(\n        'menuProps.transformOrigin.vertical',\n        ['top', 'center', 'bottom'],\n        'top',\n        'Menu'\n    );\n\n    const menuItems = [\n        { title: 'Item 1', onClick: action('Item 1 selected') },\n        { title: 'Item 2', onClick: action('Item 2 selected') },\n        { title: 'Item 3', onClick: action('Item 3 selected') },\n    ];\n\n    const menuGroups = [\n        {\n            items: menuItems,\n        },\n    ];\n\n    return (\n        <AppBar color={'primary'}>\n            <DropdownToolbar\n                title={'Title'}\n                subtitle={'Subtitle'}\n                menuGroups={menuGroups}\n                MenuProps={{\n                    anchorOrigin: { horizontal: anchorOriginHorizontal, vertical: anchorOriginVertical },\n                    transformOrigin: { horizontal: transformOriginHorizontal, vertical: transformOriginVertical },\n                }}\n            />\n        </AppBar>\n    );\n};\n\nwithMenuPlacementOptions.story = { name: 'with menu placement options' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-menu-placement-options.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/dropdown-toolbar",__IDS_TO_FRAMEWORKS__:{}});withMenuPlacementOptions.story={name:"with menu placement options"};var makeStyles=__webpack_require__(456),createStyles=__webpack_require__(457),useTheme=__webpack_require__(32),Home=__webpack_require__(1916),Work=__webpack_require__(1917),Settings=__webpack_require__(1918),clsx_m=__webpack_require__(3),storybook_rtl_addon_dist=__webpack_require__(84),with_full_config_addSourceDecorator=(__webpack_require__(12).withSource,__webpack_require__(12).addSource),useStyles=Object(makeStyles.a)((function(theme){return Object(createStyles.a)({marginRight24:{marginRight:theme.spacing(3)},cursorPointer:{cursor:"pointer"},marginLeft24:{marginLeft:theme.spacing(3)}})})),withFullConfig=with_full_config_addSourceDecorator((function(){var theme=Object(useTheme.a)(),classes=useStyles(theme),direction=Object(storybook_rtl_addon_dist.getDirection)(),menuGroups=[{items:[{title:"Item 1",onClick:Object(addon_actions_dist.action)("Item 1 selected")},{title:"Item 2",onClick:Object(addon_actions_dist.action)("Item 2 selected")},{title:"Item 3",onClick:Object(addon_actions_dist.action)("Item 3 selected")}]}],icons=[react_default.a.createElement(Home.a,{className:Object(clsx_m.default)("",classes.cursorPointer),onClick:Object(addon_actions_dist.action)("home icon clicked..."),key:"homeIcon"}),react_default.a.createElement(Work.a,{className:Object(clsx_m.default)("rtl"===direction?classes.marginRight24:classes.marginLeft24,classes.cursorPointer),onClick:Object(addon_actions_dist.action)("work icon clicked..."),key:"workIcon"}),react_default.a.createElement(Settings.a,{className:Object(clsx_m.default)("rtl"===direction?classes.marginRight24:classes.marginLeft24,classes.cursorPointer),onClick:Object(addon_actions_dist.action)("settings icon clicked..."),key:"settingsIcon"})];return react_default.a.createElement(AppBar.a,{color:"primary"},react_default.a.createElement(react_components.DropdownToolbar,{title:Object(addon_knobs_dist.text)("title","Title"),subtitle:Object(addon_knobs_dist.text)("subtitle","Subtitle"),navigationIcon:function(icon){switch(icon){case"<Menu />":return react_default.a.createElement(Menu.a,{onClick:Object(addon_actions_dist.action)("menu icon clicked...")});case"<ArrowBack />":return react_default.a.createElement(ArrowBack.a,{onClick:Object(addon_actions_dist.action)("back arrow icon clicked..."),style:Object(utils.b)()});case"none":default:return}}(Object(addon_knobs_dist.select)("navigationIcon",["none","<Menu />","<ArrowBack />"],"<Menu />")),menuGroups:menuGroups},react_default.a.createElement(react_components.Spacer,null),icons.slice(0,Object(addon_knobs_dist.number)("Number of Icons",3,{range:!0,min:0,max:3,step:1}))))}),{__STORY__:"import { DropdownToolbar, Spacer } from '@pxblue/react-components';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\nimport { WITH_FULL_CONFIG_STORY_NAME } from '../../src/constants';\nimport { text, select, number } from '@storybook/addon-knobs';\nimport { AppBar, Theme, makeStyles, createStyles, useTheme } from '@material-ui/core';\nimport { Menu, ArrowBack, Home, Work, Settings } from '@material-ui/icons';\nimport { action } from '@storybook/addon-actions';\nimport clsx from 'clsx';\nimport { getDirection } from '@pxblue/storybook-rtl-addon';\nimport { getLeftToRightIconTransform } from '../../src/utils';\n\nconst useStyles = makeStyles((theme: Theme) =>\n    createStyles({\n        marginRight24: {\n            marginRight: theme.spacing(3),\n        },\n        cursorPointer: {\n            cursor: 'pointer',\n        },\n        marginLeft24: {\n            marginLeft: theme.spacing(3),\n        },\n    })\n);\n\nexport const withFullConfig = (): StoryFnReactReturnType => {\n    const theme = useTheme();\n    const classes = useStyles(theme);\n    const direction = getDirection();\n    const menuItems = [\n        { title: 'Item 1', onClick: action('Item 1 selected') },\n        { title: 'Item 2', onClick: action('Item 2 selected') },\n        { title: 'Item 3', onClick: action('Item 3 selected') },\n    ];\n\n    const menuGroups = [\n        {\n            items: menuItems,\n        },\n    ];\n\n    const getIcon = (icon: string): JSX.Element | undefined => {\n        switch (icon) {\n            case '<Menu />':\n                return <Menu onClick={action('menu icon clicked...')} />;\n            case '<ArrowBack />':\n                return (\n                    <ArrowBack onClick={action('back arrow icon clicked...')} style={getLeftToRightIconTransform()} />\n                );\n            case 'none':\n            default:\n                return undefined;\n        }\n    };\n\n    const icons: JSX.Element[] = [\n        <Home\n            className={clsx(direction === 'rtl' ? '' : '', classes.cursorPointer)}\n            onClick={action('home icon clicked...')}\n            key={'homeIcon'}\n        />,\n        <Work\n            className={clsx(direction === 'rtl' ? classes.marginRight24 : classes.marginLeft24, classes.cursorPointer)}\n            onClick={action('work icon clicked...')}\n            key={'workIcon'}\n        />,\n        <Settings\n            className={clsx(direction === 'rtl' ? classes.marginRight24 : classes.marginLeft24, classes.cursorPointer)}\n            onClick={action('settings icon clicked...')}\n            key={'settingsIcon'}\n        />,\n    ];\n\n    return (\n        <AppBar color={'primary'}>\n            <DropdownToolbar\n                title={text('title', 'Title')}\n                subtitle={text('subtitle', 'Subtitle')}\n                navigationIcon={getIcon(select('navigationIcon', ['none', '<Menu />', '<ArrowBack />'], '<Menu />'))}\n                menuGroups={menuGroups}\n            >\n                <Spacer />\n                {icons.slice(0, number('Number of Icons', 3, { range: true, min: 0, max: 3, step: 1 }))}\n            </DropdownToolbar>\n        </AppBar>\n    );\n};\n\nwithFullConfig.story = { name: WITH_FULL_CONFIG_STORY_NAME };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-full-config.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/dropdown-toolbar",__IDS_TO_FRAMEWORKS__:{}});withFullConfig.story={name:constants.c};var __assign=function(){return(__assign=Object.assign||function(t){for(var s,i=1,n=arguments.length;i<n;i++)for(var p in s=arguments[i])Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p]);return t}).apply(this,arguments)},dropdownToolbarModule={title:constants.a+"/Dropdown Toolbar",component:react_components.DropdownToolbar,decorators:[utils.g,dist.withA11y],parameters:__assign(__assign({},utils.f),{notes:{markdown:Object(utils.c)("DropdownToolbar.md")}})};__webpack_exports__.default=dropdownToolbarModule},1877:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"getReadMeStory",(function(){return utils.d})),__webpack_require__.d(__webpack_exports__,"withBasicUsage",(function(){return withBasicUsage})),__webpack_require__.d(__webpack_exports__,"withValueUnits",(function(){return withValueUnits})),__webpack_require__.d(__webpack_exports__,"withChannelValueChildren",(function(){return withChannelValueChildren})),__webpack_require__.d(__webpack_exports__,"withIconColors",(function(){return withIconColors})),__webpack_require__.d(__webpack_exports__,"withFullConfig",(function(){return withFullConfig})),__webpack_require__.d(__webpack_exports__,"inBanner",(function(){return inBanner}));var react_components=__webpack_require__(5),react=__webpack_require__(0),react_default=__webpack_require__.n(react),constants=__webpack_require__(19),utils=__webpack_require__(14),dist=__webpack_require__(54),icons_mui=__webpack_require__(33),addon_knobs_dist=__webpack_require__(2),withBasicUsage=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){return react_default.a.createElement(react_components.Hero,{icon:react_default.a.createElement(icons_mui.GradeA,{fontSize:"inherit"}),label:Object(addon_knobs_dist.text)("label","Efficiency")})}),{__STORY__:"import { GradeA } from '@pxblue/icons-mui';\nimport { Hero } from '@pxblue/react-components';\nimport { text } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\nimport { WITH_MIN_PROPS_STORY_NAME } from '../../src/constants';\n\nexport const withBasicUsage = (): StoryFnReactReturnType => (\n    <Hero icon={<GradeA fontSize={'inherit'} />} label={text('label', 'Efficiency')} />\n);\n\nwithBasicUsage.story = { name: WITH_MIN_PROPS_STORY_NAME };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-basic-usage.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/hero",__IDS_TO_FRAMEWORKS__:{}}));withBasicUsage.story={name:constants.d};__webpack_require__(12).withSource;var withValueUnits=(0,__webpack_require__(12).addSource)((function(){return react_default.a.createElement(react_components.Hero,{icon:react_default.a.createElement(icons_mui.GradeB,{fontSize:"inherit"}),label:"Efficiency",value:Object(addon_knobs_dist.text)("value","88"),units:Object(addon_knobs_dist.text)("units","%")})}),{__STORY__:"import { GradeB } from '@pxblue/icons-mui';\nimport { Hero } from '@pxblue/react-components';\nimport { text } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\n\nexport const withValueUnits = (): StoryFnReactReturnType => (\n    <Hero\n        icon={<GradeB fontSize={'inherit'} />}\n        label={'Efficiency'}\n        value={text('value', '88')}\n        units={text('units', '%')}\n    />\n);\n\nwithValueUnits.story = { name: 'with value and units' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-value-and-units.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/hero",__IDS_TO_FRAMEWORKS__:{}});withValueUnits.story={name:"with value and units"};var Schedule=__webpack_require__(1948),withChannelValueChildren=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){return react_default.a.createElement(react_components.Hero,{label:"Duration",icon:react_default.a.createElement(Schedule.a,{fontSize:"inherit"})},react_default.a.createElement(react_components.ChannelValue,{fontSize:"large",value:Object(addon_knobs_dist.number)("ChannelValue.hours",1),units:"h"}),react_default.a.createElement(react_components.ChannelValue,{fontSize:"large",value:Object(addon_knobs_dist.number)("ChannelValue.minutes",27),units:"m"}))}),{__STORY__:"import { Schedule } from '@material-ui/icons';\nimport { ChannelValue, Hero } from '@pxblue/react-components';\nimport { number } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\n\nexport const withChannelValueChildren = (): StoryFnReactReturnType => (\n    <Hero label={'Duration'} icon={<Schedule fontSize={'inherit'} />}>\n        <ChannelValue fontSize={'large'} value={number('ChannelValue.hours', 1)} units={'h'} />\n        <ChannelValue fontSize={'large'} value={number('ChannelValue.minutes', 27)} units={'m'} />\n    </Hero>\n);\n\nwithChannelValueChildren.story = { name: 'with Channel Value children' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-channelValue-children.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/hero",__IDS_TO_FRAMEWORKS__:{}}));withChannelValueChildren.story={name:"with Channel Value children"};var colors_dist=__webpack_require__(9),withIconColors=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){return react_default.a.createElement(react_components.Hero,{iconBackgroundColor:Object(addon_knobs_dist.color)("iconBackgroundColor",colors_dist.red[500]),icon:react_default.a.createElement(icons_mui.Temp,{fontSize:"inherit",htmlColor:Object(addon_knobs_dist.color)("icon.htmlColor",colors_dist.white[50])}),label:"Temperature",value:"38",units:"°C"})}),{__STORY__:"import * as Colors from '@pxblue/colors';\nimport { Temp } from '@pxblue/icons-mui';\nimport { Hero } from '@pxblue/react-components';\nimport { color } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\n\nexport const withIconColors = (): StoryFnReactReturnType => (\n    <Hero\n        iconBackgroundColor={color('iconBackgroundColor', Colors.red[500])}\n        icon={<Temp fontSize={'inherit'} htmlColor={color('icon.htmlColor', Colors.white[50])} />}\n        label={'Temperature'}\n        value={'38'}\n        units={'°C'}\n    />\n);\n\nwithIconColors.story = { name: 'with icon colors' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-icon-colors.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/hero",__IDS_TO_FRAMEWORKS__:{}}));withIconColors.story={name:"with icon colors"};var addon_actions_dist=__webpack_require__(15),TrendingUp=__webpack_require__(107),TrendingUp_default=__webpack_require__.n(TrendingUp),withFullConfig=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){return react_default.a.createElement(react_components.Hero,{label:Object(addon_knobs_dist.text)("label","Velocity"),units:Object(addon_knobs_dist.text)("units","RPM"),onClick:Object(addon_actions_dist.action)("clicked"),value:Object(addon_knobs_dist.text)("value","470"),valueIcon:Object(addon_knobs_dist.boolean)("Show Value Icon",!0)?react_default.a.createElement(TrendingUp_default.a,{style:Object(utils.b)()}):void 0,iconBackgroundColor:Object(addon_knobs_dist.color)("iconBackgroundColor",colors_dist.blue[500]),icon:react_default.a.createElement(icons_mui.Fan,{fontSize:"inherit",htmlColor:Object(addon_knobs_dist.color)("icon.htmlColor",colors_dist.white[50])}),iconSize:Object(addon_knobs_dist.number)("iconSize",35),fontSize:Object(addon_knobs_dist.select)("fontSize",["normal","small"],"normal")})}),{__STORY__:"import * as Colors from '@pxblue/colors';\nimport { Hero } from '@pxblue/react-components';\nimport { action } from '@storybook/addon-actions';\nimport { boolean, color, number, text, select } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\nimport { Fan } from '@pxblue/icons-mui';\nimport TrendingUpIcon from '@material-ui/icons/TrendingUp';\nimport { WITH_FULL_CONFIG_STORY_NAME } from '../../src/constants';\nimport { getLeftToRightIconTransform } from '../../src/utils';\n\nexport const withFullConfig = (): StoryFnReactReturnType => (\n    <Hero\n        label={text('label', 'Velocity')}\n        units={text('units', 'RPM')}\n        onClick={action('clicked')}\n        value={text('value', '470')}\n        valueIcon={\n            boolean('Show Value Icon', true) ? <TrendingUpIcon style={getLeftToRightIconTransform()} /> : undefined\n        }\n        iconBackgroundColor={color('iconBackgroundColor', Colors.blue[500])}\n        icon={<Fan fontSize={'inherit'} htmlColor={color('icon.htmlColor', Colors.white[50])} />}\n        iconSize={number('iconSize', 35)}\n        fontSize={select('fontSize', ['normal', 'small'], 'normal')}\n    />\n);\n\nwithFullConfig.story = { name: WITH_FULL_CONFIG_STORY_NAME };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-full-config.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/hero",__IDS_TO_FRAMEWORKS__:{}}));withFullConfig.story={name:constants.c};__webpack_require__(12).withSource;var inBanner=(0,__webpack_require__(12).addSource)((function(){var heroes=[react_default.a.createElement(react_components.Hero,{key:"hero1",icon:react_default.a.createElement(icons_mui.GradeA,{fontSize:"inherit",htmlColor:colors_dist.green[500]}),label:"Healthy",value:96,units:"/100"}),react_default.a.createElement(react_components.Hero,{key:"hero2",icon:react_default.a.createElement(icons_mui.CurrentCircled,{fontSize:"inherit",htmlColor:colors_dist.yellow[500]}),label:"Load",value:"90",units:"%",fontSize:"normal"}),react_default.a.createElement(react_components.Hero,{key:"hero3",icon:react_default.a.createElement(icons_mui.Temp,{fontSize:"inherit",htmlColor:colors_dist.green[500]}),label:"Temp",value:55,units:"C"}),react_default.a.createElement(react_components.Hero,{key:"hero4",icon:react_default.a.createElement(icons_mui.Battery,{fontSize:"inherit",htmlColor:colors_dist.green[500]}),label:"Battery",value:96,units:"/100"})],numberDisplayed=Object(addon_knobs_dist.number)("count",4,{range:!0,min:0,max:4,step:1}),bannerWidth=Object(addon_knobs_dist.number)("width",400,{range:!0,min:350,max:600,step:50});return react_default.a.createElement(react_components.HeroBanner,{style:{width:bannerWidth,border:"solid 1px "+colors_dist.gray[200],borderRadius:4}},heroes.slice(0,numberDisplayed))}),{__STORY__:"import * as Colors from '@pxblue/colors';\nimport { CurrentCircled, GradeA, Battery, Temp } from '@pxblue/icons-mui';\nimport { Hero, HeroBanner } from '@pxblue/react-components';\nimport { number } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\n\nexport const inBanner = (): StoryFnReactReturnType => {\n    const heroes = [\n        <Hero\n            key={'hero1'}\n            icon={<GradeA fontSize={'inherit'} htmlColor={Colors.green[500]} />}\n            label={'Healthy'}\n            value={96}\n            units={'/100'}\n        />,\n        <Hero\n            key={'hero2'}\n            icon={<CurrentCircled fontSize={'inherit'} htmlColor={Colors.yellow[500]} />}\n            label={'Load'}\n            value={'90'}\n            units={'%'}\n            fontSize={'normal'}\n        />,\n        <Hero\n            key={'hero3'}\n            icon={<Temp fontSize={'inherit'} htmlColor={Colors.green[500]} />}\n            label={'Temp'}\n            value={55}\n            units={'C'}\n        />,\n        <Hero\n            key={'hero4'}\n            icon={<Battery fontSize={'inherit'} htmlColor={Colors.green[500]} />}\n            label={'Battery'}\n            value={96}\n            units={'/100'}\n        />,\n    ];\n    const numberDisplayed = number('count', 4, { range: true, min: 0, max: 4, step: 1 });\n    const bannerWidth = number('width', 400, { range: true, min: 350, max: 600, step: 50 });\n    return (\n        <HeroBanner style={{ width: bannerWidth, border: `solid 1px ${Colors.gray[200]}`, borderRadius: 4 }}>\n            {heroes.slice(0, numberDisplayed)}\n        </HeroBanner>\n    );\n};\n\ninBanner.story = { name: 'within a Hero Banner' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/within-a-HeroBanner.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/hero",__IDS_TO_FRAMEWORKS__:{}});inBanner.story={name:"within a Hero Banner"};var __assign=function(){return(__assign=Object.assign||function(t){for(var s,i=1,n=arguments.length;i<n;i++)for(var p in s=arguments[i])Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p]);return t}).apply(this,arguments)},heroModule={title:constants.a+"/Hero",component:react_components.Hero,decorators:[utils.g,function(storyFn){return react_default.a.createElement("div",{style:{alignItems:"center",display:"flex",height:"100%"}},storyFn())},dist.withA11y],parameters:__assign(__assign({},utils.f),{notes:{markdown:Object(utils.c)("Hero.md")}})};__webpack_exports__.default=heroModule},1878:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"getReadMeStory",(function(){return utils.d})),__webpack_require__.d(__webpack_exports__,"withBasicUsage",(function(){return withBasicUsage})),__webpack_require__.d(__webpack_exports__,"withCustomHeader",(function(){return withCustomHeader})),__webpack_require__.d(__webpack_exports__,"withActions",(function(){return withActions})),__webpack_require__.d(__webpack_exports__,"withHeroes",(function(){return withHeroes})),__webpack_require__.d(__webpack_exports__,"withScoreBadge",(function(){return withScoreBadge})),__webpack_require__.d(__webpack_exports__,"withFullConfig",(function(){return withFullConfig}));var react_components=__webpack_require__(5),constants=__webpack_require__(19),utils=__webpack_require__(14),dist=__webpack_require__(54),List=__webpack_require__(460),ListItem=__webpack_require__(458),ListItemText=__webpack_require__(688),addon_knobs_dist=__webpack_require__(2),react=__webpack_require__(0),react_default=__webpack_require__.n(react),withBasicUsage=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){return react_default.a.createElement(react_components.ScoreCard,{style:{width:400,flex:"0 0 auto"},headerTitle:Object(addon_knobs_dist.text)("headerTitle","Card Title")},react_default.a.createElement(List.a,null,react_default.a.createElement(ListItem.a,null,react_default.a.createElement(ListItemText.a,{primary:"Body Content"}))))}),{__STORY__:"import { List, ListItem, ListItemText } from '@material-ui/core';\nimport { ScoreCard } from '@pxblue/react-components';\nimport { text } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\nimport { WITH_MIN_PROPS_STORY_NAME } from '../../src/constants';\n\nexport const withBasicUsage = (): StoryFnReactReturnType => (\n    <ScoreCard style={{ width: 400, flex: '0 0 auto' }} headerTitle={text('headerTitle', 'Card Title')}>\n        <List>\n            <ListItem>\n                <ListItemText primary={'Body Content'} />\n            </ListItem>\n        </List>\n    </ScoreCard>\n);\n\nwithBasicUsage.story = { name: WITH_MIN_PROPS_STORY_NAME };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-basic-usage.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/score-card",__IDS_TO_FRAMEWORKS__:{}}));withBasicUsage.story={name:constants.d};var colors_dist=__webpack_require__(9),with_custom_header_addSourceDecorator=(__webpack_require__(12).withSource,__webpack_require__(12).addSource),backgroundImage=__webpack_require__(200),withCustomHeader=with_custom_header_addSourceDecorator((function(){return react_default.a.createElement(react_components.ScoreCard,{style:{width:400,flex:"0 0 auto"},headerTitle:Object(addon_knobs_dist.text)("headerTitle","Card Title"),headerSubtitle:Object(addon_knobs_dist.text)("headerSubtitle","Card Subtitle"),headerInfo:Object(addon_knobs_dist.text)("headerInfo","4 Devices"),headerColor:Object(addon_knobs_dist.color)("headerColor",colors_dist.blue[500]),headerFontColor:Object(addon_knobs_dist.color)("headerFontColor",colors_dist.white[50]),headerBackgroundImage:backgroundImage},react_default.a.createElement(List.a,null,react_default.a.createElement(ListItem.a,null,react_default.a.createElement(ListItemText.a,{primary:"Body Content"}))))}),{__STORY__:"import { List, ListItem, ListItemText } from '@material-ui/core';\nimport * as Colors from '@pxblue/colors';\nimport { ScoreCard } from '@pxblue/react-components';\nimport { color, text } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\n\nconst backgroundImage = require('../../assets/topology_40.png');\n\nexport const withCustomHeader = (): StoryFnReactReturnType => (\n    <ScoreCard\n        style={{ width: 400, flex: '0 0 auto' }}\n        headerTitle={text('headerTitle', 'Card Title')}\n        headerSubtitle={text('headerSubtitle', 'Card Subtitle')}\n        headerInfo={text('headerInfo', '4 Devices')}\n        headerColor={color('headerColor', Colors.blue[500])}\n        headerFontColor={color('headerFontColor', Colors.white[50])}\n        headerBackgroundImage={backgroundImage}\n    >\n        <List>\n            <ListItem>\n                <ListItemText primary={'Body Content'} />\n            </ListItem>\n        </List>\n    </ScoreCard>\n);\n\nwithCustomHeader.story = { name: 'with custom header' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-custom-header.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/score-card",__IDS_TO_FRAMEWORKS__:{}});withCustomHeader.story={name:"with custom header"};var Search=__webpack_require__(1926),Mail=__webpack_require__(1951),Notifications=__webpack_require__(1952),Favorite=__webpack_require__(1953),Cloud=__webpack_require__(1954),MoreVert=__webpack_require__(1955),addon_actions_dist=__webpack_require__(15),with_actions_addSourceDecorator=(__webpack_require__(12).withSource,__webpack_require__(12).addSource),with_actions_backgroundImage=__webpack_require__(200),actionRow=react_default.a.createElement(List.a,{style:{padding:0}},react_default.a.createElement(react_components.InfoListItem,{dense:!0,chevron:!0,title:"View Location",hidePadding:!0,onClick:Object(addon_actions_dist.action)("view location")})),actionItems=[react_default.a.createElement(Search.a,{onClick:Object(addon_actions_dist.action)("clicked search"),key:"search"}),react_default.a.createElement(Mail.a,{onClick:Object(addon_actions_dist.action)("clicked mail"),key:"mail"}),react_default.a.createElement(Notifications.a,{onClick:Object(addon_actions_dist.action)("clicked alarms"),key:"notifications"}),react_default.a.createElement(Favorite.a,{onClick:Object(addon_actions_dist.action)("clicked favorite"),key:"favorite"}),react_default.a.createElement(Cloud.a,{onClick:Object(addon_actions_dist.action)("clicked cloud"),key:"cloud"}),react_default.a.createElement(MoreVert.a,{onClick:Object(addon_actions_dist.action)("clicked more"),key:"morevert"})],withActions=with_actions_addSourceDecorator((function(){return react_default.a.createElement(react_components.ScoreCard,{style:{width:400,flex:"0 0 auto"},headerTitle:"Substation 3",headerSubtitle:"High Humidity Alarm",headerInfo:"4 Devices",headerColor:colors_dist.blue[500],headerFontColor:colors_dist.white[50],headerBackgroundImage:with_actions_backgroundImage,actionItems:actionItems,actionLimit:Object(addon_knobs_dist.number)("actionLimit",3,{range:!0,min:1,max:6,step:1}),actionRow:actionRow},react_default.a.createElement(List.a,null,react_default.a.createElement(ListItem.a,null,react_default.a.createElement(ListItemText.a,{primary:"Body Content"}))))}),{__STORY__:"import { List, ListItem, ListItemText } from '@material-ui/core';\nimport { Cloud, Favorite, Mail, MoreVert, Notifications, Search } from '@material-ui/icons';\nimport * as Colors from '@pxblue/colors';\nimport { ScoreCard, InfoListItem } from '@pxblue/react-components';\nimport { action } from '@storybook/addon-actions';\nimport { number } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\n\nconst backgroundImage = require('../../assets/topology_40.png');\n\nexport const actionRow = (\n    <List style={{ padding: 0 }}>\n        <InfoListItem dense chevron title={'View Location'} hidePadding onClick={action('view location')} />\n    </List>\n);\n\nexport const actionItems = [\n    <Search onClick={action('clicked search')} key={'search'} />,\n    <Mail onClick={action('clicked mail')} key={'mail'} />,\n    <Notifications onClick={action('clicked alarms')} key={'notifications'} />,\n    <Favorite onClick={action('clicked favorite')} key={'favorite'} />,\n    <Cloud onClick={action('clicked cloud')} key={'cloud'} />,\n    <MoreVert onClick={action('clicked more')} key={'morevert'} />,\n];\n\nexport const withActions = (): StoryFnReactReturnType => (\n    <ScoreCard\n        style={{ width: 400, flex: '0 0 auto' }}\n        headerTitle={'Substation 3'}\n        headerSubtitle={'High Humidity Alarm'}\n        headerInfo={'4 Devices'}\n        headerColor={Colors.blue[500]}\n        headerFontColor={Colors.white[50]}\n        headerBackgroundImage={backgroundImage}\n        actionItems={actionItems}\n        actionLimit={number('actionLimit', 3, { range: true, min: 1, max: 6, step: 1 })}\n        actionRow={actionRow}\n    >\n        <List>\n            <ListItem>\n                <ListItemText primary={'Body Content'} />\n            </ListItem>\n        </List>\n    </ScoreCard>\n);\n\nwithActions.story = { name: 'with actions' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-actions.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/score-card",__IDS_TO_FRAMEWORKS__:{}});withActions.story={name:"with actions"};var icons_mui=__webpack_require__(33),with_heroes_addSourceDecorator=(__webpack_require__(12).withSource,__webpack_require__(12).addSource),with_heroes_backgroundImage=__webpack_require__(200),heroes=[react_default.a.createElement(react_components.Hero,{key:"hero1",icon:react_default.a.createElement(icons_mui.Temp,{fontSize:"inherit",htmlColor:colors_dist.black[500]}),label:"Temperature",iconSize:48,iconBackgroundColor:colors_dist.white[50],value:98,units:"°F",fontSize:"normal"}),react_default.a.createElement(react_components.Hero,{key:"hero2",icon:react_default.a.createElement(icons_mui.Moisture,{fontSize:"inherit",htmlColor:colors_dist.blue[300]}),label:"Humidity",value:54,iconBackgroundColor:colors_dist.white[50],units:"%",iconSize:48,fontSize:"normal"})],withHeroes=with_heroes_addSourceDecorator((function(){return react_default.a.createElement(react_components.ScoreCard,{style:{width:400,flex:"0 0 auto"},headerTitle:"Substation 3",headerSubtitle:"High Humidity Alarm",headerInfo:"4 Devices",headerColor:colors_dist.blue[500],headerFontColor:colors_dist.white[50],headerBackgroundImage:with_heroes_backgroundImage,actionItems:[react_default.a.createElement(MoreVert.a,{onClick:Object(addon_actions_dist.action)("clicked more"),key:"morevert"})],actionRow:actionRow,badge:react_default.a.createElement(react_components.HeroBanner,null,heroes.slice(0,Object(addon_knobs_dist.number)("Number of Heroes",1,{range:!0,min:0,max:2,step:1}))),badgeOffset:0},react_default.a.createElement(List.a,null,react_default.a.createElement(ListItem.a,null,react_default.a.createElement(ListItemText.a,{primary:"Body Content"}))))}),{__STORY__:"import { List, ListItem, ListItemText } from '@material-ui/core';\nimport { MoreVert } from '@material-ui/icons';\nimport * as Colors from '@pxblue/colors';\nimport { Moisture as Humidity, Temp } from '@pxblue/icons-mui';\nimport { Hero, HeroBanner, ScoreCard } from '@pxblue/react-components';\nimport { action } from '@storybook/addon-actions';\nimport { number } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\nimport { actionRow } from './with-actions';\n\nconst backgroundImage = require('../../assets/topology_40.png');\n\nexport const heroes: JSX.Element[] = [\n    <Hero\n        key={'hero1'}\n        icon={<Temp fontSize={'inherit'} htmlColor={Colors.black[500]} />}\n        label={'Temperature'}\n        iconSize={48}\n        iconBackgroundColor={Colors.white[50]}\n        value={98}\n        units={'°F'}\n        fontSize={'normal'}\n    />,\n    <Hero\n        key={'hero2'}\n        icon={<Humidity fontSize={'inherit'} htmlColor={Colors.blue[300]} />}\n        label={'Humidity'}\n        value={54}\n        iconBackgroundColor={Colors.white[50]}\n        units={'%'}\n        iconSize={48}\n        fontSize={'normal'}\n    />,\n];\n\nexport const withHeroes = (): StoryFnReactReturnType => (\n    <ScoreCard\n        style={{ width: 400, flex: '0 0 auto' }}\n        headerTitle={'Substation 3'}\n        headerSubtitle={'High Humidity Alarm'}\n        headerInfo={'4 Devices'}\n        headerColor={Colors.blue[500]}\n        headerFontColor={Colors.white[50]}\n        headerBackgroundImage={backgroundImage}\n        actionItems={[<MoreVert onClick={action('clicked more')} key={'morevert'} />]}\n        actionRow={actionRow}\n        badge={\n            <HeroBanner>\n                {heroes.slice(0, number('Number of Heroes', 1, { range: true, min: 0, max: 2, step: 1 }))}\n            </HeroBanner>\n        }\n        badgeOffset={0}\n    >\n        <List>\n            <ListItem>\n                <ListItemText primary={'Body Content'} />\n            </ListItem>\n        </List>\n    </ScoreCard>\n);\n\nwithHeroes.story = { name: 'with heroes' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-heroes.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/score-card",__IDS_TO_FRAMEWORKS__:{}});withHeroes.story={name:"with heroes"};var makeStyles=__webpack_require__(456),ListAlt=__webpack_require__(1956),storybook_dark_mode_dist=__webpack_require__(53),with_score_badge_addSourceDecorator=(__webpack_require__(12).withSource,__webpack_require__(12).addSource),with_score_badge_backgroundImage=__webpack_require__(200),withScoreBadge=with_score_badge_addSourceDecorator((function(){var classes=Object(makeStyles.a)({title:{fontWeight:400}})();return react_default.a.createElement(react_components.ScoreCard,{style:{width:400,flex:"0 0 auto"},headerTitle:"Substation 3",headerSubtitle:"Normal",headerInfo:"4 Devices",headerFontColor:colors_dist.white[50],headerBackgroundImage:with_score_badge_backgroundImage,actionItems:[react_default.a.createElement(MoreVert.a,{onClick:Object(addon_actions_dist.action)("clicked more"),key:"morevert"})],actionRow:actionRow,badge:react_default.a.createElement(react_components.HeroBanner,null,react_default.a.createElement(react_components.Hero,{icon:react_default.a.createElement(icons_mui.GradeA,{fontSize:"inherit",htmlColor:colors_dist.green[500]}),label:"Grade",iconSize:72,iconBackgroundColor:Object(storybook_dark_mode_dist.useDarkMode)()?colors_dist.black[900]:colors_dist.white[50],value:"98",units:"/100",fontSize:"normal"})),badgeOffset:Object(addon_knobs_dist.number)("badgeOffset",-52)},react_default.a.createElement(List.a,{style:{padding:".5rem 0"}},react_default.a.createElement(react_components.InfoListItem,{dense:!0,style:{height:"2.25rem"},title:"0 Alarms",icon:react_default.a.createElement(Notifications.a,{color:"inherit"}),classes:{title:classes.title}}),react_default.a.createElement(react_components.InfoListItem,{dense:!0,style:{height:"2.25rem"},fontColor:Object(storybook_dark_mode_dist.useDarkMode)()?colors_dist.blue[300]:colors_dist.blue[500],iconColor:Object(storybook_dark_mode_dist.useDarkMode)()?colors_dist.blue[300]:colors_dist.blue[500],title:"1 Event",icon:react_default.a.createElement(ListAlt.a,{color:"inherit",style:Object(utils.b)()})}),react_default.a.createElement(react_components.InfoListItem,{dense:!0,style:{height:"2.25rem"},title:"Online",icon:react_default.a.createElement(Cloud.a,{color:"inherit"}),classes:{title:classes.title}})))}),{__STORY__:"import { List } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { Cloud, ListAlt, MoreVert, Notifications } from '@material-ui/icons';\nimport * as Colors from '@pxblue/colors';\nimport { GradeA } from '@pxblue/icons-mui';\nimport { Hero, HeroBanner, InfoListItem, ScoreCard } from '@pxblue/react-components';\nimport { action } from '@storybook/addon-actions';\nimport { number } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport { actionRow } from './with-actions';\nimport React from 'react';\nimport { useDarkMode } from 'storybook-dark-mode';\nimport { getLeftToRightIconTransform } from '../../src/utils';\n\nconst backgroundImage = require('../../assets/topology_40.png');\n\nexport const withScoreBadge = (): StoryFnReactReturnType => {\n    const useStyles = makeStyles({\n        title: {\n            fontWeight: 400,\n        },\n    });\n    const classes = useStyles();\n\n    return (\n        <ScoreCard\n            style={{ width: 400, flex: '0 0 auto' }}\n            headerTitle={'Substation 3'}\n            headerSubtitle={'Normal'}\n            headerInfo={'4 Devices'}\n            headerFontColor={Colors.white[50]}\n            headerBackgroundImage={backgroundImage}\n            actionItems={[<MoreVert onClick={action('clicked more')} key={'morevert'} />]}\n            actionRow={actionRow}\n            badge={\n                <HeroBanner>\n                    <Hero\n                        icon={<GradeA fontSize={'inherit'} htmlColor={Colors.green[500]} />}\n                        label={'Grade'}\n                        iconSize={72}\n                        iconBackgroundColor={useDarkMode() ? Colors.black[900] : Colors.white[50]}\n                        value={'98'}\n                        units={'/100'}\n                        fontSize={'normal'}\n                    />\n                </HeroBanner>\n            }\n            badgeOffset={number('badgeOffset', -52)}\n        >\n            <List style={{ padding: '.5rem 0' }}>\n                <InfoListItem\n                    dense\n                    style={{ height: '2.25rem' }}\n                    title={'0 Alarms'}\n                    icon={<Notifications color={'inherit'} />}\n                    classes={{ title: classes.title }}\n                />\n                <InfoListItem\n                    dense\n                    style={{ height: '2.25rem' }}\n                    fontColor={useDarkMode() ? Colors.blue[300] : Colors.blue[500]}\n                    iconColor={useDarkMode() ? Colors.blue[300] : Colors.blue[500]}\n                    title={'1 Event'}\n                    icon={<ListAlt color={'inherit'} style={getLeftToRightIconTransform()} />}\n                />\n                <InfoListItem\n                    dense\n                    style={{ height: '2.25rem' }}\n                    title={'Online'}\n                    icon={<Cloud color={'inherit'} />}\n                    classes={{ title: classes.title }}\n                />\n            </List>\n        </ScoreCard>\n    );\n};\n\nwithScoreBadge.story = { name: 'with score badge' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-score-badge.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/score-card",__IDS_TO_FRAMEWORKS__:{}});withScoreBadge.story={name:"with score badge"};__webpack_require__(12).withSource;var with_full_config_addSourceDecorator=__webpack_require__(12).addSource,with_full_config_backgroundImage=__webpack_require__(200),withFullConfig=with_full_config_addSourceDecorator((function(){var classes=Object(makeStyles.a)({title:{fontWeight:400}})();return react_default.a.createElement(react_components.ScoreCard,{style:{width:400,flex:"0 0 auto"},headerTitle:Object(addon_knobs_dist.text)("headerTitle","Substation 3"),headerSubtitle:Object(addon_knobs_dist.text)("headerSubtitle","High Humidity Alarm"),headerInfo:Object(addon_knobs_dist.text)("headerInfo","4 Devices"),headerColor:Object(addon_knobs_dist.color)("headerColor",colors_dist.blue[500]),headerFontColor:Object(addon_knobs_dist.color)("headerFontColor",colors_dist.white[50]),headerBackgroundImage:Object(addon_knobs_dist.boolean)("headerBackgroundImage",!0)?with_full_config_backgroundImage:void 0,actionLimit:Object(addon_knobs_dist.number)("actionLimit",3,{range:!0,min:1,max:6,step:1}),actionItems:actionItems,actionRow:actionRow,badge:react_default.a.createElement(react_components.HeroBanner,null,heroes.slice(0,Object(addon_knobs_dist.number)("Number of Heroes",1,{range:!0,min:0,max:2,step:1}))),badgeOffset:Object(addon_knobs_dist.number)("badgeOffset",-40)},react_default.a.createElement(List.a,{style:{padding:".5rem 0"}},react_default.a.createElement(react_components.InfoListItem,{dense:!0,style:{height:"2.25rem"},title:"0 Alarms",icon:react_default.a.createElement(Notifications.a,{color:"inherit"}),classes:{title:classes.title}}),react_default.a.createElement(react_components.InfoListItem,{dense:!0,style:{height:"2.25rem"},fontColor:Object(storybook_dark_mode_dist.useDarkMode)()?colors_dist.blue[300]:colors_dist.blue[500],iconColor:Object(storybook_dark_mode_dist.useDarkMode)()?colors_dist.blue[300]:colors_dist.blue[500],title:"1 Event",icon:react_default.a.createElement(ListAlt.a,{color:"inherit",style:Object(utils.b)()})}),react_default.a.createElement(react_components.InfoListItem,{dense:!0,style:{height:"2.25rem"},title:"Online",icon:react_default.a.createElement(Cloud.a,{color:"inherit"}),classes:{title:classes.title}})))}),{__STORY__:"import { List } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { Cloud, ListAlt, Notifications } from '@material-ui/icons';\nimport * as Colors from '@pxblue/colors';\nimport { HeroBanner, InfoListItem, ScoreCard } from '@pxblue/react-components';\nimport { boolean, color, number, text } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\nimport { WITH_FULL_CONFIG_STORY_NAME } from '../../src/constants';\nimport { actionItems, actionRow } from './with-actions';\nimport { useDarkMode } from 'storybook-dark-mode';\nimport { heroes } from './with-heroes';\nimport { getLeftToRightIconTransform } from '../../src/utils';\n\nconst backgroundImage = require('../../assets/topology_40.png');\n\nexport const withFullConfig = (): StoryFnReactReturnType => {\n    const useStyles = makeStyles({\n        title: {\n            fontWeight: 400,\n        },\n    });\n    const classes = useStyles();\n\n    return (\n        <ScoreCard\n            style={{ width: 400, flex: '0 0 auto' }}\n            headerTitle={text('headerTitle', 'Substation 3')}\n            headerSubtitle={text('headerSubtitle', 'High Humidity Alarm')}\n            headerInfo={text('headerInfo', '4 Devices')}\n            headerColor={color('headerColor', Colors.blue[500])}\n            headerFontColor={color('headerFontColor', Colors.white[50])}\n            headerBackgroundImage={boolean('headerBackgroundImage', true) ? backgroundImage : undefined}\n            actionLimit={number('actionLimit', 3, { range: true, min: 1, max: 6, step: 1 })}\n            actionItems={actionItems}\n            actionRow={actionRow}\n            badge={\n                <HeroBanner>\n                    {heroes.slice(0, number('Number of Heroes', 1, { range: true, min: 0, max: 2, step: 1 }))}\n                </HeroBanner>\n            }\n            badgeOffset={number('badgeOffset', -40)}\n        >\n            <List style={{ padding: '.5rem 0' }}>\n                <InfoListItem\n                    dense\n                    style={{ height: '2.25rem' }}\n                    title={'0 Alarms'}\n                    icon={<Notifications color={'inherit'} />}\n                    classes={{ title: classes.title }}\n                />\n                <InfoListItem\n                    dense\n                    style={{ height: '2.25rem' }}\n                    fontColor={useDarkMode() ? Colors.blue[300] : Colors.blue[500]}\n                    iconColor={useDarkMode() ? Colors.blue[300] : Colors.blue[500]}\n                    title={'1 Event'}\n                    icon={<ListAlt color={'inherit'} style={getLeftToRightIconTransform()} />}\n                />\n                <InfoListItem\n                    dense\n                    style={{ height: '2.25rem' }}\n                    title={'Online'}\n                    icon={<Cloud color={'inherit'} />}\n                    classes={{ title: classes.title }}\n                />\n            </List>\n        </ScoreCard>\n    );\n};\n\nwithFullConfig.story = { name: WITH_FULL_CONFIG_STORY_NAME };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-full-config.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/score-card",__IDS_TO_FRAMEWORKS__:{}});withFullConfig.story={name:constants.c};var __assign=function(){return(__assign=Object.assign||function(t){for(var s,i=1,n=arguments.length;i<n;i++)for(var p in s=arguments[i])Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p]);return t}).apply(this,arguments)},scorecardModule={title:constants.a+"/Score Card",component:react_components.ScoreCard,decorators:[utils.g,dist.withA11y],parameters:__assign(__assign({},utils.f),{notes:{markdown:Object(utils.c)("ScoreCard.md")}})};__webpack_exports__.default=scorecardModule},1879:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"getReadMeStory",(function(){return utils.d})),__webpack_require__.d(__webpack_exports__,"withBasicUsage",(function(){return withBasicUsage})),__webpack_require__.d(__webpack_exports__,"withUnits",(function(){return withUnits})),__webpack_require__.d(__webpack_exports__,"withIcon",(function(){return withIcon})),__webpack_require__.d(__webpack_exports__,"withFontSize",(function(){return withFontSize})),__webpack_require__.d(__webpack_exports__,"withFullConfig",(function(){return withFullConfig}));var react_components=__webpack_require__(5),constants=__webpack_require__(19),utils=__webpack_require__(14),dist=__webpack_require__(54),addon_knobs_dist=__webpack_require__(2),react=__webpack_require__(0),react_default=__webpack_require__.n(react),withBasicUsage=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){return react_default.a.createElement(react_components.ChannelValue,{value:Object(addon_knobs_dist.text)("value",Object(addon_knobs_dist.text)("value","123"))})}),{__STORY__:"import { ChannelValue } from '@pxblue/react-components';\nimport { text } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\nimport { WITH_MIN_PROPS_STORY_NAME } from '../../src/constants';\n\nexport const withBasicUsage = (): StoryFnReactReturnType => (\n    <ChannelValue value={text('value', text('value', '123'))} />\n);\n\nwithBasicUsage.story = { name: WITH_MIN_PROPS_STORY_NAME };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-basic-usage.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/channel-value",__IDS_TO_FRAMEWORKS__:{}}));withBasicUsage.story={name:constants.d};__webpack_require__(12).withSource;var withUnits=(0,__webpack_require__(12).addSource)((function(){return react_default.a.createElement(react_components.ChannelValue,{value:"123",units:Object(addon_knobs_dist.text)("units","hz")})}),{__STORY__:"import { ChannelValue } from '@pxblue/react-components';\nimport { text } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\n\nexport const withUnits = (): StoryFnReactReturnType => <ChannelValue value={'123'} units={text('units', 'hz')} />;\n\nwithUnits.story = { name: 'with units' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-units.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/channel-value",__IDS_TO_FRAMEWORKS__:{}});withUnits.story={name:"with units"};var TrendingUp=__webpack_require__(107),TrendingUp_default=__webpack_require__.n(TrendingUp),colors_dist=__webpack_require__(9),withIcon=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){return react_default.a.createElement(react_components.ChannelValue,{value:"123",units:"hz",icon:react_default.a.createElement(TrendingUp_default.a,{htmlColor:Object(addon_knobs_dist.color)("icon.htmlColor",colors_dist.red[500]),style:Object(utils.b)()})})}),{__STORY__:"import Trend from '@material-ui/icons/TrendingUp';\nimport * as Colors from '@pxblue/colors';\nimport { ChannelValue } from '@pxblue/react-components';\nimport { color } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport { getLeftToRightIconTransform } from '../../src/utils';\nimport React from 'react';\n\nexport const withIcon = (): StoryFnReactReturnType => (\n    <ChannelValue\n        value={'123'}\n        units={'hz'}\n        icon={<Trend htmlColor={color('icon.htmlColor', Colors.red[500])} style={getLeftToRightIconTransform()} />}\n    />\n);\n\nwithIcon.story = { name: 'with icon' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-icon.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/channel-value",__IDS_TO_FRAMEWORKS__:{}}));withIcon.story={name:"with icon"};__webpack_require__(12).withSource;var withFontSize=(0,__webpack_require__(12).addSource)((function(){return react_default.a.createElement(react_components.ChannelValue,{value:"123",units:"hz",icon:react_default.a.createElement(TrendingUp_default.a,{htmlColor:colors_dist.red[500],style:Object(utils.b)()}),fontSize:Object(addon_knobs_dist.number)("fontSize",30)})}),{__STORY__:"import Trend from '@material-ui/icons/TrendingUp';\nimport * as Colors from '@pxblue/colors';\nimport { ChannelValue } from '@pxblue/react-components';\nimport { number } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport { getLeftToRightIconTransform } from '../../src/utils';\nimport React from 'react';\n\nexport const withFontSize = (): StoryFnReactReturnType => (\n    <ChannelValue\n        value={'123'}\n        units={'hz'}\n        icon={<Trend htmlColor={Colors.red[500]} style={getLeftToRightIconTransform()} />}\n        fontSize={number('fontSize', 30)}\n    />\n);\n\nwithFontSize.story = { name: 'with fontSize' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-fontSize.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/channel-value",__IDS_TO_FRAMEWORKS__:{}});withFontSize.story={name:"with fontSize"};__webpack_require__(12).withSource;var withFullConfig=(0,__webpack_require__(12).addSource)((function(){var value=Object(addon_knobs_dist.text)("value","123"),units=Object(addon_knobs_dist.text)("units","hz"),textColor=Object(addon_knobs_dist.color)("color",colors_dist.black[500]),iconColor=Object(addon_knobs_dist.color)("icon.htmlColor",colors_dist.red[500]),icon=Object(addon_knobs_dist.boolean)("Show Icon",!0)?react_default.a.createElement(TrendingUp_default.a,{htmlColor:iconColor,style:Object(utils.b)()}):void 0,fontSize=Object(addon_knobs_dist.number)("fontSize",30),prefix=Object(addon_knobs_dist.boolean)("prefix",!1);return react_default.a.createElement(react_components.ChannelValue,{value:value,units:units,color:textColor,icon:icon,fontSize:fontSize,prefix:prefix})}),{__STORY__:"import React from 'react';\nimport Trend from '@material-ui/icons/TrendingUp';\nimport * as Colors from '@pxblue/colors';\nimport { ChannelValue } from '@pxblue/react-components';\nimport { WITH_FULL_CONFIG_STORY_NAME } from '../../src/constants';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport { boolean, color, number, text } from '@storybook/addon-knobs';\nimport { getLeftToRightIconTransform } from '../../src/utils';\n\nexport const withFullConfig = (): StoryFnReactReturnType => {\n    const value = text('value', '123');\n    const units = text('units', 'hz');\n    const textColor = color('color', Colors.black[500]);\n    const iconColor = color('icon.htmlColor', Colors.red[500]);\n    const icon = boolean('Show Icon', true) ? (\n        <Trend htmlColor={iconColor} style={getLeftToRightIconTransform()} />\n    ) : (\n        undefined\n    );\n    const fontSize = number('fontSize', 30);\n    const prefix = boolean('prefix', false);\n\n    return (\n        <ChannelValue value={value} units={units} color={textColor} icon={icon} fontSize={fontSize} prefix={prefix} />\n    );\n};\n\nwithFullConfig.story = { name: WITH_FULL_CONFIG_STORY_NAME };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-full-config.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/channel-value",__IDS_TO_FRAMEWORKS__:{}});withFullConfig.story={name:constants.c};var __assign=function(){return(__assign=Object.assign||function(t){for(var s,i=1,n=arguments.length;i<n;i++)for(var p in s=arguments[i])Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p]);return t}).apply(this,arguments)},channelValueModule={title:constants.a+"/Channel Value",component:react_components.ChannelValue,decorators:[utils.g,dist.withA11y],parameters:__assign(__assign({},utils.f),{notes:{markdown:Object(utils.c)("ChannelValue.md")}})};__webpack_exports__.default=channelValueModule},1880:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"getReadMeStory",(function(){return utils.d})),__webpack_require__.d(__webpack_exports__,"withBasicUsage",(function(){return withBasicUsage})),__webpack_require__.d(__webpack_exports__,"withVariants",(function(){return withVariants})),__webpack_require__.d(__webpack_exports__,"withDynamicContent",(function(){return withDynamicContent})),__webpack_require__.d(__webpack_exports__,"withFullConfig",(function(){return withFullConfig}));var react=__webpack_require__(0),react_default=__webpack_require__.n(react),react_components=__webpack_require__(5),constants=__webpack_require__(19),utils=__webpack_require__(14),dist=__webpack_require__(54),addon_knobs_dist=__webpack_require__(2),Toolbar=__webpack_require__(696),Typography=__webpack_require__(110),withBasicUsage=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){var expandedHeight=Object(addon_knobs_dist.number)("expandedHeight",200),collapsedHeight=Object(addon_knobs_dist.number)("collapsedHeight",64),scrollThreshold=Object(addon_knobs_dist.number)("scrollThreshold",136);return react_default.a.createElement(react_components.AppBar,{expandedHeight:expandedHeight,collapsedHeight:collapsedHeight,scrollThreshold:scrollThreshold},react_default.a.createElement(Toolbar.a,null,react_default.a.createElement(Typography.a,{variant:"h6"},"Title")))}),{__STORY__:"import React from 'react';\nimport { number } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport { WITH_MIN_PROPS_STORY_NAME } from '../../src/constants';\nimport { AppBar } from '@pxblue/react-components';\nimport { Toolbar, Typography } from '@material-ui/core';\n\nexport const withBasicUsage = (): StoryFnReactReturnType => {\n    const expandedHeight = number('expandedHeight', 200);\n    const collapsedHeight = number('collapsedHeight', 64);\n    const scrollThreshold = number('scrollThreshold', 136);\n    return (\n        <AppBar expandedHeight={expandedHeight} collapsedHeight={collapsedHeight} scrollThreshold={scrollThreshold}>\n            <Toolbar>\n                <Typography variant=\"h6\">Title</Typography>\n            </Toolbar>\n        </AppBar>\n    );\n};\n\nwithBasicUsage.story = { name: WITH_MIN_PROPS_STORY_NAME };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-basic-usage.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/app-bar",__IDS_TO_FRAMEWORKS__:{}}));withBasicUsage.story={name:constants.d};__webpack_require__(12).withSource;var withVariants=(0,__webpack_require__(12).addSource)((function(){var expandedHeight=Object(addon_knobs_dist.number)("expandedHeight",200),collapsedHeight=Object(addon_knobs_dist.number)("collapsedHeight",64),scrollThreshold=Object(addon_knobs_dist.number)("scrollThreshold",136),variant=Object(addon_knobs_dist.select)("variant",["snap","collapsed","expanded"],"snap");return react_default.a.createElement(react_components.AppBar,{expandedHeight:expandedHeight,collapsedHeight:collapsedHeight,scrollThreshold:scrollThreshold,variant:variant},react_default.a.createElement(Toolbar.a,null,react_default.a.createElement(Typography.a,{variant:"h6"},"Title")))}),{__STORY__:"import React from 'react';\nimport { number, select } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport { AppBar } from '@pxblue/react-components';\nimport { Toolbar, Typography } from '@material-ui/core';\n\nexport const withVariants = (): StoryFnReactReturnType => {\n    const expandedHeight = number('expandedHeight', 200);\n    const collapsedHeight = number('collapsedHeight', 64);\n    const scrollThreshold = number('scrollThreshold', 136);\n    const variant = select('variant', ['snap', 'collapsed', 'expanded'], 'snap');\n\n    return (\n        <AppBar\n            expandedHeight={expandedHeight}\n            collapsedHeight={collapsedHeight}\n            scrollThreshold={scrollThreshold}\n            variant={variant}\n        >\n            <Toolbar>\n                <Typography variant=\"h6\">Title</Typography>\n            </Toolbar>\n        </AppBar>\n    );\n};\n\nwithVariants.story = { name: 'with variants' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-variants.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/app-bar",__IDS_TO_FRAMEWORKS__:{}});withVariants.story={name:"with variants"};var makeStyles=__webpack_require__(456),withDynamicContent=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){var classes=Object(makeStyles.a)({title:{},subtitle:{},info:{},liner:{top:0,position:"relative"},expanded:{"& $liner":{top:64}},collapsed:{"& $title":{fontSize:"1.25rem",fontWeight:600},"& $subtitle":{fontSize:0},"& $info":{fontSize:"1rem",fontWeight:400,marginTop:"-0.25rem"}}})(),expandedHeight=Object(addon_knobs_dist.number)("expandedHeight",200,{},"AppBar"),collapsedHeight=Object(addon_knobs_dist.number)("collapsedHeight",64,{},"AppBar"),title=Object(addon_knobs_dist.text)("title","title","ThreeLiner"),subtitle=Object(addon_knobs_dist.text)("subtitle","subtitle","ThreeLiner"),info=Object(addon_knobs_dist.text)("info","info","ThreeLiner");return react_default.a.createElement(react_components.AppBar,{expandedHeight:expandedHeight,collapsedHeight:collapsedHeight,classes:{collapsed:classes.collapsed,expanded:classes.expanded}},react_default.a.createElement(Toolbar.a,null,react_default.a.createElement(react_components.ThreeLiner,{title:title,subtitle:subtitle,info:info,animationDuration:300,classes:{title:classes.title,subtitle:classes.subtitle,info:classes.info},className:classes.liner})))}),{__STORY__:"import React from 'react';\nimport { number, text } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport { AppBar, ThreeLiner } from '@pxblue/react-components';\nimport { makeStyles, Toolbar } from '@material-ui/core';\n\nexport const withDynamicContent = (): StoryFnReactReturnType => {\n    const useStyles = makeStyles({\n        title: {},\n        subtitle: {},\n        info: {},\n        liner: {\n            top: 0,\n            position: 'relative',\n        },\n        expanded: {\n            '& $liner': {\n                top: 64,\n            },\n        },\n        collapsed: {\n            '& $title': {\n                fontSize: '1.25rem',\n                fontWeight: 600,\n            },\n            '& $subtitle': {\n                fontSize: 0,\n            },\n            '& $info': {\n                fontSize: '1rem',\n                fontWeight: 400,\n                marginTop: '-0.25rem',\n            },\n        },\n    });\n\n    const classes = useStyles();\n    const appBarGroupId = 'AppBar';\n    const threeLinerGroupId = 'ThreeLiner';\n    // AppBar props\n    const expandedHeight = number('expandedHeight', 200, {}, appBarGroupId);\n    const collapsedHeight = number('collapsedHeight', 64, {}, appBarGroupId);\n    // ThreeLiner Props\n    const title = text('title', 'title', threeLinerGroupId);\n    const subtitle = text('subtitle', 'subtitle', threeLinerGroupId);\n    const info = text('info', 'info', threeLinerGroupId);\n\n    return (\n        <AppBar\n            expandedHeight={expandedHeight}\n            collapsedHeight={collapsedHeight}\n            classes={{ collapsed: classes.collapsed, expanded: classes.expanded }}\n        >\n            <Toolbar>\n                <ThreeLiner\n                    title={title}\n                    subtitle={subtitle}\n                    info={info}\n                    animationDuration={300}\n                    classes={{ title: classes.title, subtitle: classes.subtitle, info: classes.info }}\n                    className={classes.liner}\n                ></ThreeLiner>\n            </Toolbar>\n        </AppBar>\n    );\n};\n\nwithDynamicContent.story = { name: 'with dynamic content' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-dynamic-content.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/app-bar",__IDS_TO_FRAMEWORKS__:{}}));withDynamicContent.story={name:"with dynamic content"};var farm=__webpack_require__(326),farm_default=__webpack_require__.n(farm),Menu=__webpack_require__(1915),Home=__webpack_require__(1916),Work=__webpack_require__(1917),Settings=__webpack_require__(1918),IconButton=__webpack_require__(459),addon_actions_dist=__webpack_require__(15),storybook_rtl_addon_dist=__webpack_require__(84),clsx_m=__webpack_require__(3),with_full_config_addSourceDecorator=(__webpack_require__(12).withSource,__webpack_require__(12).addSource),with_full_config_useStyles=Object(makeStyles.a)((function(){return{title:{},subtitle:{},info:{},liner:{top:0,position:"absolute",flexGrow:1,marginLeft:56},linerRTL:{marginLeft:0,marginRight:56},expanded:{"& $liner":{top:64}},collapsed:{"& $title":{fontSize:"1.25rem",fontWeight:600},"& $subtitle":{fontSize:0},"& $info":{fontSize:"1rem",fontWeight:400,marginTop:"-0.25rem"}},toolbarGutters:{paddingLeft:16,paddingRight:4},toolbarGuttersRTL:{paddingLeft:4,paddingRight:16}}})),withFullConfig=with_full_config_addSourceDecorator((function(){var classes=with_full_config_useStyles(),direction=Object(storybook_rtl_addon_dist.getDirection)(),animationDuration=Object(addon_knobs_dist.number)("animationDuration",300,{},"AppBar"),showBackgroundImage=Object(addon_knobs_dist.boolean)("show backgroundImage",!0,"AppBar"),collapsedHeight=Object(addon_knobs_dist.number)("collapsedHeight",64,{},"AppBar"),expandedHeight=Object(addon_knobs_dist.number)("expandedHeight",200,{},"AppBar"),scrollThreshold=Object(addon_knobs_dist.number)("scrollThreshold",136,{},"AppBar"),variant=Object(addon_knobs_dist.select)("variant",["snap","collapsed","expanded"],"snap","AppBar"),title=Object(addon_knobs_dist.text)("title","title","ThreeLiner"),subtitle=Object(addon_knobs_dist.text)("subtitle","subtitle","ThreeLiner"),info=Object(addon_knobs_dist.text)("info","info","ThreeLiner");return react_default.a.createElement(react_components.AppBar,{expandedHeight:expandedHeight,collapsedHeight:collapsedHeight,scrollThreshold:scrollThreshold,animationDuration:animationDuration,backgroundImage:showBackgroundImage?farm_default.a:void 0,variant:variant,classes:{collapsed:classes.collapsed,expanded:classes.expanded}},react_default.a.createElement(Toolbar.a,{classes:{gutters:"rtl"===direction?classes.toolbarGuttersRTL:classes.toolbarGutters}},react_default.a.createElement(IconButton.a,{onClick:Object(addon_actions_dist.action)("home icon clicked..."),color:"inherit",edge:"start"},react_default.a.createElement(Menu.a,null)),react_default.a.createElement(react_components.Spacer,null),react_default.a.createElement(react_components.ThreeLiner,{classes:{title:classes.title,subtitle:classes.subtitle,info:classes.info},className:Object(clsx_m.default)([classes.liner,"rtl"===direction?classes.linerRTL:""]),title:title,subtitle:subtitle,info:info,animationDuration:animationDuration}),react_default.a.createElement("div",{style:{display:"flex",flexDirection:"row"}},react_default.a.createElement(IconButton.a,{onClick:Object(addon_actions_dist.action)("home icon clicked..."),color:"inherit"},react_default.a.createElement(Home.a,null)),react_default.a.createElement(IconButton.a,{onClick:Object(addon_actions_dist.action)("work icon clicked..."),color:"inherit"},react_default.a.createElement(Work.a,null)),react_default.a.createElement(IconButton.a,{onClick:Object(addon_actions_dist.action)("settings icon clicked..."),color:"inherit"},react_default.a.createElement(Settings.a,null)))))}),{__STORY__:"import React from 'react';\nimport { boolean, number, select, text } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport { WITH_FULL_CONFIG_STORY_NAME } from '../../src/constants';\nimport { AppBar, Spacer, ThreeLiner } from '@pxblue/react-components';\nimport bgImage from '../../assets/farm.jpg';\nimport { Menu, Work, Settings, Home } from '@material-ui/icons';\nimport { IconButton, makeStyles, Toolbar } from '@material-ui/core';\nimport { action } from '@storybook/addon-actions';\nimport { getDirection } from '@pxblue/storybook-rtl-addon';\nimport clsx from 'clsx';\n\nconst useStyles = makeStyles(() => ({\n    title: {},\n    subtitle: {},\n    info: {},\n    liner: {\n        top: 0,\n        position: 'absolute',\n        flexGrow: 1,\n        marginLeft: 56,\n    },\n    linerRTL: {\n        marginLeft: 0,\n        marginRight: 56,\n    },\n    expanded: {\n        '& $liner': {\n            top: 64,\n        },\n    },\n    collapsed: {\n        '& $title': {\n            fontSize: '1.25rem',\n            fontWeight: 600,\n        },\n        '& $subtitle': {\n            fontSize: 0,\n        },\n        '& $info': {\n            fontSize: '1rem',\n            fontWeight: 400,\n            marginTop: '-0.25rem',\n        },\n    },\n    toolbarGutters: {\n        paddingLeft: 16,\n        paddingRight: 4,\n    },\n    toolbarGuttersRTL: {\n        paddingLeft: 4,\n        paddingRight: 16,\n    },\n}));\n\nexport const withFullConfig = (): StoryFnReactReturnType => {\n    const classes = useStyles();\n    const direction = getDirection();\n    const appBarGroupId = 'AppBar';\n    const threeLinerGroupId = 'ThreeLiner';\n    // AppBar props\n    const animationDuration = number('animationDuration', 300, {}, appBarGroupId);\n    const showBackgroundImage = boolean('show backgroundImage', true, appBarGroupId);\n    const collapsedHeight = number('collapsedHeight', 64, {}, appBarGroupId);\n    const expandedHeight = number('expandedHeight', 200, {}, appBarGroupId);\n    const scrollThreshold = number('scrollThreshold', 136, {}, appBarGroupId);\n    const variant = select('variant', ['snap', 'collapsed', 'expanded'], 'snap', appBarGroupId);\n    // ThreeLiner props\n    const title = text('title', 'title', threeLinerGroupId);\n    const subtitle = text('subtitle', 'subtitle', threeLinerGroupId);\n    const info = text('info', 'info', threeLinerGroupId);\n\n    return (\n        <AppBar\n            expandedHeight={expandedHeight}\n            collapsedHeight={collapsedHeight}\n            scrollThreshold={scrollThreshold}\n            animationDuration={animationDuration}\n            backgroundImage={showBackgroundImage ? bgImage : undefined}\n            variant={variant}\n            classes={{ collapsed: classes.collapsed, expanded: classes.expanded }}\n        >\n            <Toolbar classes={{ gutters: direction === 'rtl' ? classes.toolbarGuttersRTL : classes.toolbarGutters }}>\n                <IconButton onClick={action('home icon clicked...')} color={'inherit'} edge={'start'}>\n                    <Menu />\n                </IconButton>\n                <Spacer />\n                <ThreeLiner\n                    classes={{ title: classes.title, subtitle: classes.subtitle, info: classes.info }}\n                    className={clsx([classes.liner, direction === 'rtl' ? classes.linerRTL : ''])}\n                    title={title}\n                    subtitle={subtitle}\n                    info={info}\n                    animationDuration={animationDuration}\n                />\n                <div style={{ display: 'flex', flexDirection: 'row' }}>\n                    <IconButton onClick={action('home icon clicked...')} color={'inherit'}>\n                        <Home />\n                    </IconButton>\n                    <IconButton onClick={action('work icon clicked...')} color={'inherit'}>\n                        <Work />\n                    </IconButton>\n                    <IconButton onClick={action('settings icon clicked...')} color={'inherit'}>\n                        <Settings />\n                    </IconButton>\n                </div>\n            </Toolbar>\n        </AppBar>\n    );\n};\n\nwithFullConfig.story = { name: WITH_FULL_CONFIG_STORY_NAME };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-full-config.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/app-bar",__IDS_TO_FRAMEWORKS__:{}});withFullConfig.story={name:constants.c};var __assign=function(){return(__assign=Object.assign||function(t){for(var s,i=1,n=arguments.length;i<n;i++)for(var p in s=arguments[i])Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p]);return t}).apply(this,arguments)},appBarModule={title:constants.a+"/App Bar",component:react_components.AppBar,decorators:[utils.g,function(storyFn){return react_default.a.createElement(react_default.a.Fragment,null,storyFn(),Object(utils.a)())},dist.withA11y],parameters:__assign(__assign({},utils.f),{notes:{markdown:__webpack_require__(681)}})};__webpack_exports__.default=appBarModule},1881:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"getReadMeStory",(function(){return utils.d})),__webpack_require__.d(__webpack_exports__,"withBasicUsage",(function(){return withBasicUsage})),__webpack_require__.d(__webpack_exports__,"withDescription",(function(){return withDescription})),__webpack_require__.d(__webpack_exports__,"withActions",(function(){return withActions})),__webpack_require__.d(__webpack_exports__,"withFullConfig",(function(){return withFullConfig}));var react=__webpack_require__(0),react_default=__webpack_require__.n(react),react_components=__webpack_require__(5),constants=__webpack_require__(19),utils=__webpack_require__(14),dist=__webpack_require__(54),storybook_dark_mode_dist=__webpack_require__(53),colors_dist=__webpack_require__(9),NotListedLocation=__webpack_require__(1945),addon_knobs_dist=__webpack_require__(2),withBasicUsage=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){return react_default.a.createElement(react_components.EmptyState,{icon:react_default.a.createElement(NotListedLocation.a,{fontSize:"inherit",style:Object(utils.b)()}),title:Object(addon_knobs_dist.text)("title","Location Unknown")})}),{__STORY__:"import React from 'react';\nimport { NotListedLocation } from '@material-ui/icons';\nimport { EmptyState } from '@pxblue/react-components';\nimport { WITH_MIN_PROPS_STORY_NAME } from '../../src/constants';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport { getLeftToRightIconTransform } from '../../src/utils';\nimport { text } from '@storybook/addon-knobs';\n\nexport const withBasicUsage = (): StoryFnReactReturnType => (\n    <EmptyState\n        icon={<NotListedLocation fontSize={'inherit'} style={getLeftToRightIconTransform()} />}\n        title={text('title', 'Location Unknown')}\n    />\n);\n\nwithBasicUsage.story = { name: WITH_MIN_PROPS_STORY_NAME };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-basic-usage.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/empty-state",__IDS_TO_FRAMEWORKS__:{}}));withBasicUsage.story={name:constants.d};var LocationOff=__webpack_require__(1946),withDescription=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){return react_default.a.createElement(react_components.EmptyState,{icon:react_default.a.createElement(LocationOff.a,{fontSize:"inherit",style:{marginBottom:"0"}}),title:Object(addon_knobs_dist.text)("title","Location Services Disabled"),description:Object(addon_knobs_dist.text)("description","Enable Location Services via Settings to receive GPS information")})}),{__STORY__:"import { LocationOff } from '@material-ui/icons';\nimport { EmptyState } from '@pxblue/react-components';\nimport { text } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\n\nexport const withDescription = (): StoryFnReactReturnType => (\n    <EmptyState\n        icon={<LocationOff fontSize={'inherit'} style={{ marginBottom: '0' }} />}\n        title={text('title', 'Location Services Disabled')}\n        description={text('description', 'Enable Location Services via Settings to receive GPS information')}\n    />\n);\n\nwithDescription.story = { name: 'with description' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-description.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/empty-state",__IDS_TO_FRAMEWORKS__:{}}));withDescription.story={name:"with description"};var Button=__webpack_require__(1893),Add=__webpack_require__(735),Add_default=__webpack_require__.n(Add),Devices=__webpack_require__(734),Devices_default=__webpack_require__.n(Devices),addon_actions_dist=__webpack_require__(15),withActions=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){return react_default.a.createElement(react_components.EmptyState,{icon:react_default.a.createElement(Devices_default.a,{fontSize:"inherit"}),title:"No Devices",description:"Check your network connection or add a new device",actions:react_default.a.createElement(Button.a,{variant:"outlined",color:"primary",onClick:Object(addon_actions_dist.action)("Button Clicked"),startIcon:react_default.a.createElement(Add_default.a,null)},Object(addon_knobs_dist.text)("Action Text","Add Device"))})}),{__STORY__:"import Button from '@material-ui/core/Button';\nimport AddIcon from '@material-ui/icons/Add';\n\nimport DevicesIcon from '@material-ui/icons/Devices';\nimport { EmptyState } from '@pxblue/react-components';\nimport { action } from '@storybook/addon-actions';\nimport { text } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\n\nexport const withActions = (): StoryFnReactReturnType => (\n    <EmptyState\n        icon={<DevicesIcon fontSize={'inherit'} />}\n        title={'No Devices'}\n        description={'Check your network connection or add a new device'}\n        actions={\n            <Button variant={'outlined'} color={'primary'} onClick={action('Button Clicked')} startIcon={<AddIcon />}>\n                {text('Action Text', 'Add Device')}\n            </Button>\n        }\n    />\n);\n\nwithActions.story = { name: 'with actions' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-actions.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/empty-state",__IDS_TO_FRAMEWORKS__:{}}));withActions.story={name:"with actions"};var TrendingUp=__webpack_require__(107),TrendingUp_default=__webpack_require__.n(TrendingUp),withFullConfig=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){var title=Object(addon_knobs_dist.text)("title","Predictions Page Coming Soon"),description=Object(addon_knobs_dist.text)("description","A fully redesigned predictions page is coming in our next release!"),actionText=Object(addon_knobs_dist.text)("Action Text","Learn More");return react_default.a.createElement(react_components.EmptyState,{icon:react_default.a.createElement(TrendingUp_default.a,{fontSize:"inherit",style:Object(utils.b)()}),title:title,description:description,actions:react_default.a.createElement(Button.a,{variant:"outlined",color:"primary",onClick:Object(addon_actions_dist.action)("Button Clicked")},actionText)})}),{__STORY__:"import Button from '@material-ui/core/Button';\nimport TrendingUpIcon from '@material-ui/icons/TrendingUp';\nimport { EmptyState } from '@pxblue/react-components';\nimport { action } from '@storybook/addon-actions';\nimport { text } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport { getLeftToRightIconTransform } from '../../src/utils';\nimport React from 'react';\nimport { WITH_FULL_CONFIG_STORY_NAME } from '../../src/constants';\n\nexport const withFullConfig = (): StoryFnReactReturnType => {\n    const title = text('title', 'Predictions Page Coming Soon');\n    const description = text('description', 'A fully redesigned predictions page is coming in our next release!');\n    const actionText = text('Action Text', 'Learn More');\n    return (\n        <EmptyState\n            icon={<TrendingUpIcon fontSize={'inherit'} style={getLeftToRightIconTransform()} />}\n            title={title}\n            description={description}\n            actions={\n                <Button variant=\"outlined\" color=\"primary\" onClick={action('Button Clicked')}>\n                    {actionText}\n                </Button>\n            }\n        />\n    );\n};\n\nwithFullConfig.story = { name: WITH_FULL_CONFIG_STORY_NAME };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-full-config.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/empty-state",__IDS_TO_FRAMEWORKS__:{}}));withFullConfig.story={name:constants.c};var __assign=function(){return(__assign=Object.assign||function(t){for(var s,i=1,n=arguments.length;i<n;i++)for(var p in s=arguments[i])Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p]);return t}).apply(this,arguments)},emptyStateModule={title:constants.a+"/Empty State",component:react_components.EmptyState,decorators:[utils.g,dist.withA11y,function(storyFn){return react_default.a.createElement("div",{style:{backgroundColor:Object(storybook_dark_mode_dist.useDarkMode)()?void 0:colors_dist.white[50],width:"100%",height:"100%"}},storyFn())}],parameters:__assign(__assign({},utils.f),{notes:{markdown:Object(utils.c)("EmptyState.md")}})};__webpack_exports__.default=emptyStateModule},1882:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"getReadMeStory",(function(){return utils.d})),__webpack_require__.d(__webpack_exports__,"withBasicUsage",(function(){return withBasicUsage})),__webpack_require__.d(__webpack_exports__,"withCustomColors",(function(){return withCustomColors})),__webpack_require__.d(__webpack_exports__,"withFullConfig",(function(){return withFullConfig})),__webpack_require__.d(__webpack_exports__,"inInfoListItem",(function(){return inInfoListItem}));var react_components=__webpack_require__(5),constants=__webpack_require__(19),utils=__webpack_require__(14),dist=__webpack_require__(54),addon_knobs_dist=__webpack_require__(2),react=__webpack_require__(0),react_default=__webpack_require__.n(react),withBasicUsage=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){return react_default.a.createElement(react_components.ListItemTag,{label:Object(addon_knobs_dist.text)("label","active")})}),{__STORY__:"import { ListItemTag } from '@pxblue/react-components';\nimport { text } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\nimport { WITH_MIN_PROPS_STORY_NAME } from '../../src/constants';\n\nexport const withBasicUsage = (): StoryFnReactReturnType => <ListItemTag label={text('label', 'active')} />;\n\nwithBasicUsage.story = { name: WITH_MIN_PROPS_STORY_NAME };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-basic-usage.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/list-item-tag",__IDS_TO_FRAMEWORKS__:{}}));withBasicUsage.story={name:constants.d};var colors_dist=__webpack_require__(9),withCustomColors=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){return react_default.a.createElement(react_components.ListItemTag,{label:Object(addon_knobs_dist.text)("label","active"),backgroundColor:Object(addon_knobs_dist.color)("backgroundColor",colors_dist.red[500]),fontColor:Object(addon_knobs_dist.color)("fontColor",colors_dist.white[50])})}),{__STORY__:"import * as Colors from '@pxblue/colors';\nimport { ListItemTag } from '@pxblue/react-components';\nimport { color, text } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\n\nexport const withCustomColors = (): StoryFnReactReturnType => (\n    <ListItemTag\n        label={text('label', 'active')}\n        backgroundColor={color('backgroundColor', Colors.red['500'])}\n        fontColor={color('fontColor', Colors.white['50'])}\n    />\n);\n\nwithCustomColors.story = { name: 'with custom colors' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-custom-colors.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/list-item-tag",__IDS_TO_FRAMEWORKS__:{}}));withCustomColors.story={name:"with custom colors"};var addon_actions_dist=__webpack_require__(15),withFullConfig=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){return react_default.a.createElement(react_components.ListItemTag,{label:Object(addon_knobs_dist.text)("label","clickable"),backgroundColor:Object(addon_knobs_dist.color)("backgroundColor",colors_dist.blue[500]),fontColor:Object(addon_knobs_dist.color)("fontColor",colors_dist.white[50]),onClick:Object(addon_actions_dist.action)("ListItemTag: onClick"),style:{padding:Object(addon_knobs_dist.text)("style.padding","0 4px"),width:Object(addon_knobs_dist.text)("style.width","initial"),boxSizing:"border-box"},paragraph:Object(addon_knobs_dist.boolean)("paragraph",!1),noWrap:Object(addon_knobs_dist.boolean)("noWrap",!0)})}),{__STORY__:"import * as Colors from '@pxblue/colors';\nimport { ListItemTag } from '@pxblue/react-components';\nimport { action } from '@storybook/addon-actions';\nimport { boolean, color, text } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\nimport { WITH_FULL_CONFIG_STORY_NAME } from '../../src/constants';\n\nexport const withFullConfig = (): StoryFnReactReturnType => (\n    <ListItemTag\n        label={text('label', 'clickable')}\n        backgroundColor={color('backgroundColor', Colors.blue[500])}\n        fontColor={color('fontColor', Colors.white[50])}\n        onClick={action('ListItemTag: onClick')}\n        style={{\n            padding: text('style.padding', '0 4px'),\n            width: text('style.width', 'initial'),\n            boxSizing: 'border-box',\n        }}\n        paragraph={boolean('paragraph', false)}\n        noWrap={boolean('noWrap', true)}\n    />\n);\n\nwithFullConfig.story = { name: WITH_FULL_CONFIG_STORY_NAME };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-full-config.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/list-item-tag",__IDS_TO_FRAMEWORKS__:{}}));withFullConfig.story={name:constants.c};var BrightnessMedium=__webpack_require__(1950),List=__webpack_require__(460),storybook_dark_mode_dist=__webpack_require__(53),storybook_rtl_addon_dist=__webpack_require__(84),useTheme=__webpack_require__(32),inInfoListItem=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){var direction=Object(storybook_rtl_addon_dist.getDirection)(),theme=Object(useTheme.a)();return react_default.a.createElement(List.a,{style:{width:"80%",padding:0}},react_default.a.createElement(react_components.InfoListItem,{icon:react_default.a.createElement(BrightnessMedium.a,null),title:"@pxblue/react-themes",subtitle:"Light and dark themes supported",backgroundColor:Object(storybook_dark_mode_dist.useDarkMode)()?colors_dist.black[900]:"white",rightComponent:react_default.a.createElement("div",{style:{display:"flex"}},react_default.a.createElement(react_components.ListItemTag,{label:"Build Passing",backgroundColor:colors_dist.green[300],fontColor:colors_dist.black[900],style:{marginRight:"rtl"===direction?0:theme.spacing(2),marginLeft:"rtl"===direction?theme.spacing(2):0}}),react_default.a.createElement(react_components.ListItemTag,{label:"5 Bugs",backgroundColor:colors_dist.red[300],fontColor:colors_dist.black[900]}))}))}),{__STORY__:"import * as Colors from '@pxblue/colors';\nimport { InfoListItem, ListItemTag } from '@pxblue/react-components';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\nimport { BrightnessMedium } from '@material-ui/icons';\nimport List from '@material-ui/core/List';\nimport { useDarkMode } from 'storybook-dark-mode';\nimport { getDirection } from '@pxblue/storybook-rtl-addon';\nimport { useTheme } from '@material-ui/core';\n\nexport const inInfoListItem = (): StoryFnReactReturnType => {\n    const direction = getDirection();\n    const theme = useTheme();\n\n    return (\n        <List style={{ width: '80%', padding: 0 }}>\n            <InfoListItem\n                icon={<BrightnessMedium />}\n                title={'@pxblue/react-themes'}\n                subtitle={'Light and dark themes supported'}\n                backgroundColor={useDarkMode() ? Colors.black[900] : 'white'}\n                rightComponent={\n                    <div style={{ display: 'flex' }}>\n                        <ListItemTag\n                            label={'Build Passing'}\n                            backgroundColor={Colors.green[300]}\n                            fontColor={Colors.black[900]}\n                            style={{\n                                marginRight: direction === 'rtl' ? 0 : theme.spacing(2),\n                                marginLeft: direction === 'rtl' ? theme.spacing(2) : 0,\n                            }}\n                        />\n                        <ListItemTag label={'5 Bugs'} backgroundColor={Colors.red[300]} fontColor={Colors.black[900]} />\n                    </div>\n                }\n            />\n        </List>\n    );\n};\n\ninInfoListItem.story = { name: 'within an Info List Item' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/within-InfoListItem.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/list-item-tag",__IDS_TO_FRAMEWORKS__:{}}));inInfoListItem.story={name:"within an Info List Item"};var __assign=function(){return(__assign=Object.assign||function(t){for(var s,i=1,n=arguments.length;i<n;i++)for(var p in s=arguments[i])Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p]);return t}).apply(this,arguments)},listItemTagModule={title:constants.a+"/List Item Tag",component:react_components.ListItemTag,decorators:[utils.g,dist.withA11y],parameters:__assign(__assign({},utils.f),{notes:{markdown:Object(utils.c)("ListItemTag.md")}})};__webpack_exports__.default=listItemTagModule},1884:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"getReadMeStory",(function(){return utils.d})),__webpack_require__.d(__webpack_exports__,"flexLayout",(function(){return flexLayout})),__webpack_require__.d(__webpack_exports__,"staticLayout",(function(){return staticLayout}));var react_components=__webpack_require__(5),constants=__webpack_require__(19),utils=__webpack_require__(14),dist=__webpack_require__(54),Typography=__webpack_require__(110),colors_dist=__webpack_require__(9),addon_knobs_dist=__webpack_require__(2),react=__webpack_require__(0),react_default=__webpack_require__.n(react),flexLayout=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){var flex1=Object(addon_knobs_dist.number)("Item 1 Flex",1,{range:!0,min:1,max:5,step:1}),flex2=Object(addon_knobs_dist.number)("Item 2 Flex",1,{range:!0,min:1,max:5,step:1}),flex3=Object(addon_knobs_dist.number)("Item 3 Flex",1,{range:!0,min:1,max:5,step:1});return react_default.a.createElement(react_default.a.Fragment,null,react_default.a.createElement(Typography.a,null,"Horizontal"),react_default.a.createElement("div",{style:{width:300,height:50,display:"flex",flexDirection:"row",alignItems:"stretch",color:colors_dist.black[900]}},react_default.a.createElement(react_components.Spacer,{flex:flex1,style:{background:colors_dist.blue[300]}},"1"),react_default.a.createElement(react_components.Spacer,{flex:flex2,style:{background:colors_dist.yellow[300]}},"2"),react_default.a.createElement(react_components.Spacer,{flex:flex3,style:{background:colors_dist.red[300]}},"3")),react_default.a.createElement(Typography.a,{style:{marginTop:20}},"Vertical"),react_default.a.createElement("div",{style:{width:300,height:150,display:"flex",flexDirection:"column",alignItems:"stretch",color:colors_dist.black[900]}},react_default.a.createElement(react_components.Spacer,{flex:flex1,style:{background:colors_dist.blue[300]}},"1"),react_default.a.createElement(react_components.Spacer,{flex:flex2,style:{background:colors_dist.yellow[300]}},"2"),react_default.a.createElement(react_components.Spacer,{flex:flex3,style:{background:colors_dist.red[300]}},"3")))}),{__STORY__:"import { Typography } from '@material-ui/core';\nimport * as Colors from '@pxblue/colors';\nimport { Spacer } from '@pxblue/react-components';\nimport { number } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\n\nexport const flexLayout = (): StoryFnReactReturnType => {\n    const flex1 = number('Item 1 Flex', 1, { range: true, min: 1, max: 5, step: 1 });\n    const flex2 = number('Item 2 Flex', 1, { range: true, min: 1, max: 5, step: 1 });\n    const flex3 = number('Item 3 Flex', 1, { range: true, min: 1, max: 5, step: 1 });\n\n    return (\n        <>\n            <Typography>Horizontal</Typography>\n            <div\n                style={{\n                    width: 300,\n                    height: 50,\n                    display: 'flex',\n                    flexDirection: 'row',\n                    alignItems: 'stretch',\n                    color: Colors.black[900],\n                }}\n            >\n                <Spacer flex={flex1} style={{ background: Colors.blue[300] }}>\n                    1\n                </Spacer>\n                <Spacer flex={flex2} style={{ background: Colors.yellow[300] }}>\n                    2\n                </Spacer>\n                <Spacer flex={flex3} style={{ background: Colors.red[300] }}>\n                    3\n                </Spacer>\n            </div>\n            <Typography style={{ marginTop: 20 }}>Vertical</Typography>\n            <div\n                style={{\n                    width: 300,\n                    height: 150,\n                    display: 'flex',\n                    flexDirection: 'column',\n                    alignItems: 'stretch',\n                    color: Colors.black[900],\n                }}\n            >\n                <Spacer flex={flex1} style={{ background: Colors.blue[300] }}>\n                    1\n                </Spacer>\n                <Spacer flex={flex2} style={{ background: Colors.yellow[300] }}>\n                    2\n                </Spacer>\n                <Spacer flex={flex3} style={{ background: Colors.red[300] }}>\n                    3\n                </Spacer>\n            </div>\n        </>\n    );\n};\n\nflexLayout.story = { name: 'with flex layout' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/flex-layout.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/spacer",__IDS_TO_FRAMEWORKS__:{}}));flexLayout.story={name:"with flex layout"};__webpack_require__(12).withSource;var staticLayout=(0,__webpack_require__(12).addSource)((function(){var size1=Object(addon_knobs_dist.number)("Item 1 Size (px)",60,{range:!0,min:20,max:100,step:20}),size2=Object(addon_knobs_dist.number)("Item 2 Size (px)",60,{range:!0,min:20,max:100,step:20}),size3=Object(addon_knobs_dist.number)("Item 3 Size (px)",60,{range:!0,min:20,max:100,step:20});return react_default.a.createElement(react_default.a.Fragment,null,react_default.a.createElement(Typography.a,null,"Horizontal"),react_default.a.createElement("div",{style:{width:300,height:50,display:"inline",color:colors_dist.black[900]}},react_default.a.createElement(react_components.Spacer,{width:size1,style:{background:colors_dist.blue[300],display:"inline-block"}},"1"),react_default.a.createElement(react_components.Spacer,{width:size2,style:{background:colors_dist.yellow[300],display:"inline-block"}},"2"),react_default.a.createElement(react_components.Spacer,{width:size3,style:{background:colors_dist.red[300],display:"inline-block"}},"3")),react_default.a.createElement(Typography.a,{style:{marginTop:20}},"Vertical"),react_default.a.createElement("div",{style:{width:300,height:300,color:colors_dist.black[900]}},react_default.a.createElement(react_components.Spacer,{height:size1,style:{background:colors_dist.blue[300]}},"1"),react_default.a.createElement(react_components.Spacer,{height:size2,style:{background:colors_dist.yellow[300]}},"2"),react_default.a.createElement(react_components.Spacer,{height:size3,style:{background:colors_dist.red[300]}},"3")))}),{__STORY__:"import { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport React from 'react';\nimport * as Colors from '@pxblue/colors';\nimport { Spacer } from '@pxblue/react-components';\nimport { Typography } from '@material-ui/core';\nimport { number } from '@storybook/addon-knobs';\n\nexport const staticLayout = (): StoryFnReactReturnType => {\n    const size1 = number('Item 1 Size (px)', 60, { range: true, min: 20, max: 100, step: 20 });\n    const size2 = number('Item 2 Size (px)', 60, { range: true, min: 20, max: 100, step: 20 });\n    const size3 = number('Item 3 Size (px)', 60, { range: true, min: 20, max: 100, step: 20 });\n\n    return (\n        <>\n            <Typography>Horizontal</Typography>\n            <div style={{ width: 300, height: 50, display: 'inline', color: Colors.black[900] }}>\n                <Spacer width={size1} style={{ background: Colors.blue[300], display: 'inline-block' }}>\n                    1\n                </Spacer>\n                <Spacer width={size2} style={{ background: Colors.yellow[300], display: 'inline-block' }}>\n                    2\n                </Spacer>\n                <Spacer width={size3} style={{ background: Colors.red[300], display: 'inline-block' }}>\n                    3\n                </Spacer>\n            </div>\n            <Typography style={{ marginTop: 20 }}>Vertical</Typography>\n            <div style={{ width: 300, height: 300, color: Colors.black[900] }}>\n                <Spacer height={size1} style={{ background: Colors.blue[300] }}>\n                    1\n                </Spacer>\n                <Spacer height={size2} style={{ background: Colors.yellow[300] }}>\n                    2\n                </Spacer>\n                <Spacer height={size3} style={{ background: Colors.red[300] }}>\n                    3\n                </Spacer>\n            </div>\n        </>\n    );\n};\n\nstaticLayout.story = { name: 'with static layout' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/static-layout.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/spacer",__IDS_TO_FRAMEWORKS__:{}});staticLayout.story={name:"with static layout"};var __assign=function(){return(__assign=Object.assign||function(t){for(var s,i=1,n=arguments.length;i<n;i++)for(var p in s=arguments[i])Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p]);return t}).apply(this,arguments)},spacerModule={title:constants.a+"/Spacer",component:react_components.Spacer,decorators:[utils.g,dist.withA11y],parameters:__assign(__assign({},utils.f),{notes:{markdown:Object(utils.c)("Spacer.md")}})};__webpack_exports__.default=spacerModule},1885:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"getReadMeStory",(function(){return utils.d})),__webpack_require__.d(__webpack_exports__,"withBasicUsage",(function(){return withBasicUsage})),__webpack_require__.d(__webpack_exports__,"withCustomContent",(function(){return withCustomContent}));var react_components=__webpack_require__(5),constants=__webpack_require__(19),utils=__webpack_require__(14),dist=__webpack_require__(54),react=__webpack_require__(0),react_default=__webpack_require__.n(react),addon_knobs_dist=__webpack_require__(2),withBasicUsage=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){var title=Object(addon_knobs_dist.text)("title","title"),subtitle=Object(addon_knobs_dist.text)("subtitle","subtitle"),info=Object(addon_knobs_dist.text)("info","info");return react_default.a.createElement(react_components.ThreeLiner,{title:title,subtitle:subtitle,info:info})}),{__STORY__:"import React from 'react';\nimport { text } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport { WITH_MIN_PROPS_STORY_NAME } from '../../src/constants';\nimport { ThreeLiner } from '@pxblue/react-components';\n\nexport const withBasicUsage = (): StoryFnReactReturnType => {\n    const title = text('title', 'title');\n    const subtitle = text('subtitle', 'subtitle');\n    const info = text('info', 'info');\n    return <ThreeLiner title={title} subtitle={subtitle} info={info} />;\n};\n\nwithBasicUsage.story = { name: WITH_MIN_PROPS_STORY_NAME };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-basic-usage.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/three-liner",__IDS_TO_FRAMEWORKS__:{}}));withBasicUsage.story={name:constants.d};var TrendingUp=__webpack_require__(107),TrendingUp_default=__webpack_require__.n(TrendingUp),colors_dist=__webpack_require__(9),withCustomContent=(__webpack_require__(12).withSource,(0,__webpack_require__(12).addSource)((function(){var title=Object(addon_knobs_dist.text)("title","title"),subtitle=Object(addon_knobs_dist.text)("subtitle","subtitle"),info=Object(addon_knobs_dist.text)("info","info"),infoContent=Object(addon_knobs_dist.select)("infoContent",["text","<ChannelValue />"],"<ChannelValue />");return react_default.a.createElement(react_components.ThreeLiner,{title:title,subtitle:subtitle,info:"<ChannelValue />"===infoContent?react_default.a.createElement(react_components.ChannelValue,{value:"123",units:"hz",icon:react_default.a.createElement(TrendingUp_default.a,{htmlColor:colors_dist.red[500],style:Object(utils.b)()})}):info})}),{__STORY__:"import React from 'react';\nimport { select, text } from '@storybook/addon-knobs';\nimport { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';\nimport { ChannelValue, ThreeLiner } from '@pxblue/react-components';\nimport Trend from '@material-ui/icons/TrendingUp';\nimport * as Colors from '@pxblue/colors';\nimport { getLeftToRightIconTransform } from '../../src/utils';\n\nexport const withCustomContent = (): StoryFnReactReturnType => {\n    const title = text('title', 'title');\n    const subtitle = text('subtitle', 'subtitle');\n    const info = text('info', 'info');\n    const infoContent = select('infoContent', ['text', '<ChannelValue />'], '<ChannelValue />');\n    return (\n        <ThreeLiner\n            title={title}\n            subtitle={subtitle}\n            info={\n                infoContent === '<ChannelValue />' ? (\n                    <ChannelValue\n                        value={'123'}\n                        units={'hz'}\n                        icon={<Trend htmlColor={Colors.red[500]} style={getLeftToRightIconTransform()} />}\n                    />\n                ) : (\n                    info\n                )\n            }\n        />\n    );\n};\n\nwithCustomContent.story = { name: 'with custom content' };\n",__ADDS_MAP__:{},__MAIN_FILE_LOCATION__:"/with-custom-content.tsx",__MODULE_DEPENDENCIES__:[],__LOCAL_DEPENDENCIES__:{},__SOURCE_PREFIX__:"/home/circleci/project/demos/storybook/stories/three-liner",__IDS_TO_FRAMEWORKS__:{}}));withCustomContent.story={name:"with custom content"};var __assign=function(){return(__assign=Object.assign||function(t){for(var s,i=1,n=arguments.length;i<n;i++)for(var p in s=arguments[i])Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p]);return t}).apply(this,arguments)},threeLinerModule={title:constants.a+"/Three Liner",component:react_components.ThreeLiner,decorators:[utils.g,dist.withA11y],parameters:__assign(__assign({},utils.f),{notes:{markdown:__webpack_require__(682)}})};__webpack_exports__.default=threeLinerModule},19:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return COMPONENT_SECTION_NAME})),__webpack_require__.d(__webpack_exports__,"b",(function(){return README_STORY_NAME})),__webpack_require__.d(__webpack_exports__,"d",(function(){return WITH_MIN_PROPS_STORY_NAME})),__webpack_require__.d(__webpack_exports__,"c",(function(){return WITH_FULL_CONFIG_STORY_NAME}));var COMPONENT_SECTION_NAME="Components",README_STORY_NAME="README",WITH_MIN_PROPS_STORY_NAME="with basic usage",WITH_FULL_CONFIG_STORY_NAME="with full config"},200:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/topology_40.a5d5a664.png"},215:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/EatonLogoLight.0cb1841b.png"},216:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/EatonLogoDark.44182ecd.png"},326:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/farm.8a32e08b.jpg"},680:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),function(module){__webpack_require__.d(__webpack_exports__,"stories",(function(){return stories})),__webpack_require__.d(__webpack_exports__,"lightTheme",(function(){return lightTheme}));var _material_ui_core__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(456),_material_ui_core__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(457),_material_ui_core__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__(110),_material_ui_core__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__(1893),_storybook_react__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__(164),react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_5___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_5__),_pxblue_react_themes__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(180),_src_utils__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__(14),_pxblue_colors__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__(9),_material_ui_core_styles__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__(121),withSourceLoader=__webpack_require__(12).withSource,__STORY__=(__webpack_require__(12).addSource,withSourceLoader=__webpack_require__(12).withSource,__webpack_require__(12).addSource,"import { Button, createStyles, makeStyles, Typography } from '@material-ui/core';\nimport { storiesOf } from '@storybook/react';\nimport React from 'react';\nimport { blue as ReactTheme } from '@pxblue/react-themes';\nimport { hideTopBanner, storyWrapper } from '../src/utils';\nimport * as Colors from '@pxblue/colors';\nimport { createMuiTheme } from '@material-ui/core/styles';\nconst backgroundImage = require('../assets/circles-bg.svg');\nconst packageJSON = require('@pxblue/react-components/package.json');\n\nexport const stories = storiesOf('Intro/Overview', module);\n\n// Refactor welcome story to just createMuiTheme directly.\nexport const lightTheme = createMuiTheme(ReactTheme);\n\nconst useStyles = makeStyles(() =>\n    createStyles({\n        root: {\n            color: lightTheme.palette.primary.contrastText,\n            backgroundColor: lightTheme.palette.primary.main,\n            backgroundImage: `url(${backgroundImage})`,\n            backgroundSize: '200%',\n            height: '100%',\n            width: '100%',\n            display: 'flex',\n            alignContent: 'center',\n            justifyContent: 'center',\n            backgroundPosition: 'center',\n            flex: '1 1 0px',\n        },\n        container: {\n            display: 'flex',\n            flexDirection: 'column',\n            justifyContent: 'center',\n            textAlign: 'center',\n        },\n        icon: {\n            textAlign: 'center',\n        },\n        description: {\n            maxWidth: 900,\n            padding: 20,\n            paddingBottom: 0,\n            fontWeight: 400,\n        },\n        link: {\n            minWidth: 100,\n            fontWeight: 600,\n            borderColor: Colors.white[50],\n            textTransform: 'none',\n            '&:hover': {\n                borderColor: Colors.white[50],\n            },\n        },\n        githubIcon: {\n            width: 24,\n            height: 24,\n            fill: Colors.white[50],\n        },\n        github: {\n            fontWeight: 400,\n            color: Colors.white[50],\n        },\n        buttons: {\n            display: 'flex',\n            justifyContent: 'space-around',\n            marginTop: 36,\n        },\n    })\n);\nstories.addParameters({\n    options: {\n        showPanel: false,\n    },\n});\n\nstories.addDecorator(storyWrapper);\n\nstories.add('PX Blue React Components', () => {\n    const classes = useStyles();\n    const icon = require('../assets/pxb-icon.svg');\n    hideTopBanner();\n    return (\n        <div className={classes.root}>\n            <div className={classes.container}>\n                <div className={classes.icon}>\n                    <img src={icon} alt=\"pxb-icon\" className={'rotate'} />\n                </div>\n                <Typography variant={'h2'}>\n                    Power Xpert <strong>Blue</strong>\n                </Typography>\n                <Typography variant={'h4'}>React Component Library</Typography>\n                {packageJSON.version && <Typography variant={'subtitle1'}>v{packageJSON.version}</Typography>}\n                <Typography variant={'subtitle1'} className={classes.description}>\n                    Learn about and interact with our PX Blue components using Storybook.\n                </Typography>\n\n                <div className={classes.buttons}>\n                    <Button\n                        variant=\"outlined\"\n                        color=\"primary\"\n                        className={classes.link}\n                        target={'_blank'}\n                        href={'https://github.com/pxblue/react-component-library'}\n                        startIcon={\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" className={classes.githubIcon}>\n                                <title>github</title>\n                                <rect width=\"24\" height=\"24\" fill=\"none\" />\n                                <path d=\"M12,2A10,10,0,0,0,8.84,21.5c.5.08.66-.23.66-.5V19.31C6.73,19.91,6.14,18,6.14,18A2.69,2.69,0,0,0,5,16.5c-.91-.62.07-.6.07-.6a2.1,2.1,0,0,1,1.53,1,2.15,2.15,0,0,0,2.91.83,2.16,2.16,0,0,1,.63-1.34C8,16.17,5.62,15.31,5.62,11.5a3.87,3.87,0,0,1,1-2.71,3.58,3.58,0,0,1,.1-2.64s.84-.27,2.75,1a9.63,9.63,0,0,1,5,0c1.91-1.29,2.75-1,2.75-1a3.58,3.58,0,0,1,.1,2.64,3.87,3.87,0,0,1,1,2.71c0,3.82-2.34,4.66-4.57,4.91a2.39,2.39,0,0,1,.69,1.85V21c0,.27.16.59.67.5A10,10,0,0,0,12,2Z\" />\n                            </svg>\n                        }\n                    >\n                        <Typography variant={'subtitle2'} className={classes.github}>\n                            Github\n                        </Typography>\n                    </Button>\n                </div>\n            </div>\n        </div>\n    );\n});\n"),__ADDS_MAP__={},__MODULE_DEPENDENCIES__=[],__LOCAL_DEPENDENCIES__={},__IDS_TO_FRAMEWORKS__={},backgroundImage=__webpack_require__(1624),packageJSON=__webpack_require__(1625),stories=Object(_storybook_react__WEBPACK_IMPORTED_MODULE_4__.storiesOf)("Intro/Overview",module).addParameters({storySource:{source:__STORY__,locationsMap:__ADDS_MAP__}}).addDecorator(withSourceLoader(__STORY__,__ADDS_MAP__,"/welcome.stories.tsx",__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,"/home/circleci/project/demos/storybook/stories",__IDS_TO_FRAMEWORKS__)).addParameters({storySource:{source:__STORY__,locationsMap:__ADDS_MAP__}}).addDecorator(withSourceLoader(__STORY__,__ADDS_MAP__,"/welcome.stories.tsx",__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,"/home/circleci/project/demos/storybook/stories",__IDS_TO_FRAMEWORKS__)),lightTheme=Object(_material_ui_core_styles__WEBPACK_IMPORTED_MODULE_9__.a)(_pxblue_react_themes__WEBPACK_IMPORTED_MODULE_6__.blue),useStyles=Object(_material_ui_core__WEBPACK_IMPORTED_MODULE_0__.a)((function(){return Object(_material_ui_core__WEBPACK_IMPORTED_MODULE_1__.a)({root:{color:lightTheme.palette.primary.contrastText,backgroundColor:lightTheme.palette.primary.main,backgroundImage:"url("+backgroundImage+")",backgroundSize:"200%",height:"100%",width:"100%",display:"flex",alignContent:"center",justifyContent:"center",backgroundPosition:"center",flex:"1 1 0px"},container:{display:"flex",flexDirection:"column",justifyContent:"center",textAlign:"center"},icon:{textAlign:"center"},description:{maxWidth:900,padding:20,paddingBottom:0,fontWeight:400},link:{minWidth:100,fontWeight:600,borderColor:_pxblue_colors__WEBPACK_IMPORTED_MODULE_8__.white[50],textTransform:"none","&:hover":{borderColor:_pxblue_colors__WEBPACK_IMPORTED_MODULE_8__.white[50]}},githubIcon:{width:24,height:24,fill:_pxblue_colors__WEBPACK_IMPORTED_MODULE_8__.white[50]},github:{fontWeight:400,color:_pxblue_colors__WEBPACK_IMPORTED_MODULE_8__.white[50]},buttons:{display:"flex",justifyContent:"space-around",marginTop:36}})}));stories.addParameters({options:{showPanel:!1}}),stories.addDecorator(_src_utils__WEBPACK_IMPORTED_MODULE_7__.g),stories.add("PX Blue React Components",(function(){var classes=useStyles(),icon=__webpack_require__(1626);return Object(_src_utils__WEBPACK_IMPORTED_MODULE_7__.e)(),react__WEBPACK_IMPORTED_MODULE_5___default.a.createElement("div",{className:classes.root},react__WEBPACK_IMPORTED_MODULE_5___default.a.createElement("div",{className:classes.container},react__WEBPACK_IMPORTED_MODULE_5___default.a.createElement("div",{className:classes.icon},react__WEBPACK_IMPORTED_MODULE_5___default.a.createElement("img",{src:icon,alt:"pxb-icon",className:"rotate"})),react__WEBPACK_IMPORTED_MODULE_5___default.a.createElement(_material_ui_core__WEBPACK_IMPORTED_MODULE_2__.a,{variant:"h2"},"Power Xpert ",react__WEBPACK_IMPORTED_MODULE_5___default.a.createElement("strong",null,"Blue")),react__WEBPACK_IMPORTED_MODULE_5___default.a.createElement(_material_ui_core__WEBPACK_IMPORTED_MODULE_2__.a,{variant:"h4"},"React Component Library"),packageJSON.version&&react__WEBPACK_IMPORTED_MODULE_5___default.a.createElement(_material_ui_core__WEBPACK_IMPORTED_MODULE_2__.a,{variant:"subtitle1"},"v",packageJSON.version),react__WEBPACK_IMPORTED_MODULE_5___default.a.createElement(_material_ui_core__WEBPACK_IMPORTED_MODULE_2__.a,{variant:"subtitle1",className:classes.description},"Learn about and interact with our PX Blue components using Storybook."),react__WEBPACK_IMPORTED_MODULE_5___default.a.createElement("div",{className:classes.buttons},react__WEBPACK_IMPORTED_MODULE_5___default.a.createElement(_material_ui_core__WEBPACK_IMPORTED_MODULE_3__.a,{variant:"outlined",color:"primary",className:classes.link,target:"_blank",href:"https://github.com/pxblue/react-component-library",startIcon:react__WEBPACK_IMPORTED_MODULE_5___default.a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",className:classes.githubIcon},react__WEBPACK_IMPORTED_MODULE_5___default.a.createElement("title",null,"github"),react__WEBPACK_IMPORTED_MODULE_5___default.a.createElement("rect",{width:"24",height:"24",fill:"none"}),react__WEBPACK_IMPORTED_MODULE_5___default.a.createElement("path",{d:"M12,2A10,10,0,0,0,8.84,21.5c.5.08.66-.23.66-.5V19.31C6.73,19.91,6.14,18,6.14,18A2.69,2.69,0,0,0,5,16.5c-.91-.62.07-.6.07-.6a2.1,2.1,0,0,1,1.53,1,2.15,2.15,0,0,0,2.91.83,2.16,2.16,0,0,1,.63-1.34C8,16.17,5.62,15.31,5.62,11.5a3.87,3.87,0,0,1,1-2.71,3.58,3.58,0,0,1,.1-2.64s.84-.27,2.75,1a9.63,9.63,0,0,1,5,0c1.91-1.29,2.75-1,2.75-1a3.58,3.58,0,0,1,.1,2.64,3.87,3.87,0,0,1,1,2.71c0,3.82-2.34,4.66-4.57,4.91a2.39,2.39,0,0,1,.69,1.85V21c0,.27.16.59.67.5A10,10,0,0,0,12,2Z"}))},react__WEBPACK_IMPORTED_MODULE_5___default.a.createElement(_material_ui_core__WEBPACK_IMPORTED_MODULE_2__.a,{variant:"subtitle2",className:classes.github},"Github")))))}))}.call(this,__webpack_require__(679)(module))},681:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='# App Bar\n\nThe `<AppBar>` component is an extension of the default AppBar from Material UI that can be resized / collapsed as the page is scrolled.\n\n<div style="width: 100%; text-align: center">\n    <img width="100%" style="max-width: 600px" alt="Appbar" src="./images/appBar.gif">\n</div>\n\nIt supports three variants:\n\n-   Snap: Automatically switches between the `expandedHeight` and the `collapsedHeight` once the window is scrolled past the `scrollThreshold`.\n-   Collapsed: Stays permanently fixed at the `collapsedHeight` (like a standard AppBar).\n-   Expanded: Stays permanently fixed at the `expandedHeight`.\n\n## Usage\n\n<div style="width: 100%; text-align: center">\n    <img width="100%" style="max-width: 600px" alt="Appbar Anatomy" src="./images/appBarAnatomy1.png">\n    <img width="100%" style="max-width: 600px" alt="Appbar Anatomy" src="./images/appBarAnatomy2.png">\n</div>\n\n```tsx\nimport { AppBar, ThreeLiner } from \'@pxblue/react-components\';\n...\n// Default: AppBar will resize between expandedHeight and collapsed height when the window is scrolled past the scrollThreshold\n<AppBar variant={\'snap\'}>\n  {/* Contents */}\n</AppBar>\n\n// AppBar will stay fixed at the collapsedHeight size\n<AppBar variant={\'collapsed\'}>\n  {/* Contents */}\n</AppBar>\n\n// AppBar will stay fixed at the expandedHeight size\n<AppBar variant={\'expanded\'}>\n  {/* Contents */}\n</AppBar>\n\n// AppBar with ThreeLiner component\n<AppBar variant={\'snap\'}>\n  <Toolbar>\n    <ThreeLiner\n      title={\'title\'}\n      subtitle={\'subtitle\'}\n      info={\'info\'}\n    ></ThreeLiner>\n  </Toolbar>\n</AppBar>\n```\n\n## API\n\n<div style="overflow: auto;">\n\n| Prop Name         | Description                                      | Type                                      | Required | Default       |\n| ----------------- | ------------------------------------------------ | ----------------------------------------- | -------- | ------------- |\n| animationDuration | Length of the collapse / expand animation (ms)   | `number`                                  | no       | theme default |\n| backgroundImage   | Image to use as the app bar background           | `string`                                  | no       |               |\n| classes           | Style Overrides                                  | `AppBarClasses`                           | no       |               |\n| collapsedHeight   | Height of the AppBar when collapsed              | `number` \\| `string`                      | no       | theme default |\n| expandedHeight    | Height of the AppBar when expanded               | `number` \\| `string`                      | no       | 200           |\n| scrollContainerId | ID of the scrollable element                     | `string`                                  | no       | `window`      |\n| scrollThreshold   | Distance to scroll before collapsing the app bar | `number`                                  | no       | 136           |\n| variant           | Behavior of the App Bar                          | `\'expanded\'` \\| `\'collapsed\'` \\| `\'snap\'` | no       | \'snap\'        |\n\n</div>\n\nAny other props supplied will be provided to the root element ([`AppBar`](https://material-ui.com/api/app-bar/)).\n\n### Classes\n\nYou can override the classes used by PX Blue by passing a `classes` prop. It supports the following keys:\n\n| Name               | Description                                          |\n| ------------------ | ---------------------------------------------------- |\n| root               | Styles applied to the root element                   |\n| background         | Styles applied to the background image               |\n| expanded           | Styles applied to the root element when expanded     |\n| collapsed          | Styles applied to the root element when collapsed    |\n| expandedBackground | Styles applied to the background image when expanded |\n'},682:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='# Three Liner\n\nThe `ThreeLiner` can display up to three lines of stylized text or other custom content. It is most commonly used within the context of a [`AppBar`](./AppBar.md) component where the text can grow / shrink as the App Bar is expanded and collapsed.\n\n## API\n\n<div style="overflow: auto;">\n\n| Prop Name         | Description                                       | Type                | Required | Default                               |\n| ----------------- | ------------------------------------------------- | ------------------- | -------- | ------------------------------------- |\n| animationDuration | Time in milliseconds to transition between states | `number`            | no       | `theme.transitions.duration.standard` |\n| classes           | Style overrides                                   | `ThreeLinerClasses` | no       |                                       |\n| info              | Third line content                                | `ReactNode`         | no       |                                       |\n| title             | First line content                                | `ReactNode`         | no       |                                       |\n| subtitle          | Second line content                               | `ReactNode`         | no       |                                       |\n\n</div>\n### Classes\n\nYou can override the classes used by PX Blue by passing a `classes` prop. It supports the following keys:\n\n| Name     | Description                        |\n| -------- | ---------------------------------- |\n| root     | Styles applied to the root element |\n| title    | Styles applied to the first line   |\n| subtitle | Styles applied to the second line  |\n| info     | Styles applied to the third line   |\n'},683:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='# User Menu\n\nThe `<UserMenu>` is an Avatar that opens a Menu when clicked. It is typically used in the top-right corner of an application and indicates who is logged in. By default, the Menu will responsively transition to a bottom sheet for mobile views (if passing in a custom menu, you will be responsible for handling any responsiveness on your content). Setting the `useBottomSheetAt` prop to zero will disable the responsiveness.\n\n<div style="width: 100%; text-align: center; margin-bottom: 16px">\n<img width="30%" alt="UserMenu Avatar" src="./images/userMenuAvatar.png">\n</div>\n\n<div style="align-items: center; display:flex; justify-content: space-around; margin-bottom: 16px">\n<img width="30%" alt="UserMenu Opened" src="./images/userMenuOpened.png">\n<img width="35%" alt="UserMenu Opened Mobile" src="./images/userMenuOpenedMobile.png">\n</div>\n\nThe Menu can be populated via the `menuGroups` prop, or can be entirely customized by supplying your own `<Menu>`.\n\n## Usage\n\n<div style="width: 100%; text-align: center">\n    <img width="100%" style="max-width: 500px" alt="User Menu Anatomy" src="./images/userMenuAnatomy.png">\n</div>\n\n```tsx\nimport { UserMenu } from \'@pxblue/react-components\';\nimport { Avatar, Menu } from \'@material-ui/core\';\nimport Email from \'@material-ui/icons/Email\';\nimport Settings from \'@material-ui/icons/Settings\';\nimport Send from \'@material-ui/icons/Send\';\n\nconst avatar = <Avatar><SendIcon/></Avatar>;\n...\n/* Using menuGroups prop */\n<UserMenu avatar={avatar} menuGroups={[\n    {\n       items: [\n           {\n               title: \'Log Out\',\n               icon: <Send />,\n           },\n           {\n               title: \'Account Settings\',\n               icon: <Settings />,\n           },\n           {\n               title: \'Contact Us\',\n               icon: <Email />,\n           },\n       ],\n    },\n]} />\n\n/* Using menu prop */\n<UserMenu avatar={avatar} menu={<Menu/>} />\n\n```\n\n## API\n\n<div style="overflow: auto;">\n\n| Prop Name        | Description                                                                                                         | Type               | Required | Default                       |\n| ---------------- | ------------------------------------------------------------------------------------------------------------------- | ------------------ | -------- | ----------------------------- |\n| avatar           | MUI Avatar that displays                                                                                            | `Avatar`           | yes      |                               |\n| classes          | Style overrides                                                                                                     | `UserMenuClasses`  | no       |                               |\n| menu             | Custom MUI Menu displayed when Avatar is clicked                                                                    | Material-UI `Menu` | no       |                               |\n| menuGroups       | Groups of menu items that display                                                                                   | `UserMenuGroups[]` | no       |                               |\n| menuSubtitle     | Subtitle shown when menu is open                                                                                    | `string`           | no       |                               |\n| menuTitle        | Title shown when menu is open                                                                                       | `string`           | no       |                               |\n| MenuProps        | Property overrides for the MUI Menu                                                                                 | `MenuProps`        | no       |                               |\n| onClose          | Function called when the menu is closed                                                                             | `Function`         | no       |                               |\n| onOpen           | Function called when the menu is opened                                                                             | `Function`         | no       |                               |\n| useBottomSheetAt | Window pixel width at which the responsive bottom sheet menu is triggered (set to 0 to disable responsive behavior) | `number`           | no       | `theme.breakpoints.values.sm` |\n\n</div>\n\nAny other props supplied will be provided to the root element (`div`).\n\n### Classes\n\nYou can override the classes used by PX Blue by passing a `classes` prop. It supports the following keys:\n\n| Name        | Description                               |\n| ----------- | ----------------------------------------- |\n| root        | Styles applied to the root element        |\n| bottomSheet | Styles applied to responsive bottom sheet |\n\n### User Menu Groups Object\n\nThe `menuGroups` prop of the `<UserMenu>` includes many properties from the [`<DrawerNavGroup>`](https://pxblue-components.github.io/react/?path=/info/components-drawer--get-read-me-story) array found within a [`<DrawerBody>`](https://pxblue-components.github.io/react/?path=/info/components-drawer--get-read-me-story).\n\n<div style="overflow: auto;">\n\n| Prop Name | Description                         | Type             | Required | Default |\n| --------- | ----------------------------------- | ---------------- | -------- | ------- |\n| fontColor | The color used for the text         | `string`         | no       |         |\n| iconColor | The color used for icons            | `string`         | no       |         |\n| items     | List of navigation items to render  | `UserMenuItem[]` | yes      |         |\n| title     | Text to display in the group header | `string`         | no       |         |\n\n</div>\n\n### User Menu Item Object\n\n<div style="overflow: auto;">\n\n| Attribute   | Description                         | Type          | Required | Default |\n| ----------- | ----------------------------------- | ------------- | -------- | ------- |\n| chevron     | Show chevron icon to the right      | `boolean`     | no       | false   |\n| divider     | Show a divider line below the item  | `boolean`     | no       | true    |\n| icon        | A component to render for the icon  | `JSX.Element` | no       |         |\n| onClick     | A function to execute when clicked  | `function`    | no       |         |\n| statusColor | Status stripe and icon color        | `string`      | no       |         |\n| subtitle    | The text to show on the second line | `string`      | no       |         |\n| title       | The text to show on the first line  | `string`      | yes      |         |\n\n</div>\n'},713:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/trex.16a80028.jpeg"},743:function(module,exports,__webpack_require__){__webpack_require__(744),__webpack_require__(893),__webpack_require__(894),__webpack_require__(1578),module.exports=__webpack_require__(1579)},808:function(module,exports){},894:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var _home_circleci_project_demos_storybook_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_slicedToArray__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(468),_home_circleci_project_demos_storybook_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_toConsumableArray__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(736),_home_circleci_project_demos_storybook_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectSpread2__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__(469),react__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_3___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__),_storybook_react__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__(164),_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(2),_material_ui_core_styles__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(470),_material_ui_core_styles__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__(121),_material_ui_core_styles__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__(203),_material_ui_core_styles__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__(1889),_pxblue_react_themes__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__(180),_pxblue_storybook_themes__WEBPACK_IMPORTED_MODULE_12__=(__webpack_require__(1078),__webpack_require__(138)),_material_ui_core__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__(1890),jss__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__(69),jss_rtl__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__(717),jss_rtl__WEBPACK_IMPORTED_MODULE_15___default=__webpack_require__.n(jss_rtl__WEBPACK_IMPORTED_MODULE_15__),_storybook_addons__WEBPACK_IMPORTED_MODULE_16__=__webpack_require__(87),_storybook_addons__WEBPACK_IMPORTED_MODULE_16___default=__webpack_require__.n(_storybook_addons__WEBPACK_IMPORTED_MODULE_16__),_pxblue_storybook_rtl_addon__WEBPACK_IMPORTED_MODULE_17__=__webpack_require__(84),storybook_dark_mode_dist__WEBPACK_IMPORTED_MODULE_18__=__webpack_require__(53),channel=_storybook_addons__WEBPACK_IMPORTED_MODULE_16___default.a.getChannel();_pxblue_storybook_themes__WEBPACK_IMPORTED_MODULE_12__.a.brandTitle="PX Blue React Component Library",_pxblue_storybook_themes__WEBPACK_IMPORTED_MODULE_12__.a.brandUrl="https://pxblue.github.io","localhost"===window.top.location.hostname?_pxblue_storybook_themes__WEBPACK_IMPORTED_MODULE_12__.a.brandImage=__webpack_require__(1575):"/react-dev/"===window.top.location.pathname.slice(0,11)?_pxblue_storybook_themes__WEBPACK_IMPORTED_MODULE_12__.a.brandImage=__webpack_require__(1576):_pxblue_storybook_themes__WEBPACK_IMPORTED_MODULE_12__.a.brandImage=__webpack_require__(1577);var themeInit={dark:_pxblue_storybook_themes__WEBPACK_IMPORTED_MODULE_12__.a,light:_pxblue_storybook_themes__WEBPACK_IMPORTED_MODULE_12__.a,current:"light"};window.localStorage.setItem("sb-addon-themes-3",JSON.stringify(themeInit)),Object(_storybook_react__WEBPACK_IMPORTED_MODULE_4__.addParameters)({name:"PXBlue",notes:{markdown:"<div> </div>"},viewport:{viewports:{iPhone5:{name:"iPhone 5",styles:{width:"320px",height:"568px"}},iPhone6:{name:"iPhone 6",styles:{width:"375px",height:"667px"}},iPad:{name:"iPad",styles:{width:"768px",height:"1024px"}}}},options:{showRoots:!0},darkMode:{light:Object(_home_circleci_project_demos_storybook_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectSpread2__WEBPACK_IMPORTED_MODULE_2__.a)({},_pxblue_storybook_themes__WEBPACK_IMPORTED_MODULE_12__.a),dark:Object(_home_circleci_project_demos_storybook_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectSpread2__WEBPACK_IMPORTED_MODULE_2__.a)({},_pxblue_storybook_themes__WEBPACK_IMPORTED_MODULE_12__.a)}});var jss=Object(jss__WEBPACK_IMPORTED_MODULE_14__.c)({plugins:[].concat(Object(_home_circleci_project_demos_storybook_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_toConsumableArray__WEBPACK_IMPORTED_MODULE_1__.a)(Object(_material_ui_core_styles__WEBPACK_IMPORTED_MODULE_6__.a)().plugins),[jss_rtl__WEBPACK_IMPORTED_MODULE_15___default()()])}),appendDirection=function appendDirection(theme){return Object.assign(theme,{direction:Object(_pxblue_storybook_rtl_addon__WEBPACK_IMPORTED_MODULE_17__.getDirection)()})};Object(_storybook_react__WEBPACK_IMPORTED_MODULE_4__.addDecorator)((function(storyFn){var _useState=Object(_storybook_addons__WEBPACK_IMPORTED_MODULE_16__.useState)(Object(_material_ui_core_styles__WEBPACK_IMPORTED_MODULE_7__.a)(appendDirection(_pxblue_react_themes__WEBPACK_IMPORTED_MODULE_10__.blue))),_useState2=Object(_home_circleci_project_demos_storybook_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_slicedToArray__WEBPACK_IMPORTED_MODULE_0__.a)(_useState,2),lightTheme=_useState2[0],setLightTheme=_useState2[1],_useState3=Object(_storybook_addons__WEBPACK_IMPORTED_MODULE_16__.useState)(Object(_material_ui_core_styles__WEBPACK_IMPORTED_MODULE_7__.a)(appendDirection(_pxblue_react_themes__WEBPACK_IMPORTED_MODULE_10__.blueDark))),_useState4=Object(_home_circleci_project_demos_storybook_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_slicedToArray__WEBPACK_IMPORTED_MODULE_0__.a)(_useState3,2),darkTheme=_useState4[0],setDarkTheme=_useState4[1];Object(_storybook_addons__WEBPACK_IMPORTED_MODULE_16__.useEffect)((function(){return channel.on(_pxblue_storybook_rtl_addon__WEBPACK_IMPORTED_MODULE_17__.DIR_CHANGE_EVENT,updateDirection),function(){return channel.off(_pxblue_storybook_rtl_addon__WEBPACK_IMPORTED_MODULE_17__.DIR_CHANGE_EVENT,updateDirection)}}),[channel]);var updateDirection=function updateDirection(){setLightTheme(Object(_material_ui_core_styles__WEBPACK_IMPORTED_MODULE_7__.a)(appendDirection(_pxblue_react_themes__WEBPACK_IMPORTED_MODULE_10__.blue))),setDarkTheme(Object(_material_ui_core_styles__WEBPACK_IMPORTED_MODULE_7__.a)(appendDirection(_pxblue_react_themes__WEBPACK_IMPORTED_MODULE_10__.blueDark)))};return react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(_material_ui_core_styles__WEBPACK_IMPORTED_MODULE_8__.b,{jss:jss},react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(_material_ui_core_styles__WEBPACK_IMPORTED_MODULE_9__.a,{theme:Object(storybook_dark_mode_dist__WEBPACK_IMPORTED_MODULE_18__.useDarkMode)()?darkTheme:lightTheme},react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(_material_ui_core__WEBPACK_IMPORTED_MODULE_13__.a,null),react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("div",{className:"wrapper"},storyFn())))})),Object(_storybook_react__WEBPACK_IMPORTED_MODULE_4__.addDecorator)(Object(_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_5__.withKnobs)({escapeHTML:!1}))}},[[743,1,2]]]);
//# sourceMappingURL=main.61a4c1f82b5f3922aa06.bundle.js.map