-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmain.f72fda5344c128307073.bundle.js
2 lines (2 loc) · 95 KB
/
main.f72fda5344c128307073.bundle.js
1
2
(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{135:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return updateTitle}));var updateTitle=function updateTitle(){var link;setTimeout((function(){window.top.document.title="PX Blue | React Native Components"}),10),(link=window.top.document.querySelector("link[rel*='icon']")||document.createElement("link")).type="image/x-icon",link.rel="shortcut icon",link.href="./pxblue.png",window.top.document.getElementsByTagName("head")[0].appendChild(link)}},195:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"appliedTheme",(function(){return appliedTheme}));var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__),_storybook_react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(50),_material_ui_core_styles__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__(196),_material_ui_core_styles__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__(730),_pxblue_react_themes__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__(306),_pxblue_colors__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(3),_pxblue_storybook_themes__WEBPACK_IMPORTED_MODULE_7__=(__webpack_require__(666),__webpack_require__(69)),_material_ui_core__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__(732);_pxblue_storybook_themes__WEBPACK_IMPORTED_MODULE_7__.a.brandTitle="PX Blue React Native Component Library",_pxblue_storybook_themes__WEBPACK_IMPORTED_MODULE_7__.a.brandUrl="https://pxblue.github.io","localhost"===window.top.location.hostname?_pxblue_storybook_themes__WEBPACK_IMPORTED_MODULE_7__.a.brandImage=__webpack_require__(682):"/react-native-dev/"===window.top.location.pathname.slice(0,18)?_pxblue_storybook_themes__WEBPACK_IMPORTED_MODULE_7__.a.brandImage=__webpack_require__(683):_pxblue_storybook_themes__WEBPACK_IMPORTED_MODULE_7__.a.brandImage=__webpack_require__(684),Object(_storybook_react__WEBPACK_IMPORTED_MODULE_1__.addParameters)({notes:{markdown:"<div> </div>"},options:{theme:_pxblue_storybook_themes__WEBPACK_IMPORTED_MODULE_7__.a,showRoots:!0}});var appliedTheme=Object(_material_ui_core_styles__WEBPACK_IMPORTED_MODULE_2__.a)(_pxblue_react_themes__WEBPACK_IMPORTED_MODULE_4__.blue);Object(_storybook_react__WEBPACK_IMPORTED_MODULE_1__.addDecorator)((function(storyFn){return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_styles__WEBPACK_IMPORTED_MODULE_3__.a,{theme:appliedTheme},react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core__WEBPACK_IMPORTED_MODULE_8__.a,null),react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div",{className:"wrapper",style:{color:_pxblue_colors__WEBPACK_IMPORTED_MODULE_5__.gray[800]}},storyFn()))}))},305:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),function(module){__webpack_require__.d(__webpack_exports__,"stories",(function(){return stories}));var _material_ui_core__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(733),_material_ui_core__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(736),_material_ui_core__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__(103),_material_ui_core__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__(735),_storybook_react__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__(50),react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_5___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_5__),_storybook_config__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(195),_pxblue_colors__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__(3),_src_utils__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__(135),backgroundImage=__webpack_require__(691),packageJSON=__webpack_require__(692),stories=Object(_storybook_react__WEBPACK_IMPORTED_MODULE_4__.storiesOf)("Intro/Overview",module),useStyles=Object(_material_ui_core__WEBPACK_IMPORTED_MODULE_0__.a)((function(){return Object(_material_ui_core__WEBPACK_IMPORTED_MODULE_1__.a)({root:{color:_pxblue_colors__WEBPACK_IMPORTED_MODULE_7__.white[50],backgroundColor:_storybook_config__WEBPACK_IMPORTED_MODULE_6__.appliedTheme.palette.primary.main,backgroundImage:"url("+backgroundImage+")",height:"100%",width:"100%",display:"flex",alignContent:"center",justifyContent:"center",backgroundPosition:"center",backgroundSize:"200%"},container:{display:"flex",flexDirection:"column",justifyContent:"center",textAlign:"center",padding:"0 8px"},icon:{textAlign:"center"},description:{maxWidth:900,padding:20,paddingBottom:0,fontWeight:400},link:{minWidth:100,fontWeight:600,borderColor:_pxblue_colors__WEBPACK_IMPORTED_MODULE_7__.white[50],textTransform:"none","&:hover":{borderColor:_pxblue_colors__WEBPACK_IMPORTED_MODULE_7__.white[50]}},githubIcon:{width:24,height:24,marginRight:8,fill:_pxblue_colors__WEBPACK_IMPORTED_MODULE_7__.white[50]},github:{fontWeight:400,color:_pxblue_colors__WEBPACK_IMPORTED_MODULE_7__.white[50]},buttons:{display:"flex",justifyContent:"space-around",marginTop:36}})}));stories.addParameters({options:{showPanel:!1}}),stories.add("PX Blue React Native Components",(function(){var banner;(banner=window.top.document.getElementsByClassName("simplebar-content")[1]).setAttribute("style","display: unset"),window.top.location.href.includes("/info/")&&(window.top.history.replaceState(null,"",window.top.location.href.replace("/info/","/story/")),banner.children[0].children[0].children[0].children[0].click()),Object(_src_utils__WEBPACK_IMPORTED_MODULE_8__.a)();var classes=useStyles(),icon=__webpack_require__(693);return 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 Native 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 our PX Blue components in the API section."),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-native-component-library"},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__(194)(module))},313:function(module,exports,__webpack_require__){__webpack_require__(314),__webpack_require__(464),__webpack_require__(195),module.exports=__webpack_require__(689)},380:function(module,exports){},5:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"b",(function(){return getReadMe})),__webpack_require__.d(__webpack_exports__,"a",(function(){return docFn}));var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__),_src_utils__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(135),getReadMe=function(name){var md=__webpack_require__(696)("./"+name);return md.default=md.default.replace(/\(.\/.*md\)/g,(function(substring){return"("+window.top.location.href.split("/?")[0]+"?path=/info/components-documentation-"+substring.split("/")[1].split(".")[0].replace(/\.?([A-Z])/g,(function(x){return"-"+x.toLowerCase()}))+")"})),md},docFn=function(){return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment,null,((banner=window.top.document.getElementsByClassName("simplebar-content")[1]).setAttribute("style","display: none"),window.top.location.href.includes("/story/")&&(window.top.history.replaceState(null,"",window.top.location.href.replace("/story/","/info/")),banner.children[0].children[0].children[0].children[1].click()),void Object(_src_utils__WEBPACK_IMPORTED_MODULE_1__.a)()));var banner}},682:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/pxblue-react-native-alpha.437f65ed.svg"},683:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/pxblue-react-native-beta.5b3ee5c0.svg"},684:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/pxblue-react-native.c4092748.svg"},689:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),function(module){var _storybook_react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(50);module._StorybookPreserveDecorators=!0,Object(_storybook_react__WEBPACK_IMPORTED_MODULE_0__.configure)([__webpack_require__(690),__webpack_require__(694)],module)}.call(this,__webpack_require__(194)(module))},690:function(module,exports,__webpack_require__){var map={"./welcome.stories.tsx":305};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=690},691:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/circles-bg.8d837a68.svg"},693:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/pxb-icon.c26b974a.svg"},694:function(module,exports,__webpack_require__){var map={"./api.stories.tsx":695,"./welcome.stories.tsx":305};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=694},695:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),function(module){__webpack_require__.d(__webpack_exports__,"stories",(function(){return stories}));var _storybook_react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(50),_utils__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(5),stories=Object(_storybook_react__WEBPACK_IMPORTED_MODULE_0__.storiesOf)("Components/Documentation",module);stories.add("Channel Value",_utils__WEBPACK_IMPORTED_MODULE_1__.a,{notes:{markdown:Object(_utils__WEBPACK_IMPORTED_MODULE_1__.b)("ChannelValue.md")}}),stories.add("Collapsible Header Layout",_utils__WEBPACK_IMPORTED_MODULE_1__.a,{notes:{markdown:Object(_utils__WEBPACK_IMPORTED_MODULE_1__.b)("CollapsibleHeaderLayout.md")}}),stories.add("Drawer",_utils__WEBPACK_IMPORTED_MODULE_1__.a,{notes:{markdown:Object(_utils__WEBPACK_IMPORTED_MODULE_1__.b)("Drawer.md")}}),stories.add("Empty State",_utils__WEBPACK_IMPORTED_MODULE_1__.a,{notes:{markdown:Object(_utils__WEBPACK_IMPORTED_MODULE_1__.b)("EmptyState.md")}}),stories.add("Header",_utils__WEBPACK_IMPORTED_MODULE_1__.a,{notes:{markdown:Object(_utils__WEBPACK_IMPORTED_MODULE_1__.b)("Header.md")}}),stories.add("Hero",_utils__WEBPACK_IMPORTED_MODULE_1__.a,{notes:{markdown:Object(_utils__WEBPACK_IMPORTED_MODULE_1__.b)("Hero.md")}}),stories.add("Icons",_utils__WEBPACK_IMPORTED_MODULE_1__.a,{notes:{markdown:Object(_utils__WEBPACK_IMPORTED_MODULE_1__.b)("Icons.md")}}),stories.add("Info List Item",_utils__WEBPACK_IMPORTED_MODULE_1__.a,{notes:{markdown:Object(_utils__WEBPACK_IMPORTED_MODULE_1__.b)("InfoListItem.md")}}),stories.add("List Item Tag",_utils__WEBPACK_IMPORTED_MODULE_1__.a,{notes:{markdown:Object(_utils__WEBPACK_IMPORTED_MODULE_1__.b)("ListItemTag.md")}}),stories.add("Mobile Stepper",_utils__WEBPACK_IMPORTED_MODULE_1__.a,{notes:{markdown:Object(_utils__WEBPACK_IMPORTED_MODULE_1__.b)("MobileStepper.md")}}),stories.add("Score Card",_utils__WEBPACK_IMPORTED_MODULE_1__.a,{notes:{markdown:Object(_utils__WEBPACK_IMPORTED_MODULE_1__.b)("ScoreCard.md")}}),stories.add("Spacer",_utils__WEBPACK_IMPORTED_MODULE_1__.a,{notes:{markdown:Object(_utils__WEBPACK_IMPORTED_MODULE_1__.b)("Spacer.md")}}),stories.add("Typography",_utils__WEBPACK_IMPORTED_MODULE_1__.a,{notes:{markdown:Object(_utils__WEBPACK_IMPORTED_MODULE_1__.b)("Typography.md")}}),stories.add("User Menu",_utils__WEBPACK_IMPORTED_MODULE_1__.a,{notes:{markdown:Object(_utils__WEBPACK_IMPORTED_MODULE_1__.b)("UserMenu.md")}})}.call(this,__webpack_require__(194)(module))},696:function(module,exports,__webpack_require__){var map={"./ChannelValue.md":697,"./CollapsibleHeaderLayout.md":698,"./Drawer.md":699,"./EmptyState.md":700,"./Header.md":701,"./Hero.md":702,"./IconWrapper.md":703,"./Icons.md":704,"./InfoListItem.md":705,"./ListItemTag.md":706,"./MobileStepper.md":707,"./README.md":708,"./ScoreCard.md":709,"./Spacer.md":710,"./Typography.md":711,"./UserMenu.md":712,"./images/ListItemTagInInfoListItem.png":713,"./images/channelValue.png":714,"./images/collapsibleHeaderLayout.gif":715,"./images/emptyState.png":716,"./images/header_large.png":717,"./images/header_small.png":718,"./images/hero.png":719,"./images/infoListItem.png":720,"./images/listItemTag.png":721,"./images/mobileStepper.png":722,"./images/scorecard.png":723,"./images/scorecard_alt.png":724,"./images/spacer.png":725,"./images/typography.png":726,"./images/userMenuAvatar.png":727,"./images/userMenuOpened.png":728};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=696},697: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<img width=\"300\" alt=\"Channel Value component\" src=\"./images/channelValue.png\">\n\n## Usage\n\n```tsx\nimport { ChannelValue } from '@pxblue/react-native-components';\n\n<ChannelValue value={100} units={'%'} icon={{ family: 'pxblue', name: 'battery' }} />;\n```\n\n## API\n\n<div style=\"overflow: auto\">\n\n| Prop Name | Description | Type | Required | Default |\n| ----------- | --------------------------------------------------- | -------------------------------------- | -------- | ------------------- |\n| value | Text to display for the value | `string` \\| `number` | yes | |\n| icon | A component to render for the icon | [`IconSource`](./Icons.md) | no | |\n| iconSize | The size to render the icon | `number` | no | `fontSize` |\n| iconColor | A component to render for the icon | `string` | no | `theme.colors.text` |\n| units | Text to display for the units | `string` | no | |\n| unitSpace\\* | Whether to show a space between the value and units | `'show'` \\| `'hide'` \\| `'auto'` | no | `'auto'` |\n| prefix | If true, shows units before the value | `boolean` | no | `false` |\n| fontSize | The size used for the text elements | `number` | no | 'medium' |\n| color | The color used for the text elements | `string` | no | `theme.colors.text` |\n| theme | Theme value overrides | `$DeepPartial<ReactNativePaper.Theme>` | no | |\n\n</div>\n\n> *Setting `unitSpace` to `'auto'` will show a space for all units except for '%', '℉', '°F', '℃', '°C', and '°'. When `prefix` is true, the space will be shown for all units except for '$'.\n\n### Styles\n\nYou can override the internal styles used by PX Blue by passing a `styles` prop. It supports the following keys:\n\n| Name | Description |\n| ----- | ----------------------------------- |\n| root | Styles applied to the root element |\n| units | Styles applied to the units element |\n| value | Styles applied to the value element |\n"},698:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default="# CollapsibleHeaderLayout\n\nThe `<CollapsibleHeaderLayout>` component is used as a full-page layout component that manages the height of a collapsible [`<Header>`](./Header.md). When using the `dynamic` variant on the `<Header>`, it will gradually collapse and expand relative to the scroll position of the screen.\n\n<img width=\"400\" alt=\"Collapsed header\" src=\"./images/collapsibleHeaderLayout.gif\">\n\n## Usage\n\n```tsx\nimport { CollapsibleHeaderLayout } from '@pxblue/react-native-components';\n\n<CollapsibleHeaderLayout\n HeaderProps={{\n variant: 'dynamic',\n title: 'Valley Forge',\n subtitle: 'The Last Stand',\n icon: { name: 'menu' },\n onIconPress: () => {},\n actionItems: [{ icon: MoreIcon, onPress: () => {} }],\n }}\n>\n {/* Main content to go in the ScrollView */}\n</CollapsibleHeaderLayout>;\n```\n\n> Note that you must set the `variant` prop to 'dynamic' in the `HeaderProps` object for the collapsible behavior to work.\n\n## API\n\n<div style=\"overflow: auto\">\n\n| Prop Name | Description | Type | Required | Default |\n| --------------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | -------- | ------- |\n| HeaderProps | Props to spread to the underlying [Header](./Header.md) | `HeaderProps` | yes | |\n| ScrollViewProps | Props to spread to the underlying [ScrollView](https://reactnative.dev/docs/scrollview) | [`ScrollViewProps`](https://reactnative.dev/docs/scrollview#props) | no | |\n| theme | Theme value overrides | `$DeepPartial<ReactNativePaper.Theme>` | no | |\n\n</div>\n\nAny other props will be provided to the root element ([**View**](https://reactnative.dev/docs/view)).\n\n### Styles\n\nYou can override the internal styles used by PX Blue by passing a `styles` prop. It supports the following keys:\n\n| Name | Description |\n| ---- | ---------------------------------- |\n| root | Styles applied to the root element |\n"},699:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default="# Drawer\n\nThe `<Drawer>` component is side-menu that houses navigation items. The PX Blue Drawer includes helper components for `<DrawerHeader>`, `<DrawerSubheader>`, `<DrawerBody>`, `<DrawerNavGroup>`, `<DrawerNavItem>`, and `<DrawerFooter>`to help organize the content. To integrate in-app navigation, the `<Drawer>` component needs to be paired with a navigation provider — we recommend using [React Navigation](https://reactnavigation.org/docs/getting-started).\n\nTo learn more about the Navigation design pattern, check out our [documentation](https://pxblue.github.io/patterns/navigation).\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### Drawer Usage\n\n```tsx\nimport { Drawer, DrawerHeader, DrawerBody, DrawerNavGroup, DrawerNavItem } from '@pxblue/react-native-components';\n\n<Drawer\n activeItem={selectedItem}\n onItemSelect={(id) => {\n /* updateSelectedItem */\n }}\n>\n <DrawerHeader title={'Drawer Title'} subtitle={'Drawer Subtitle'} icon={<Menu />} />\n <DrawerSubheader>{/* contents */}</DrawerSubheader>\n <DrawerBody>\n {/* Using 'items' prop */}\n <DrawerNavGroup\n title={'Navigation Group'}\n items={[\n {\n title: 'Identity Management',\n itemID: 'g1i1',\n },\n ]}\n />\n {/* Using children */}\n <DrawerNavGroup title={'Navigation Group'}>\n <DrawerNavItem itemID={'item1'} title={'Item 1'} />\n <DrawerNavItem itemID={'item2'} title={'Item 2'}>\n <DrawerNavItem itemID={'item3'} title={'Item 3'} />\n </DrawerNavItem>\n </DrawerNavGroup>\n </DrawerBody>\n <DrawerFooter>{/* contents */}</DrawerFooter>\n</Drawer>;\n```\n\n### Drawer API\n\n<div style=\"overflow: auto;\">\n\n| Prop Name | Description | Type | Required | Default |\n| ------------------------------- | -------------------------------------------------------------------- | ---------------------- | -------- | ------- |\n| activeItem | The itemID of the currently active / selected item | `string` | no | |\n| onItemSelect | A callback function to execute whenever a navigation item is clicked | `(id: string) => void` | 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 ([**Surface**](https://callstack.github.io/react-native-paper/surface.html)).\n\n#### Styles\n\nYou can override the internal styles used by PX Blue by passing a `styles` prop. The Drawer supports the following keys:\n\n<div style=\"overflow: auto;\">\n\n| Name | Description |\n| ---- | ------------------------------------------- |\n| root | Style override for the root Surface element |\n\n</div>\n\n## DrawerHeader\n\nThe `<DrawerHeader>` is a subsection that appears at the top of `<Drawer>`. Its content can be provided by the `title`, `subtitle`, and `icon` props, or you can pass in your own custom content via `titleContent`.\n\n### DrawerHeader 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.colors.primary` |\n| backgroundImage | An image to display in the header | `ImageSourcePropType` | no | |\n| backgroundOpacity | The opacity of the background image | `number` | no | `0.3` |\n| fontColor | The color of the text elements | `string` | no | `theme.colors.surface` |\n| icon | A component to render for the icon | [`IconSource`](./Icons.md) | no | |\n| onIconPress | A callback to execute when the icon is pressed | `() => void` | no | |\n| subtitle | The second line of text | `string` | no | |\n| title | The first line of text | `string` | no | |\n| titleContent | Custom content for header title area | `ReactNode` | no | |\n| theme | Theme value overrides | `$DeepPartial<ReactNativePaper.Theme>` | no | |\n\n</div>\n\nAny other props will be provided to the root element ([**View**](https://reactnative.dev/docs/view)).\n\n### Styles\n\nYou can override the internal styles used by PX Blue by passing a `styles` prop. The DrawerHeader supports the following keys:\n\n<div style=\"overflow: auto\">\n\n| Name | Description |\n| ---------------------- | ---------------------------------------------- |\n| root | Styles applied to the root element |\n| backgroundImageWrapper | Styles applied to the background image wrapper |\n| backgroundImage | Styles applied to the background image |\n| content | Styles applied to the content wrapper |\n| textContent | Styles applied to the text wrapper |\n| title | Styles applied to the title element |\n| subtitle | Styles applied to the subtitle element |\n| icon | Styles applied to the left icon element |\n\n</div>\n\n## DrawerSubheader\n\nThe `<DrawerSubheader>` is an optional subsection that will appear below the `<DrawerHeader>` and above the `<DrawerBody>`. It can be used to support custom content (passed as children), such as filtering options or to display additional information.\n\n### DrawerSubheader API\n\n<div style=\"overflow: auto;\">\n\n| Prop Name | Description | Type | Required | Default |\n| --------- | ---------------------------------------------------- | --------- | -------- | ------- |\n| divider | Whether to show a dividing line below the HeroBanner | `boolean` | no | `true` |\n\n</div>\n\n## DrawerBody\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### DrawerBody API\n\n<div style=\"overflow: auto;\">\n\n| Prop Name | Description | Type | Required | Default |\n| ------------------------------- | ---------------------------------------------------------- | ------------------ | -------- | ------- |\n| styles | Style overrides | `DrawerBodyStyles` | 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 ([**ScrollView**](https://reactnative.dev/docs/scrollview)).\n\n#### Styles\n\nYou can override the internal styles used by PX Blue by passing a `styles` prop. The Drawer supports the following keys:\n\n<div style=\"overflow: auto;\">\n\n| Name | Description |\n| ---- | ---------------------------------------------- |\n| root | Style override for the root ScrollView element |\n\n</div>\n\n## DrawerNavGroup\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 `<DrawerNavItem>` children to the `<DrawerNavGroup>`.\n\n### DrawerNavGroup API\n\n<div style=\"overflow: auto;\">\n\n| Prop Name | Description | Type | Required | Default |\n| ------------------------------- | ---------------------------------------------------------- | ----------- | -------- | --------------------------- |\n| items | List of navigation 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 ([**View**](https://reactnative.dev/docs/view)).\n\n#### Styles\n\nYou can override the internal styles used by PX Blue by passing a `styles` prop. The DrawerNavGroup supports the following keys:\n\n<div style=\"overflow: auto;\">\n\n| Name | Description |\n| ----------- | -------------------------------------- |\n| root | Styles applied to the root element |\n| textContent | Styles applied to the text wrapper |\n| title | Styles applied to the title element |\n| divider | Styles applied to the divider elements |\n\n</div>\n\n## DrawerFooter\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### DrawerFooter API\n\n<div style=\"overflow: auto;\">\n\n| Prop Name | Description | Type | Required | Default |\n| --------- | -------------------------------------------- | --------- | -------- | ------- |\n| divider | Whether to show a dividing line above footer | `boolean` | no | `true` |\n\n</div>\n\n## DrawerNavItem\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).\n\n### Drawer Nav Item API\n\n<div style=\"overflow: auto;\">\n\n| Prop Name | Description | Type | Required | Default |\n| ------------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------- | -------- | ------- |\n| depth\\* | The nested depth of the item | `number` | no | 0 |\n| hidden | Hide / do not render the nav item | `boolean` | no | `false` |\n| icon | A component to render for the left icon | [`IconSource`](./Icons.md) | no | |\n| isInActiveTree\\* | Sets whether the item is a parent of the currently active item | `boolean` | no | `false` |\n| itemID | An 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| onPress | A function to execute when the item is pressed | `() => void` | no | |\n| rightComponent | Custom content/component to display to the right | `ReactNode` | no | |\n| statusColor | Color used for the status stripe and icon | `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| [...sharedProps](#shared-props) | Props that can be set at any level in the drawer hierarchy | - | - | |\n\n</div>\n\n> Props marked with a star (\\*) are managed automatically when using the `<DrawerNavItem>` inside of a `<DrawerNavGroup>`.\n\nA `<NestedNavItem>` has all the same properties as a `<NavItem>` but does not support icons.\n\n#### Styles\n\nYou can override the internal styles used by PX Blue by passing a `styles` prop. The DrawerNavItem supports the following keys:\n\n<div style=\"overflow: auto;\">\n \n| Name | Description |\n| ------------------------ | --------------------------------------------------- |\n| root | Styles applied to the root element |\n| activeBackground | Styles applied to the background of an active item |\n| expandIcon | Styles applied to right content expand icon |\n| infoListItem | Styles passed to the underlying InfoListItem |\n\n</div>\n\n## Shared Props\n\nThe following props can be set at any level in the drawer hierarchy (`<Drawer>`, `<DrawerBody>`, `<DrawerNavGroup>`, or `<DrawerNavItem>`). 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| activeItemBackgroundShape | Shape of the active item background highlight | `'round'` \\| `'square'` | no | square |\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| chevron | Add chevrons for all menu items | `boolean` | no | `false` |\n| collapseIcon | Icon used to collapse a DrawerNavGroup | `JSX.Element` | no | `expandIcon` rotated 180 degrees |\n| disableActiveItemParentStyles | When true, disables the semi-bold text style on parent elements of active item | `boolean` | no | `false` |\n| divider | Show a dividing line between all items | `boolean` | no | `false` |\n| expandIcon | Icon used to expand a DrawerNavGroup | `JSX.Element` | no | `<MatIcon name={'expand-more'}/>` at top-level, `<MatIcon name={'arrow-drop-down'} />` for nested |\n| hidePadding | Hide the padding reserved for DrawerNavItem icons | `boolean` | no | |\n| itemFontColor | The color used for the DrawerNavItem text | `string` | no | varies for light/dark theme |\n| itemIconColor | The color used for the DrawerNavItem icon | `string` | no | varies for light/dark theme |\n| nestedBackgroundColor | Background color for nested items | `string` | no | theme.palette.type === 'light' ? white[200] : darkBlack[100] |\n| nestedDivider | Show a dividing line between nested items | `boolean` | no | `false` |\n| theme | Theme value overrides | `$DeepPartial<ReactNativePaper.Theme>` | no | |\n\n</div>\n"},700: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<img width=\"500\" alt=\"Empty state with all props\" src=\"./images/emptyState.png\">\n\n## Usage\n\n```tsx\nimport { EmptyState } from '@pxblue/react-native-components';\n\n<EmptyState title={'Nothing Found'} description={'Not a single thing'} icon={{ family: 'pxblue', name: 'battery' }} />;\n```\n\n## API\n\n<div style=\"overflow: auto\">\n\n| Prop Name | Description | Type | Required | Default |\n| ----------- | ---------------------------------------------- | -------------------------------------- | -------- | ------- |\n| title | The primary text to display (first line) | `string` | yes | |\n| description | The secondary text to display (second line) | `string` | no | |\n| icon | A component to render for the primary icon | [`IconSource`](./Icons.md) | no | |\n| iconSize | The size of the primary icon (100-200) | `number` | no | 100 |\n| iconColor | The color of the primary icon | `string` | no | `text` |\n| actions | Additional components to render below the text | `JSX.Element` | no | |\n| theme | Theme value overrides | `$DeepPartial<ReactNativePaper.Theme>` | no | |\n\n</div>\n\n### Styles\n\nYou can override the internal styles used by PX Blue by passing a `styles` prop. It supports the following keys:\n\n| Name | Description |\n| ----- | ----------------------------------- |\n| root | Styles applied to the root element |\n| units | Styles applied to the units element |\n| value | Styles applied to the value element |\n"},701:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default="# Header\n\nThe `<Header>` component is used at the top of the page to display page information. It shows a title and has optional parameters to show a subtitle, background image, navigation button, and multiple action buttons. The header can also be configured to expand/collapse as desired. For expand/collapse behavior tied to the screen scroll position, you should use the [`<CollapsibleHeaderLayout>`](./CollapsibleHeaderLayout.md) component.\n\n<img width=\"400\" alt=\"Collapsed header\" src=\"./images/header_small.png\">\n<img width=\"400\" alt=\"Expanded header\" src=\"./images/header_large.png\">\n\n## Usage\n\n```tsx\nimport { Header } from '@pxblue/react-native-components';\n\n<Header\n title={'Valley Forge'}\n subtitle={'The Last Stand'}\n icon={{ name: 'menu' }}\n onIconPress={() => {}}\n actionItems={[\n {\n icon: { name: 'more-vert' },\n onPress: () => {},\n },\n ]}\n/>;\n```\n\n## API\n\n<div style=\"overflow: auto\">\n\n| Prop Name | Description | Type | Required | Default |\n| ------------------ | -------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | -------- | ------------------------ |\n| actionItems | Array of icons / actions to display on the right | `Array<HeaderIcon \\| HeaderActionComponent>` | no | |\n| backgroundColor | The color used for the background | `string` | no | `theme.colors.primary` |\n| backgroundImage | An image to blend with the colored background in the header | `ImageSourcePropType` | no | |\n| collapsedHeight | The height of the header when collapsed | `number` | no | 56 |\n| expandable | Allow the header to expand/collapse on tap | `boolean` | no | `false` |\n| expandedHeight | The height of the header when expanded | `number` | no | 200 |\n| fontColor | Color of the title, subtitle, info, and icons in the header | `string` | no | `theme.colors.onPrimary` |\n| info | Third line of text (hidden on collapse) | `ReactNode` | no | |\n| icon | Icon to show to the left of the title | [`IconSource`](./Icons.md) | no | |\n| onIconPress | A callback to execute when the icon is pressed | `() => void` | no | |\n| scrollPosition | Y-value of the linked ScrollView (dynamic variant only) | `Animated.Value` | no | |\n| searchableConfig | Configuration object for search behavior | `SearchableConfig` | no | |\n| startExpanded | Renders header in the expanded state to start | `boolean` | no | `false` |\n| subtitle | The text to display on the second line | `ReactNode` | no | |\n| updateScrollView\\* | Callback function to update a linked ScrollView (dynamic variant only) | `({ padding: number \\| null; animate: boolean; scrollTo: number \\| null }) => void` | no | |\n| title | The text to display on the first line | `ReactNode` | yes | |\n| variant | The resize mode of the Header (static will resize only on taps, if enabled. Dynamic will resize as the screen is scrolled) | `'dynamic'` \\| `'static'` | no | 'static' |\n| theme | Theme value overrides | `$DeepPartial<ReactNativePaper.Theme>` | no | |\n\n</div>\n\n> Props marked with a star (\\*) are managed automatically when using the `<CollapsibleHeaderLayout>` component.\n\n### Styles\n\nYou can override the internal styles used by PX Blue by passing a `styles` prop. It supports the following keys:\n\n| Name | Description |\n| --------------- | ------------------------------------------ |\n| root | Styles applied to the root element |\n| actionItem | Styles applied to the action icon(s) |\n| actionPanel | Styles applied to the actions container |\n| backgroundImage | Styles applied to the background image |\n| component | Styles applied to the action components |\n| content | Styles applied to the content wrapper |\n| info | Styles applied to the info element |\n| icon | Styles applied to the icon |\n| search | Styles applied to the search input element |\n| subtitle | Styles applied to the subtitle element |\n| textContent | Styles applied to the text wrapper |\n| title | Styles applied to the title element |\n\n# HeaderIcon\n\nHeader icons specified as a JSON object with the following properties:\n\n<div style=\"overflow: auto\">\n\n| Key | Description | Type | Required | Default |\n| ------- | ---------------------------------- | -------------------------- | -------- | ------- |\n| icon | A component to render for the icon | [`IconSource`](./Icons.md) | yes | |\n| onPress | A function to execute when pressed | `function` | no | |\n\n</div>\n\n# HeaderActionComponent\n\nHeader action components (e.g., avatar) are specified as a JSON object with the following properties:\n\n<div style=\"overflow: auto\">\n\n| Key | Description | Type | Required | Default |\n| --------- | ------------------------------------ | ------------- | -------- | ------- |\n| component | A component to render for the avatar | `JSX.Element` | yes | |\n| width | The width of the component | `number` | no | `40` |\n\n</div>\n\n# SearchableConfig\n\nSearchableConfig is an optional object used to configure the search functionality of the header component. It is a JSON object with the following properties:\n\n<div style=\"overflow: auto\">\n\n| Key | Description | Type | Required | Default |\n| -------------- | -------------------------------------------------------------- | -------------------------------------------------------------------- | -------- | -------- |\n| autoCapitalize | Determines how the search input will be capitalized | [`TextInput.autoCapitalize`](https://reactnative.dev/docs/textinput) | no | 'none' |\n| autoCorrect | Determines whether auto-correct is enabled in the search input | `boolean` | no | `false` |\n| autoFocus | Gives focus to search input when opened | `boolean` | no | `false` |\n| icon | Icon to override default search icon | [`IconSource`](./Icons.md) | no | |\n| onChangeText | Callback when search text changes | `(text: string) => void` | no | |\n| placeholder | Placeholder text for the search input | `string` | no | 'Search' |\n\n</div>\n"},702:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default="# Hero Components\n\nHero items are used to call attention to particular values.\n\n<img width=\"500\" alt=\"Hero Banner with heroes\" src=\"./images/hero.png\">\n\n## Hero\n\nThe `<Hero>` component displays a particular icon / icon-like component, value/units, and a label.\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 `ChannelValueProps`. 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```tsx\nimport { Hero } from '@pxblue/react-native-components';\n\n<Hero label={'Charge'} icon={{ family: 'pxblue', name: 'battery' }} ChannelValueProps={{ value: 100, units: '%' }} />;\n```\n\n### Hero API\n\n<div style=\"overflow: auto\">\n\n| Prop Name | Description | Type | Required | Default |\n| ------------------- | ------------------------------------------ | -------------------------------------- | -------- | ---------------------- |\n| ChannelValueProps | Props passed through to ChannelValue child | `ChannelValueProps` | no | |\n| icon | A component to render for the primary icon | [`IconSource`](./Icons.md) | yes | |\n| iconBackgroundColor | The color behind the primary icon | `string` | no | `theme.colors.surface` |\n| iconColor | The color of the primary icon | `string` | no | `theme.colors.text` |\n| iconSize | The size of the primary icon (10-48) | `number` | no | 36 |\n| label | The text shown below the `ChannelValue` | `string` | yes | |\n| onPress | A function to execute when pressed | `function` | no | |\n| theme | Theme value overrides | `$DeepPartial<ReactNativePaper.Theme>` | no | |\n\n</div>\n\n### Styles\n\nYou can override the internal styles used by PX Blue by passing a `styles` prop. It supports the following keys:\n\n| Name | Description |\n| ----------- | -------------------------------------------- |\n| root | Styles applied to the root element |\n| iconWrapper | Styles applied to the icon wrapper element |\n| label | Styles applied to the label element |\n| values | Styles applied to the row of `ChannelValue`s |\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 by default as children. Any children after the `limit` will not be rendered.\n\n### Hero Banner Usage\n\n```tsx\nimport { Hero, HeroBanner } from '@pxblue/react-native-components';\n\n<HeroBanner divider>\n <Hero label={'Hero One'} icon={{ family: 'pxblue', name: 'battery' }} />\n <Hero label={'Hero Two'} icon={{ family: 'pxblue', name: 'battery' }} />\n <Hero label={'Hero Three'} icon={{ family: 'pxblue', name: 'battery' }} />\n <Hero label={'Hero Four'} icon={{ family: 'pxblue', name: 'battery' }} />\n</HeroBanner>;\n```\n\n### Hero Banner API\n\n<div style=\"overflow: auto\">\n\n| Prop Name | Description | Type | Required | Default |\n| --------- | --------------------------------------------------- | --------- | -------- | ------- |\n| divider | Whether to show a dividing line below the subheader | `boolean` | no | `false` |\n\n</div>\n\n### Styles\n\nYou can override the internal styles used by PX Blue by passing a `styles` prop. It supports the following keys:\n\n| Name | Description |\n| ------- | ------------------------------------- |\n| root | Styles applied to the root element |\n| divider | Styles applied to the divider element |\n"},703:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default="# Icon Wrapper\n\n> The IconWrapper utility is being replaced by more user-friendly icon usage alternatives. If you are still using the iconWrapper, you should start to migrate to one of the other options outlined in the [Icon](./Icons.md) guide.\n\nThe Icon Wrapper is a utility that allows the PX Blue components to interact nicely with SVG icons from [`react-native-vector-icons`](https://www.npmjs.com/package/react-native-vector-icons) and [`@pxblue/icons-svg`](https://www.npmjs.com/package/@pxblue/icons-svg). Several components in this library accept a `icon` property including the type `React.ComponentType<{ size: number, color: string }>`. This allows the icon to be parameterized while allowing the library component to control the icon's size and color.\n\nHowever, the icon libraries `@pxblue/icons-svg` and `react-native-vector-icons`, do not conform to this shape. Therefore, this utility exports `wrapIcon`, a Higher Order Component that can be used to convert them.\n\n### Usage (@pxblue/icons-svg)\n\n```tsx\nimport Leaf from '@pxblue/icons-svg/leaf.svg';\nconst LeafIcon = wrapIcon({ IconClass: Leaf });\n\n<ComponentName IconClass={LeafIcon}></ComponentName>;\n```\n\n### Usage (react-native-vector-icons)\n\nIcons from `react-native-vector-icons` require a class and a name. Refer to [their documentation](https://github.com/oblador/react-native-vector-icons) for which icons are available in each set.\n\n```tsx\nimport MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';\nconst Cloud = wrapIcon({ IconClass: MaterialCommunityIcon, name: 'cloud-off-outline' });\n\n<ComponentName IconClass={Cloud}></ComponentName>;\n```\n\n### RTL (Right-to-Left) Support\n\nIf you need to flip icons for use with RTL languages, you can include a boolean `flip` property when using the wrapIcon function:\n\n```tsx\nimport MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';\nconst Cloud = wrapIcon({ IconClass: MaterialCommunityIcon, name: 'cloud-off-outline', flip: `true` });\n```\n\nIf you want to conditionally flip icons based on the active language, you can use the `I18nManager` from react native:\n\n```tsx\nimport { I18nManager } from 'react-native';\nimport MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';\nconst Cloud = wrapIcon({ IconClass: MaterialCommunityIcon, name: 'cloud-off-outline', flip: I18nManager.isRTL });\n```\n\n### Responsive Sizing\n\nWhen using the `wrapIcon` function, icons will be automatically scaled relative to the current font size selected on the device. If you would like to opt out of this behavior and render a constant icon size irrespective of the device font size setting, you can pass an additional argument for `allowFontScaling`:\n\n```tsx\nimport MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';\nconst Cloud = wrapIcon({ IconClass: MaterialCommunityIcon, name: 'cloud-off-outline', allowFontScaling: `false` });\n```\n\n## Notes\n\nAs with all Higher Order Components, there is a performance hit if the function is called from another component's `render` method. It is therefore advised to always call `wrapIcon()` once per Icon type, and to do so outside of any methods.\n\n## Alternative to IconWrapper\n\nIf you do not wish to use this Higher Order Component to wrap all of your icons individually (e.g., if you need to determine the icon to show at runtime), or you would like to use a component other than a react-native-vector-icon or PX Blue SVG, you can define your own function, so long as it matches the required shape:\n\n```tsx\n<ComponentName IconClass={({size, color}) => <OtherComponent size={size} color={color}>}/>\n```\n\nThis can also be useful if you want to display things like a PX Blue [progress icon](https://www.npmjs.com/package/@pxblue/react-native-progress-icons):\n\n```tsx\nimport { Battery } from '@pxblue/react-native-progress-icons';\n\n<Hero IconClass={({size, color}) => <Battery percent={50} size={size} color={color}>}/>\n```\n"},704:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default="# Using Icons in PX Blue React Native Components\n\n> For icon usage before v6.0.0, [check here](https://github.com/pxblue/react-native-component-library/blob/master/docs/IconWrapper.md).\n\nMany PX Blue components support the use of icons. These components will support passing in an icon in a variety of different formats.\n\n## Icon Object\n\nThe simplest way to use a icon in a component is to specify the icon as a simple object.\n\n```tsx\n<Component icon={{family: 'pxblue', name: 'device'}} />\n<Component icon={{family: 'material-community', name: 'chart-pie'}} />\n<Component icon={{name: 'settings'}} />\n```\n\n### API\n\n<div style=\"overflow: auto\">\n\n| Prop Name | Description | Type | Required | Default |\n| ---------------- | ------------------------------------------------------------ | ---------------------------------------------------- | -------- | ------------ |\n| family | Which library to draw the icon from | `'material'` \\| `'material-community'` \\| `'pxblue'` | no | `'material'` |\n| name | The name of the icon to use | `string` | yes | |\n| allowFontScaling | Should the icon size scale with the system font size | `boolean` | no | `true` |\n| direction | How the icon should respond to changes in language direction | `'ltr'` \\| `'rtl'` \\| `'auto'` | no | `'auto'` |\n\n</div>\n\nWhen specifying 'pxblue' as the `family`, icons will be drawn from the [@pxblue/react-native-vector-icons](https://www.npmjs.com/package/@pxblue/react-native-vector-icons) package. When specifying 'material' or 'material-community, icons will be drawn from the [react-native-vector-icons](https://www.npmjs.com/package/react-native-vector-icons) package.\n\nWhen specifying the `direction`, 'auto' means that the icon will appear flipped for RTL and unflipped for LTR languages. 'ltr' will always appear unflipped, and 'rtl' will always appear flipped, regardless of language direction. Refer to our [internationalization](<https://pxblue.github.io/patterns/internationalization#bidirectionality--right-to-left-(rtl)-support>) guidelines for more information on which icons should flip.\n\n## Inline Functional Component\n\nYou can also use an inline functional component to render other components. This can be especially useful if you want to render something other than a Material, Material Community, or PX Blue icon, such as a progress icon. The functional component should support props for:\n\n```tsx\nimport { PixelRatio } from 'react-native';\nimport { Battery } from '@pxblue/react-native-progress-icons';\n\n// A component that doesn't need to scale with font or flip directions\n<Component icon={\n ({size, color}) => (\n <Battery percent={50} size={size} color={color} />\n )}\n/>\n// A component that DOES need to scale with font and flip directions\n<Component icon={\n ({size, color, allowFontScaling, direction}) => (\n <FlippableIcon\n size={size * (allowFontScaling ? PixelRatio.getFontScale() : 1)}\n color={color}\n style={direction === 'rtl' ? {transform: [{ scaleX: -1 }]} : {}}\n />\n )}\n/>\n```\n\n### API\n\n<div style=\"overflow: auto\">\n\n| Prop Name | Description | Type | Required | Default |\n| ---------------- | ------------------------------------------------------------------------------- | ------------------ | -------- | ------- |\n| size | What size the icon / component should be | `number` | no | |\n| color | What color the icon / component should be | `string` | no | |\n| allowFontScaling | Should the icon / component size scale with the system font size | `boolean` | no | |\n| direction | The current device language direction (for flipping components where necessary) | `'ltr'` \\| `'rtl'` | no | |\n\n</div>\n\nPX Blue components will pass these values to you for use in your component to achieve the correct appearance. It is your responsibility to apply them.\n\n## Wrapped Icon\n\nYou can use the [IconWrapper](https://github.com/pxblue/react-native-component-library/blob/master/docs/IconWrapper.md) utility to create a functional component that matches the signature required for the inline option above.\n\n> **NOTE:** This was previously the only way to pass icons to PX Blue components. With the introduction of the newer options in version 6.0.0, this method is no longer recommended and will be deprecated in the future.\n\n```tsx\nimport Leaf from '@pxblue/icons-svg/leaf.svg';\nconst LeafIcon = wrapIcon({ IconClass: Leaf });\n\n<ComponentName icon={LeafIcon} />;\n```\n\n## JSX Element\n\nYou can also pass a JSX Element directly to the icon for a component. This is a very convenient way to pass icons, but you must be very careful with the size and color of elements passed in this way. Because you are not receiving props from the PX Blue component (as you do with the inline functional component), you are fully responsible for making sure that icons match the specs outlined in the documentation.\n\n```tsx\n<ComponentName icon={<SomeOtherComponent size={correctSizeForComponent} color={correctColorForComponent} />} />\n```\n\n## String\n\nIn some rare cases, you may wish to pass a simple string (e.g., a single letter or number) as the icon for a component. In this case, you may pass a string directly to the icon prop. This can also be used to render emoji icons.\n\n```tsx\n<ComponentName icon={'A'} />\n<ComponentName icon={'🍇'} />\n```\n\n## Image Source\n\nThe icon prop will also support images in various formats, either from local resources or from the web.\n\n```tsx\n<Component icon={{ uri: 'https://raw.githubusercontent.com/pxblue/icons/dev/png/png48/account_settings_black500_48dp.png' }} />\n<Component icon={require('./path/to/image.png')} />\n```\n"},705: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 views. It positions a title as well as optional subtitle(s), icon, and status stripe.\n\n<img width=\"400\" alt=\"Info List Item component\" src=\"./images/infoListItem.png\">\n\n## Usage\n\n```tsx\n<InfoListItem\n title={'Title'}\n icon={{ family: 'pxblue', name: 'leaf' }}\n subtitle={'A subtitle'}\n statusColor={PXBColors.red[500]}\n backgroundColor={PXBColors.blue[50]}\n/>\n```\n\n### Advanced Usage\n\nYou can also supply an array of items that will be displayed as a character-separated subtitle. The separation character is configurable.\n\n```tsx\n<InfoListItem title={'Hillman Field East'} subtitle={['PXM 2000', 'DT 1150', '113.4 GPM']} subtitleSeparator={'/'} />\n```\n\n## API\n\n<div style=\"overflow: auto\">\n\n| Prop Name | Description | Type | Required | Default |\n| ----------------- | --------------------------------------------------------------- | -------------------------------------- | -------- | -------------- |\n| avatar | Show a colored background behind icon | `boolean` | no | `false` |\n| backgroundColor | The color used for the background of the InfoListItem | `string` | no | |\n| chevron | Add a chevron icon on the right | `boolean` | no | `false` |\n| dense | Smaller height row with less padding | `boolean` | no | `false` |\n| divider | Show a dividing line below the row | `'full'` \\| `'partial'` | no | |\n| fontColor | Color to use for text elements | `string` | no | |\n| hidePadding | Hide padding reserved for icons when there is no icon | `boolean` | no | `false` |\n| iconAlign | Icon alignment when `avatar` is set to`false` | `'left'` \\| `'center'` \\| `'right'` | no | 'left' |\n| icon | A component to render for the icon | [`IconSource`](./Icons.md) | no | |\n| iconColor | Color to use for the icon | `string` | no | |\n| info | The text to show on the third line | `string` \\| `Array<React.ReactNode>` | no | |\n| leftComponent | Custom content to render between the icon and the text elements | `JSX.Element` | no | |\n| onPress | A function to execute when pressed | `function` | no | |\n| rightComponent | Custom content to render to the right of the text elements | `JSX.Element` | no | |\n| statusColor | Color to use for status (affects status stripe and icon) | `string` | no | |\n| subtitle | The text to show on the second line | `string` \\| `Array<React.ReactNode>` | no | |\n| subtitleSeparator | Separator character for subtitle | `string` | no | '·' ('\\u00B7') |\n| title | The text to show on the first line | `string` | yes | |\n| theme | Theme value overrides | `$DeepPartial<ReactNativePaper.Theme>` | no | |\n\n</div>\n\n### Styles\n\nYou can override the internal styles used by PX Blue by passing a `styles` prop. It supports the following keys:\n\n| Name | Description |\n| --------------- | ----------------------------------------------- |\n| root | Styles applied to the root element |\n| statusStripe | Styles applied to the status stripe element |\n| icon | Styles applied to the icon element |\n| iconWrapper | Styles applied to the icon wrapper |\n| infoWrapper | Styles applied to the info wrapper |\n| info | Styles applied to the info text elements |\n| avatar | Styles applied to the avatar background |\n| mainContent | Styles applied to the main text content wrapper |\n| title | Styles applied to the title element |\n| subtitleWrapper | Styles applied to the subtitle wrapper |\n| subtitle | Styles applied to the subtitle text elements |\n| divider | Styles applied to the divider element |\n"},706: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%" style="max-width: 600px; display: block;" alt="List Item Tag" src="./images/listItemTag.png">\n\nIn an [info list item](/info/components-documentation--info-list-item):\n<img width="360px" style="max-width: 100%; display: block; border: 1px solid #0001;" alt="List Item Tag in Info List Item" src="./images/ListItemTagInInfoListItem.png">\n\n## Usage\n\n```tsx\nimport { ListItemTag } from \'@pxblue/react-native-components\';\n\n<ListItemTag label={\'IN PROGRESS\'} />\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| backgroundColor | Background color of the label | `string` | no | `theme.colors.primary` |\n| fontColor | Text color for the label | `string` | no | Varies based on the theme |\n| label | The label text | `string` | yes | |\n\n</div>\n\nAny other props will be provided to the root element [`<Overline>`](https://pxblue-components.github.io/react-native/?path=/info/components-documentation--typography).\n\n### Styles\n\nYou can override the internal styles used by PX Blue by passing a `styles` prop. It supports the following key:\n\n| Name | Description |\n| ---- | ---------------------------------- |\n| root | Styles applied to the root element |\n'},707:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default="# Mobile Stepper\n\nThe `<MobileStepper>` is used to minimally display progress when completing a workflow that requires multiple steps. There are three types of progress indicators supported, `dots` (default), `text`, and `progress`.\n\n<img width=\"100%\" style=\"max-width: 600px; display: block;\" alt=\"Mobile Stepper\" src=\"./images/mobileStepper.png\">\n\n## Usage\n\n```tsx\nimport { MobileStepper } from '@pxblue/react-native-components';\n\n<MobileStepper\n activeStep={activeStep}\n steps={steps}\n leftButton={<BackButton />}\n rightButton={<NextButton />}\n variant={'dots'}\n/>;\n```\n\n## API\n\n<div style=\"overflow: auto;\">\n\n| Prop Name | Description | Type | Required | Default |\n| ------------- | ---------------------------------------------- | -------------------------------------- | -------- | ---------------------- | --- | ------ |\n| activeColor | Color of the active page indicator | `string` | no | `theme.colors.primary` |\n| activeStep | The index of the active step (>= 0) | `number` | yes | |\n| inactiveColor | Color of inactive dot when using 'dot' variant | `string` | no | |\n| leftButton | Left button content | `JSX.Element` | no | |\n| rightButton | Right button content | `JSX.Element` | no | |\n| steps | Total number of steps to display (>0) | `number` | yes | |\n| variant | Which type of indicator to use | `dots | text | progress` | no | `dots` |\n| theme | Theme value overrides | `$DeepPartial<ReactNativePaper.Theme>` | no | |\n\n</div>\n\nAny other props will be provided to the root element ([**View**](https://reactnative.dev/docs/view)).\n\n### Styles\n\nYou can override the internal styles used by PX Blue by passing a `styles` prop. It supports the following key:\n\n| Name | Description |\n| ---------------- | ---------------------------------------------------------------- |\n| root | Styles applied to the root element |\n| circle | Styles applied to dots when using 'dot' variant |\n| filled | Styles applied to active dot when using 'dot' variant |\n| stepperContainer | Styles applied to stepper container |\n| progressBar | Styles applied to the progress bar when using 'progress' variant |\n| text | Styles applied to the text when using 'text' variant |\n"},708:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default="# React Native Components\n\nWe currently have the following components available for React Native applications:\n\n- [Channel Value](https://github.com/pxblue/react-native-component-library/blob/dev/docs/ChannelValue.md)\n- [Drawer](https://github.com/pxblue/react-native-component-library/blob/dev/docs/Drawer.md)\n- [Empty State](https://github.com/pxblue/react-native-component-library/blob/dev/docs/EmptyState.md)\n- [Header](https://github.com/pxblue/react-native-component-library/blob/dev/docs/Header.md)\n- [Hero & Hero Banner](https://github.com/pxblue/react-native-component-library/blob/dev/docs/Hero.md)\n- [Info List Item](https://github.com/pxblue/react-native-component-library/blob/dev/docs/InfoListItem.md)\n- [Score Card](https://github.com/pxblue/react-native-component-library/blob/dev/docs/ScoreCard.md)\n- [Typography](https://github.com/pxblue/react-native-component-library/blob/dev/docs/Typography.md)\n"},709: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<img width=\"40%\" alt=\"Score Card with single highlighted value\" src=\"./images/scorecard.png\"><br/>\n<img width=\"40%\" alt=\"Score Card with multiple highlighted values\" src=\"./images/scorecard_alt.png\">\n\n## Usage\n\n```tsx\nimport { Hero, HeroBanner, InfoListItem, Body, ScoreCard } from '@pxblue/react-native-components';);\n\n<ScoreCard\n headerTitle={'Portland Datacenter Long Name'}\n headerSubtitle={'6 UPS Devices'}\n actionItems={[\n { icon: { name: 'more-vert' }, onPress: () => { } }\n ]}\n badgeOffset={-55}\n badge={\n <HeroBanner style={{ flex: 0, minWidth: 80, justifyContent: 'flex-end' }}>\n <Hero\n label={'Score'}\n iconSize={48}\n iconColor={PXBColors.green[500]}\n value={98}\n units={'/100'}\n icon={{ family: 'pxblue', name: 'grade_a' }}\n />\n </HeroBanner>\n }\n actionRow={\n <InfoListItem chevron title={'View More'} onPress={() => { }} />\n }\n>\n {/* 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 header text (max 6) | `HeaderIcon[]` | no | |\n| actionRow | Component to render for the card footer | `React.Component` | no | |\n| badge | The component to render in the call-out area | `React.Component` | no | |\n| badgeOffset | Vertical offset for the badge component | `number` | no | |\n| headerBackgroundImage | An image to blend with the header color | `ImageSourcePropType` | no | |\n| headerColor | The background color of the header | `string` | no | `theme.colors.primary` |\n| headerFontColor | The color for text and icons in header | `string` | no | `theme.colors.onPrimary` |\n| headerInfo | The third line of text in the header | `string` | no | |\n| headerSubtitle | The second line of text in the header | `string` | no | |\n| headerTitle | The first line of text in the header | `string` | yes | |\n| theme | Theme value overrides | `$DeepPartial<ReactNativePaper.Theme>` | no | |\n\n</div>\n\nAny other props will be provided to the root element ([**Card**](https://callstack.github.io/react-native-paper/card.html)).\n\n### Styles\n\nYou can override the internal styles used by PX Blue by passing a `styles` prop. It supports the following keys:\n\n| Name | Description |\n| ---------------- | ---------------------------------------------- |\n| root | Styles applied to the root card element |\n| header | Styles applied to the card header element |\n| backgroundImage | Styles applied to the background image wrapper |\n| headerContent | Styles applied to the header content wrapper |\n| headerText | Styles applied to the header text wrapper |\n| title | Styles applied to the title element |\n| subtitle | Styles applied to the subtitle element |\n| info | Styles applied to the info element |\n| headerActions | Styles applied to the header actions wrapper |\n| headerActionItem | Styles applied to the header action icons |\n| body | Styles applied to the card body element |\n| leftContent | Styles applied to the {children} wrapper |\n| badge | Styles applied to the badge wrapper |\n| actionRow | Styles applied to the action row element |\n\n# Header Icon\n\nHeader icons specified as a JSON object with the following properties:\n\n<div style=\"overflow: auto\">\n\n| Key | Description | Type | Required | Default |\n| ------- | ---------------------------------- | -------------------------- | -------- | ------- |\n| icon | A component to render for the icon | [`IconSource`](./Icons.md) | yes | |\n| onPress | A function to execute when clicked | `function` | yes | |\n\n</div>\n"},710: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="300px" style="max-width: 100%" alt="Spacer used in Drawer Body" src="./images/spacer.png"><br/>\n</div>\n\n## Usage\n\n```tsx\nimport { Spacer } from \'@pxblue/react-native-components\';\n\n<View style={{ display: \'flex\' }}>\n {/* Left Content */}\n <Spacer />\n {/* Right Content */}\n</View>;\n```\n\n> Using flex elements (like Spacer) inside of a [ScrollView](https://reactnative.dev/docs/scrollview) will not have an effect unless the parent has a fixed height.\n\n## API\n\n<div style="overflow: auto;">\n\n| Prop Name | Description | Type | Required | Default |\n| --------- | ---------------------------------------------- | -------- | -------- | ------- |\n| flex | Flex grow/shrink value for use in flex layouts | `number` | no | 1 |\n| height | Height (in dp) for static layouts | `number` | no | |\n| width | Width (in dp) for static layouts | `number` | no | |\n\n</div>\n\nAny other props supplied will be provided to the root element (`View`).\n\n### Styles\n\nYou can override the classes used by PX Blue by passing a `styles` prop. It supports the following key:\n\n| Name | Description |\n| ---- | ---------------------------------- |\n| root | Styles applied to the root element |\n'},711:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='# Typography\n\nTypography components are used to render text on the screen. This library provides several helper components that automatically apply various styles from the theme to avoid repeated custom styling throughout an application.\n\n<img width="100%" style="max-width:400px" alt="Typography Elements" src="./images/typography.png">\n\nWe provide components for: `<H1>`, `<H2>`, `<H3>`, `<H4>`, `<H5>`, `<H6>`, `<Body1>`, `<Body2>`, `<Subtitle1>`, `<Subtitle2>`, `<Button>`, `<Caption>`, `<Overline>`\n\n## Usage\n\n```tsx\nimport * as Typography from \'@pxblue/react-native-components\';\n\n<View>\n <Typography.H1>Head. 1</Typography.H1>\n <Typography.H2>Heading 2</Typography.H2>\n <Typography.H3>Heading 3</Typography.H3>\n <Typography.H4>Heading 4</Typography.H4>\n <Typography.H5>Heading 5</Typography.H5>\n <Typography.H6>Heading 6</Typography.H6>\n <Typography.Body1>Body 1</Typography.Body1>\n <Typography.Body2>Body 2</Typography.Body2>\n <Typography.Subtitle1>Subtitle 1</Typography.Subtitle1>\n <Typography.Subtitle2>Subtitle 2</Typography.Subtitle2>\n <Typography.Button>Button</Typography.Button>\n <Typography.Caption>Caption</Typography.Caption>\n <Typography.Overline>Overline</Typography.Overline>\n</View>;\n```\n\n## API\n\nAll typography components in this library share a common API.\n\n<div style="overflow: auto">\n\n| Prop Name | Description | Type | Required | Default |\n| --------- | ------------------------------- | ---------------------------------------------------------------------------------- | -------- | ------------------- |\n| font | The font style (from the theme) | keyof [`theme.fonts`](https://callstack.github.io/react-native-paper/theming.html) | no | |\n| fontSize | The font size | `number` | no | |\n| color | The font color (from the theme) | `string` | no | `theme.colors.text` |\n| theme | Theme value overrides | `$DeepPartial<ReactNativePaper.Theme>` | no | |\n\n</div>\n\n### Styles\n\nYou can override the internal styles used by PX Blue by passing a `styles` prop. It supports the following keys:\n\n| Name | Description |\n| ---- | ---------------------------------- |\n| root | Styles applied to the root element |\n'},712: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.\n\n<div style=\"align-items: center; display:flex; justify-content: space-around\">\n\n<img width=\"40%\" alt=\"UserMenu Avatar\" src=\"./images/userMenuAvatar.png\">\n<img width=\"40%\" alt=\"UserMenu Opened\" src=\"./images/userMenuOpened.png\">\n\n</div>\n\n## Usage\n\n```tsx\nimport { UserMenu } from '@pxblue/react-native-components';\n\n<UserMenu\n menuTitle={'John Smith'}\n menuSubtitle={'[email protected]'}\n menuItems={[\n { title: 'Change Password', icon: { name: 'vpn-key' } },\n { title: 'Preferences', icon: { name: 'settings' } },\n { title: 'Log Out', icon: { name: 'exit-to-app' } },\n ]}\n avatar={<Avatar.Text label={'PX'} size={40} />}\n/>;\n```\n\n## API\n\n<div style=\"overflow: auto\">\n\n| Prop Name | Description | Type | Required | Default |\n| --------------- | -------------------------------------------------------- | -------------------------------------- | -------- | ------- |\n| avatar | Avatar to display as the menu trigger | `JSX.Element` | yes | |\n| backgroundColor | Background color of the bottom sheet | `string` | no | |\n| fontColor | Color of text for the bottom sheet header and menu items | `string` | no | |\n| iconColor | Color of icons for the bottom sheet menu items | `string` | no | |\n| menuItems | An array of menu items to show in the bottom sheet | `InfoListItemProps[]` | yes | |\n| menuTitle | Title to display in the bottom sheet | `string` | no | |\n| menuSubtitle | Subtitle to display in the bottom sheet | `string` | no | |\n| theme | Theme value overrides | `$DeepPartial<ReactNativePaper.Theme>` | no | |\n\n</div>\n\n### Styles\n\nYou can override the internal styles used by PX Blue by passing a `styles` prop. It supports the following keys:\n\n| Name | Description |\n| ----------- | ----------------------------------------- |\n| root | Styles applied to the root element |\n| avatar | Styles applied to avatar wrapper |\n| bottomsheet | Styles applied to the bottomsheet wrapper |\n"},713:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/ListItemTagInInfoListItem.aa1fca70.png"},714:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/channelValue.c84086af.png"},715:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/collapsibleHeaderLayout.4e39c415.gif"},716:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/emptyState.d3a96eba.png"},717:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/header_large.e211227c.png"},718:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/header_small.66ecd4fd.png"},719:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/hero.b0ba02dc.png"},720:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/infoListItem.20db400d.png"},721:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/listItemTag.185ee093.png"},722:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/mobileStepper.cc9cd6ef.png"},723:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/scorecard.832b4550.png"},724:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/scorecard_alt.8f5c5025.png"},725:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/spacer.f1e38d99.png"},726:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/typography.67c22530.png"},727:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/userMenuAvatar.fc5e0abd.png"},728:function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/userMenuOpened.67b2052f.png"}},[[313,1,2]]]);
//# sourceMappingURL=main.f72fda5344c128307073.bundle.js.map