Function l

docs/public/3.0/app.bundle.js:1–1

(e,t,n)

!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/",n(n.s="./dist/3.0/app.src.js")}({"./.linaria-cache/pages/src/Home.linaria.css":function(e,t,n){},"./.linaria-cache/pages/src/Showcase.linaria.css":function(e,t,n){},"./.linaria-cache/pages/src/components/Content.linaria.css":function(e,t,n){},"./.linaria-cache/pages/src/components/IconsList.linaria.css":function(e,t,n){},"./assets/styles.css":function(e,t,n){},"./dist/3.0/app.data.js":function(e,t,n){var r,o,i;e.exports=[(r=n("./pages/0.index.js"),o="function"==typeof r.default?r.default:r,i=r.meta||{},{title:i.title||"Home",link:i.link||"index",description:i.description,type:"custom",data:o}),{filepath:"pages/1.getting-started.md",title:"Getting Started",description:"",link:"getting-started",data:"# Getting Started\n\n## Installation\n\nOpen a Terminal in your project's folder and run,\n\n```sh\nyarn add react-native-paper\n```\n\nIf you're on a vanilla React Native project, you also need to install and link [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons).\n\n```sh\nyarn add react-native-vector-icons\nreact-native link react-native-vector-icons\n```\nNote: If you are using react-native version 0.60 or higher you don't need to link [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons).\n\n\nIf you don't want to install vector icons, you can use [babel-plugin-optional-require](https://github.com/satya164/babel-plugin-optional-require) to opt-out.\n\nIf you use Expo, you don't need to install vector icons. But if you have a `babel.config.js` or `.babelrc` file, make sure that it includes `babel-preset-expo`.\n\nTo get smaller bundle size by excluding modules you don't use, you can use our optional babel plugin. The plugin automatically rewrites the import statements so that only the modules you use are imported instead of the whole library. Add `react-native-paper/babel` to the `plugins` section in your `babel.config.js` for production environment. It should look like this:\n\n```js\nmodule.exports = {\n  presets: ['module:metro-react-native-babel-preset'],\n  env: {\n    production: {\n      plugins: ['react-native-paper/babel'],\n    },\n  },\n};\n```\n\nIf you created your project using Expo, it'll look something like this:\n\n```js\nmodule.exports = function(api) {\n  api.cache(true);\n  return {\n    presets: ['babel-preset-expo'],\n    env: {\n      production: {\n        plugins: ['react-native-paper/babel'],\n      },\n    },\n  };\n};\n```\n\nThe plugin only works if you are importing the library using ES2015 import statements and not with `require`.\n\n**Note:** The above examples are for the latest `react-native` using Babel 7. If you have `react-native <= 0.55`, you'll have a `.babelrc` file instead of a `babel.config.js` file and the content of the file will be different.\n\nIf you're using Flow for typechecking your code, you need to add the following under the `[options]` section in your `.flowconfig`:\n\n```ini\nmodule.file_ext=.js\nmodule.file_ext=.native.js\nmodule.file_ext=.android.js\nmodule.file_ext=.ios.js\n```\n\n## Usage\n\nWrap your root component in `Provider` from `react-native-paper`. If you have a vanilla React Native project, it's a good idea to add it in the component which is passed to `AppRegistry.registerComponent`. This will usually be in the `index.js` file. If you have an Expo project, you can do this inside the exported component in the `App.js` file.\n\nExample:\n\n```js\nimport * as React from 'react';\nimport { AppRegistry } from 'react-native';\nimport { Provider as PaperProvider } from 'react-native-paper';\nimport { name as appName } from './app.json';\nimport App from './src/App';\n\nexport default function Main() {\n  return (\n    <PaperProvider>\n      <App />\n    </PaperProvider>\n  );\n}\n\nAppRegistry.registerComponent(appName, () => Main);\n```\n\nThe `PaperProvider` component provides the theme to all the components in the framework. It also acts as a portal to components which need to be rendered at the top level.\n\nIf you have another provider (such as `Redux`), wrap it outside `PaperProvider` so that the context is available to components rendered inside a `Modal` from the library:\n\n```js\nimport * as React from 'react';\nimport { Provider as PaperProvider } from 'react-native-paper';\nimport { Provider as StoreProvider } from 'react-redux';\nimport App from './src/App';\nimport store from './store';\n\nexport default function Main() {\n  return (\n    <StoreProvider store={store}>\n      <PaperProvider>\n        <App />\n      </PaperProvider>\n    </StoreProvider>\n  );\n}\n```\n\n## Customization\n\nYou can provide a custom theme to customize the colors, fonts etc. with the `Provider` component. Check the [default theme](https://github.com/callstack/react-native-paper/blob/master/src/styles/DefaultTheme.tsx) to see what customization options are supported.\n\nExample:\n\n```js\nimport * as React from 'react';\nimport { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';\nimport App from './src/App';\n\nconst theme = {\n  ...DefaultTheme,\n  colors: {\n    ...DefaultTheme.colors,\n    primary: 'tomato',\n    accent: 'yellow',\n  },\n};\n\nexport default function Main() {\n  return (\n    <PaperProvider theme={theme}>\n      <App />\n    </PaperProvider>\n  );\n}\n```\n",type:"md",dependencies:[]},{filepath:"pages/2.theming.md",title:"Theming",description:"",link:"theming",data:"# Theming\n\n## Applying a theme to the whole app\n\nTo support custom themes, paper exports a `Provider` component. You need to wrap your root component with the provider to be able to support themes.\n\n```js\nimport * as React from 'react';\nimport { Provider as PaperProvider } from 'react-native-paper';\nimport App from './src/App';\n\nexport default function Main() {\n  return (\n    <PaperProvider>\n      <App />\n    </PaperProvider>\n  );\n}\n```\n\nIf no prop is specified, this will apply the [default theme](https://github.com/callstack/react-native-paper/blob/master/src/styles/DefaultTheme.tsx) to the components. You can also provide a `theme` prop with a theme object with same properties as the default theme:\n\n```js\nimport * as React from 'react';\nimport { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';\nimport App from './src/App';\n\nconst theme = {\n  ...DefaultTheme,\n  roundness: 2,\n  colors: {\n    ...DefaultTheme.colors,\n    primary: '#3498db',\n    accent: '#f1c40f',\n  },\n};\n\nexport default function Main() {\n  return (\n    <PaperProvider theme={theme}>\n      <App />\n    </PaperProvider>\n  );\n}\n```\n\nYou can change the theme prop dynamically and all the components will automatically update to reflect the new theme.\n\nA theme usually contains the following properties:\n\n- `dark` (`boolean`): whether this is a dark theme or light theme.\n- `mode` (`'adaptive' | 'exact'`): color mode for dark theme (See [Dark Theme](#dark-theme)).\n- `roundness` (`number`): roundness of common elements, such as buttons.\n- `colors` (`object`): various colors used throughout different elements.\n  - `primary` - primary color for your app, usually your brand color.\n  - `accent` - secondary color for your app which complements the primary color.\n  - `background` - background color for pages, such as lists.\n  - `surface` - background color for elements containing content, such as cards.\n  - `text` - text color for content.\n  - `disabled` - color for disabled elements.\n  - `placeholder` - color for placeholder text, such as input placeholder.\n  - `backdrop` - color for backdrops of various components such as modals.\n- `fonts` (`object`): various fonts used throughout different elements.\n  - `regular`\n  - `medium`\n  - `light`\n  - `thin`\n\nWhen creating a custom theme, you will need to provide all of these properties.\n\n## Applying a theme to a paper component\n\nIf you want to change the theme for a certain component from the library, you can directly pass the `theme` prop to the component. The theme passed as the prop is merged with the theme from the `Provider`.\n\n```js\nimport * as React from 'react';\nimport { Button } from 'react-native-paper';\n\nexport default function ButtonExample() {\n  return (\n    <Button raised theme={{ roundness: 3 }}>\n      Press me\n    </Button>\n  );\n}\n```\n\n## Using the theme in your own components\n\nTo access the theme in your own components, you can use the `withTheme` HOC exported from the library. If you wrap your component with the HOC, you'll receive the theme as a prop.\n\n```js\nimport * as React from 'react';\nimport { withTheme } from 'react-native-paper';\n\nfunction MyComponent(props) {\n  const { colors } = props.theme;\n  return <Text style={{ color: colors.primary }}>Yo!</Text>;\n}\n\nexport default withTheme(MyComponent);\n```\n\nComponents wrapped with `withTheme` support the theme from the `Provider` as well as from the `theme` prop.\n\nYou can also use the `useTheme` hook.\n\n```js\nimport * as React from 'react';\nimport { useTheme } from 'react-native-paper';\n\nfunction MyComponent(props) {\n  const { colors } = useTheme();\n  return <Text style={{ color: colors.primary }}>Yo!</Text>;\n}\n```\n\n## Customizing all instances of a component\n\nSometimes you want to style a component in a different way everywhere and don't want to change the properties in the theme so that other components are not affected. For example, say you want to change the font for all your buttons, but don't want to change `theme.fonts.medium` because it affects other components.\n\nWe don't have an API to do this, because you can already do it with components:\n\n```js\nimport * as React from 'react';\nimport { Button } from 'react-native-paper';\n\nexport default function FancyButton(props) {\n  return <Button theme={{ fonts: { medium: 'Open Sans' } }} {...props} />;\n}\n```\n\nNow you can use your `FancyButton` component everywhere instead of using `Button` from Paper.\n\n## Dark Theme\n\nSince 3.0 We adapt Dark theme to follow [Material design guidelines](https://material.io/design/color/dark-theme.html). </br>\nIn opposition to light theme, dark theme by default uses `surface` colour instead of `primary` on large components like `AppBar` or `BottomNavigation`.</br>\nThe Dark theme adds a white overlay with opacity depending on elevation of surfaces. It uses it for the better accentuation of surface elevation. Using only shadow is highly imperceptible on dark surfaces.\n\nWe are aware that users often use Dark theme in their own ways and they maybe don't want to use default dark theme features from guidelines</br>\nThat's why if you are using the dark mode you can switch between two types of dark theme `mode`:\n\n`exact` where everything is like it was before. Appbar and BottomNavigation will still use primary colour by default</br>\n`adaptive` where we follow [Material design guidelines](https://material.io/design/color/dark-theme.html), the surface will use white overlay with opacity to show elevation, `Appbar` and `BottomNavigation` will use surface colour as a background.\n\n## Gotchas\n\nThe `Provider` exposes the theme to the components via [React's context API](https://reactjs.org/docs/context.html), which means that the component must be in the same tree as the `Provider`. Some React Native components will render a different tree such as a `Modal`, in which case the components inside the `Modal` won't be able to access the theme. The work around is to get the theme using the `withTheme` HOC and pass it down to the components as props, or expose it again with the exported `ThemeProvider` component.\n\nThe `Modal` component from the library already handles this edge case, so you won't need to do anything.\n",type:"md",dependencies:[]},function(){var e=n("./node_modules/react/index.js"),t=n("./node_modules/component-docs/dist/templates/Content.js").default,r={exports:{}},o={react:n("./node_modules/react/index.js"),"@mdx-js/tag":n("./node_modules/@mdx-js/tag/dist/index.js"),"./src/components/IconsList.js":n("./pages/src/components/IconsList.js")};!function(e,t,n,r,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.meta=void 0;var i,a=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==u(e)&&"function"!=typeof e)return{default:e};var t=c();if(t&&t.has(e))return t.get(e);var n={},r=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var o in e)if(Object.prototype.hasOwnProperty.call(e,o)){var i=r?Object.getOwnPropertyDescriptor(e,o):null;i&&(i.get||i.set)?Object.defineProperty(n,o,i):n[o]=e[o]}n.default=e,t&&t.set(e,n);return n}(n("react")),s=n("@mdx-js/tag"),l=(i=n("./src/components/IconsList.js"))&&i.__esModule?i:{default:i};function c(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return c=function(){return e},e}function u(e){return(u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function p(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function d(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function m(e,t){return(m=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function f(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=g(e);if(t){var o=g(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return h(this,n)}}function h(e,t){return!t||"object"!==u(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function g(e){return(g=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var y={title:"Icons"};t.meta=y;var b=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&m(e,t)}(i,e);var t,n,r,o=f(i);function i(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,i),(t=o.call(this,e)).layout=null,t}return t=i,(n=[{key:"render",value:function(){var e=this.props,t=e.components;return p(e,["components"]),a.createElement(s.MDXTag,{name:"wrapper",components:t},a.createElement(s.MDXTag,{name:"h1",components:t},"Icons"),a.createElement(s.MDXTag,{name:"h2",components:t},"Configuring icons"),a.createElement(s.MDXTag,{name:"p",components:t},"Many of the components require the ",a.createElement(s.MDXTag,{name:"a",components:t,parentName:"p",props:{href:"https://github.com/oblador/react-native-vector-icons"}},"react-native-vector-icons")," library to render correctly. If you're using Expo, you don't need to do anything extra, but if it's vanilla React Native project, you need link the library as described in the getting started guide."),a.createElement(s.MDXTag,{name:"p",components:t},"If you opted out of vector icons support using ",a.createElement(s.MDXTag,{name:"a",components:t,parentName:"p",props:{href:"https://github.com/satya164/babel-plugin-optional-require"}},"babel-plugin-optional-require"),", you won't be able to use icon names for the icon prop anymore. Some components may not look correct without vector icons and might need extra configuration."),a.createElement(s.MDXTag,{name:"h2",components:t},"Using the ",a.createElement(s.MDXTag,{name:"inlineCode",components:t,parentName:"h2"},"icon")," prop"),a.createElement(s.MDXTag,{name:"p",components:t},"Many components such as ",a.createElement(s.MDXTag,{name:"inlineCode",components:t,parentName:"p"},"Button")," accept an ",a.createElement(s.MDXTag,{name:"inlineCode",components:t,parentName:"p"},"icon")," prop which is used to display an icon. The ",a.createElement(s.MDXTag,{name:"inlineCode",components:t,parentName:"p"},"icon")," prop supports the following type of values:"),a.createElement(s.MDXTag,{name:"h3",components:t},"1. An icon name"),a.createElement(s.MDXTag,{name:"p",components:t},"You can pass the name of an icon from ",a.createElement(s.MDXTag,{name:"a",components:t,parentName:"p",props:{href:"https://materialdesignicons.com"}},a.createElement(s.MDXTag,{name:"inlineCode",components:t,parentName:"a"},"MaterialCommunityIcons")),". This will use the ",a.createElement(s.MDXTag,{name:"a",components:t,parentName:"p",props:{href:"https://github.com/oblador/react-native-vector-icons"}},a.createElement(s.MDXTag,{name:"inlineCode",components:t,parentName:"a"},"react-native-vector-icons"))," library to display the icon."),a.createElement(s.MDXTag,{name:"p",components:t},"Example:"),a.createElement(s.MDXTag,{name:"pre",components:t,props:{className:"language-js"}},a.createElement(s.MDXTag,{name:"code",components:t,parentName:"pre",props:{className:"language-js",dangerouslySetInnerHTML:{__html:'<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">Button</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>camera<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n  Press me\n</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n'}}})),a.createElement("details",null,a.createElement("summary",null,"See the list of supported icons"),a.createElement(l.default,null)),a.createElement(s.MDXTag,{name:"h3",components:t},"2. An image source"),a.createElement(s.MDXTag,{name:"p",components:t},"You can pass an image source, such as an object of shape ",a.createElement(s.MDXTag,{name:"inlineCode",components:t,parentName:"p"},"{ uri: 'https://path.to' }")," or a local image: ",a.createElement(s.MDXTag,{name:"inlineCode",components:t,parentName:"p"},"require('../path/to/image.png')")," to use as an icon. The image might be rendered with a different color than the one provided depending on the component. If don't want this behavior, see the next example to pass an ",a.createElement(s.MDXTag,{name:"inlineCode",components:t,parentName:"p"},"Image")," element."),a.createElement(s.MDXTag,{name:"p",components:t},"Remote image:"),a.createElement(s.MDXTag,{name:"pre",components:t,props:{className:"language-js"}},a.createElement(s.MDXTag,{name:"code",components:t,parentName:"pre",props:{className:"language-js",dangerouslySetInnerHTML:{__html:'<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">Button</span></span> <span class="token attr-name">icon</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> uri<span class="token punctuation">:</span> <span class="token string">\'https://avatars0.githubusercontent.com/u/17571969?v=3&#x26;s=400\'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n  Press me\n</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n'}}})),a.createElement(s.MDXTag,{name:"p",components:t},"Local image:"),a.createElement(s.MDXTag,{name:"pre",components:t,props:{className:"language-js"}},a.createElement(s.MDXTag,{name:"code",components:t,parentName:"pre",props:{className:"language-js",dangerouslySetInnerHTML:{__html:'<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">Button</span></span> <span class="token attr-name">icon</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">\'../assets/chameleon.jpg\'</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n  Press me\n</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n'}}})),a.createElement(s.MDXTag,{name:"h3",components:t},"3. A render function"),a.createElement(s.MDXTag,{name:"p",components:t},"You can pass a function which returns a react element to be used an icon. The function receives an object with ",a.createElement(s.MDXTag,{name:"inlineCode",components:t,parentName:"p"},"size")," and ",a.createElement(s.MDXTag,{name:"inlineCode",components:t,parentName:"p"},"color")," properties as it's argument. element is used as is without any modification. However, it might get clipped if the provided element's size are bigger than what the component renders. It's upto you to make sure that the size of the element is correct."),a.createElement(s.MDXTag,{name:"p",components:t},"Example:"),a.createElement(s.MDXTag,{name:"pre",components:t,props:{className:"language-js"}},a.createElement(s.MDXTag,{name:"code",components:t,parentName:"pre",props:{className:"language-js",dangerouslySetInnerHTML:{__html:'<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">Button</span></span>\n  <span class="token attr-name">icon</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> size<span class="token punctuation">,</span> color <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">Image</span></span>\n      <span class="token attr-name">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">\'../assets/chameleon.jpg\'</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n      <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> size<span class="token punctuation">,</span> height<span class="token punctuation">:</span> size<span class="token punctuation">,</span> tintColor<span class="token punctuation">:</span> color <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n    <span class="token punctuation">/></span></span>\n  <span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n<span class="token punctuation">></span></span><span class="token plain-text">\n  Press me\n</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n'}}})),a.createElement(s.MDXTag,{name:"h3",components:t},"4. Use custom icons"),a.createElement(s.MDXTag,{name:"p",components:t},"If you want to use other icons than ",a.createElement(s.MDXTag,{name:"inlineCode",components:t,parentName:"p"},"MaterialCommunityIcons")," you need to import your icons and pass it to ",a.createElement(s.MDXTag,{name:"inlineCode",components:t,parentName:"p"},"settings")," prop within ",a.createElement(s.MDXTag,{name:"inlineCode",components:t,parentName:"p"},"PaperProvider"),"."),a.createElement(s.MDXTag,{name:"p",components:t},"Example:"),a.createElement(s.MDXTag,{name:"pre",components:t,props:{className:"language-js"}},a.createElement(s.MDXTag,{name:"code",components:t,parentName:"pre",props:{className:"language-js",dangerouslySetInnerHTML:{__html:'<span class="token keyword">import</span> AwesomeIcon <span class="token keyword">from</span> <span class="token string">\'react-native-vector-icons/FontAwesome\'</span><span class="token punctuation">;</span>\n<span class="token comment">// ...</span>\n\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">PaperProvider</span></span>\n        <span class="token attr-name">settings</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>\n          <span class="token function-variable function">icon</span><span class="token punctuation">:</span> <span class="token parameter">props</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">AwesomeIcon</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token punctuation">...</span><span class="token attr-value">props</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>\n        <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n        <span class="token attr-name">theme</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>theme<span class="token punctuation">}</span></span>\n      <span class="token punctuation">></span></span><span class="token plain-text">\n        // ...\n      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span><span class="token class-name">PaperProvider</span></span><span class="token punctuation">></span></span>\n'}}})),a.createElement(s.MDXTag,{name:"h2",components:t},"RTL support"),a.createElement(s.MDXTag,{name:"p",components:t},"If you want your icon to behave properly in a RTL environment, you can pass an object to the ",a.createElement(s.MDXTag,{name:"inlineCode",components:t,parentName:"p"},"icon")," prop with shape: ",a.createElement(s.MDXTag,{name:"inlineCode",components:t,parentName:"p"},"{ source: { uri: 'https://path.to' }, direction : 'rtl' }"),". ",a.createElement(s.MDXTag,{name:"inlineCode",components:t,parentName:"p"},"source")," can be any of the values that the ",a.createElement(s.MDXTag,{name:"inlineCode",components:t,parentName:"p"},"icon")," prop accepts in ",a.createElement(s.MDXTag,{name:"a",components:t,parentName:"p",props:{href:"#1.-an-icon-name"}},"option 1")," and ",a.createElement(s.MDXTag,{name:"a",components:t,parentName:"p",props:{href:"#2.-an-image-source"}},"option 2"),". For ",a.createElement(s.MDXTag,{name:"inlineCode",components:t,parentName:"p"},"direction")," you have few options:"),a.createElement(s.MDXTag,{name:"ol",components:t},a.createElement(s.MDXTag,{name:"li",components:t,parentName:"ol"},a.createElement(s.MDXTag,{name:"inlineCode",components:t,parentName:"li"},"auto")," - uses the device language to determine if icon should be displayed from rtl. Uses the ",a.createElement(s.MDXTag,{name:"inlineCode",components:t,parentName:"li"},"I18nManager")," module to get this info."),a.createElement(s.MDXTag,{name:"li",components:t,parentName:"ol"},a.createElement(s.MDXTag,{name:"inlineCode",components:t,parentName:"li"},"rtl")," - flips the icon so that it is rtl, this is regardless of the device language."),a.createElement(s.MDXTag,{name:"li",components:t,parentName:"ol"},a.createElement(s.MDXTag,{name:"inlineCode",components:t,parentName:"li"},"ltr")," - displays from ltr, even if in an rtl environment.")),a.createElement(s.MDXTag,{name:"p",components:t},"Example for using an image source:"),a.createElement(s.MDXTag,{name:"pre",components:t,props:{className:"language-js"}},a.createElement(s.MDXTag,{name:"code",components:t,parentName:"pre",props:{className:"language-js",dangerouslySetInnerHTML:{__html:'<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">Button</span></span> <span class="token attr-name">icon</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> source<span class="token punctuation">:</span> <span class="token punctuation">{</span> uri<span class="token punctuation">:</span> <span class="token string">\'https://avatars0.githubusercontent.com/u/17571969?v=3&#x26;s=400\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> direction<span class="token punctuation">:</span> <span class="token string">\'rtl\'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n  Press me\n</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n'}}})),a.createElement(s.MDXTag,{name:"p",components:t},"Example for using an icon name:"),a.createElement(s.MDXTag,{name:"pre",components:t,props:{className:"language-js"}},a.createElement(s.MDXTag,{name:"code",components:t,parentName:"pre",props:{className:"language-js",dangerouslySetInnerHTML:{__html:'<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">Button</span></span> <span class="token attr-name">icon</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> source<span class="token punctuation">:</span> <span class="token string">"add-a-photo"</span><span class="token punctuation">,</span> direction<span class="token punctuation">:</span> <span class="token string">\'rtl\'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n  Press me\n</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n'}}})),a.createElement(s.MDXTag,{name:"p",components:t},"You can also use a render function. Along with ",a.createElement(s.MDXTag,{name:"inlineCode",components:t,parentName:"p"},"size")," and ",a.createElement(s.MDXTag,{name:"inlineCode",components:t,parentName:"p"},"color"),", you have access to ",a.createElement(s.MDXTag,{name:"inlineCode",components:t,parentName:"p"},"direction")," which will either be ",a.createElement(s.MDXTag,{name:"inlineCode",components:t,parentName:"p"},"'rtl'")," or ",a.createElement(s.MDXTag,{name:"inlineCode",components:t,parentName:"p"},"'ltr'"),". You can then decide how to render your icon component accordingly."),a.createElement(s.MDXTag,{name:"p",components:t},"Example of using a render function:"),a.createElement(s.MDXTag,{name:"pre",components:t,props:{className:"language-js"}},a.createElement(s.MDXTag,{name:"code",components:t,parentName:"pre",props:{className:"language-js",dangerouslySetInnerHTML:{__html:'<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">Button</span></span>\n  <span class="token attr-name">icon</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> size<span class="token punctuation">,</span> color<span class="token punctuation">,</span> direction <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>\n    <span class="token operator">&#x3C;</span>Image\n      source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">\'../assets/chameleon.jpg\'</span><span class="token punctuation">)</span><span class="token punctuation">}</span>\n      style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>\n        <span class="token punctuation">{</span>\n          transform<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> scaleX<span class="token punctuation">:</span> direction <span class="token operator">===</span> <span class="token string">\'rtl\'</span> <span class="token operator">?</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\n        <span class="token punctuation">{</span>\n          width<span class="token punctuation">:</span> size<span class="token punctuation">,</span>\n          height<span class="token punctuation">:</span> size<span class="token punctuation">,</span>\n          tintColor<span class="token punctuation">:</span> color\n        <span class="token punctuation">}</span>\n      <span class="token punctuation">]</span><span class="token punctuation">}</span></span>\n    <span class="token punctuation">/></span></span>\n  <span class="token punctuation">)</span><span class="token punctuation">}</span>\n<span class="token operator">></span>\n  Press me\n<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n'}}})))}}])&&d(t.prototype,n),r&&d(t,r),i}(a.Component);t.default=b,b.isMDXComponent=!0}(0,r.exports,(function(e){return o[e]}));var i=r.exports.meta||{};return{title:i.title||"Icons",link:i.link||"icons",description:i.description,type:"custom",data:function(n){return e.createElement(t,{logo:"images/sidebar-logo.svg"},e.createElement(r.exports.default,n))}}}(),{filepath:"pages/4.fonts.md",title:"Fonts",description:"",link:"fonts",data:"# Fonts\n\n## Installing custom fonts\n\nThe easiest way to install custom fonts to your RN project is do as follows:\n\n  1. Define path to assets directory with fonts in project:\n\n  Example:\n\n  ```js\n    // React Native < 0.60 package.json\n    ...\n      \"rnpm\": {\n        \"assets\": [\n          \"fonts\"\n        ]\n      },\n    ...\n\n    // React Native >= 0.60 react-native.config.js\n    module.exports = {\n    ...\n    \"assets\": [\n      \"fonts\"\n    ],\n    ...\n  ```\n\n  Note: fonts is a folder with .ttf files\n\n  2. Place your fonts files in your assets folder\n  3. Link fonts files using '`react-native link`' command\n  4. Restart your project to refresh changes\n  5. You are able to use fontFamily based on fonts files\n\n## Configuring fonts in ThemeProvider\n\nTo create a custom font you need to prepare `fontConfig` where fonts are divided by platforms. \nAfter you have to pass the `fontConfig` into `configureFonts` method in a custom theme. \n\nNote: To override font on all platforms use `default` key.\n\nCheck the [default theme](https://github.com/callstack/react-native-paper/blob/master/src/styles/DefaultTheme.tsx) to see what customization options are supported.\n\n```js\nimport * as React from 'react';\nimport { configureFonts, DefaultTheme, Provider as PaperProvider } from 'react-native-paper';\nimport App from './src/App';\n\nconst fontConfig = {\n  default: {\n    regular: {\n      fontFamily: 'sans-serif',\n      fontWeight: 'normal',\n    },\n    medium: {\n      fontFamily: 'sans-serif-medium',\n      fontWeight: 'normal',\n    },\n    light: {\n      fontFamily: 'sans-serif-light',\n      fontWeight: 'normal',\n    },\n    thin: {\n      fontFamily: 'sans-serif-thin',\n      fontWeight: 'normal',\n    },\n  },\n};\n\nconst theme = {\n  ...DefaultTheme,\n  fonts: configureFonts(fontConfig),\n};\n\nexport default function Main() {\n  return (\n    <PaperProvider theme={theme}>\n      <App />\n    </PaperProvider>\n  );\n}\n```\n",type:"md",dependencies:[]},{filepath:"pages/5.react-native-web.md",title:"Using on the Web",description:"",link:"using-on-the-web",data:'# Using on the Web\n\n## Pre-requisites\n\nMake sure that you have followed the getting started guide and have `react-native-paper` installed and configured before following this guide.\n\nWe\'re going to use [react-native-web](https://github.com/necolas/react-native-web) and [webpack](https://webpack.js.org/) to use React Native Paper on the web, so let\'s install them as well.\n\nTo install `react-native-web`, run:\n\n```sh\nyarn add react-native-web react-dom react-art\n```\n\n### Using CRA ([Create React App](https://github.com/facebook/create-react-app))\n\nInstall [`react-app-rewired`](https://github.com/timarney/react-app-rewired) to override `webpack` configuration:\n\n```sh\nyarn add --dev react-app-rewired\n```\n\n[Configure `babel-loader`](#2-configure-babel-loader) using a new file called `config-overrides.js`:\n\n```js\nmodule.exports = function override(config, env) {\n  config.module.rules.push({\n    test: /\\.js$/,\n    exclude: /node_modules[/\\\\](?!react-native-vector-icons|react-native-safe-area-view)/,\n    use: {\n      loader: "babel-loader",\n      options: {\n        // Disable reading babel configuration\n        babelrc: false,\n        configFile: false,\n\n        // The configuration for compilation\n        presets: [\n          ["@babel/preset-env", { useBuiltIns: "usage" }],\n          "@babel/preset-react",\n          "@babel/preset-flow",\n          "@babel/preset-typescript"\n        ],\n        plugins: [\n          "@babel/plugin-proposal-class-properties",\n          "@babel/plugin-proposal-object-rest-spread"\n        ]\n      }\n    }\n  });\n\n  return config;\n};\n```\n\nChange your script in `package.json`:\n\n```diff\n/* package.json */\n\n  "scripts": {\n-   "start": "react-scripts start",\n+   "start": "react-app-rewired start",\n-   "build": "react-scripts build",\n+   "build": "react-app-rewired build",\n-   "test": "react-scripts test --env=jsdom",\n+   "test": "react-app-rewired test --env=jsdom"\n}\n```\n\n### Custom webpack setup\n\nTo install `webpack`, run:\n\n```sh\nyarn add --dev webpack webpack-cli webpack-dev-server\n```\n\nIf you don\'t have a webpack config in your project, copy the following to `webpack.config.js` get started:\n\n```js\nconst path = require(\'path\');\n\nmodule.exports = {\n  mode: \'development\',\n\n  // Path to the entry file, change it according to the path you have\n  entry: path.join(__dirname, \'App.js\'),\n\n  // Path for the output files\n  output: {\n    path: path.join(__dirname, \'dist\'),\n    filename: \'app.bundle.js\',\n  },\n\n  // Enable source map support\n  devtool: \'source-map\',\n\n  // Loaders and resolver config\n  module: {\n    rules: [\n\n    ],\n  },\n  resolve: {\n\n  },\n\n  // Development server config\n  devServer: {\n    contentBase: [path.join(__dirname, \'public\')],\n    historyApiFallback: true,\n  },\n};\n```\n\nAlso create a folder named `public` and add the following file named `index.html`:\n\n```html\n<!doctype html>\n<head>\n  <meta charSet="utf-8" />\n  <meta httpEquiv="X-UA-Compatible" content="IE=edge" />\n\n  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />\n\n  <title>App</title>\n\n  <style>\n    html, body, #root {\n      height: 100%;\n    }\n\n    #root {\n      display: flex;\n      flex-direction: column;\n    }\n  </style>\n</head>\n<body>\n  <div id="root"></div>\n  <script src="app.bundle.js"><\/script>\n</body>\n```\n\nNow we\'re ready to start configuring the project.\n\n## Configure webpack\n\n### 1. Alias `react-native` to `react-native-web`\n\nFirst, we have to tell webpack to use `react-native-web` instead of `react-native`. Add the following alias in your webpack config under `resolve`:\n\n```js\nalias: {\n  \'react-native$\': require.resolve(\'react-native-web\'),\n}\n```\n\n### 2. Configure `babel-loader`\n\nNext, we want to tell `babel-loader` to compile `react-native-paper` and `react-native-vector-icons`. We would also want to disable reading the babel configuration files to prevent any conflicts.\n\nFirst install the required dependencies:\n\n```sh\nyarn add --dev babel-loader @babel/preset-env @babel/preset-react @babel/preset-flow @babel/preset-typescript @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread\n```\n\nNow, add the following in the `module.rules` array in your webpack config:\n\n```js\n{\n  test: /\\.js$/,\n  exclude: /node_modules[/\\\\](?!react-native-vector-icons|react-native-safe-area-view)/,\n  use: {\n    loader: \'babel-loader\',\n    options: {\n      // Disable reading babel configuration\n      babelrc: false,\n      configFile: false,\n\n      // The configuration for compilation\n      presets: [\n        [\'@babel/preset-env\', { useBuiltIns: \'usage\' }],\n        \'@babel/preset-react\',\n        \'@babel/preset-flow\',\n        "@babel/preset-typescript"\n      ],\n      plugins: [\n        \'@babel/plugin-proposal-class-properties\',\n        \'@babel/plugin-proposal-object-rest-spread\'\n      ],\n    },\n  },\n},\n```\n\n### 3. Configure `file-loader`\n\nTo be able to import images and other assets using `require`, we need to configure `file-loader`. Let\'s install it:\n\n```sh\nyarn add --dev file-loader\n```\n\nTo configure it, add the following in the `module.rules` array in your webpack config:\n\n```js\n{\n  test: /\\.(jpg|png|woff|woff2|eot|ttf|svg)$/,\n  loader: \'file-loader\',\n}\n```\n\n## Load the Material Community Icons\n\nIf you followed the getting started guide, you should have the following code in your root component:\n\n```js\n<PaperProvider>\n  <App />\n</PaperProvider>\n```\n\nNow we need tweak this section to load the Material Community Icons from the [`react-native-vector-icons`](https://github.com/oblador/react-native-vector-icons) library:\n\n```js\n<PaperProvider>\n  <React.Fragment>\n    {Platform.OS === \'web\' ? (\n      <style type="text/css">{`\n        @font-face {\n          font-family: \'MaterialCommunityIcons\';\n          src: url(${require(\'react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf\')}) format(\'truetype\');\n        }\n      `}</style>\n    ) : null}\n    <App />\n  </React.Fragment>\n</PaperProvider>\n```\n\nRemember to import `Platform` from `react-native` at the top:\n\n```js\nimport { Platform } from \'react-native\';\n```\n\nYou can also load these fonts using [`css-loader`](https://github.com/webpack-contrib/css-loader) if you prefer.\n\n## Load the Roboto fonts (optional)\n\nThe default theme in React Native Paper uses the Roboto font. You can add them to your project following [the instructions on its Google Fonts page](https://fonts.google.com/specimen/Roboto?selection.family=Roboto:100,300,400,500).\n\n## We\'re done!\n\nYou can run `webpack-dev-server` to run the webpack server and open your project in the browser. You can add the following script in your `package.json` under the `"scripts"` section to make it easier:\n\n```json\n"web": "webpack-dev-server --open"\n```\n\nNow you can run `yarn web` to run the project on web.\n',type:"md",dependencies:[]},{filepath:"pages/6.recommended-libraries.md",title:"Recommended Libraries",description:"",link:"recommended-libraries",data:"# Recommended Libraries\n\nOur mission is to provide a full suite of well-integrated components built with Material Design in mind. However, many components already have better well maintained implementations.\n\nHere are some of the libraries we recommend:\n\n## Tabs\n\n[react-native-community/react-native-tab-view](https://github.com/react-native-community/react-native-tab-view)\n\nMaterial Design themed [swipeable tabs](https://material.io/design/components/tabs.html), maintained by [@satya164](https://twitter.com/satya164) and [@mosdnk](https://twitter.com/mosdnk).\n\n## Bottom sheet\n\n[osdnk/reanimated-bottom-sheet](https://github.com/osdnk/react-native-reanimated-bottom-sheet)\n\nAn implementation [bottom sheet behaviour](https://material.io/design/components/sheets-bottom.html), maintained by [@mosdnk](https://twitter.com/mosdnk).\n\n## Date Picker\n\n[react-native-community/react-native-datetimepicker](https://github.com/react-native-community/react-native-datetimepicker)\n",type:"md",dependencies:[]},function(){var e=n("./pages/6.showcase.js"),t="function"==typeof e.default?e.default:e,r=e.meta||{};return{title:r.title||"Showcase",link:r.link||"showcase",description:r.description,type:"custom",data:t}}(),{filepath:"pages/7.contributing.md",title:"Contributing",description:"",link:"contributing",data:"# Contributing to React Native Paper\n\n## Code of Conduct\n\nWe want this community to be friendly and respectful to each other. Please read [the full text](https://callstack.com/code-of-conduct/?utm_source=github.com&utm_medium=referral&utm_campaign=react-native-paper&utm_term=code-of-conduct) so that you can understand what actions will and will not be tolerated.\n\n## Our Development Process\n\nThe core team works directly on GitHub and all work is public.\n\n### Development workflow\n\n> **Working on your first pull request?** You can learn how from this *free* series: [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github).\n\n1. Fork the repo and create your branch from `master` (a guide on [how to fork a repository](https://help.github.com/articles/fork-a-repo/)).\n2. Run `yarn bootstrap` to setup the development environment.\n3. Do the changes you want and test them out in the example app before sending a pull request.\n\n### Commit message convention\n\nWe follow the [conventional commits specification](https://www.conventionalcommits.org/en) for our commit messages:\n\n* `fix`: bug fixes, e.g. fix Button color on DarkTheme.\n* `feat`: new features, e.g. add Snackbar component.\n* `refactor`: code refactor, e.g. new folder structure for components.\n* `docs`: changes into documentation, e.g. add usage example for Button.\n* `test`: adding or updating tests, eg unit, snapshot testing.\n* `chore`: tooling changes, e.g. change circleci config.\n* `BREAKING CHANGE`: for changes that break existing usage, e.g. change API of a component.\n\nOur pre-commit hooks verify that your commit message matches this format when committing.\n\n### Linting and tests\n\nWe use `typescript` for type checking, `eslint` with `prettier` for linting and formatting the code, and `jest` for testing. Our pre-commit hooks verify that the linter and tests pass when commiting. You can also run the following commands manually:\n\n* `yarn typescript`: type-check files with `tsc`.\n* `yarn lint`: lint files with `eslint` and `prettier`.\n* `yarn test`: run unit tests with `jest`.\n\n### Sending a pull request\n\nWhen you're sending a pull request:\n\n* Prefer small pull requests focused on one change.\n* Verify that `typescript`, `eslint` and all tests are passing.\n* Preview the documentation to make sure it looks good.\n* Follow the pull request template when opening a pull request.\n\nWhen you're working on a component:\n\n* Follow the guidelines described in the [official material design docs](https://material.io/guidelines/).\n* Write a brief description of every prop when defining `type Props` to aid with documentation.\n* Provide an example usage for the component (check other components to get a idea).\n* Update the type definitions for Flow and Typescript if you changed an API or added a component.\n\n### Running the example\n\nThe example app uses [Expo](https://expo.io/) for the React Native example. You will need to install the Expo app for [Android](https://play.google.com/store/apps/details?id=host.exp.exponent) and [iOS](https://itunes.apple.com/app/apple-store/id982107779) to start developing.\n\nAfter you're done, you can run `yarn example start` in the project root (or `expo start` in the `example/` folder) and scan the QR code to launch it on your device.\n\nTo run the example on web, run `yarn example web` in the project root.\n\n### Working on documentation\n\nThe documentation is automatically generated from the [TypeScript](https://www.typescriptlang.org/) annotations in the components. You can add comments above the type annotations to add descriptions. To preview the generated documentation, run `yarn docs start` in the project root.\n\n### Publishing a release\n\nWe use [release-it](https://github.com/webpro/release-it) to automate our release. If you have publish access to the NPM package, run the following from the master branch to publish a new release:\n\n```sh\nyarn release\n```\n\nNOTE: You must have a `GITHUB_TOKEN` environment variable available. You can create a GitHub access token with the \"repo\" access [here](https://github.com/settings/tokens).\n\n## Reporting issues\n\nYou can report issues on our [bug tracker](https://github.com/callstack/react-native-paper/issues). Please follow the issue template when opening an issue.\n\n## License\n\nBy contributing to React Native Paper, you agree that your contributions will be licensed under its **MIT** license.\n\n",type:"md",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/CONTRIBUTING.md"]},{type:"separator"},{filepath:"../src/components/ActivityIndicator.tsx",title:"ActivityIndicator",description:'Activity indicator is used to present progress of some activity in the app.\nIt can be used as a drop-in for the ActivityIndicator shipped with React Native.\n\n<div class="screenshots">\n  <img src="screenshots/activity-indicator.gif" style="width: 100px;" />\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { ActivityIndicator, Colors } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <ActivityIndicator animating={true} color={Colors.red800} />\n);\n\nexport default MyComponent;\n```',link:"activity-indicator",data:{description:'Activity indicator is used to present progress of some activity in the app.\nIt can be used as a drop-in for the ActivityIndicator shipped with React Native.\n\n<div class="screenshots">\n  <img src="screenshots/activity-indicator.gif" style="width: 100px;" />\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { ActivityIndicator, Colors } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <ActivityIndicator animating={true} color={Colors.red800} />\n);\n\nexport default MyComponent;\n```',displayName:"ActivityIndicator",methods:[],statics:[],props:{animating:{required:!1,tsType:{name:"boolean"},description:"Whether to show the indicator or hide it.",defaultValue:{value:"true",computed:!1}},color:{required:!1,tsType:{name:"string"},description:"The color of the spinner."},size:{required:!1,tsType:{name:"union",raw:"'small' | 'large' | number",elements:[{name:"literal",value:"'small'"},{name:"literal",value:"'large'"},{name:"number"}]},description:"Size of the indicator.",defaultValue:{value:"'small'",computed:!1}},hidesWhenStopped:{required:!1,tsType:{name:"boolean"},description:"Whether the indicator should hide when not animating.",defaultValue:{value:"true",computed:!1}},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/ActivityIndicator.tsx"]},{filepath:"../src/components/Appbar/Appbar.tsx",title:"Appbar",description:"A component to display action items in a bar. It can be placed at the top or bottom.\nThe top bar usually contains the screen title, controls such as navigation buttons, menu button etc.\nThe bottom bar usually provides access to a drawer and up to four actions.\n\nBy default Appbar uses primary color as a background, in dark theme with `adaptive` mode it will use surface colour instead.\nSee [Dark Theme](https://callstack.github.io/react-native-paper/theming.html#dark-theme) for more informations\n\n<div class=\"screenshots\">\n  <img class=\"medium\" src=\"screenshots/appbar.png\" />\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Appbar } from 'react-native-paper';\nimport { StyleSheet } from 'react-native';\n\nconst MyComponent = () => (\n <Appbar style={styles.bottom}>\n   <Appbar.Action\n     icon=\"archive\"\n     onPress={() => console.log('Pressed archive')}\n    />\n    <Appbar.Action icon=\"mail\" onPress={() => console.log('Pressed mail')} />\n    <Appbar.Action icon=\"label\" onPress={() => console.log('Pressed label')} />\n    <Appbar.Action\n      icon=\"delete\"\n      onPress={() => console.log('Pressed delete')}\n    />\n  </Appbar>\n );\n\nexport default MyComponent\n\nconst styles = StyleSheet.create({\n  bottom: {\n    position: 'absolute',\n    left: 0,\n    right: 0,\n    bottom: 0,\n  },\n});\n```",link:"appbar",data:{description:"A component to display action items in a bar. It can be placed at the top or bottom.\nThe top bar usually contains the screen title, controls such as navigation buttons, menu button etc.\nThe bottom bar usually provides access to a drawer and up to four actions.\n\nBy default Appbar uses primary color as a background, in dark theme with `adaptive` mode it will use surface colour instead.\nSee [Dark Theme](https://callstack.github.io/react-native-paper/theming.html#dark-theme) for more informations\n\n<div class=\"screenshots\">\n  <img class=\"medium\" src=\"screenshots/appbar.png\" />\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Appbar } from 'react-native-paper';\nimport { StyleSheet } from 'react-native';\n\nconst MyComponent = () => (\n <Appbar style={styles.bottom}>\n   <Appbar.Action\n     icon=\"archive\"\n     onPress={() => console.log('Pressed archive')}\n    />\n    <Appbar.Action icon=\"mail\" onPress={() => console.log('Pressed mail')} />\n    <Appbar.Action icon=\"label\" onPress={() => console.log('Pressed label')} />\n    <Appbar.Action\n      icon=\"delete\"\n      onPress={() => console.log('Pressed delete')}\n    />\n  </Appbar>\n );\n\nexport default MyComponent\n\nconst styles = StyleSheet.create({\n  bottom: {\n    position: 'absolute',\n    left: 0,\n    right: 0,\n    bottom: 0,\n  },\n});\n```",displayName:"Appbar",methods:[],statics:[{name:"Content",description:null,docblock:null,type:{name:"static"},link:"appbar-content.html"},{name:"Action",description:null,docblock:null,type:{name:"static"},link:"appbar-action.html"},{name:"BackAction",description:null,docblock:null,type:{name:"static"},link:"appbar-back-action.html"},{name:"Header",description:null,docblock:null,type:{name:"static"},link:"appbar-header.html"}],props:{dark:{required:!1,tsType:{name:"boolean"},description:"Whether the background color is a dark color. A dark appbar will render light text and vice-versa."},children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Content of the `Appbar`."},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Appbar/Appbar.tsx"]},{filepath:"../src/components/Appbar/AppbarAction.tsx",title:"Appbar.Action",description:'A component used to display an action item in the appbar.\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/appbar-action-android.png" />\n      <figcaption>Android</figcaption>\n  </figure>\n</div>\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/appbar-action-ios.png" />\n      <figcaption>iOS</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Appbar } from \'react-native-paper\';\nimport { Platform } from \'react-native\';\n\nconst MORE_ICON = Platform.OS === \'ios\' ? \'dots-horizontal\' : \'dots-vertical\';\n\nconst MyComponent = () => (\n    <Appbar.Header>\n       <Appbar.Content title="Title" subtitle={\'Subtitle\'} />\n        <Appbar.Action icon="magnify" onPress={() => {}} />\n        <Appbar.Action icon={MORE_ICON} onPress={() => {}} />\n    </Appbar.Header>\n);\n\nexport default MyComponent;\n```',link:"appbar-action",data:{description:'A component used to display an action item in the appbar.\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/appbar-action-android.png" />\n      <figcaption>Android</figcaption>\n  </figure>\n</div>\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/appbar-action-ios.png" />\n      <figcaption>iOS</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Appbar } from \'react-native-paper\';\nimport { Platform } from \'react-native\';\n\nconst MORE_ICON = Platform.OS === \'ios\' ? \'dots-horizontal\' : \'dots-vertical\';\n\nconst MyComponent = () => (\n    <Appbar.Header>\n       <Appbar.Content title="Title" subtitle={\'Subtitle\'} />\n        <Appbar.Action icon="magnify" onPress={() => {}} />\n        <Appbar.Action icon={MORE_ICON} onPress={() => {}} />\n    </Appbar.Header>\n);\n\nexport default MyComponent;\n```',displayName:"Appbar.Action",methods:[],statics:[],props:{color:{required:!1,tsType:{name:"string"},description:"Custom color for action icon."},icon:{required:!0,tsType:{name:"IconSource"},description:"Name of the icon to show."},size:{required:!1,tsType:{name:"number"},description:"Optional icon size.",defaultValue:{value:"24",computed:!1}},disabled:{required:!1,tsType:{name:"boolean"},description:"Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch."},accessibilityLabel:{required:!1,tsType:{name:"string"},description:"Accessibility label for the button. This is read by the screen reader when the user taps the button."},onPress:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Function to execute on press."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""},ref:{required:!1,tsType:{name:"ReactRefObject",raw:"React.RefObject<TouchableWithoutFeedback>",elements:[{name:"TouchableWithoutFeedback"}]},description:""}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Appbar/AppbarAction.tsx"],group:"Appbar"},{filepath:"../src/components/Appbar/AppbarBackAction.tsx",title:"Appbar.BackAction",description:'A component used to display a back button in the appbar.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/appbar-backaction-android.png" />\n    <figcaption>Android</figcaption>\n  </figure>\n</div>\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/appbar-backaction-ios.png" />\n    <figcaption>iOS</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Appbar } from \'react-native-paper\';\n\n\nconst MyComponent = () => (\n    <Appbar.Header>\n      <Appbar.BackAction onPress={() => {}} />\n    </Appbar.Header>\n);\n\nexport default MyComponent;\n```',link:"appbar-back-action",data:{description:'A component used to display a back button in the appbar.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/appbar-backaction-android.png" />\n    <figcaption>Android</figcaption>\n  </figure>\n</div>\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/appbar-backaction-ios.png" />\n    <figcaption>iOS</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Appbar } from \'react-native-paper\';\n\n\nconst MyComponent = () => (\n    <Appbar.Header>\n      <Appbar.BackAction onPress={() => {}} />\n    </Appbar.Header>\n);\n\nexport default MyComponent;\n```',displayName:"Appbar.BackAction",methods:[],statics:[],props:{color:{required:!1,tsType:{name:"string"},description:"Custom color for back icon."},size:{required:!1,tsType:{name:"number"},description:"Optional icon size."},disabled:{required:!1,tsType:{name:"boolean"},description:"Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch."},accessibilityLabel:{required:!1,tsType:{name:"string"},description:"Accessibility label for the button. This is read by the screen reader when the user taps the button.",defaultValue:{value:"'Back'",computed:!1}},onPress:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Function to execute on press."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Appbar/AppbarBackAction.tsx"],group:"Appbar"},{filepath:"../src/components/Appbar/AppbarContent.tsx",title:"Appbar.Content",description:'A component used to display a title and optional subtitle in an appbar.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/appbar-content.png" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Appbar } from \'react-native-paper\';\n\nconst MyComponent = () => (\n    <Appbar.Header>\n       <Appbar.Content title="Title" subtitle={\'Subtitle\'} />\n    </Appbar.Header>\n);\n\nexport default MyComponent;\n```',link:"appbar-content",data:{description:'A component used to display a title and optional subtitle in an appbar.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/appbar-content.png" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Appbar } from \'react-native-paper\';\n\nconst MyComponent = () => (\n    <Appbar.Header>\n       <Appbar.Content title="Title" subtitle={\'Subtitle\'} />\n    </Appbar.Header>\n);\n\nexport default MyComponent;\n```',displayName:"Appbar.Content",methods:[],statics:[],props:{color:{required:!1,tsType:{name:"string"},description:"Custom color for the text."},title:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Text for the title."},titleStyle:{required:!1,tsType:{name:"StyleProp",elements:[{name:"TextStyle"}],raw:"StyleProp<TextStyle>"},description:"Style for the title."},titleRef:{required:!1,tsType:{name:"ReactRefObject",raw:"React.RefObject<Text>",elements:[{name:"Text"}]},description:"Reference for the title."},subtitle:{required:!1,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Text for the subtitle."},subtitleStyle:{required:!1,tsType:{name:"StyleProp",elements:[{name:"TextStyle"}],raw:"StyleProp<TextStyle>"},description:"Style for the subtitle."},onPress:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Function to execute on press."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Appbar/AppbarContent.tsx"],group:"Appbar"},{filepath:"../src/components/Appbar/AppbarHeader.tsx",title:"Appbar.Header",description:'A component to use as a header at the top of the screen.\nIt can contain the screen title, controls such as navigation buttons, menu button etc.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/appbar-header.android.png" />\n    <figcaption>Android</figcaption>\n  </figure>\n  <figure>\n    <img class="medium" src="screenshots/appbar-header.ios.png" />\n    <figcaption>iOS</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Appbar } from \'react-native-paper\';\n\nconst MyComponent = () => {\n  const _goBack = () => console.log(\'Went back\');\n\n  const _handleSearch = () => console.log(\'Searching\');\n\n  const _handleMore = () => console.log(\'Shown more\');\n\n  return (\n    <Appbar.Header>\n      <Appbar.BackAction onPress={_goBack} />\n      <Appbar.Content title="Title" subtitle="Subtitle" />\n      <Appbar.Action icon="magnify" onPress={_handleSearch} />\n      <Appbar.Action icon="dots-vertical" onPress={_handleMore} />\n    </Appbar.Header>\n  );\n};\n\nexport default MyComponent;\n```',link:"appbar-header",data:{description:'A component to use as a header at the top of the screen.\nIt can contain the screen title, controls such as navigation buttons, menu button etc.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/appbar-header.android.png" />\n    <figcaption>Android</figcaption>\n  </figure>\n  <figure>\n    <img class="medium" src="screenshots/appbar-header.ios.png" />\n    <figcaption>iOS</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Appbar } from \'react-native-paper\';\n\nconst MyComponent = () => {\n  const _goBack = () => console.log(\'Went back\');\n\n  const _handleSearch = () => console.log(\'Searching\');\n\n  const _handleMore = () => console.log(\'Shown more\');\n\n  return (\n    <Appbar.Header>\n      <Appbar.BackAction onPress={_goBack} />\n      <Appbar.Content title="Title" subtitle="Subtitle" />\n      <Appbar.Action icon="magnify" onPress={_handleSearch} />\n      <Appbar.Action icon="dots-vertical" onPress={_handleMore} />\n    </Appbar.Header>\n  );\n};\n\nexport default MyComponent;\n```',displayName:"Appbar.Header",methods:[],statics:[],props:{dark:{required:!1,tsType:{name:"boolean"},description:"Whether the background color is a dark color. A dark header will render light text and vice-versa."},statusBarHeight:{required:!1,tsType:{name:"number"},description:"Extra padding to add at the top of header to account for translucent status bar.\nThis is automatically handled on iOS >= 11 including iPhone X using `SafeAreaView`.\nIf you are using Expo, we assume translucent status bar and set a height for status bar automatically.\nPass `0` or a custom value to disable the default behaviour, and customize the height."},children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Content of the header."},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Appbar/AppbarHeader.tsx"],group:"Appbar"},{filepath:"../src/components/Avatar/AvatarIcon.tsx",title:"Avatar.Icon",description:'Avatars can be used to represent people in a graphical way.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/avatar-icon.png" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Avatar } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <Avatar.Icon size={24} icon="folder" />\n);\n```',link:"avatar-icon",data:{description:'Avatars can be used to represent people in a graphical way.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/avatar-icon.png" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Avatar } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <Avatar.Icon size={24} icon="folder" />\n);\n```',displayName:"Avatar.Icon",methods:[],statics:[],props:{icon:{required:!0,tsType:{name:"IconSource"},description:"Icon to display for the `Avatar`."},size:{required:!1,tsType:{name:"number"},description:"Size of the avatar.",defaultValue:{value:"64",computed:!1}},color:{required:!1,tsType:{name:"string"},description:"Custom color for the icon."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Avatar/AvatarIcon.tsx"],group:"Avatar"},{filepath:"../src/components/Avatar/AvatarImage.tsx",title:"Avatar.Image",description:"Avatars can be used to represent people in a graphical way.\n\n<div class=\"screenshots\">\n  <figure>\n    <img class=\"medium\" src=\"screenshots/avatar-image.png\" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Avatar } from 'react-native-paper';\n\nconst MyComponent = () => (\n  <Avatar.Image size={24} source={require('../assets/avatar.png')} />\n);\n```",link:"avatar-image",data:{description:"Avatars can be used to represent people in a graphical way.\n\n<div class=\"screenshots\">\n  <figure>\n    <img class=\"medium\" src=\"screenshots/avatar-image.png\" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Avatar } from 'react-native-paper';\n\nconst MyComponent = () => (\n  <Avatar.Image size={24} source={require('../assets/avatar.png')} />\n);\n```",displayName:"Avatar.Image",methods:[],statics:[],props:{source:{required:!0,tsType:{name:"ImageSourcePropType"},description:"Image to display for the `Avatar`."},size:{required:!1,tsType:{name:"number"},description:"Size of the avatar.",defaultValue:{value:"64",computed:!1}},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Avatar/AvatarImage.tsx"],group:"Avatar"},{filepath:"../src/components/Avatar/AvatarText.tsx",title:"Avatar.Text",description:'Avatars can be used to represent people in a graphical way.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/avatar-text.png" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Avatar } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <Avatar.Text size={24} label="XD" />\n);\n```',link:"avatar-text",data:{description:'Avatars can be used to represent people in a graphical way.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/avatar-text.png" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Avatar } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <Avatar.Text size={24} label="XD" />\n);\n```',displayName:"Avatar.Text",methods:[],statics:[],props:{label:{required:!0,tsType:{name:"string"},description:"Initials to show as the text in the `Avatar`."},size:{required:!1,tsType:{name:"number"},description:"Size of the avatar.",defaultValue:{value:"64",computed:!1}},color:{required:!1,tsType:{name:"string"},description:"Custom color for the text."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:"Style for text container"},labelStyle:{required:!1,tsType:{name:"StyleProp",elements:[{name:"TextStyle"}],raw:"StyleProp<TextStyle>"},description:"Style for the title."},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Avatar/AvatarText.tsx"],group:"Avatar"},{filepath:"../src/components/Badge.tsx",title:"Badge",description:'Badges are small status descriptors for UI elements.\nA badge consists of a small circle, typically containing a number or other short set of characters, that appears in proximity to another object.\n\n<div class="screenshots">\n  <figure>\n    <img class="small" src="screenshots/badge-1.png" />\n    <figcaption>Badge with content</figcaption>\n  </figure>\n  <figure>\n    <img class="small" src="screenshots/badge-2.png" />\n    <figcaption>Badge without content</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Badge } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <Badge>3</Badge>\n);\n\nexport default MyComponent;\n```',link:"badge",data:{description:'Badges are small status descriptors for UI elements.\nA badge consists of a small circle, typically containing a number or other short set of characters, that appears in proximity to another object.\n\n<div class="screenshots">\n  <figure>\n    <img class="small" src="screenshots/badge-1.png" />\n    <figcaption>Badge with content</figcaption>\n  </figure>\n  <figure>\n    <img class="small" src="screenshots/badge-2.png" />\n    <figcaption>Badge without content</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Badge } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <Badge>3</Badge>\n);\n\nexport default MyComponent;\n```',displayName:"Badge",methods:[],statics:[],props:{visible:{required:!1,tsType:{name:"boolean"},description:"Whether the badge is visible",defaultValue:{value:"true",computed:!1}},children:{required:!1,tsType:{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},description:"Content of the `Badge`."},size:{required:!1,tsType:{name:"number"},description:"Size of the `Badge`.",defaultValue:{value:"20",computed:!1}},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"TextStyle"}],raw:"StyleProp<TextStyle>"},description:""},ref:{required:!1,tsType:{name:"ReactRefObject",raw:"React.RefObject<typeof Animated.Text>",elements:[{}]},description:""},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Badge.tsx"]},{filepath:"../src/components/Banner.tsx",title:"Banner",description:"Banner displays a prominent message and related actions.\n\n<div class=\"screenshots\">\n  <img class=\"medium\" src=\"screenshots/banner.gif\" />\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Image } from 'react-native';\nimport { Banner } from 'react-native-paper';\n\nconst MyComponent = () => {\n  const [visible, setVisible] = React.useState(true);\n\n  return (\n    <Banner\n      visible={visible}\n      actions={[\n        {\n          label: 'Fix it',\n          onPress: () => setVisible(false),\n        },\n        {\n          label: 'Learn more',\n          onPress: () => setVisible(false),\n        },\n      ]}\n      icon={({size}) => (\n        <Image\n          source={{\n            uri: 'https://avatars3.githubusercontent.com/u/17571969?s=400&v=4',\n          }}\n          style={{\n            width: size,\n            height: size,\n          }}\n        />\n      )}>\n      There was a problem processing a transaction on your credit card.\n    </Banner>\n  );\n};\n\nexport default MyComponent;\n```",link:"banner",data:{description:"Banner displays a prominent message and related actions.\n\n<div class=\"screenshots\">\n  <img class=\"medium\" src=\"screenshots/banner.gif\" />\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Image } from 'react-native';\nimport { Banner } from 'react-native-paper';\n\nconst MyComponent = () => {\n  const [visible, setVisible] = React.useState(true);\n\n  return (\n    <Banner\n      visible={visible}\n      actions={[\n        {\n          label: 'Fix it',\n          onPress: () => setVisible(false),\n        },\n        {\n          label: 'Learn more',\n          onPress: () => setVisible(false),\n        },\n      ]}\n      icon={({size}) => (\n        <Image\n          source={{\n            uri: 'https://avatars3.githubusercontent.com/u/17571969?s=400&v=4',\n          }}\n          style={{\n            width: size,\n            height: size,\n          }}\n        />\n      )}>\n      There was a problem processing a transaction on your credit card.\n    </Banner>\n  );\n};\n\nexport default MyComponent;\n```",displayName:"Banner",methods:[],statics:[],props:{visible:{required:!0,tsType:{name:"boolean"},description:"Whether banner is currently visible."},children:{required:!0,tsType:{name:"string"},description:"Content that will be displayed inside banner."},icon:{required:!1,tsType:{name:"IconSource"},description:"Icon to display for the `Banner`. Can be an image."},actions:{required:!0,tsType:{name:"Array",elements:[{name:"signature",type:"object",raw:"{\n  label: string;\n  onPress: () => void;\n}",signature:{properties:[{key:"label",value:{name:"string",required:!0}},{key:"onPress",value:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}},required:!0}}]}}],raw:"Array<{\n  label: string;\n  onPress: () => void;\n}>"},description:"Action items to shown in the banner.\nAn action item should contain the following properties:\n\n- `label`: label of the action button (required)\n- `onPress`: callback that is called when button is pressed (required)\n\nTo customize button you can pass other props that button component takes."},contentStyle:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:"Style of banner's inner content.\nUse this prop to apply custom width for wide layouts."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""},ref:{required:!1,tsType:{name:"ReactRefObject",raw:"React.RefObject<View>",elements:[{name:"View"}]},description:""},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Banner.tsx"]},{filepath:"../src/components/BottomNavigation.tsx",title:"BottomNavigation",description:"Bottom navigation provides quick navigation between top-level views of an app with a bottom navigation bar.\nIt is primarily designed for use on mobile.\n\nFor integration with React Navigation, you can use [react-navigation-material-bottom-tab-navigator](https://github.com/react-navigation/react-navigation-material-bottom-tab-navigator).\n\nBy default Bottom navigation uses primary color as a background, in dark theme with `adaptive` mode it will use surface colour instead.\nSee [Dark Theme](https://callstack.github.io/react-native-paper/theming.html#dark-theme) for more informations\n\n<div class=\"screenshots\">\n  <img class=\"medium\" src=\"screenshots/bottom-navigation.gif\" />\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { BottomNavigation, Text } from 'react-native-paper';\n\nconst MusicRoute = () => <Text>Music</Text>;\n\nconst AlbumsRoute = () => <Text>Albums</Text>;\n\nconst RecentsRoute = () => <Text>Recents</Text>;\n\nconst MyComponent = () => {\n  const [index, setIndex] = React.useState(0);\n  const [routes] = React.useState([\n    { key: 'music', title: 'Music', icon: 'queue-music' },\n    { key: 'albums', title: 'Albums', icon: 'album' },\n    { key: 'recents', title: 'Recents', icon: 'history' },\n  ]);\n\n  const renderScene = BottomNavigation.SceneMap({\n    music: MusicRoute,\n    albums: AlbumsRoute,\n    recents: RecentsRoute,\n  });\n\n  return (\n    <BottomNavigation\n      navigationState={{ index, routes }}\n      onIndexChange={setIndex}\n      renderScene={renderScene}\n    />\n  );\n};\n\nexport default MyComponent;\n```",link:"bottom-navigation",data:{description:"Bottom navigation provides quick navigation between top-level views of an app with a bottom navigation bar.\nIt is primarily designed for use on mobile.\n\nFor integration with React Navigation, you can use [react-navigation-material-bottom-tab-navigator](https://github.com/react-navigation/react-navigation-material-bottom-tab-navigator).\n\nBy default Bottom navigation uses primary color as a background, in dark theme with `adaptive` mode it will use surface colour instead.\nSee [Dark Theme](https://callstack.github.io/react-native-paper/theming.html#dark-theme) for more informations\n\n<div class=\"screenshots\">\n  <img class=\"medium\" src=\"screenshots/bottom-navigation.gif\" />\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { BottomNavigation, Text } from 'react-native-paper';\n\nconst MusicRoute = () => <Text>Music</Text>;\n\nconst AlbumsRoute = () => <Text>Albums</Text>;\n\nconst RecentsRoute = () => <Text>Recents</Text>;\n\nconst MyComponent = () => {\n  const [index, setIndex] = React.useState(0);\n  const [routes] = React.useState([\n    { key: 'music', title: 'Music', icon: 'queue-music' },\n    { key: 'albums', title: 'Albums', icon: 'album' },\n    { key: 'recents', title: 'Recents', icon: 'history' },\n  ]);\n\n  const renderScene = BottomNavigation.SceneMap({\n    music: MusicRoute,\n    albums: AlbumsRoute,\n    recents: RecentsRoute,\n  });\n\n  return (\n    <BottomNavigation\n      navigationState={{ index, routes }}\n      onIndexChange={setIndex}\n      renderScene={renderScene}\n    />\n  );\n};\n\nexport default MyComponent;\n```",displayName:"BottomNavigation",methods:[{name:"SceneMap",docblock:"Function which takes a map of route keys to components.\nPure components are used to minmize re-rendering of the pages.\nThis drastically improves the animation performance.",modifiers:["static"],params:[{name:"scenes",type:{name:"signature",type:"object",raw:"{\n  [key: string]: React.ComponentType<{\n    route: Route;\n    jumpTo: (key: string) => void;\n  }>;\n}",signature:{properties:[{key:{name:"string"},value:{name:"ReactComponentType",raw:"React.ComponentType<{\n  route: Route;\n  jumpTo: (key: string) => void;\n}>",elements:[{name:"signature",type:"object",raw:"{\n  route: Route;\n  jumpTo: (key: string) => void;\n}",signature:{properties:[{key:"route",value:{name:"signature",type:"object",raw:"{\n  key: string;\n  title?: string;\n  icon?: IconSource;\n  badge?: string | number | boolean;\n  color?: string;\n  accessibilityLabel?: string;\n  testID?: string;\n}",signature:{properties:[{key:"key",value:{name:"string",required:!0}},{key:"title",value:{name:"string",required:!1}},{key:"icon",value:{name:"IconSource",required:!1}},{key:"badge",value:{name:"union",raw:"string | number | boolean",elements:[{name:"string"},{name:"number"},{name:"boolean"}],required:!1}},{key:"color",value:{name:"string",required:!1}},{key:"accessibilityLabel",value:{name:"string",required:!1}},{key:"testID",value:{name:"string",required:!1}}]},required:!0}},{key:"jumpTo",value:{name:"signature",type:"function",raw:"(key: string) => void",signature:{arguments:[{name:"key",type:{name:"string"}}],return:{name:"void"}},required:!0}}]}}],required:!0}}]}}}],returns:null,description:"Function which takes a map of route keys to components.\nPure components are used to minmize re-rendering of the pages.\nThis drastically improves the animation performance."}],statics:[],props:{shifting:{required:!1,tsType:{name:"boolean"},description:"Whether the shifting style is used, the active tab appears wider and the inactive tabs won't have a label.\nBy default, this is `true` when you have more than 3 tabs."},labeled:{required:!1,tsType:{name:"boolean"},description:"Whether to show labels in tabs. When `false`, only icons will be displayed.",defaultValue:{value:"true",computed:!1}},navigationState:{required:!0,tsType:{name:"signature",type:"object",raw:"{\n  index: number;\n  routes: Route[];\n}",signature:{properties:[{key:"index",value:{name:"number",required:!0}},{key:"routes",value:{name:"Array",elements:[{name:"signature",type:"object",raw:"{\n  key: string;\n  title?: string;\n  icon?: IconSource;\n  badge?: string | number | boolean;\n  color?: string;\n  accessibilityLabel?: string;\n  testID?: string;\n}",signature:{properties:[{key:"key",value:{name:"string",required:!0}},{key:"title",value:{name:"string",required:!1}},{key:"icon",value:{name:"IconSource",required:!1}},{key:"badge",value:{name:"union",raw:"string | number | boolean",elements:[{name:"string"},{name:"number"},{name:"boolean"}],required:!1}},{key:"color",value:{name:"string",required:!1}},{key:"accessibilityLabel",value:{name:"string",required:!1}},{key:"testID",value:{name:"string",required:!1}}]}}],raw:"Route[]",required:!0}}]}},description:"State for the bottom navigation. The state should contain the following properties:\n\n- `index`: a number reprsenting the index of the active route in the `routes` array\n- `routes`: an array containing a list of route objects used for rendering the tabs\n\nEach route object should contain the following properties:\n\n- `key`: a unique key to identify the route (required)\n- `title`: title of the route to use as the tab label\n- `icon`: icon to use as the tab icon, can be a string, an image source or a react component\n- `color`: color to use as background color for shifting bottom navigation\n- `badge`: badge to show on the tab icon, can be `true` to show a dot, `string` or `number` to show text.\n- `accessibilityLabel`: accessibility label for the tab button\n- `testID`: test id for the tab button\n\nExample:\n\n```js\n{\n  index: 1,\n  routes: [\n    { key: 'music', title: 'Music', icon: 'queue-music', color: '#3F51B5' },\n    { key: 'albums', title: 'Albums', icon: 'album', color: '#009688' },\n    { key: 'recents', title: 'Recents', icon: 'history', color: '#795548' },\n    { key: 'purchased', title: 'Purchased', icon: 'shopping-cart', color: '#607D8B' },\n  ]\n}\n```\n\n`BottomNavigation` is a controlled component, which means the `index` needs to be updated via the `onIndexChange` callback."},onIndexChange:{required:!0,tsType:{name:"signature",type:"function",raw:"(index: number) => void",signature:{arguments:[{name:"index",type:{name:"number"}}],return:{name:"void"}}},description:"Callback which is called on tab change, receives the index of the new tab as argument.\nThe navigation state needs to be updated when it's called, otherwise the change is dropped."},renderScene:{required:!0,tsType:{name:"signature",type:"function",raw:"(props: {\n  route: Route;\n  jumpTo: (key: string) => void;\n}) => React.ReactNode | null",signature:{arguments:[{name:"props",type:{name:"signature",type:"object",raw:"{\n  route: Route;\n  jumpTo: (key: string) => void;\n}",signature:{properties:[{key:"route",value:{name:"signature",type:"object",raw:"{\n  key: string;\n  title?: string;\n  icon?: IconSource;\n  badge?: string | number | boolean;\n  color?: string;\n  accessibilityLabel?: string;\n  testID?: string;\n}",signature:{properties:[{key:"key",value:{name:"string",required:!0}},{key:"title",value:{name:"string",required:!1}},{key:"icon",value:{name:"IconSource",required:!1}},{key:"badge",value:{name:"union",raw:"string | number | boolean",elements:[{name:"string"},{name:"number"},{name:"boolean"}],required:!1}},{key:"color",value:{name:"string",required:!1}},{key:"accessibilityLabel",value:{name:"string",required:!1}},{key:"testID",value:{name:"string",required:!1}}]},required:!0}},{key:"jumpTo",value:{name:"signature",type:"function",raw:"(key: string) => void",signature:{arguments:[{name:"key",type:{name:"string"}}],return:{name:"void"}},required:!0}}]}}}],return:{name:"union",raw:"React.ReactNode | null",elements:[{name:"ReactReactNode",raw:"React.ReactNode"},{name:"null"}]}}},description:"Callback which returns a react element to render as the page for the tab. Receives an object containing the route as the argument:\n\n```js\nrenderScene = ({ route, jumpTo }) => {\n  switch (route.key) {\n    case 'music':\n      return <MusicRoute jumpTo={jumpTo} />;\n    case 'albums':\n      return <AlbumsRoute jumpTo={jumpTo} />;\n  }\n}\n```\n\nPages are lazily rendered, which means that a page will be rendered the first time you navigate to it.\nAfter initial render, all the pages stay rendered to preserve their state.\n\nYou need to make sure that your individual routes implement a `shouldComponentUpdate` to improve the performance.\nTo make it easier to specify the components, you can use the `SceneMap` helper:\n\n```js\nrenderScene = BottomNavigation.SceneMap({\n  music: MusicRoute,\n  albums: AlbumsRoute,\n});\n```\n\nSpecifying the components this way is easier and takes care of implementing a `shouldComponentUpdate` method.\nEach component will receive the current route and a `jumpTo` method as it's props.\nThe `jumpTo` method can be used to navigate to other tabs programmatically:\n\n```js\nthis.props.jumpTo('albums')\n```"},renderIcon:{required:!1,tsType:{name:"signature",type:"function",raw:"(props: {\n  route: Route;\n  focused: boolean;\n  color: string;\n}) => React.ReactNode",signature:{arguments:[{name:"props",type:{name:"signature",type:"object",raw:"{\n  route: Route;\n  focused: boolean;\n  color: string;\n}",signature:{properties:[{key:"route",value:{name:"signature",type:"object",raw:"{\n  key: string;\n  title?: string;\n  icon?: IconSource;\n  badge?: string | number | boolean;\n  color?: string;\n  accessibilityLabel?: string;\n  testID?: string;\n}",signature:{properties:[{key:"key",value:{name:"string",required:!0}},{key:"title",value:{name:"string",required:!1}},{key:"icon",value:{name:"IconSource",required:!1}},{key:"badge",value:{name:"union",raw:"string | number | boolean",elements:[{name:"string"},{name:"number"},{name:"boolean"}],required:!1}},{key:"color",value:{name:"string",required:!1}},{key:"accessibilityLabel",value:{name:"string",required:!1}},{key:"testID",value:{name:"string",required:!1}}]},required:!0}},{key:"focused",value:{name:"boolean",required:!0}},{key:"color",value:{name:"string",required:!0}}]}}}],return:{name:"ReactReactNode",raw:"React.ReactNode"}}},description:"Callback which returns a React Element to be used as tab icon."},renderLabel:{required:!1,tsType:{name:"signature",type:"function",raw:"(props: {\n  route: Route;\n  focused: boolean;\n  color: string;\n}) => React.ReactNode",signature:{arguments:[{name:"props",type:{name:"signature",type:"object",raw:"{\n  route: Route;\n  focused: boolean;\n  color: string;\n}",signature:{properties:[{key:"route",value:{name:"signature",type:"object",raw:"{\n  key: string;\n  title?: string;\n  icon?: IconSource;\n  badge?: string | number | boolean;\n  color?: string;\n  accessibilityLabel?: string;\n  testID?: string;\n}",signature:{properties:[{key:"key",value:{name:"string",required:!0}},{key:"title",value:{name:"string",required:!1}},{key:"icon",value:{name:"IconSource",required:!1}},{key:"badge",value:{name:"union",raw:"string | number | boolean",elements:[{name:"string"},{name:"number"},{name:"boolean"}],required:!1}},{key:"color",value:{name:"string",required:!1}},{key:"accessibilityLabel",value:{name:"string",required:!1}},{key:"testID",value:{name:"string",required:!1}}]},required:!0}},{key:"focused",value:{name:"boolean",required:!0}},{key:"color",value:{name:"string",required:!0}}]}}}],return:{name:"ReactReactNode",raw:"React.ReactNode"}}},description:"Callback which React Element to be used as tab label."},renderTouchable:{required:!1,tsType:{name:"signature",type:"function",raw:"(props: TouchableProps) => React.ReactNode",signature:{arguments:[{name:"props",type:{name:"intersection",raw:"TouchableWithoutFeedbackProps & {\n  key: string;\n  route: Route;\n  children: React.ReactNode;\n  borderless?: boolean;\n  centered?: boolean;\n  rippleColor?: string;\n}",elements:[{name:"TouchableWithoutFeedbackProps"},{name:"signature",type:"object",raw:"{\n  key: string;\n  route: Route;\n  children: React.ReactNode;\n  borderless?: boolean;\n  centered?: boolean;\n  rippleColor?: string;\n}",signature:{properties:[{key:"key",value:{name:"string",required:!0}},{key:"route",value:{name:"signature",type:"object",raw:"{\n  key: string;\n  title?: string;\n  icon?: IconSource;\n  badge?: string | number | boolean;\n  color?: string;\n  accessibilityLabel?: string;\n  testID?: string;\n}",signature:{properties:[{key:"key",value:{name:"string",required:!0}},{key:"title",value:{name:"string",required:!1}},{key:"icon",value:{name:"IconSource",required:!1}},{key:"badge",value:{name:"union",raw:"string | number | boolean",elements:[{name:"string"},{name:"number"},{name:"boolean"}],required:!1}},{key:"color",value:{name:"string",required:!1}},{key:"accessibilityLabel",value:{name:"string",required:!1}},{key:"testID",value:{name:"string",required:!1}}]},required:!0}},{key:"children",value:{name:"ReactReactNode",raw:"React.ReactNode",required:!0}},{key:"borderless",value:{name:"boolean",required:!1}},{key:"centered",value:{name:"boolean",required:!1}},{key:"rippleColor",value:{name:"string",required:!1}}]}}]}}],return:{name:"ReactReactNode",raw:"React.ReactNode"}}},description:"Callback which returns a React element to be used as the touchable for the tab item.\nRenders a `TouchableRipple` on Android and `TouchableWithoutFeedback` with `View` on iOS."},getLabelText:{required:!1,tsType:{name:"signature",type:"function",raw:"(props: { route: Route }) => string",signature:{arguments:[{name:"props",type:{name:"signature",type:"object",raw:"{ route: Route }",signature:{properties:[{key:"route",value:{name:"signature",type:"object",raw:"{\n  key: string;\n  title?: string;\n  icon?: IconSource;\n  badge?: string | number | boolean;\n  color?: string;\n  accessibilityLabel?: string;\n  testID?: string;\n}",signature:{properties:[{key:"key",value:{name:"string",required:!0}},{key:"title",value:{name:"string",required:!1}},{key:"icon",value:{name:"IconSource",required:!1}},{key:"badge",value:{name:"union",raw:"string | number | boolean",elements:[{name:"string"},{name:"number"},{name:"boolean"}],required:!1}},{key:"color",value:{name:"string",required:!1}},{key:"accessibilityLabel",value:{name:"string",required:!1}},{key:"testID",value:{name:"string",required:!1}}]},required:!0}}]}}}],return:{name:"string"}}},description:"Get label text for the tab, uses `route.title` by default. Use `renderLabel` to replace label component."},getAccessibilityLabel:{required:!1,tsType:{name:"signature",type:"function",raw:"(props: { route: Route }) => string | undefined",signature:{arguments:[{name:"props",type:{name:"signature",type:"object",raw:"{ route: Route }",signature:{properties:[{key:"route",value:{name:"signature",type:"object",raw:"{\n  key: string;\n  title?: string;\n  icon?: IconSource;\n  badge?: string | number | boolean;\n  color?: string;\n  accessibilityLabel?: string;\n  testID?: string;\n}",signature:{properties:[{key:"key",value:{name:"string",required:!0}},{key:"title",value:{name:"string",required:!1}},{key:"icon",value:{name:"IconSource",required:!1}},{key:"badge",value:{name:"union",raw:"string | number | boolean",elements:[{name:"string"},{name:"number"},{name:"boolean"}],required:!1}},{key:"color",value:{name:"string",required:!1}},{key:"accessibilityLabel",value:{name:"string",required:!1}},{key:"testID",value:{name:"string",required:!1}}]},required:!0}}]}}}],return:{name:"union",raw:"string | undefined",elements:[{name:"string"},{name:"undefined"}]}}},description:"Get accessibility label for the tab button. This is read by the screen reader when the user taps the tab.\nUses `route.accessibilityLabel` by default."},getTestID:{required:!1,tsType:{name:"signature",type:"function",raw:"(props: { route: Route }) => string | undefined",signature:{arguments:[{name:"props",type:{name:"signature",type:"object",raw:"{ route: Route }",signature:{properties:[{key:"route",value:{name:"signature",type:"object",raw:"{\n  key: string;\n  title?: string;\n  icon?: IconSource;\n  badge?: string | number | boolean;\n  color?: string;\n  accessibilityLabel?: string;\n  testID?: string;\n}",signature:{properties:[{key:"key",value:{name:"string",required:!0}},{key:"title",value:{name:"string",required:!1}},{key:"icon",value:{name:"IconSource",required:!1}},{key:"badge",value:{name:"union",raw:"string | number | boolean",elements:[{name:"string"},{name:"number"},{name:"boolean"}],required:!1}},{key:"color",value:{name:"string",required:!1}},{key:"accessibilityLabel",value:{name:"string",required:!1}},{key:"testID",value:{name:"string",required:!1}}]},required:!0}}]}}}],return:{name:"union",raw:"string | undefined",elements:[{name:"string"},{name:"undefined"}]}}},description:"Get the id to locate this tab button in tests, uses `route.testID` by default."},getBadge:{required:!1,tsType:{name:"signature",type:"function",raw:"(props: { route: Route }) => boolean | number | string | undefined",signature:{arguments:[{name:"props",type:{name:"signature",type:"object",raw:"{ route: Route }",signature:{properties:[{key:"route",value:{name:"signature",type:"object",raw:"{\n  key: string;\n  title?: string;\n  icon?: IconSource;\n  badge?: string | number | boolean;\n  color?: string;\n  accessibilityLabel?: string;\n  testID?: string;\n}",signature:{properties:[{key:"key",value:{name:"string",required:!0}},{key:"title",value:{name:"string",required:!1}},{key:"icon",value:{name:"IconSource",required:!1}},{key:"badge",value:{name:"union",raw:"string | number | boolean",elements:[{name:"string"},{name:"number"},{name:"boolean"}],required:!1}},{key:"color",value:{name:"string",required:!1}},{key:"accessibilityLabel",value:{name:"string",required:!1}},{key:"testID",value:{name:"string",required:!1}}]},required:!0}}]}}}],return:{name:"union",raw:"boolean | number | string | undefined",elements:[{name:"boolean"},{name:"number"},{name:"string"},{name:"undefined"}]}}},description:"Get badge for the tab, uses `route.badge` by default."},getColor:{required:!1,tsType:{name:"signature",type:"function",raw:"(props: { route: Route }) => string | undefined",signature:{arguments:[{name:"props",type:{name:"signature",type:"object",raw:"{ route: Route }",signature:{properties:[{key:"route",value:{name:"signature",type:"object",raw:"{\n  key: string;\n  title?: string;\n  icon?: IconSource;\n  badge?: string | number | boolean;\n  color?: string;\n  accessibilityLabel?: string;\n  testID?: string;\n}",signature:{properties:[{key:"key",value:{name:"string",required:!0}},{key:"title",value:{name:"string",required:!1}},{key:"icon",value:{name:"IconSource",required:!1}},{key:"badge",value:{name:"union",raw:"string | number | boolean",elements:[{name:"string"},{name:"number"},{name:"boolean"}],required:!1}},{key:"color",value:{name:"string",required:!1}},{key:"accessibilityLabel",value:{name:"string",required:!1}},{key:"testID",value:{name:"string",required:!1}}]},required:!0}}]}}}],return:{name:"union",raw:"string | undefined",elements:[{name:"string"},{name:"undefined"}]}}},description:"Get color for the tab, uses `route.color` by default."},onTabPress:{required:!1,tsType:{name:"signature",type:"function",raw:"(props: { route: Route } & TabPressEvent) => void",signature:{arguments:[{name:"props",type:{name:"intersection",raw:"{ route: Route } & TabPressEvent",elements:[{name:"signature",type:"object",raw:"{ route: Route }",signature:{properties:[{key:"route",value:{name:"signature",type:"object",raw:"{\n  key: string;\n  title?: string;\n  icon?: IconSource;\n  badge?: string | number | boolean;\n  color?: string;\n  accessibilityLabel?: string;\n  testID?: string;\n}",signature:{properties:[{key:"key",value:{name:"string",required:!0}},{key:"title",value:{name:"string",required:!1}},{key:"icon",value:{name:"IconSource",required:!1}},{key:"badge",value:{name:"union",raw:"string | number | boolean",elements:[{name:"string"},{name:"number"},{name:"boolean"}],required:!1}},{key:"color",value:{name:"string",required:!1}},{key:"accessibilityLabel",value:{name:"string",required:!1}},{key:"testID",value:{name:"string",required:!1}}]},required:!0}}]}},{name:"signature",type:"object",raw:"{\n  defaultPrevented: boolean;\n  preventDefault(): void;\n}",signature:{properties:[{key:"defaultPrevented",value:{name:"boolean",required:!0}},{key:"preventDefault",value:{name:"void",required:!0}}]}}]}}],return:{name:"void"}}},description:"Function to execute on tab press. It receives the route for the pressed tab, useful for things like scroll to top."},activeColor:{required:!1,tsType:{name:"string"},description:"Custom color for icon and label in the active tab."},inactiveColor:{required:!1,tsType:{name:"string"},description:"Custom color for icon and label in the inactive tab."},sceneAnimationEnabled:{required:!1,tsType:{name:"boolean"},description:"Whether animation is enabled for scenes transitions in `shifting` mode.\nBy default, the scenes cross-fade during tab change when `shifting` is enabled.\nSpecify `sceneAnimationEnabled` as `false` to disable the animation."},keyboardHidesNavigationBar:{required:!1,tsType:{name:"boolean"},description:"Whether the bottom navigation bar is hidden when keyboard is shown.\nOn Android, this works best when [`windowSoftInputMode`](https://developer.android.com/guide/topics/manifest/activity-element#wsoft) is set to `adjustResize`.",defaultValue:{value:"true",computed:!1}},barStyle:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:"Style for the bottom navigation bar.\nYou can set a bottom padding here if you have a translucent navigation bar on Android:\n\n```js\nbarStyle={{ paddingBottom: 48 }}\n```"},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/BottomNavigation.tsx"]},{filepath:"../src/components/Button.tsx",title:"Button",description:'A button is component that the user can press to trigger an action.\n\n<div class="screenshots">\n  <figure>\n    <img src="screenshots/button-1.png" />\n    <figcaption>Text button</figcaption>\n  </figure>\n  <figure>\n    <img src="screenshots/button-2.png" />\n    <figcaption>Outlined button</figcaption>\n  </figure>\n  <figure>\n    <img src="screenshots/button-3.png" />\n    <figcaption>Contained button</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Button } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <Button icon="camera" mode="contained" onPress={() => console.log(\'Pressed\')}>\n    Press me\n  </Button>\n);\n\nexport default MyComponent;\n```',link:"button",data:{description:'A button is component that the user can press to trigger an action.\n\n<div class="screenshots">\n  <figure>\n    <img src="screenshots/button-1.png" />\n    <figcaption>Text button</figcaption>\n  </figure>\n  <figure>\n    <img src="screenshots/button-2.png" />\n    <figcaption>Outlined button</figcaption>\n  </figure>\n  <figure>\n    <img src="screenshots/button-3.png" />\n    <figcaption>Contained button</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Button } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <Button icon="camera" mode="contained" onPress={() => console.log(\'Pressed\')}>\n    Press me\n  </Button>\n);\n\nexport default MyComponent;\n```',displayName:"Button",methods:[],statics:[],props:{mode:{required:!1,tsType:{name:"union",raw:"'text' | 'outlined' | 'contained'",elements:[{name:"literal",value:"'text'"},{name:"literal",value:"'outlined'"},{name:"literal",value:"'contained'"}]},description:"Mode of the button. You can change the mode to adjust the styling to give it desired emphasis.\n- `text` - flat button without background or outline (low emphasis)\n- `outlined` - button with an outline (medium emphasis)\n- `contained` - button with a background color and elevation shadow (high emphasis)",defaultValue:{value:"'text'",computed:!1}},dark:{required:!1,tsType:{name:"boolean"},description:"Whether the color is a dark color. A dark button will render light text and vice-versa. Only applicable for `contained` mode."},compact:{required:!1,tsType:{name:"boolean"},description:"Use a compact look, useful for `text` buttons in a row."},color:{required:!1,tsType:{name:"string"},description:"Custom text color for flat button, or background color for contained button."},loading:{required:!1,tsType:{name:"boolean"},description:"Whether to show a loading indicator."},icon:{required:!1,tsType:{name:"IconSource"},description:"Icon to display for the `Button`."},disabled:{required:!1,tsType:{name:"boolean"},description:"Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch."},children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Label text of the button."},uppercase:{required:!1,tsType:{name:"boolean"},description:"Make the label text uppercased. Note that this won't work if you pass React elements as children.",defaultValue:{value:"true",computed:!1}},accessibilityLabel:{required:!1,tsType:{name:"string"},description:"Accessibility label for the button. This is read by the screen reader when the user taps the button."},onPress:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Function to execute on press."},onLongPress:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Function to execute on long ress."},contentStyle:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:"Style of button's inner content.\nUse this prop to apply custom height and width."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""},labelStyle:{required:!1,tsType:{name:"StyleProp",elements:[{name:"TextStyle"}],raw:"StyleProp<TextStyle>"},description:"Style for the button text."},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"},testID:{required:!1,tsType:{name:"string"},description:"testID to be used on tests."}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Button.tsx"]},{filepath:"../src/components/Card/Card.tsx",title:"Card",description:'A card is a sheet of material that serves as an entry point to more detailed information.\n\n<div class="screenshots">\n  <img class="medium" src="screenshots/card-1.png" />\n  <img class="medium" src="screenshots/card-2.png" />\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Avatar, Button, Card, Title, Paragraph } from \'react-native-paper\';\n\nconst LeftContent = props => <Avatar.Icon {...props} icon="folder" />\n\nconst MyComponent = () => (\n  <Card>\n    <Card.Title title="Card Title" subtitle="Card Subtitle" left={LeftContent} />\n    <Card.Content>\n      <Title>Card title</Title>\n      <Paragraph>Card content</Paragraph>\n    </Card.Content>\n    <Card.Cover source={{ uri: \'https://picsum.photos/700\' }} />\n    <Card.Actions>\n      <Button>Cancel</Button>\n      <Button>Ok</Button>\n    </Card.Actions>\n  </Card>\n);\n\nexport default MyComponent;\n```',link:"card",data:{description:'A card is a sheet of material that serves as an entry point to more detailed information.\n\n<div class="screenshots">\n  <img class="medium" src="screenshots/card-1.png" />\n  <img class="medium" src="screenshots/card-2.png" />\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Avatar, Button, Card, Title, Paragraph } from \'react-native-paper\';\n\nconst LeftContent = props => <Avatar.Icon {...props} icon="folder" />\n\nconst MyComponent = () => (\n  <Card>\n    <Card.Title title="Card Title" subtitle="Card Subtitle" left={LeftContent} />\n    <Card.Content>\n      <Title>Card title</Title>\n      <Paragraph>Card content</Paragraph>\n    </Card.Content>\n    <Card.Cover source={{ uri: \'https://picsum.photos/700\' }} />\n    <Card.Actions>\n      <Button>Cancel</Button>\n      <Button>Ok</Button>\n    </Card.Actions>\n  </Card>\n);\n\nexport default MyComponent;\n```',displayName:"Card",methods:[],statics:[{name:"Content",description:null,docblock:null,type:{name:"static"},link:"card-content.html"},{name:"Actions",description:null,docblock:null,type:{name:"static"},link:"card-actions.html"},{name:"Cover",description:null,docblock:null,type:{name:"static"},link:"card-cover.html"},{name:"Title",description:null,docblock:null,type:{name:"static"},link:"card-title.html"}],props:{elevation:{required:!1,tsType:{name:"number"},description:"Resting elevation of the card which controls the drop shadow.",defaultValue:{value:"1",computed:!1}},onLongPress:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Function to execute on long press."},onPress:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Function to execute on press."},children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Content of the `Card`."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"},testID:{required:!1,tsType:{name:"string"},description:"Pass down testID from card props to touchable"},accessible:{required:!1,tsType:{name:"boolean"},description:"Pass down accessible from card props to touchable"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Card/Card.tsx"]},{filepath:"../src/components/Card/CardActions.tsx",title:"Card.Actions",description:'A component to show a list of actions inside a Card.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/card-actions.png" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Card, Button } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <Card>\n    <Card.Actions>\n      <Button>Cancel</Button>\n      <Button>Ok</Button>\n    </Card.Actions>\n  </Card>\n);\n\nexport default MyComponent;\n```',link:"card-actions",data:{description:'A component to show a list of actions inside a Card.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/card-actions.png" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Card, Button } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <Card>\n    <Card.Actions>\n      <Button>Cancel</Button>\n      <Button>Ok</Button>\n    </Card.Actions>\n  </Card>\n);\n\nexport default MyComponent;\n```',displayName:"Card.Actions",methods:[],statics:[],props:{children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Items inside the `CardActions`."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Card/CardActions.tsx"],group:"Card"},{filepath:"../src/components/Card/CardContent.tsx",title:"Card.Content",description:'A component to show content inside a Card.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/card-content-example.png" />\n  </figure>\n</div>\n\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Card, Title, Paragraph } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <Card>\n    <Card.Content>\n      <Title>Card title</Title>\n      <Paragraph>Card content</Paragraph>\n    </Card.Content>\n  </Card>\n);\n\nexport default MyComponent;\n```',link:"card-content",data:{description:'A component to show content inside a Card.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/card-content-example.png" />\n  </figure>\n</div>\n\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Card, Title, Paragraph } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <Card>\n    <Card.Content>\n      <Title>Card title</Title>\n      <Paragraph>Card content</Paragraph>\n    </Card.Content>\n  </Card>\n);\n\nexport default MyComponent;\n```',displayName:"Card.Content",methods:[],statics:[],props:{children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Items inside the `Card.Content`."},index:{required:!1,tsType:{name:"number"},description:"@internal"},total:{required:!1,tsType:{name:"number"},description:"@internal"},siblings:{required:!1,tsType:{name:"Array",elements:[{name:"string"}],raw:"Array<string>"},description:"@internal"},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Card/CardContent.tsx"],group:"Card"},{filepath:"../src/components/Card/CardCover.tsx",title:"Card.Cover",description:"A component to show a cover image inside a Card.\n\n<div class=\"screenshots\">\n  <figure>\n    <img class=\"medium\" src=\"screenshots/card-cover.png\" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Card } from 'react-native-paper';\n\nconst MyComponent = () => (\n  <Card>\n    <Card.Cover source={{ uri: 'https://picsum.photos/700' }} />\n  </Card>\n);\n\nexport default MyComponent;\n```\n\n@extends Image props https://facebook.github.io/react-native/docs/image.html#props",link:"card-cover",data:{description:"A component to show a cover image inside a Card.\n\n<div class=\"screenshots\">\n  <figure>\n    <img class=\"medium\" src=\"screenshots/card-cover.png\" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Card } from 'react-native-paper';\n\nconst MyComponent = () => (\n  <Card>\n    <Card.Cover source={{ uri: 'https://picsum.photos/700' }} />\n  </Card>\n);\n\nexport default MyComponent;\n```\n\n@extends Image props https://facebook.github.io/react-native/docs/image.html#props",displayName:"Card.Cover",methods:[],statics:[],props:{index:{required:!1,tsType:{name:"number"},description:"@internal"},total:{required:!1,tsType:{name:"number"},description:"@internal"},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Card/CardCover.tsx"],group:"Card"},{filepath:"../src/components/Card/CardTitle.tsx",title:"Card.Title",description:'A component to show a title, subtitle and an avatar inside a Card.\n\n<div class="screenshots">\n  <img class="medium" src="screenshots/card-title-1.png" />\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Avatar, Card, IconButton } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <Card.Title\n    title="Card Title"\n    subtitle="Card Subtitle"\n    left={(props) => <Avatar.Icon {...props} icon="folder" />}\n    right={(props) => <IconButton {...props} icon="more-vert" onPress={() => {}} />}\n  />\n);\n\nexport default MyComponent;\n```',link:"card-title",data:{description:'A component to show a title, subtitle and an avatar inside a Card.\n\n<div class="screenshots">\n  <img class="medium" src="screenshots/card-title-1.png" />\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Avatar, Card, IconButton } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <Card.Title\n    title="Card Title"\n    subtitle="Card Subtitle"\n    left={(props) => <Avatar.Icon {...props} icon="folder" />}\n    right={(props) => <IconButton {...props} icon="more-vert" onPress={() => {}} />}\n  />\n);\n\nexport default MyComponent;\n```',displayName:"Card.Title",methods:[],statics:[],props:{title:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Text for the title. Note that this will only accept a string or `<Text>`-based node."},titleStyle:{required:!1,tsType:{name:"StyleProp",elements:[{name:"TextStyle"}],raw:"StyleProp<TextStyle>"},description:"Style for the title."},subtitle:{required:!1,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Text for the subtitle. Note that this will only accept a string or `<Text>`-based node."},subtitleStyle:{required:!1,tsType:{name:"StyleProp",elements:[{name:"TextStyle"}],raw:"StyleProp<TextStyle>"},description:"Style for the subtitle."},subtitleNumberOfLines:{required:!1,tsType:{name:"number"},description:"Number of line for the subtitle.",defaultValue:{value:"1",computed:!1}},left:{required:!1,tsType:{name:"signature",type:"function",raw:"(props: { size: number }) => React.ReactNode",signature:{arguments:[{name:"props",type:{name:"signature",type:"object",raw:"{ size: number }",signature:{properties:[{key:"size",value:{name:"number",required:!0}}]}}}],return:{name:"ReactReactNode",raw:"React.ReactNode"}}},description:"Callback which returns a React element to display on the left side."},leftStyle:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:"Style for the left element wrapper."},right:{required:!1,tsType:{name:"signature",type:"function",raw:"(props: { size: number }) => React.ReactNode",signature:{arguments:[{name:"props",type:{name:"signature",type:"object",raw:"{ size: number }",signature:{properties:[{key:"size",value:{name:"number",required:!0}}]}}}],return:{name:"ReactReactNode",raw:"React.ReactNode"}}},description:"Callback which returns a React element to display on the right side."},rightStyle:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:"Style for the right element wrapper."},index:{required:!1,tsType:{name:"number"},description:"@internal"},total:{required:!1,tsType:{name:"number"},description:"@internal"},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Card/CardTitle.tsx"],group:"Card"},{filepath:"../src/components/Checkbox/Checkbox.tsx",title:"Checkbox",description:'Checkboxes allow the selection of multiple options from a set.\n\n<div class="screenshots">\n  <figure>\n    <img src="screenshots/checkbox-enabled.android.png" />\n    <figcaption>Android (enabled)</figcaption>\n  </figure>\n  <figure>\n    <img src="screenshots/checkbox-disabled.android.png" />\n    <figcaption>Android (disabled)</figcaption>\n  </figure>\n  <figure>\n    <img src="screenshots/checkbox-enabled.ios.png" />\n    <figcaption>iOS (enabled)</figcaption>\n  </figure>\n  <figure>\n    <img src="screenshots/checkbox-disabled.ios.png" />\n    <figcaption>iOS (disabled)</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Checkbox } from \'react-native-paper\';\n\nconst MyComponent = () => {\n  const [checked, setChecked] = React.useState(false);\n\n  return (\n    <Checkbox\n      status={checked ? \'checked\' : \'unchecked\'}\n      onPress={() => {\n        setChecked(!checked);\n      }}\n    />\n  );\n};\n\nexport default MyComponent;\n```',link:"checkbox",data:{description:'Checkboxes allow the selection of multiple options from a set.\n\n<div class="screenshots">\n  <figure>\n    <img src="screenshots/checkbox-enabled.android.png" />\n    <figcaption>Android (enabled)</figcaption>\n  </figure>\n  <figure>\n    <img src="screenshots/checkbox-disabled.android.png" />\n    <figcaption>Android (disabled)</figcaption>\n  </figure>\n  <figure>\n    <img src="screenshots/checkbox-enabled.ios.png" />\n    <figcaption>iOS (enabled)</figcaption>\n  </figure>\n  <figure>\n    <img src="screenshots/checkbox-disabled.ios.png" />\n    <figcaption>iOS (disabled)</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Checkbox } from \'react-native-paper\';\n\nconst MyComponent = () => {\n  const [checked, setChecked] = React.useState(false);\n\n  return (\n    <Checkbox\n      status={checked ? \'checked\' : \'unchecked\'}\n      onPress={() => {\n        setChecked(!checked);\n      }}\n    />\n  );\n};\n\nexport default MyComponent;\n```',displayName:"Checkbox",methods:[],statics:[{name:"Item",description:null,docblock:null,type:{name:"static"},link:"checkbox-item.html"},{name:"Android",description:null,docblock:null,type:{name:"static"},link:"checkbox-android.html"},{name:"IOS",description:null,docblock:null,type:{name:"static"},link:"checkbox-ios.html"}],props:{status:{required:!0,tsType:{name:"union",raw:"'checked' | 'unchecked' | 'indeterminate'",elements:[{name:"literal",value:"'checked'"},{name:"literal",value:"'unchecked'"},{name:"literal",value:"'indeterminate'"}]},description:"Status of checkbox."},disabled:{required:!1,tsType:{name:"boolean"},description:"Whether checkbox is disabled."},onPress:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Function to execute on press."},uncheckedColor:{required:!1,tsType:{name:"string"},description:"Custom color for unchecked checkbox."},color:{required:!1,tsType:{name:"string"},description:"Custom color for checkbox."},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Checkbox/Checkbox.tsx"]},{filepath:"../src/components/Checkbox/CheckboxAndroid.tsx",title:"Checkbox.Android",description:'Checkboxes allow the selection of multiple options from a set.\nThis component follows platform guidelines for Android.\n\n<div class="screenshots">\n  <figure>\n    <img src="screenshots/checkbox-enabled.android.png" />\n    <figcaption>Enabled</figcaption>\n  </figure>\n  <figure>\n    <img src="screenshots/checkbox-disabled.android.png" />\n    <figcaption>Disabled</figcaption>\n  </figure>\n</div>',link:"checkbox-android",data:{description:'Checkboxes allow the selection of multiple options from a set.\nThis component follows platform guidelines for Android.\n\n<div class="screenshots">\n  <figure>\n    <img src="screenshots/checkbox-enabled.android.png" />\n    <figcaption>Enabled</figcaption>\n  </figure>\n  <figure>\n    <img src="screenshots/checkbox-disabled.android.png" />\n    <figcaption>Disabled</figcaption>\n  </figure>\n</div>',displayName:"Checkbox.Android",methods:[],statics:[],props:{status:{required:!0,tsType:{name:"union",raw:"'checked' | 'unchecked' | 'indeterminate'",elements:[{name:"literal",value:"'checked'"},{name:"literal",value:"'unchecked'"},{name:"literal",value:"'indeterminate'"}]},description:"Status of checkbox."},disabled:{required:!1,tsType:{name:"boolean"},description:"Whether checkbox is disabled."},onPress:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Function to execute on press."},uncheckedColor:{required:!1,tsType:{name:"string"},description:"Custom color for unchecked checkbox."},color:{required:!1,tsType:{name:"string"},description:"Custom color for checkbox."},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Checkbox/CheckboxAndroid.tsx"],group:"Checkbox"},{filepath:"../src/components/Checkbox/CheckboxIOS.tsx",title:"Checkbox.IOS",description:'Checkboxes allow the selection of multiple options from a set.\nThis component follows platform guidelines for iOS.\n\n<div class="screenshots">\n  <figure>\n    <img src="screenshots/checkbox-enabled.ios.png" />\n    <figcaption>Enabled</figcaption>\n  </figure>\n  <figure>\n    <img src="screenshots/checkbox-disabled.ios.png" />\n    <figcaption>Disabled</figcaption>\n  </figure>\n</div>',link:"checkbox-ios",data:{description:'Checkboxes allow the selection of multiple options from a set.\nThis component follows platform guidelines for iOS.\n\n<div class="screenshots">\n  <figure>\n    <img src="screenshots/checkbox-enabled.ios.png" />\n    <figcaption>Enabled</figcaption>\n  </figure>\n  <figure>\n    <img src="screenshots/checkbox-disabled.ios.png" />\n    <figcaption>Disabled</figcaption>\n  </figure>\n</div>',displayName:"Checkbox.IOS",methods:[],statics:[],props:{status:{required:!0,tsType:{name:"union",raw:"'checked' | 'unchecked' | 'indeterminate'",elements:[{name:"literal",value:"'checked'"},{name:"literal",value:"'unchecked'"},{name:"literal",value:"'indeterminate'"}]},description:"Status of checkbox."},disabled:{required:!1,tsType:{name:"boolean"},description:"Whether checkbox is disabled."},onPress:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Function to execute on press."},color:{required:!1,tsType:{name:"string"},description:"Custom color for checkbox."},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Checkbox/CheckboxIOS.tsx"],group:"Checkbox"},{filepath:"../src/components/Checkbox/CheckboxItem.tsx",title:"Checkbox.Item",description:"Checkbox.Item allows you to press the whole row (item) instead of only the Checkbox.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Checkbox } from 'react-native-paper';\n\nconst MyComponent = () => (\n  <View>\n    <Checkbox.Item label=\"Item\" status=\"checked\" />\n  </View>\n);\n\nexport default MyComponent;\n```",link:"checkbox-item",data:{description:"Checkbox.Item allows you to press the whole row (item) instead of only the Checkbox.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Checkbox } from 'react-native-paper';\n\nconst MyComponent = () => (\n  <View>\n    <Checkbox.Item label=\"Item\" status=\"checked\" />\n  </View>\n);\n\nexport default MyComponent;\n```",displayName:"Checkbox.Item",methods:[],statics:[],props:{status:{required:!0,tsType:{name:"union",raw:"'checked' | 'unchecked' | 'indeterminate'",elements:[{name:"literal",value:"'checked'"},{name:"literal",value:"'unchecked'"},{name:"literal",value:"'indeterminate'"}]},description:"Status of checkbox."},disabled:{required:!1,tsType:{name:"boolean"},description:"Whether checkbox is disabled."},label:{required:!0,tsType:{name:"string"},description:"Label to be displayed on the item."},onPress:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Function to execute on press."},uncheckedColor:{required:!1,tsType:{name:"string"},description:"Custom color for unchecked checkbox."},color:{required:!1,tsType:{name:"string"},description:"Custom color for checkbox."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:"Additional styles for container View."},labelStyle:{required:!1,tsType:{name:"StyleProp",elements:[{name:"TextStyle"}],raw:"StyleProp<TextStyle>"},description:"Style that is passed to Label element."},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Checkbox/CheckboxItem.tsx"],group:"Checkbox"},{filepath:"../src/components/Chip.tsx",title:"Chip",description:'Chips can be used to display entities in small blocks.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/chip-1.png" />\n    <figcaption>Flat chip</figcaption>\n  </figure>\n  <figure>\n    <img class="medium" src="screenshots/chip-2.png" />\n    <figcaption>Outlined chip</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Chip } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <Chip icon="information" onPress={() => console.log(\'Pressed\')}>Example Chip</Chip>\n);\n\nexport default MyComponent;\n```',link:"chip",data:{description:'Chips can be used to display entities in small blocks.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/chip-1.png" />\n    <figcaption>Flat chip</figcaption>\n  </figure>\n  <figure>\n    <img class="medium" src="screenshots/chip-2.png" />\n    <figcaption>Outlined chip</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Chip } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <Chip icon="information" onPress={() => console.log(\'Pressed\')}>Example Chip</Chip>\n);\n\nexport default MyComponent;\n```',displayName:"Chip",methods:[],statics:[],props:{mode:{required:!1,tsType:{name:"union",raw:"'flat' | 'outlined'",elements:[{name:"literal",value:"'flat'"},{name:"literal",value:"'outlined'"}]},description:"Mode of the chip.\n- `flat` - flat chip without outline.\n- `outlined` - chip with an outline.",defaultValue:{value:"'flat'",computed:!1}},children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Text content of the `Chip`."},icon:{required:!1,tsType:{name:"IconSource"},description:"Icon to display for the `Chip`. Both icon and avatar cannot be specified."},avatar:{required:!1,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Avatar to display for the `Chip`. Both icon and avatar cannot be specified."},selected:{required:!1,tsType:{name:"boolean"},description:"Whether chip is selected.",defaultValue:{value:"false",computed:!1}},selectedColor:{required:!1,tsType:{name:"string"},description:"Whether to style the chip color as selected."},disabled:{required:!1,tsType:{name:"boolean"},description:"Whether the chip is disabled. A disabled chip is greyed out and `onPress` is not called on touch.",defaultValue:{value:"false",computed:!1}},accessibilityLabel:{required:!1,tsType:{name:"string"},description:"Accessibility label for the chip. This is read by the screen reader when the user taps the chip."},onPress:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Function to execute on press."},onLongPress:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Function to execute on long press."},onClose:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Function to execute on close button press. The close button appears only when this prop is specified."},textStyle:{required:!1,tsType:{name:"any"},description:"Style of chip's text"},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"},testID:{required:!1,tsType:{name:"string"},description:"Pass down testID from chip props to touchable for Detox tests."}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Chip.tsx"]},{filepath:"../src/components/DataTable/DataTable.tsx",title:"DataTable",description:'Data tables allow displaying sets of data.\n\n<div class="screenshots">\n  <figure>\n    <img src="screenshots/data-table.png" />\n    <figcaption>Data table</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { DataTable } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <DataTable>\n    <DataTable.Header>\n      <DataTable.Title>Dessert</DataTable.Title>\n      <DataTable.Title numeric>Calories</DataTable.Title>\n      <DataTable.Title numeric>Fat</DataTable.Title>\n    </DataTable.Header>\n\n    <DataTable.Row>\n      <DataTable.Cell>Frozen yogurt</DataTable.Cell>\n      <DataTable.Cell numeric>159</DataTable.Cell>\n      <DataTable.Cell numeric>6.0</DataTable.Cell>\n    </DataTable.Row>\n\n    <DataTable.Row>\n      <DataTable.Cell>Ice cream sandwich</DataTable.Cell>\n      <DataTable.Cell numeric>237</DataTable.Cell>\n      <DataTable.Cell numeric>8.0</DataTable.Cell>\n    </DataTable.Row>\n\n    <DataTable.Pagination\n      page={1}\n      numberOfPages={3}\n      onPageChange={page => {\n        console.log(page);\n      }}\n      label="1-2 of 6"\n    />\n  </DataTable>\n);\n\nexport default MyComponent;\n```',link:"data-table",data:{description:'Data tables allow displaying sets of data.\n\n<div class="screenshots">\n  <figure>\n    <img src="screenshots/data-table.png" />\n    <figcaption>Data table</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { DataTable } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <DataTable>\n    <DataTable.Header>\n      <DataTable.Title>Dessert</DataTable.Title>\n      <DataTable.Title numeric>Calories</DataTable.Title>\n      <DataTable.Title numeric>Fat</DataTable.Title>\n    </DataTable.Header>\n\n    <DataTable.Row>\n      <DataTable.Cell>Frozen yogurt</DataTable.Cell>\n      <DataTable.Cell numeric>159</DataTable.Cell>\n      <DataTable.Cell numeric>6.0</DataTable.Cell>\n    </DataTable.Row>\n\n    <DataTable.Row>\n      <DataTable.Cell>Ice cream sandwich</DataTable.Cell>\n      <DataTable.Cell numeric>237</DataTable.Cell>\n      <DataTable.Cell numeric>8.0</DataTable.Cell>\n    </DataTable.Row>\n\n    <DataTable.Pagination\n      page={1}\n      numberOfPages={3}\n      onPageChange={page => {\n        console.log(page);\n      }}\n      label="1-2 of 6"\n    />\n  </DataTable>\n);\n\nexport default MyComponent;\n```',displayName:"DataTable",methods:[],statics:[{name:"Header",description:null,docblock:null,type:{name:"static"},link:"data-table-header.html"},{name:"Title",description:null,docblock:null,type:{name:"static"},link:"data-table-title.html"},{name:"Row",description:null,docblock:null,type:{name:"static"},link:"data-table-row.html"},{name:"Cell",description:null,docblock:null,type:{name:"static"},link:"data-table-cell.html"},{name:"Pagination",description:null,docblock:null,type:{name:"static"},link:"data-table-pagination.html"}],props:{children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Content of the `DataTable`."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/DataTable/DataTable.tsx"]},{filepath:"../src/components/DataTable/DataTableCell.tsx",title:"DataTable.Cell",description:'A component to show a single cell inside of a table.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/data-table-row-cell.png" />\n  </figure>\n</div>\n\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { DataTable } from \'react-native-paper\';\n\nconst MyComponent = () => (\n     <DataTable.Row>\n       <DataTable.Cell numeric>1</DataTable.Cell>\n       <DataTable.Cell numeric>2</DataTable.Cell>\n       <DataTable.Cell numeric>3</DataTable.Cell>\n       <DataTable.Cell numeric>4</DataTable.Cell>\n     </DataTable.Row>\n);\n\nexport default MyComponent;\n```',link:"data-table-cell",data:{description:'A component to show a single cell inside of a table.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/data-table-row-cell.png" />\n  </figure>\n</div>\n\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { DataTable } from \'react-native-paper\';\n\nconst MyComponent = () => (\n     <DataTable.Row>\n       <DataTable.Cell numeric>1</DataTable.Cell>\n       <DataTable.Cell numeric>2</DataTable.Cell>\n       <DataTable.Cell numeric>3</DataTable.Cell>\n       <DataTable.Cell numeric>4</DataTable.Cell>\n     </DataTable.Row>\n);\n\nexport default MyComponent;\n```',displayName:"DataTable.Cell",methods:[],statics:[],props:{children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Content of the `DataTableCell`."},numeric:{required:!1,tsType:{name:"boolean"},description:"Align the text to the right. Generally monetary or number fields are aligned to right."},onPress:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Function to execute on press."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/DataTable/DataTableCell.tsx"],group:"DataTable"},{filepath:"../src/components/DataTable/DataTableHeader.tsx",title:"DataTable.Header",description:"A component to display title in table header.\n\n<div class=\"screenshots\">\n  <figure>\n    <img class=\"medium\" src=\"screenshots/data-table-header.png\" />\n  </figure>\n</div>\n\n\n## Usage\n```js\nimport * as React from 'react';\nimport { DataTable } from 'react-native-paper';\n\nconst MyComponent = () => (\n      <DataTable>\n        <DataTable.Header>\n          <DataTable.Title\n            sortDirection='descending'\n          >\n            Dessert\n          </DataTable.Title>\n          <DataTable.Title numeric>Calories</DataTable.Title>\n          <DataTable.Title numeric>Fat (g)</DataTable.Title>\n        </DataTable.Header>\n      </DataTable>\n);\n\nexport default MyComponent;\n```",link:"data-table-header",data:{description:"A component to display title in table header.\n\n<div class=\"screenshots\">\n  <figure>\n    <img class=\"medium\" src=\"screenshots/data-table-header.png\" />\n  </figure>\n</div>\n\n\n## Usage\n```js\nimport * as React from 'react';\nimport { DataTable } from 'react-native-paper';\n\nconst MyComponent = () => (\n      <DataTable>\n        <DataTable.Header>\n          <DataTable.Title\n            sortDirection='descending'\n          >\n            Dessert\n          </DataTable.Title>\n          <DataTable.Title numeric>Calories</DataTable.Title>\n          <DataTable.Title numeric>Fat (g)</DataTable.Title>\n        </DataTable.Header>\n      </DataTable>\n);\n\nexport default MyComponent;\n```",displayName:"DataTable.Header",methods:[],statics:[],props:{children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Content of the `DataTableHeader`."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/DataTable/DataTableHeader.tsx"],group:"DataTable"},{filepath:"../src/components/DataTable/DataTablePagination.tsx",title:"DataTable.Pagination",description:"A component to show pagination for data table.\n\n<div class=\"screenshots\">\n  <figure>\n    <img class=\"medium\" src=\"screenshots/data-table-pagination.png\" />\n  </figure>\n</div>\n\n\n## Usage\n```js\nimport * as React from 'react';\nimport { DataTable } from 'react-native-paper';\n\nconst itemsPerPage = 2;\n\nconst items = [\n  {\n    key: 1,\n    name: 'Page 1',\n  },\n  {\n    key: 2,\n    name: 'Page 2',\n  },\n  {\n    key: 3,\n    name: 'Page 3',\n  },\n];\n\nconst MyComponent = () => {\n  const [page, setPage] = React.useState(0);\n  const from = page * itemsPerPage;\n  const to = (page + 1) * itemsPerPage;\n\n  return (\n    <DataTable>\n      <DataTable.Pagination\n        page={page}\n        numberOfPages={Math.floor(items.length / itemsPerPage)}\n        onPageChange={page => setPage(page)}\n        label={`${from + 1}-${to} of ${items.length}`}\n      />\n    </DataTable>\n  );\n};\n\nexport default MyComponent;\n```",link:"data-table-pagination",data:{description:"A component to show pagination for data table.\n\n<div class=\"screenshots\">\n  <figure>\n    <img class=\"medium\" src=\"screenshots/data-table-pagination.png\" />\n  </figure>\n</div>\n\n\n## Usage\n```js\nimport * as React from 'react';\nimport { DataTable } from 'react-native-paper';\n\nconst itemsPerPage = 2;\n\nconst items = [\n  {\n    key: 1,\n    name: 'Page 1',\n  },\n  {\n    key: 2,\n    name: 'Page 2',\n  },\n  {\n    key: 3,\n    name: 'Page 3',\n  },\n];\n\nconst MyComponent = () => {\n  const [page, setPage] = React.useState(0);\n  const from = page * itemsPerPage;\n  const to = (page + 1) * itemsPerPage;\n\n  return (\n    <DataTable>\n      <DataTable.Pagination\n        page={page}\n        numberOfPages={Math.floor(items.length / itemsPerPage)}\n        onPageChange={page => setPage(page)}\n        label={`${from + 1}-${to} of ${items.length}`}\n      />\n    </DataTable>\n  );\n};\n\nexport default MyComponent;\n```",displayName:"DataTable.Pagination",methods:[],statics:[],props:{page:{required:!0,tsType:{name:"number"},description:"The currently visible page (starting with 0)."},numberOfPages:{required:!0,tsType:{name:"number"},description:"The total number of pages."},label:{required:!1,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Label text to display"},onPageChange:{required:!0,tsType:{name:"signature",type:"function",raw:"(page: number) => void",signature:{arguments:[{name:"page",type:{name:"number"}}],return:{name:"void"}}},description:"Function to execute on page change."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/DataTable/DataTablePagination.tsx"],group:"DataTable"},{filepath:"../src/components/DataTable/DataTableRow.tsx",title:"DataTable.Row",description:'A component to show a single row inside of a table.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/data-table-row-cell.png" />\n  </figure>\n</div>\n\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { DataTable } from \'react-native-paper\';\n\nconst MyComponent = () => (\n     <DataTable.Row>\n       <DataTable.Cell numeric>1</DataTable.Cell>\n       <DataTable.Cell numeric>2</DataTable.Cell>\n       <DataTable.Cell numeric>3</DataTable.Cell>\n       <DataTable.Cell numeric>4</DataTable.Cell>\n     </DataTable.Row>\n);\n\nexport default MyComponent;\n```',link:"data-table-row",data:{description:'A component to show a single row inside of a table.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/data-table-row-cell.png" />\n  </figure>\n</div>\n\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { DataTable } from \'react-native-paper\';\n\nconst MyComponent = () => (\n     <DataTable.Row>\n       <DataTable.Cell numeric>1</DataTable.Cell>\n       <DataTable.Cell numeric>2</DataTable.Cell>\n       <DataTable.Cell numeric>3</DataTable.Cell>\n       <DataTable.Cell numeric>4</DataTable.Cell>\n     </DataTable.Row>\n);\n\nexport default MyComponent;\n```',displayName:"DataTable.Row",methods:[],statics:[],props:{children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Content of the `DataTableRow`."},onPress:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Function to execute on press."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/DataTable/DataTableRow.tsx"],group:"DataTable"},{filepath:"../src/components/DataTable/DataTableTitle.tsx",title:"DataTable.Title",description:"A component to display title in table header.\n\n<div class=\"screenshots\">\n  <figure>\n    <img class=\"medium\" src=\"screenshots/data-table-header.png\" />\n  </figure>\n</div>\n\n\n## Usage\n```js\nimport * as React from 'react';\nimport { DataTable } from 'react-native-paper';\n\nconst MyComponent = () => (\n      <DataTable>\n        <DataTable.Header>\n          <DataTable.Title\n            sortDirection='descending'\n          >\n            Dessert\n          </DataTable.Title>\n          <DataTable.Title numeric>Calories</DataTable.Title>\n          <DataTable.Title numeric>Fat (g)</DataTable.Title>\n        </DataTable.Header>\n      </DataTable>\n  </Card>\n);\n\nexport default MyComponent;\n```",link:"data-table-title",data:{description:"A component to display title in table header.\n\n<div class=\"screenshots\">\n  <figure>\n    <img class=\"medium\" src=\"screenshots/data-table-header.png\" />\n  </figure>\n</div>\n\n\n## Usage\n```js\nimport * as React from 'react';\nimport { DataTable } from 'react-native-paper';\n\nconst MyComponent = () => (\n      <DataTable>\n        <DataTable.Header>\n          <DataTable.Title\n            sortDirection='descending'\n          >\n            Dessert\n          </DataTable.Title>\n          <DataTable.Title numeric>Calories</DataTable.Title>\n          <DataTable.Title numeric>Fat (g)</DataTable.Title>\n        </DataTable.Header>\n      </DataTable>\n  </Card>\n);\n\nexport default MyComponent;\n```",displayName:"DataTable.Title",methods:[],statics:[],props:{children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Text content of the `DataTableTitle`."},numeric:{required:!1,tsType:{name:"boolean"},description:"Align the text to the right. Generally monetary or number fields are aligned to right."},sortDirection:{required:!1,tsType:{name:"union",raw:"'ascending' | 'descending'",elements:[{name:"literal",value:"'ascending'"},{name:"literal",value:"'descending'"}]},description:"Direction of sorting. An arrow indicating the direction is displayed when this is given."},numberOfLines:{required:!1,tsType:{name:"number"},description:"The number of lines to show.",defaultValue:{value:"1",computed:!1}},onPress:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Function to execute on press."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/DataTable/DataTableTitle.tsx"],group:"DataTable"},{filepath:"../src/components/Dialog/Dialog.tsx",title:"Dialog",description:'Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.\nTo render the `Dialog` above other components, you\'ll need to wrap it with the [`Portal`](portal.html) component.\n\n <div class="screenshots">\n  <img class="medium" src="screenshots/dialog-1.png" />\n  <img class="medium" src="screenshots/dialog-2.png" />\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { View } from \'react-native\';\nimport { Button, Paragraph, Dialog, Portal } from \'react-native-paper\';\n\nconst MyComponent = () => {\n  const [visible, setVisible] = React.useState(false);\n\n  const showDialog = () => setVisible(true);\n\n  const hideDialog = () => setVisible(false);\n\n  return (\n    <View>\n      <Button onPress={showDialog}>Show Dialog</Button>\n      <Portal>\n        <Dialog visible={visible} onDismiss={hideDialog}>\n          <Dialog.Title>Alert</Dialog.Title>\n          <Dialog.Content>\n            <Paragraph>This is simple dialog</Paragraph>\n          </Dialog.Content>\n          <Dialog.Actions>\n            <Button onPress={hideDialog}>Done</Button>\n          </Dialog.Actions>\n        </Dialog>\n      </Portal>\n    </View>\n  );\n};\n\nexport default MyComponent;\n```',link:"dialog",data:{description:'Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.\nTo render the `Dialog` above other components, you\'ll need to wrap it with the [`Portal`](portal.html) component.\n\n <div class="screenshots">\n  <img class="medium" src="screenshots/dialog-1.png" />\n  <img class="medium" src="screenshots/dialog-2.png" />\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { View } from \'react-native\';\nimport { Button, Paragraph, Dialog, Portal } from \'react-native-paper\';\n\nconst MyComponent = () => {\n  const [visible, setVisible] = React.useState(false);\n\n  const showDialog = () => setVisible(true);\n\n  const hideDialog = () => setVisible(false);\n\n  return (\n    <View>\n      <Button onPress={showDialog}>Show Dialog</Button>\n      <Portal>\n        <Dialog visible={visible} onDismiss={hideDialog}>\n          <Dialog.Title>Alert</Dialog.Title>\n          <Dialog.Content>\n            <Paragraph>This is simple dialog</Paragraph>\n          </Dialog.Content>\n          <Dialog.Actions>\n            <Button onPress={hideDialog}>Done</Button>\n          </Dialog.Actions>\n        </Dialog>\n      </Portal>\n    </View>\n  );\n};\n\nexport default MyComponent;\n```',displayName:"Dialog",methods:[],statics:[{name:"Content",description:null,docblock:null,type:{name:"static"},link:"dialog-content.html"},{name:"Actions",description:null,docblock:null,type:{name:"static"},link:"dialog-actions.html"},{name:"Title",description:null,docblock:null,type:{name:"static"},link:"dialog-title.html"},{name:"ScrollArea",description:null,docblock:null,type:{name:"static"},link:"dialog-scroll-area.html"}],props:{dismissable:{required:!1,tsType:{name:"boolean"},description:"Determines whether clicking outside the dialog dismiss it.",defaultValue:{value:"true",computed:!1}},onDismiss:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Callback that is called when the user dismisses the dialog."},visible:{required:!1,tsType:{name:"boolean"},description:"Determines Whether the dialog is visible.",defaultValue:{value:"false",computed:!1}},children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Content of the `Dialog`."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Dialog/Dialog.tsx"]},{filepath:"../src/components/Dialog/DialogActions.tsx",title:"Dialog.Actions",description:"A component to show a list of actions in a Dialog.\n\n<div class=\"screenshots\">\n  <figure>\n    <img class=\"medium\" src=\"screenshots/dialog-actions.png\" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Button, Dialog, Portal } from 'react-native-paper';\n\nconst MyComponent = () => {\n  const [visible, setVisible] = React.useState(false);\n\n  const hideDialog = () => setVisible(false);\n\n  return (\n    <Portal>\n      <Dialog visible={visible} onDismiss={hideDialog}>\n        <Dialog.Actions>\n          <Button onPress={() => console.log('Cancel')}>Cancel</Button>\n          <Button onPress={() => console.log('Ok')}>Ok</Button>\n        </Dialog.Actions>\n      </Dialog>\n    </Portal>\n  );\n};\n\nexport default MyComponent;\n```",link:"dialog-actions",data:{description:"A component to show a list of actions in a Dialog.\n\n<div class=\"screenshots\">\n  <figure>\n    <img class=\"medium\" src=\"screenshots/dialog-actions.png\" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Button, Dialog, Portal } from 'react-native-paper';\n\nconst MyComponent = () => {\n  const [visible, setVisible] = React.useState(false);\n\n  const hideDialog = () => setVisible(false);\n\n  return (\n    <Portal>\n      <Dialog visible={visible} onDismiss={hideDialog}>\n        <Dialog.Actions>\n          <Button onPress={() => console.log('Cancel')}>Cancel</Button>\n          <Button onPress={() => console.log('Ok')}>Ok</Button>\n        </Dialog.Actions>\n      </Dialog>\n    </Portal>\n  );\n};\n\nexport default MyComponent;\n```",displayName:"Dialog.Actions",methods:[],statics:[],props:{children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Content of the `DialogActions`."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Dialog/DialogActions.tsx"],group:"Dialog"},{filepath:"../src/components/Dialog/DialogContent.tsx",title:"Dialog.Content",description:'A component to show content in a Dialog.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/dialog-content.png" />\n  </figure>\n</div>\n\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Paragraph, Dialog, Portal } from \'react-native-paper\';\n\nconst MyComponent = () => {\n  const [visible, setVisible] = React.useState(false);\n\n  const hideDialog = () => setVisible(false);\n\n  return (\n    <Portal>\n      <Dialog visible={visible} onDismiss={hideDialog}>\n        <Dialog.Content>\n          <Paragraph>This is simple dialog</Paragraph>\n        </Dialog.Content>\n      </Dialog>\n    </Portal>\n  );\n};\n\nexport default MyComponent;\n```',link:"dialog-content",data:{description:'A component to show content in a Dialog.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/dialog-content.png" />\n  </figure>\n</div>\n\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Paragraph, Dialog, Portal } from \'react-native-paper\';\n\nconst MyComponent = () => {\n  const [visible, setVisible] = React.useState(false);\n\n  const hideDialog = () => setVisible(false);\n\n  return (\n    <Portal>\n      <Dialog visible={visible} onDismiss={hideDialog}>\n        <Dialog.Content>\n          <Paragraph>This is simple dialog</Paragraph>\n        </Dialog.Content>\n      </Dialog>\n    </Portal>\n  );\n};\n\nexport default MyComponent;\n```',displayName:"Dialog.Content",methods:[],statics:[],props:{children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Content of the `DialogContent`."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Dialog/DialogContent.tsx"],group:"Dialog"},{filepath:"../src/components/Dialog/DialogScrollArea.tsx",title:"Dialog.ScrollArea",description:"A component to show a scrollable content in a Dialog. The component only provides appropriate styling.\nFor the scrollable content you can use `ScrollView`, `FlatList` etc. depending on your requirement.\n\n<div class=\"screenshots\">\n  <figure>\n    <img class=\"medium\" src=\"screenshots/dialog-scroll-area.gif\" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ScrollView } from 'react-native';\nimport { Dialog, Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n  const [visible, setVisible] = React.useState(false);\n\n  const hideDialog = () => setVisible(false);\n\n  return (\n    <Portal>\n      <Dialog visible={visible} onDismiss={hideDialog}>\n        <Dialog.ScrollArea>\n          <ScrollView contentContainerStyle={{paddingHorizontal: 24}}>\n            <Text>This is a scrollable area</Text>\n          </ScrollView>\n        </Dialog.ScrollArea>\n      </Dialog>\n    </Portal>\n  );\n};\n\nexport default MyComponent;\n```",link:"dialog-scroll-area",data:{description:"A component to show a scrollable content in a Dialog. The component only provides appropriate styling.\nFor the scrollable content you can use `ScrollView`, `FlatList` etc. depending on your requirement.\n\n<div class=\"screenshots\">\n  <figure>\n    <img class=\"medium\" src=\"screenshots/dialog-scroll-area.gif\" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ScrollView } from 'react-native';\nimport { Dialog, Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => {\n  const [visible, setVisible] = React.useState(false);\n\n  const hideDialog = () => setVisible(false);\n\n  return (\n    <Portal>\n      <Dialog visible={visible} onDismiss={hideDialog}>\n        <Dialog.ScrollArea>\n          <ScrollView contentContainerStyle={{paddingHorizontal: 24}}>\n            <Text>This is a scrollable area</Text>\n          </ScrollView>\n        </Dialog.ScrollArea>\n      </Dialog>\n    </Portal>\n  );\n};\n\nexport default MyComponent;\n```",displayName:"Dialog.ScrollArea",methods:[],statics:[],props:{children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Content of the `DialogScrollArea`."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Dialog/DialogScrollArea.tsx"],group:"Dialog"},{filepath:"../src/components/Dialog/DialogTitle.tsx",title:"Dialog.Title",description:'A component to show a title in a Dialog.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/dialog-title.png" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Paragraph, Dialog, Portal } from \'react-native-paper\';\n\nconst MyComponent = () => {\n  const [visible, setVisible] = React.useState(false);\n\n  const hideDialog = () => setVisible(false);\n\n  return (\n    <Portal>\n      <Dialog visible={visible} onDismiss={hideDialog}>\n        <Dialog.Title>This is a title</Dialog.Title>\n        <Dialog.Content>\n          <Paragraph>This is simple dialog</Paragraph>\n        </Dialog.Content>\n      </Dialog>\n    </Portal>\n  );\n};\n\nexport default MyComponent;\n```',link:"dialog-title",data:{description:'A component to show a title in a Dialog.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/dialog-title.png" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Paragraph, Dialog, Portal } from \'react-native-paper\';\n\nconst MyComponent = () => {\n  const [visible, setVisible] = React.useState(false);\n\n  const hideDialog = () => setVisible(false);\n\n  return (\n    <Portal>\n      <Dialog visible={visible} onDismiss={hideDialog}>\n        <Dialog.Title>This is a title</Dialog.Title>\n        <Dialog.Content>\n          <Paragraph>This is simple dialog</Paragraph>\n        </Dialog.Content>\n      </Dialog>\n    </Portal>\n  );\n};\n\nexport default MyComponent;\n```',displayName:"Dialog.Title",methods:[],statics:[],props:{children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Title text for the `DialogTitle`."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"TextStyle"}],raw:"StyleProp<TextStyle>"},description:""},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Dialog/DialogTitle.tsx"],group:"Dialog"},{filepath:"../src/components/Divider.tsx",title:"Divider",description:"A divider is a thin, lightweight separator that groups content in lists and page layouts.\n\n<div class=\"screenshots\">\n <figure>\n   <img class=\"medium\" src=\"screenshots/divider.png\" />\n </figure>\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Divider, Text } from 'react-native-paper';\n\nconst MyComponent = () => (\n  <View>\n    <Text>Apple</Text>\n    <Divider />\n    <Text>Orange</Text>\n    <Divider />\n  </View>\n);\n\nexport default MyComponent;\n```",link:"divider",data:{description:"A divider is a thin, lightweight separator that groups content in lists and page layouts.\n\n<div class=\"screenshots\">\n <figure>\n   <img class=\"medium\" src=\"screenshots/divider.png\" />\n </figure>\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { Divider, Text } from 'react-native-paper';\n\nconst MyComponent = () => (\n  <View>\n    <Text>Apple</Text>\n    <Divider />\n    <Text>Orange</Text>\n    <Divider />\n  </View>\n);\n\nexport default MyComponent;\n```",displayName:"Divider",methods:[],statics:[],props:{inset:{required:!1,tsType:{name:"boolean"},description:"Whether divider has a left inset."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Divider.tsx"]},{filepath:"../src/components/Drawer/DrawerItem.tsx",title:"Drawer.Item",description:'A component used to show an action item with an icon and a label in a navigation drawer.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/drawer-item.png" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Drawer } from \'react-native-paper\';\n\nconst MyComponent = () => (\n   <Drawer.Item\n     style={{ backgroundColor: \'#64ffda\' }}\n     icon="star"\n     label="First Item"\n   />\n);\n\nexport default MyComponent;\n```',link:"drawer-item",data:{description:'A component used to show an action item with an icon and a label in a navigation drawer.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/drawer-item.png" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Drawer } from \'react-native-paper\';\n\nconst MyComponent = () => (\n   <Drawer.Item\n     style={{ backgroundColor: \'#64ffda\' }}\n     icon="star"\n     label="First Item"\n   />\n);\n\nexport default MyComponent;\n```',displayName:"Drawer.Item",methods:[],statics:[],props:{label:{required:!0,tsType:{name:"string"},description:"The label text of the item."},icon:{required:!1,tsType:{name:"IconSource"},description:"Icon to display for the `DrawerItem`."},active:{required:!1,tsType:{name:"boolean"},description:"Whether to highlight the drawer item as active."},onPress:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Function to execute on press."},accessibilityLabel:{required:!1,tsType:{name:"string"},description:"Accessibility label for the button. This is read by the screen reader when the user taps the button."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Drawer/DrawerItem.tsx"],group:"Drawer"},{filepath:"../src/components/Drawer/DrawerSection.tsx",title:"Drawer.Section",description:"A component to group content inside a navigation drawer.\n\n<div class=\"screenshots\">\n  <figure>\n    <img class=\"medium\" src=\"screenshots/drawer-section.png\" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Drawer } from 'react-native-paper';\n\nconst MyComponent = () => {\n  const [active, setActive] = React.useState('');\n\n\n  return (\n    <Drawer.Section title=\"Some title\">\n      <Drawer.Item\n        label=\"First Item\"\n        active={active === 'first'}\n        onPress={() => setActive('first')}\n      />\n      <Drawer.Item\n        label=\"Second Item\"\n        active={active === 'second'}\n        onPress={() => setActive('second')}\n      />\n    </Drawer.Section>\n  );\n};\n\nexport default MyComponent;\n```",link:"drawer-section",data:{description:"A component to group content inside a navigation drawer.\n\n<div class=\"screenshots\">\n  <figure>\n    <img class=\"medium\" src=\"screenshots/drawer-section.png\" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Drawer } from 'react-native-paper';\n\nconst MyComponent = () => {\n  const [active, setActive] = React.useState('');\n\n\n  return (\n    <Drawer.Section title=\"Some title\">\n      <Drawer.Item\n        label=\"First Item\"\n        active={active === 'first'}\n        onPress={() => setActive('first')}\n      />\n      <Drawer.Item\n        label=\"Second Item\"\n        active={active === 'second'}\n        onPress={() => setActive('second')}\n      />\n    </Drawer.Section>\n  );\n};\n\nexport default MyComponent;\n```",displayName:"Drawer.Section",methods:[],statics:[],props:{title:{required:!1,tsType:{name:"string"},description:"Title to show as the header for the section."},children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Content of the `Drawer.Section`."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Drawer/DrawerSection.tsx"],group:"Drawer"},{filepath:"../src/components/FAB/FAB.tsx",title:"FAB",description:"A floating action button represents the primary action in an application.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/fab-1.png\" />\n  <img src=\"screenshots/fab-2.png\" />\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { StyleSheet } from 'react-native';\nimport { FAB } from 'react-native-paper';\n\nconst MyComponent = () => (\n  <FAB\n    style={styles.fab}\n    small\n    icon=\"plus\"\n    onPress={() => console.log('Pressed')}\n  />\n);\n\nconst styles = StyleSheet.create({\n  fab: {\n    position: 'absolute',\n    margin: 16,\n    right: 0,\n    bottom: 0,\n  },\n})\n\nexport default MyComponent;\n```",link:"fab",data:{description:"A floating action button represents the primary action in an application.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/fab-1.png\" />\n  <img src=\"screenshots/fab-2.png\" />\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { StyleSheet } from 'react-native';\nimport { FAB } from 'react-native-paper';\n\nconst MyComponent = () => (\n  <FAB\n    style={styles.fab}\n    small\n    icon=\"plus\"\n    onPress={() => console.log('Pressed')}\n  />\n);\n\nconst styles = StyleSheet.create({\n  fab: {\n    position: 'absolute',\n    margin: 16,\n    right: 0,\n    bottom: 0,\n  },\n})\n\nexport default MyComponent;\n```",displayName:"FAB",methods:[],statics:[{name:"Group",description:null,docblock:null,type:{name:"static"},link:"fab-group.html"}],props:{icon:{required:!0,tsType:{name:"IconSource"},description:"Icon to display for the `FAB`."},label:{required:!1,tsType:{name:"string"},description:"Optional label for extended `FAB`."},accessibilityLabel:{required:!1,tsType:{name:"string"},description:"Accessibility label for the FAB. This is read by the screen reader when the user taps the FAB.\nUses `label` by default if specified."},small:{required:!1,tsType:{name:"boolean"},description:"Whether FAB is mini-sized, used to create visual continuity with other elements. This has no effect if `label` is specified."},color:{required:!1,tsType:{name:"string"},description:"Custom color for the icon and label of the `FAB`."},disabled:{required:!1,tsType:{name:"boolean"},description:"Whether `FAB` is disabled. A disabled button is greyed out and `onPress` is not called on touch."},visible:{required:!1,tsType:{name:"boolean"},description:"Whether `FAB` is currently visible.",defaultValue:{value:"true",computed:!1}},loading:{required:!1,tsType:{name:"boolean"},description:"Whether to show a loading indicator."},onPress:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Function to execute on press."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"},testID:{required:!1,tsType:{name:"string"},description:""}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/FAB/FAB.tsx"]},{filepath:"../src/components/FAB/FABGroup.tsx",title:"FAB.Group",description:"A component to display a stack of FABs with related actions in a speed dial.\nTo render the group above other components, you'll need to wrap it with the [`Portal`](portal.html) component.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/fab-group.png\" />\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { FAB, Portal, Provider } from 'react-native-paper';\n\nconst MyComponent = () => {\n  const [state, setState] = React.useState({ open: false });\n\n  const onStateChange = ({ open }) => setState({ open });\n\n  const { open } = state;\n\n  return (\n    <Provider>\n      <Portal>\n        <FAB.Group\n          open={open}\n          icon={open ? 'calendar-today' : 'plus'}\n          actions={[\n            { icon: 'plus', onPress: () => console.log('Pressed add') },\n            {\n              icon: 'star',\n              label: 'Star',\n              onPress: () => console.log('Pressed star'),\n            },\n            {\n              icon: 'email',\n              label: 'Email',\n              onPress: () => console.log('Pressed email'),\n            },\n            {\n              icon: 'bell',\n              label: 'Remind',\n              onPress: () => console.log('Pressed notifications'),\n            },\n          ]}\n          onStateChange={onStateChange}\n          onPress={() => {\n            if (open) {\n              // do something if the speed dial is open\n            }\n          }}\n        />\n      </Portal>\n    </Provider>\n  );\n};\n\nexport default MyComponent;\n```",link:"fab-group",data:{description:"A component to display a stack of FABs with related actions in a speed dial.\nTo render the group above other components, you'll need to wrap it with the [`Portal`](portal.html) component.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/fab-group.png\" />\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { FAB, Portal, Provider } from 'react-native-paper';\n\nconst MyComponent = () => {\n  const [state, setState] = React.useState({ open: false });\n\n  const onStateChange = ({ open }) => setState({ open });\n\n  const { open } = state;\n\n  return (\n    <Provider>\n      <Portal>\n        <FAB.Group\n          open={open}\n          icon={open ? 'calendar-today' : 'plus'}\n          actions={[\n            { icon: 'plus', onPress: () => console.log('Pressed add') },\n            {\n              icon: 'star',\n              label: 'Star',\n              onPress: () => console.log('Pressed star'),\n            },\n            {\n              icon: 'email',\n              label: 'Email',\n              onPress: () => console.log('Pressed email'),\n            },\n            {\n              icon: 'bell',\n              label: 'Remind',\n              onPress: () => console.log('Pressed notifications'),\n            },\n          ]}\n          onStateChange={onStateChange}\n          onPress={() => {\n            if (open) {\n              // do something if the speed dial is open\n            }\n          }}\n        />\n      </Portal>\n    </Provider>\n  );\n};\n\nexport default MyComponent;\n```",displayName:"FAB.Group",methods:[],statics:[],props:{actions:{required:!0,tsType:{name:"Array",elements:[{name:"signature",type:"object",raw:"{\n  icon: IconSource;\n  label?: string;\n  color?: string;\n  accessibilityLabel?: string;\n  style?: StyleProp<ViewStyle>;\n  onPress: () => void;\n  testID?: string;\n}",signature:{properties:[{key:"icon",value:{name:"IconSource",required:!0}},{key:"label",value:{name:"string",required:!1}},{key:"color",value:{name:"string",required:!1}},{key:"accessibilityLabel",value:{name:"string",required:!1}},{key:"style",value:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>",required:!1}},{key:"onPress",value:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}},required:!0}},{key:"testID",value:{name:"string",required:!1}}]}}],raw:"Array<{\n  icon: IconSource;\n  label?: string;\n  color?: string;\n  accessibilityLabel?: string;\n  style?: StyleProp<ViewStyle>;\n  onPress: () => void;\n  testID?: string;\n}>"},description:"Action items to display in the form of a speed dial.\nAn action item should contain the following properties:\n- `icon`: icon to display (required)\n- `label`: optional label text\n- `accessibilityLabel`: accessibility label for the action, uses label by default if specified\n- `color`: custom icon color of the action item\n- `style`: pass additional styles for the fab item, for example, `backgroundColor`\n- `onPress`: callback that is called when `FAB` is pressed (required)"},icon:{required:!0,tsType:{name:"IconSource"},description:"Icon to display for the `FAB`.\nYou can toggle it based on whether the speed dial is open to display a different icon."},accessibilityLabel:{required:!1,tsType:{name:"string"},description:"Accessibility label for the FAB. This is read by the screen reader when the user taps the FAB."},color:{required:!1,tsType:{name:"string"},description:"Custom color for the `FAB`."},onPress:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Function to execute on pressing the `FAB`."},open:{required:!0,tsType:{name:"boolean"},description:"Whether the speed dial is open."},onStateChange:{required:!0,tsType:{name:"signature",type:"function",raw:"(state: { open: boolean }) => void",signature:{arguments:[{name:"state",type:{name:"signature",type:"object",raw:"{ open: boolean }",signature:{properties:[{key:"open",value:{name:"boolean",required:!0}}]}}}],return:{name:"void"}}},description:"Callback which is called on opening and closing the speed dial.\nThe open state needs to be updated when it's called, otherwise the change is dropped."},visible:{required:!0,tsType:{name:"boolean"},description:"Whether `FAB` is currently visible."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:"Style for the group. You can use it to pass additional styles if you need.\nFor example, you can set an additional padding if you have a tab bar at the bottom."},fabStyle:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:"Style for the FAB. It allows to pass the FAB button styles, such as backgroundColor."},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"},testID:{required:!1,tsType:{name:"string"},description:"Pass down testID from Group props to FAB."}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/FAB/FABGroup.tsx"],group:"FAB"},{filepath:"../src/components/HelperText.tsx",title:"HelperText",description:"Helper text is used in conjuction with input elements to provide additional hints for the user.\n\n<div class=\"screenshots\">\n  <img class=\"medium\" src=\"screenshots/helper-text.gif\" />\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { HelperText, TextInput } from 'react-native-paper';\n\nconst MyComponent = () => {\n  const [text, setText] = React.useState('');\n\n   const onChangeText = text => setText(text);\n\n  const hasErrors = () => {\n    return !text.includes('@');\n  };\n\n return (\n    <View>\n      <TextInput label=\"Email\" value={text} onChangeText={onChangeText} />\n      <HelperText type=\"error\" visible={hasErrors()}>\n        Email address is invalid!\n      </HelperText>\n    </View>\n  );\n};\n\nexport default MyComponent;\n```",link:"helper-text",data:{description:"Helper text is used in conjuction with input elements to provide additional hints for the user.\n\n<div class=\"screenshots\">\n  <img class=\"medium\" src=\"screenshots/helper-text.gif\" />\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { HelperText, TextInput } from 'react-native-paper';\n\nconst MyComponent = () => {\n  const [text, setText] = React.useState('');\n\n   const onChangeText = text => setText(text);\n\n  const hasErrors = () => {\n    return !text.includes('@');\n  };\n\n return (\n    <View>\n      <TextInput label=\"Email\" value={text} onChangeText={onChangeText} />\n      <HelperText type=\"error\" visible={hasErrors()}>\n        Email address is invalid!\n      </HelperText>\n    </View>\n  );\n};\n\nexport default MyComponent;\n```",displayName:"HelperText",methods:[],statics:[],props:{type:{required:!1,tsType:{name:"union",raw:"'error' | 'info'",elements:[{name:"literal",value:"'error'"},{name:"literal",value:"'info'"}]},description:"Type of the helper text.",defaultValue:{value:"'info'",computed:!1}},visible:{required:!1,tsType:{name:"boolean"},description:"Whether to display the helper text.",defaultValue:{value:"true",computed:!1}},padding:{required:!1,tsType:{name:"union",raw:"'none' | 'normal'",elements:[{name:"literal",value:"'none'"},{name:"literal",value:"'normal'"}]},description:"Whether to apply padding to the helper text.",defaultValue:{value:"'normal'",computed:!1}},children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Text content of the HelperText."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"TextStyle"}],raw:"StyleProp<TextStyle>"},description:""},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"},testID:{required:!1,tsType:{name:"string"},description:"TestID used for testing purposes"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/HelperText.tsx"]},{filepath:"../src/components/IconButton.tsx",title:"IconButton",description:'An icon button is a button which displays only an icon without a label.\nBy default button has 150% size of the icon.\n\n<div class="screenshots">\n  <figure>\n    <img src="screenshots/icon-button-1.png" />\n    <figcaption>Icon button</figcaption>\n  </figure>\n  <figure>\n    <img src="screenshots/icon-button-2.png" />\n    <figcaption>Pressed icon button</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { IconButton, Colors } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <IconButton\n    icon="camera"\n    color={Colors.red500}\n    size={20}\n    onPress={() => console.log(\'Pressed\')}\n  />\n);\n\nexport default MyComponent;\n```',link:"icon-button",data:{description:'An icon button is a button which displays only an icon without a label.\nBy default button has 150% size of the icon.\n\n<div class="screenshots">\n  <figure>\n    <img src="screenshots/icon-button-1.png" />\n    <figcaption>Icon button</figcaption>\n  </figure>\n  <figure>\n    <img src="screenshots/icon-button-2.png" />\n    <figcaption>Pressed icon button</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { IconButton, Colors } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <IconButton\n    icon="camera"\n    color={Colors.red500}\n    size={20}\n    onPress={() => console.log(\'Pressed\')}\n  />\n);\n\nexport default MyComponent;\n```',displayName:"IconButton",methods:[],statics:[],props:{icon:{required:!0,tsType:{name:"IconSource"},description:"Icon to display."},color:{required:!1,tsType:{name:"string"},description:"Color of the icon."},size:{required:!1,tsType:{name:"number"},description:"Size of the icon.",defaultValue:{value:"24",computed:!1}},disabled:{required:!1,tsType:{name:"boolean"},description:"Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch."},animated:{required:!1,tsType:{name:"boolean"},description:"Whether an icon change is animated.",defaultValue:{value:"false",computed:!1}},accessibilityLabel:{required:!1,tsType:{name:"string"},description:"Accessibility label for the button. This is read by the screen reader when the user taps the button."},onPress:{required:!1,tsType:{name:"signature",type:"function",raw:"(e: GestureResponderEvent) => void",signature:{arguments:[{name:"e",type:{name:"GestureResponderEvent"}}],return:{name:"void"}}},description:"Function to execute on press."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""},ref:{required:!1,tsType:{name:"ReactRefObject",raw:"React.RefObject<TouchableWithoutFeedback>",elements:[{name:"TouchableWithoutFeedback"}]},description:""},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/IconButton.tsx"]},{filepath:"../src/components/TouchableRipple/index.tsx",title:"TouchableRipple",description:'A wrapper for views that should respond to touches.\nProvides a material "ink ripple" interaction effect for supported platforms (>= Android Lollipop).\nOn unsupported platforms, it falls back to a highlight effect.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/touchable-ripple.gif" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { View } from \'react-native\';\nimport { Text, TouchableRipple } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <TouchableRipple\n    onPress={() => console.log(\'Pressed\')}\n    rippleColor="rgba(0, 0, 0, .32)"\n  >\n    <Text>Press anywhere</Text>\n  </TouchableRipple>\n);\n\nexport default MyComponent;\n```',link:"touchable-ripple",data:{description:'A wrapper for views that should respond to touches.\nProvides a material "ink ripple" interaction effect for supported platforms (>= Android Lollipop).\nOn unsupported platforms, it falls back to a highlight effect.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/touchable-ripple.gif" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { View } from \'react-native\';\nimport { Text, TouchableRipple } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <TouchableRipple\n    onPress={() => console.log(\'Pressed\')}\n    rippleColor="rgba(0, 0, 0, .32)"\n  >\n    <Text>Press anywhere</Text>\n  </TouchableRipple>\n);\n\nexport default MyComponent;\n```',displayName:"TouchableRipple",methods:[],statics:[{name:"supported",description:"Whether ripple effect is supported.",docblock:"Whether ripple effect is supported.",value:!0,type:null}],props:{borderless:{required:!1,tsType:{name:"boolean"},description:"Whether to render the ripple outside the view bounds.",defaultValue:{value:"false",computed:!1}},background:{required:!1,tsType:{name:"Object"},description:"Type of background drawabale to display the feedback (Android).\nhttps://facebook.github.io/react-native/docs/touchablenativefeedback.html#background"},centered:{required:!1,tsType:{name:"boolean"},description:"Whether to start the ripple at the center (Web)."},disabled:{required:!1,tsType:{name:"boolean"},description:"Whether to prevent interaction with the touchable."},onPress:{required:!1,tsType:{name:"signature",type:"function",raw:"(e: GestureResponderEvent) => void",signature:{arguments:[{name:"e",type:{name:"GestureResponderEvent"}}],return:{name:"void"}}},description:"Function to execute on press. If not set, will cause the touchable to be disabled."},onLongPress:{required:!1,tsType:{name:"signature",type:"function",raw:"(e: GestureResponderEvent) => void",signature:{arguments:[{name:"e",type:{name:"GestureResponderEvent"}}],return:{name:"void"}}},description:"Function to execute on long press."},rippleColor:{required:!1,tsType:{name:"string"},description:"Color of the ripple effect (Android >= 5.0 and Web)."},underlayColor:{required:!1,tsType:{name:"string"},description:"Color of the underlay for the highlight effect (Android < 5.0 and iOS)."},children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Content of the `TouchableRipple`."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/TouchableRipple/index.tsx"]},{filepath:"../src/components/List/ListAccordion.tsx",title:"List.Accordion",description:'A component used to display an expandable list item.\n\n<div class="screenshots">\n  <img class="medium" src="screenshots/list-accordion-1.png" />\n  <img class="medium" src="screenshots/list-accordion-2.png" />\n  <img class="medium" src="screenshots/list-accordion-3.png" />\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { List } from \'react-native-paper\';\n\nconst MyComponent = () => {\n  const [expanded, setExpanded] = React.useState(true);\n\n  const handlePress = () => setExpanded(!expanded);\n\n  return (\n    <List.Section title="Accordions">\n      <List.Accordion\n        title="Uncontrolled Accordion"\n        left={props => <List.Icon {...props} icon="folder" />}>\n        <List.Item title="First item" />\n        <List.Item title="Second item" />\n      </List.Accordion>\n\n      <List.Accordion\n        title="Controlled Accordion"\n        left={props => <List.Icon {...props} icon="folder" />}\n        expanded={expanded}\n        onPress={handlePress}>\n        <List.Item title="First item" />\n        <List.Item title="Second item" />\n      </List.Accordion>\n    </List.Section>\n  );\n};\n\nexport default MyComponent;\n```',link:"list-accordion",data:{description:'A component used to display an expandable list item.\n\n<div class="screenshots">\n  <img class="medium" src="screenshots/list-accordion-1.png" />\n  <img class="medium" src="screenshots/list-accordion-2.png" />\n  <img class="medium" src="screenshots/list-accordion-3.png" />\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { List } from \'react-native-paper\';\n\nconst MyComponent = () => {\n  const [expanded, setExpanded] = React.useState(true);\n\n  const handlePress = () => setExpanded(!expanded);\n\n  return (\n    <List.Section title="Accordions">\n      <List.Accordion\n        title="Uncontrolled Accordion"\n        left={props => <List.Icon {...props} icon="folder" />}>\n        <List.Item title="First item" />\n        <List.Item title="Second item" />\n      </List.Accordion>\n\n      <List.Accordion\n        title="Controlled Accordion"\n        left={props => <List.Icon {...props} icon="folder" />}\n        expanded={expanded}\n        onPress={handlePress}>\n        <List.Item title="First item" />\n        <List.Item title="Second item" />\n      </List.Accordion>\n    </List.Section>\n  );\n};\n\nexport default MyComponent;\n```',displayName:"List.Accordion",methods:[],statics:[],props:{title:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Title text for the list accordion."},description:{required:!1,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Description text for the list accordion."},left:{required:!1,tsType:{name:"signature",type:"function",raw:"(props: { color: string }) => React.ReactNode",signature:{arguments:[{name:"props",type:{name:"signature",type:"object",raw:"{ color: string }",signature:{properties:[{key:"color",value:{name:"string",required:!0}}]}}}],return:{name:"ReactReactNode",raw:"React.ReactNode"}}},description:"Callback which returns a React element to display on the left side."},expanded:{required:!1,tsType:{name:"boolean"},description:'Whether the accordion is expanded\nIf this prop is provided, the accordion will behave as a "controlled component".\nYou\'ll need to update this prop when you want to toggle the component or on `onPress`.'},onPress:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Function to execute on press."},children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Content of the section."},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:"Style that is passed to the wrapping TouchableRipple element."},titleStyle:{required:!1,tsType:{name:"StyleProp",elements:[{name:"TextStyle"}],raw:"StyleProp<TextStyle>"},description:"Style that is passed to Title element."},descriptionStyle:{required:!1,tsType:{name:"StyleProp",elements:[{name:"TextStyle"}],raw:"StyleProp<TextStyle>"},description:"Style that is passed to Description element."},titleNumberOfLines:{required:!1,tsType:{name:"number"},description:"Truncate Title text such that the total number of lines does not\nexceed this number.",defaultValue:{value:"1",computed:!1}},descriptionNumberOfLines:{required:!1,tsType:{name:"number"},description:"Truncate Description text such that the total number of lines does not\nexceed this number.",defaultValue:{value:"2",computed:!1}},id:{required:!1,tsType:{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},description:"Id is used for distinguishing specific accordion when using List.AccordionGroup. Property is required when using List.AccordionGroup and has no impact on behavior when using standalone List.Accordion."},testID:{required:!1,tsType:{name:"string"},description:"TestID used for testing purposes"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/List/ListAccordion.tsx"],group:"List"},{filepath:"../src/components/List/ListAccordionGroup.tsx",title:"List.AccordionGroup",description:'List.AccordionGroup allows to control a group of List Accordions. Id prop for List.Accordion is required in order to group to work.\nList.AccordionGroup can be controlled or uncontrolled component. Example shows uncontrolled version.\nAt most one Accordion will be expanded in given time.\n\n<div class="screenshots">\n  <img class="medium" src="screenshots/list-accordion-group.png" />\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { View, Text } from \'react-native\';\nimport { List } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <List.AccordionGroup>\n    <List.Accordion title="Accordion 1" id="1">\n      <List.Item title="Item 1" />\n    </List.Accordion>\n    <List.Accordion title="Accordion 2" id="2">\n      <List.Item title="Item 2" />\n    </List.Accordion>\n    <View>\n      <Text>\n        List.Accordion can be wrapped because implementation uses React.Context.\n      </Text>\n      <List.Accordion title="Accordion 3" id="3">\n        <List.Item title="Item 3" />\n      </List.Accordion>\n    </View>\n  </List.AccordionGroup>\n);\n\nexport default MyComponent;\n```',link:"list-accordion-group",data:{description:'List.AccordionGroup allows to control a group of List Accordions. Id prop for List.Accordion is required in order to group to work.\nList.AccordionGroup can be controlled or uncontrolled component. Example shows uncontrolled version.\nAt most one Accordion will be expanded in given time.\n\n<div class="screenshots">\n  <img class="medium" src="screenshots/list-accordion-group.png" />\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { View, Text } from \'react-native\';\nimport { List } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <List.AccordionGroup>\n    <List.Accordion title="Accordion 1" id="1">\n      <List.Item title="Item 1" />\n    </List.Accordion>\n    <List.Accordion title="Accordion 2" id="2">\n      <List.Item title="Item 2" />\n    </List.Accordion>\n    <View>\n      <Text>\n        List.Accordion can be wrapped because implementation uses React.Context.\n      </Text>\n      <List.Accordion title="Accordion 3" id="3">\n        <List.Item title="Item 3" />\n      </List.Accordion>\n    </View>\n  </List.AccordionGroup>\n);\n\nexport default MyComponent;\n```',displayName:"List.AccordionGroup",methods:[{name:"onAccordionPress",docblock:null,modifiers:[],params:[{name:"expandedId",type:{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]}}],returns:null}],statics:[],props:{onAccordionPress:{required:!1,tsType:{name:"signature",type:"function",raw:"(expandedId: string | number) => void",signature:{arguments:[{name:"expandedId",type:{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]}}],return:{name:"void"}}},description:"Function to execute on selection change."},expandedId:{required:!1,tsType:{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},description:"Id of the currently expanded list accordion"},children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"React elements containing list accordions"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/List/ListAccordionGroup.tsx"],group:"List"},{filepath:"../src/components/List/ListIcon.tsx",title:"List.Icon",description:'A component to show an icon in a list item.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/list-icon.png" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { List, Colors } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <List.Icon color={Colors.blue500} icon="folder" />\n  <List.Icon color={Colors.blue500} icon="equal" />\n  <List.Icon color={Colors.blue500} icon="calendar" />\n);\n\nexport default MyComponent;\n```',link:"list-icon",data:{description:'A component to show an icon in a list item.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/list-icon.png" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { List, Colors } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <List.Icon color={Colors.blue500} icon="folder" />\n  <List.Icon color={Colors.blue500} icon="equal" />\n  <List.Icon color={Colors.blue500} icon="calendar" />\n);\n\nexport default MyComponent;\n```',displayName:"List.Icon",methods:[],statics:[],props:{icon:{required:!0,tsType:{name:"IconSource"},description:"Icon to show."},color:{required:!1,tsType:{name:"string"},description:"Color for the icon."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/List/ListIcon.tsx"],group:"List"},{filepath:"../src/components/List/ListItem.tsx",title:"List.Item",description:'A component to show tiles inside a List.\n\n<div class="screenshots">\n  <img class="medium" src="screenshots/list-item-1.png" />\n  <img class="medium" src="screenshots/list-item-2.png" />\n  <img class="medium" src="screenshots/list-item-3.png" />\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { List } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <List.Item\n    title="First Item"\n    description="Item description"\n    left={props => <List.Icon {...props} icon="folder" />}\n  />\n);\n\nexport default MyComponent;\n```',link:"list-item",data:{description:'A component to show tiles inside a List.\n\n<div class="screenshots">\n  <img class="medium" src="screenshots/list-item-1.png" />\n  <img class="medium" src="screenshots/list-item-2.png" />\n  <img class="medium" src="screenshots/list-item-3.png" />\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { List } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <List.Item\n    title="First Item"\n    description="Item description"\n    left={props => <List.Icon {...props} icon="folder" />}\n  />\n);\n\nexport default MyComponent;\n```',displayName:"List.Item",methods:[{name:"renderDescription",docblock:null,modifiers:[],params:[{name:"descriptionColor",type:{name:"string"}},{name:"description",optional:!0,type:{name:"union",raw:"Description | null",elements:[{name:"union",raw:"React.ReactNode\n| ((props: {\n    ellipsizeMode: EllipsizeProp | undefined;\n    color: string;\n    fontSize: number;\n  }) => React.ReactNode)",elements:[{name:"ReactReactNode",raw:"React.ReactNode"},{name:"unknown"}]},{name:"null"}]}}],returns:null}],statics:[],props:{title:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Title text for the list item."},description:{required:!1,tsType:{name:"union",raw:"Description | null",elements:[{name:"union",raw:"React.ReactNode\n| ((props: {\n    ellipsizeMode: EllipsizeProp | undefined;\n    color: string;\n    fontSize: number;\n  }) => React.ReactNode)",elements:[{name:"ReactReactNode",raw:"React.ReactNode"},{name:"unknown"}]},{name:"null"}]},description:"Description text for the list item or callback which returns a React element to display the description."},left:{required:!1,tsType:{name:"signature",type:"function",raw:"(props: {\n  color: string;\n  style: {\n    marginLeft: number;\n    marginRight: number;\n    marginVertical?: number;\n  };\n}) => React.ReactNode",signature:{arguments:[{name:"props",type:{name:"signature",type:"object",raw:"{\n  color: string;\n  style: {\n    marginLeft: number;\n    marginRight: number;\n    marginVertical?: number;\n  };\n}",signature:{properties:[{key:"color",value:{name:"string",required:!0}},{key:"style",value:{name:"signature",type:"object",raw:"{\n  marginLeft: number;\n  marginRight: number;\n  marginVertical?: number;\n}",signature:{properties:[{key:"marginLeft",value:{name:"number",required:!0}},{key:"marginRight",value:{name:"number",required:!0}},{key:"marginVertical",value:{name:"number",required:!1}}]},required:!0}}]}}}],return:{name:"ReactReactNode",raw:"React.ReactNode"}}},description:"Callback which returns a React element to display on the left side."},right:{required:!1,tsType:{name:"signature",type:"function",raw:"(props: {\n  color: string;\n  style?: {\n    marginRight: number;\n    marginVertical?: number;\n  };\n}) => React.ReactNode",signature:{arguments:[{name:"props",type:{name:"signature",type:"object",raw:"{\n  color: string;\n  style?: {\n    marginRight: number;\n    marginVertical?: number;\n  };\n}",signature:{properties:[{key:"color",value:{name:"string",required:!0}},{key:"style",value:{name:"signature",type:"object",raw:"{\n  marginRight: number;\n  marginVertical?: number;\n}",signature:{properties:[{key:"marginRight",value:{name:"number",required:!0}},{key:"marginVertical",value:{name:"number",required:!1}}]},required:!1}}]}}}],return:{name:"ReactReactNode",raw:"React.ReactNode"}}},description:"Callback which returns a React element to display on the right side."},onPress:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Function to execute on press."},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:"Style that is passed to the wrapping TouchableRipple element."},titleStyle:{required:!1,tsType:{name:"StyleProp",elements:[{name:"TextStyle"}],raw:"StyleProp<TextStyle>"},description:"Style that is passed to Title element."},descriptionStyle:{required:!1,tsType:{name:"StyleProp",elements:[{name:"TextStyle"}],raw:"StyleProp<TextStyle>"},description:"Style that is passed to Description element."},titleNumberOfLines:{required:!1,tsType:{name:"number"},description:"Truncate Title text such that the total number of lines does not\nexceed this number.",defaultValue:{value:"1",computed:!1}},descriptionNumberOfLines:{required:!1,tsType:{name:"number"},description:"Truncate Description text such that the total number of lines does not\nexceed this number.",defaultValue:{value:"2",computed:!1}},titleEllipsizeMode:{required:!1,tsType:{name:"EllipsizeProp"},description:"Ellipsize Mode for the Title"},descriptionEllipsizeMode:{required:!1,tsType:{name:"EllipsizeProp"},description:"Ellipsize Mode for the Description"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/List/ListItem.tsx"],group:"List"},{filepath:"../src/components/List/ListSection.tsx",title:"List.Section",description:'A component used to group list items.\n\n<div class="screenshots">\n  <img src="screenshots/list-section.png" />\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { List } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <List.Section>\n    <List.Subheader>Some title</List.Subheader>\n    <List.Item title="First Item" left={() => <List.Icon icon="folder" />} />\n    <List.Item\n      title="Second Item"\n      left={() => <List.Icon color="#000" icon="folder" />}\n    />\n  </List.Section>\n);\n\nexport default MyComponent;\n```',link:"list-section",data:{description:'A component used to group list items.\n\n<div class="screenshots">\n  <img src="screenshots/list-section.png" />\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { List } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <List.Section>\n    <List.Subheader>Some title</List.Subheader>\n    <List.Item title="First Item" left={() => <List.Icon icon="folder" />} />\n    <List.Item\n      title="Second Item"\n      left={() => <List.Icon color="#000" icon="folder" />}\n    />\n  </List.Section>\n);\n\nexport default MyComponent;\n```',displayName:"List.Section",methods:[],statics:[],props:{title:{required:!1,tsType:{name:"string"},description:"Title text for the section."},children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Content of the section."},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"},titleStyle:{required:!1,tsType:{name:"StyleProp",elements:[{name:"TextStyle"}],raw:"StyleProp<TextStyle>"},description:"Style that is passed to Title element."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/List/ListSection.tsx"],group:"List"},{filepath:"../src/components/List/ListSubheader.tsx",title:"List.Subheader",description:"A component used to display a header in lists.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { List } from 'react-native-paper';\n\nconst MyComponent = () => <List.Subheader>My List Title</List.Subheader>;\n\nexport default MyComponent;\n```",link:"list-subheader",data:{description:"A component used to display a header in lists.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { List } from 'react-native-paper';\n\nconst MyComponent = () => <List.Subheader>My List Title</List.Subheader>;\n\nexport default MyComponent;\n```",displayName:"List.Subheader",methods:[],statics:[],props:{theme:{required:!0,tsType:{name:"Theme"},description:"@optional"},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"TextStyle"}],raw:"StyleProp<TextStyle>"},description:"Style that is passed to Text element."}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/List/ListSubheader.tsx"],group:"List"},{filepath:"../src/components/Menu/Menu.tsx",title:"Menu",description:'Menus display a list of choices on temporary elevated surfaces. Their placement varies based on the element that opens them.\n\n <div class="screenshots">\n  <img class="medium" src="screenshots/menu-1.png" />\n  <img class="medium" src="screenshots/menu-2.png" />\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { View } from \'react-native\';\nimport { Button, Menu, Divider, Provider } from \'react-native-paper\';\n\nconst MyComponent = () => {\n  const [visible, setVisible] = React.useState(false);\n\n  const openMenu = () => setVisible(true);\n\n  const closeMenu = () => setVisible(false);\n\n  return (\n    <Provider>\n      <View\n        style={{\n          paddingTop: 50,\n          flexDirection: \'row\',\n          justifyContent: \'center\',\n        }}>\n        <Menu\n          visible={visible}\n          onDismiss={closeMenu}\n          anchor={<Button onPress={openMenu}>Show menu</Button>}>\n          <Menu.Item onPress={() => {}} title="Item 1" />\n          <Menu.Item onPress={() => {}} title="Item 2" />\n          <Divider />\n          <Menu.Item onPress={() => {}} title="Item 3" />\n        </Menu>\n      </View>\n    </Provider>\n  );\n};\n\nexport default MyComponent;\n```',link:"menu",data:{description:'Menus display a list of choices on temporary elevated surfaces. Their placement varies based on the element that opens them.\n\n <div class="screenshots">\n  <img class="medium" src="screenshots/menu-1.png" />\n  <img class="medium" src="screenshots/menu-2.png" />\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { View } from \'react-native\';\nimport { Button, Menu, Divider, Provider } from \'react-native-paper\';\n\nconst MyComponent = () => {\n  const [visible, setVisible] = React.useState(false);\n\n  const openMenu = () => setVisible(true);\n\n  const closeMenu = () => setVisible(false);\n\n  return (\n    <Provider>\n      <View\n        style={{\n          paddingTop: 50,\n          flexDirection: \'row\',\n          justifyContent: \'center\',\n        }}>\n        <Menu\n          visible={visible}\n          onDismiss={closeMenu}\n          anchor={<Button onPress={openMenu}>Show menu</Button>}>\n          <Menu.Item onPress={() => {}} title="Item 1" />\n          <Menu.Item onPress={() => {}} title="Item 2" />\n          <Divider />\n          <Menu.Item onPress={() => {}} title="Item 3" />\n        </Menu>\n      </View>\n    </Provider>\n  );\n};\n\nexport default MyComponent;\n```',displayName:"Menu",methods:[],statics:[{name:"Item",description:null,docblock:null,type:{name:"static"},link:"menu-item.html"}],props:{visible:{required:!0,tsType:{name:"boolean"},description:"Whether the Menu is currently visible."},anchor:{required:!0,tsType:{name:"union",raw:"React.ReactNode | { x: number; y: number }",elements:[{name:"ReactReactNode",raw:"React.ReactNode"},{name:"signature",type:"object",raw:"{ x: number; y: number }",signature:{properties:[{key:"x",value:{name:"number",required:!0}},{key:"y",value:{name:"number",required:!0}}]}}]},description:"The anchor to open the menu from. In most cases, it will be a button that opens the menu."},statusBarHeight:{required:!1,tsType:{name:"number"},description:"Extra margin to add at the top of the menu to account for translucent status bar on Android.\nIf you are using Expo, we assume translucent status bar and set a height for status bar automatically.\nPass `0` or a custom value to and customize it.\nThis is automatically handled on iOS.",defaultValue:{value:"APPROX_STATUSBAR_HEIGHT",computed:!0}},onDismiss:{required:!0,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Callback called when Menu is dismissed. The `visible` prop needs to be updated when this is called."},overlayAccessibilityLabel:{required:!1,tsType:{name:"string"},description:"Accessibility label for the overlay. This is read by the screen reader when the user taps outside the menu.",defaultValue:{value:"'Close menu'",computed:!1}},children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Content of the `Menu`."},contentStyle:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:"Style of menu's inner content."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Menu/Menu.tsx"]},{filepath:"../src/components/Menu/MenuItem.tsx",title:"Menu.Item",description:'A component to show a single list item inside a Menu.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/menu-item.png" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { View } from \'react-native\';\nimport { Menu } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <View style={{ flex: 1 }}>\n    <Menu.Item icon="redo" onPress={() => {}} title="Redo" />\n    <Menu.Item icon="undo" onPress={() => {}} title="Undo" />\n    <Menu.Item icon="content-cut" onPress={() => {}} title="Cut" disabled />\n    <Menu.Item icon="content-copy" onPress={() => {}} title="Copy" disabled />\n    <Menu.Item icon="content-paste" onPress={() => {}} title="Paste" />\n  </View>\n);\n\nexport default MyComponent;\n```',link:"menu-item",data:{description:'A component to show a single list item inside a Menu.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/menu-item.png" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { View } from \'react-native\';\nimport { Menu } from \'react-native-paper\';\n\nconst MyComponent = () => (\n  <View style={{ flex: 1 }}>\n    <Menu.Item icon="redo" onPress={() => {}} title="Redo" />\n    <Menu.Item icon="undo" onPress={() => {}} title="Undo" />\n    <Menu.Item icon="content-cut" onPress={() => {}} title="Cut" disabled />\n    <Menu.Item icon="content-copy" onPress={() => {}} title="Copy" disabled />\n    <Menu.Item icon="content-paste" onPress={() => {}} title="Paste" />\n  </View>\n);\n\nexport default MyComponent;\n```',displayName:"Menu.Item",methods:[],statics:[],props:{title:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Title text for the `MenuItem`."},icon:{required:!1,tsType:{name:"IconSource"},description:"Icon to display for the `MenuItem`."},disabled:{required:!1,tsType:{name:"boolean"},description:"Whether the 'item' is disabled. A disabled 'item' is greyed out and `onPress` is not called on touch."},onPress:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Function to execute on press."},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""},titleStyle:{required:!1,tsType:{name:"StyleProp",elements:[{name:"TextStyle"}],raw:"StyleProp<TextStyle>"},description:""},testID:{required:!1,tsType:{name:"string"},description:"TestID used for testing purposes"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Menu/MenuItem.tsx"],group:"Menu"},{filepath:"../src/components/Modal.tsx",title:"Modal",description:'The Modal component is a simple way to present content above an enclosing view.\nTo render the `Modal` above other components, you\'ll need to wrap it with the [`Portal`](portal.html) component.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/modal.gif" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Modal, Portal, Text, Button, Provider } from \'react-native-paper\';\n\nconst MyComponent = () => {\n  const [visible, setVisible] = React.useState(false);\n\n  const showModal = () => setVisible(true);\n\n  const hideModal = () => setVisible(false);\n\n  return (\n    <Provider>\n      <Portal>\n        <Modal visible={visible} onDismiss={hideModal}>\n          <Text>Example Modal</Text>\n        </Modal>\n        <Button style={{marginTop: 30}} onPress={showModal}>\n          Show\n        </Button>\n      </Portal>\n    </Provider>\n  );\n};\n\nexport default MyComponent;\n```',link:"modal",data:{description:'The Modal component is a simple way to present content above an enclosing view.\nTo render the `Modal` above other components, you\'ll need to wrap it with the [`Portal`](portal.html) component.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/modal.gif" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Modal, Portal, Text, Button, Provider } from \'react-native-paper\';\n\nconst MyComponent = () => {\n  const [visible, setVisible] = React.useState(false);\n\n  const showModal = () => setVisible(true);\n\n  const hideModal = () => setVisible(false);\n\n  return (\n    <Provider>\n      <Portal>\n        <Modal visible={visible} onDismiss={hideModal}>\n          <Text>Example Modal</Text>\n        </Modal>\n        <Button style={{marginTop: 30}} onPress={showModal}>\n          Show\n        </Button>\n      </Portal>\n    </Provider>\n  );\n};\n\nexport default MyComponent;\n```',displayName:"Modal",methods:[],statics:[],props:{dismissable:{required:!1,tsType:{name:"boolean"},description:"Determines whether clicking outside the modal dismiss it.",defaultValue:{value:"true",computed:!1}},onDismiss:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Callback that is called when the user dismisses the modal."},visible:{required:!1,tsType:{name:"boolean"},description:"Determines Whether the modal is visible.",defaultValue:{value:"false",computed:!1}},children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Content of the `Modal`."},contentContainerStyle:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:"Style for the content of the modal"},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Modal.tsx"]},{filepath:"../src/components/Portal/Portal.tsx",title:"Portal",description:"Portal allows to render a component at a different place in the parent tree.\nYou can use it to render content which should appear above other elements, similar to `Modal`.\nIt requires a [`Portal.Host`](portal-host.html) component to be rendered somewhere in the parent tree.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => (\n  <Portal>\n    <Text>This is rendered at a different place</Text>\n  </Portal>\n);\n\nexport default MyComponent;\n```",link:"portal",data:{description:"Portal allows to render a component at a different place in the parent tree.\nYou can use it to render content which should appear above other elements, similar to `Modal`.\nIt requires a [`Portal.Host`](portal-host.html) component to be rendered somewhere in the parent tree.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Portal, Text } from 'react-native-paper';\n\nconst MyComponent = () => (\n  <Portal>\n    <Text>This is rendered at a different place</Text>\n  </Portal>\n);\n\nexport default MyComponent;\n```",displayName:"Portal",methods:[],statics:[{name:"Host",description:null,docblock:null,type:{name:"static"},link:"portal-host.html"}],props:{children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Content of the `Portal`."},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Portal/Portal.tsx"]},{filepath:"../src/components/Portal/PortalHost.tsx",title:"Portal.Host",description:"Portal host renders all of its children `Portal` elements.\nFor example, you can wrap a screen in `Portal.Host` to render items above the screen.\nIf you're using the `Provider` component, it already includes `Portal.Host`.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Text } from 'react-native';\nimport { Portal } from 'react-native-paper';\n\nconst MyComponent = () => (\n  <Portal.Host>\n    <Text>Content of the app</Text>\n  </Portal.Host>\n);\n\nexport default MyComponent;\n```\n\nHere any `Portal` elements under `<App />` are rendered alongside `<App />` and will appear above `<App />` like a `Modal`.",link:"portal-host",data:{description:"Portal host renders all of its children `Portal` elements.\nFor example, you can wrap a screen in `Portal.Host` to render items above the screen.\nIf you're using the `Provider` component, it already includes `Portal.Host`.\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Text } from 'react-native';\nimport { Portal } from 'react-native-paper';\n\nconst MyComponent = () => (\n  <Portal.Host>\n    <Text>Content of the app</Text>\n  </Portal.Host>\n);\n\nexport default MyComponent;\n```\n\nHere any `Portal` elements under `<App />` are rendered alongside `<App />` and will appear above `<App />` like a `Modal`.",displayName:"Portal.Host",methods:[],statics:[],props:{children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Portal/PortalHost.tsx"],group:"Portal"},{filepath:"../src/components/ProgressBar.tsx",title:"ProgressBar",description:"Progress bar is an indicator used to present progress of some activity in the app.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/progress-bar.png\" />\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ProgressBar, Colors } from 'react-native-paper';\n\nconst MyComponent = () => (\n  <ProgressBar progress={0.5} color={Colors.red800} />\n);\n\nexport default MyComponent;\n```",link:"progress-bar",data:{description:"Progress bar is an indicator used to present progress of some activity in the app.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/progress-bar.png\" />\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ProgressBar, Colors } from 'react-native-paper';\n\nconst MyComponent = () => (\n  <ProgressBar progress={0.5} color={Colors.red800} />\n);\n\nexport default MyComponent;\n```",displayName:"ProgressBar",methods:[],statics:[],props:{progress:{required:!1,tsType:{name:"number"},description:"Progress value (between 0 and 1).",defaultValue:{value:"0",computed:!1}},color:{required:!1,tsType:{name:"string"},description:"Color of the progress bar. The background color will be calculated based on this but you can change it by passing `backgroundColor` to `style` prop."},indeterminate:{required:!1,tsType:{name:"boolean"},description:"If the progress bar will show indeterminate progress."},visible:{required:!1,tsType:{name:"boolean"},description:"Whether to show the ProgressBar (true, the default) or hide it (false).",defaultValue:{value:"true",computed:!1}},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/ProgressBar.tsx"]},{filepath:"../src/components/RadioButton/RadioButton.tsx",title:"RadioButton",description:"Radio buttons allow the selection a single option from a set.\n\n<div class=\"screenshots\">\n  <figure>\n    <img src=\"screenshots/radio-enabled.android.png\" />\n    <figcaption>Android (enabled)</figcaption>\n  </figure>\n  <figure>\n    <img src=\"screenshots/radio-disabled.android.png\" />\n    <figcaption>Android (disabled)</figcaption>\n  </figure>\n  <figure>\n    <img src=\"screenshots/radio-enabled.ios.png\" />\n    <figcaption>iOS (enabled)</figcaption>\n  </figure>\n  <figure>\n    <img src=\"screenshots/radio-disabled.ios.png\" />\n    <figcaption>iOS (disabled)</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { RadioButton } from 'react-native-paper';\n\nconst MyComponent = () => {\n  const [checked, setChecked] = React.useState('first');\n\n  return (\n    <View>\n      <RadioButton\n        value=\"first\"\n        status={ checked === 'first' ? 'checked' : 'unchecked' }\n        onPress={() => setChecked('first')}\n      />\n      <RadioButton\n        value=\"second\"\n        status={ checked === 'second' ? 'checked' : 'unchecked' }\n        onPress={() => setChecked('second')}\n      />\n    </View>\n  );\n};\n\nexport default MyComponent;\n```",link:"radio-button",data:{description:"Radio buttons allow the selection a single option from a set.\n\n<div class=\"screenshots\">\n  <figure>\n    <img src=\"screenshots/radio-enabled.android.png\" />\n    <figcaption>Android (enabled)</figcaption>\n  </figure>\n  <figure>\n    <img src=\"screenshots/radio-disabled.android.png\" />\n    <figcaption>Android (disabled)</figcaption>\n  </figure>\n  <figure>\n    <img src=\"screenshots/radio-enabled.ios.png\" />\n    <figcaption>iOS (enabled)</figcaption>\n  </figure>\n  <figure>\n    <img src=\"screenshots/radio-disabled.ios.png\" />\n    <figcaption>iOS (disabled)</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View } from 'react-native';\nimport { RadioButton } from 'react-native-paper';\n\nconst MyComponent = () => {\n  const [checked, setChecked] = React.useState('first');\n\n  return (\n    <View>\n      <RadioButton\n        value=\"first\"\n        status={ checked === 'first' ? 'checked' : 'unchecked' }\n        onPress={() => setChecked('first')}\n      />\n      <RadioButton\n        value=\"second\"\n        status={ checked === 'second' ? 'checked' : 'unchecked' }\n        onPress={() => setChecked('second')}\n      />\n    </View>\n  );\n};\n\nexport default MyComponent;\n```",displayName:"RadioButton",methods:[],statics:[{name:"Group",description:null,docblock:null,type:{name:"static"},link:"radio-button-group.html"},{name:"Android",description:null,docblock:null,type:{name:"static"},link:"radio-button-android.html"},{name:"IOS",description:null,docblock:null,type:{name:"static"},link:"radio-button-ios.html"},{name:"Item",description:null,docblock:null,type:{name:"static"},link:"radio-button-item.html"}],props:{value:{required:!0,tsType:{name:"string"},description:"Value of the radio button"},status:{required:!1,tsType:{name:"union",raw:"'checked' | 'unchecked'",elements:[{name:"literal",value:"'checked'"},{name:"literal",value:"'unchecked'"}]},description:"Status of radio button."},disabled:{required:!1,tsType:{name:"boolean"},description:"Whether radio is disabled."},onPress:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Function to execute on press."},uncheckedColor:{required:!1,tsType:{name:"string"},description:"Custom color for unchecked radio."},color:{required:!1,tsType:{name:"string"},description:"Custom color for radio."},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/RadioButton/RadioButton.tsx"]},{filepath:"../src/components/RadioButton/RadioButtonAndroid.tsx",title:"RadioButton.Android",description:'Radio buttons allow the selection a single option from a set.\nThis component follows platform guidelines for Android.\n\n<div class="screenshots">\n  <figure>\n    <img src="screenshots/radio-enabled.android.png" />\n    <figcaption>Enabled</figcaption>\n  </figure>\n  <figure>\n    <img src="screenshots/radio-disabled.android.png" />\n    <figcaption>Disabled</figcaption>\n  </figure>\n</div>',link:"radio-button-android",data:{description:'Radio buttons allow the selection a single option from a set.\nThis component follows platform guidelines for Android.\n\n<div class="screenshots">\n  <figure>\n    <img src="screenshots/radio-enabled.android.png" />\n    <figcaption>Enabled</figcaption>\n  </figure>\n  <figure>\n    <img src="screenshots/radio-disabled.android.png" />\n    <figcaption>Disabled</figcaption>\n  </figure>\n</div>',displayName:"RadioButton.Android",methods:[],statics:[],props:{value:{required:!0,tsType:{name:"string"},description:"Value of the radio button"},status:{required:!1,tsType:{name:"union",raw:"'checked' | 'unchecked'",elements:[{name:"literal",value:"'checked'"},{name:"literal",value:"'unchecked'"}]},description:"Status of radio button."},disabled:{required:!1,tsType:{name:"boolean"},description:"Whether radio is disabled."},onPress:{required:!1,tsType:{name:"signature",type:"function",raw:"(param?: any) => void",signature:{arguments:[{name:"param",type:{name:"any"}}],return:{name:"void"}}},description:"Function to execute on press."},uncheckedColor:{required:!1,tsType:{name:"string"},description:"Custom color for unchecked radio."},color:{required:!1,tsType:{name:"string"},description:"Custom color for radio."},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/RadioButton/RadioButtonAndroid.tsx"],group:"RadioButton"},{filepath:"../src/components/RadioButton/RadioButtonGroup.tsx",title:"RadioButton.Group",description:'Radio button group allows to control a group of radio buttons.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/radio-button-group-android.gif" />\n <figcaption>Android</figcaption>\n  </figure>\n  <figure>\n    <img class="medium" src="screenshots/radio-button-group-ios.gif" />\n <figcaption>iOS</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { View } from \'react-native\';\nimport { RadioButton, Text } from \'react-native-paper\';\n\nconst MyComponent = () => {\n  const [value, setValue] = React.useState(\'first\');\n\n  return (\n    <RadioButton.Group onValueChange={value => setValue(value)} value={value}>\n      <View>\n        <Text>First</Text>\n        <RadioButton value="first" />\n      </View>\n      <View>\n        <Text>Second</Text>\n        <RadioButton value="second" />\n      </View>\n    </RadioButton.Group>\n  );\n};\n\nexport default MyComponent;\n```',link:"radio-button-group",data:{description:'Radio button group allows to control a group of radio buttons.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/radio-button-group-android.gif" />\n <figcaption>Android</figcaption>\n  </figure>\n  <figure>\n    <img class="medium" src="screenshots/radio-button-group-ios.gif" />\n <figcaption>iOS</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { View } from \'react-native\';\nimport { RadioButton, Text } from \'react-native-paper\';\n\nconst MyComponent = () => {\n  const [value, setValue] = React.useState(\'first\');\n\n  return (\n    <RadioButton.Group onValueChange={value => setValue(value)} value={value}>\n      <View>\n        <Text>First</Text>\n        <RadioButton value="first" />\n      </View>\n      <View>\n        <Text>Second</Text>\n        <RadioButton value="second" />\n      </View>\n    </RadioButton.Group>\n  );\n};\n\nexport default MyComponent;\n```',displayName:"RadioButton.Group",methods:[],statics:[],props:{onValueChange:{required:!0,tsType:{name:"signature",type:"function",raw:"(value: string) => void",signature:{arguments:[{name:"value",type:{name:"string"}}],return:{name:"void"}}},description:"Function to execute on selection change."},value:{required:!0,tsType:{name:"string"},description:"Value of the currently selected radio button."},children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"React elements containing radio buttons."}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/RadioButton/RadioButtonGroup.tsx"],group:"RadioButton"},{filepath:"../src/components/RadioButton/RadioButtonIOS.tsx",title:"RadioButton.IOS",description:'Radio buttons allow the selection a single option from a set.\nThis component follows platform guidelines for iOS.\n\n<div class="screenshots">\n  <figure>\n    <img src="screenshots/radio-enabled.ios.png" />\n    <figcaption>Enabled</figcaption>\n  </figure>\n  <figure>\n    <img src="screenshots/radio-disabled.ios.png" />\n    <figcaption>Disabled</figcaption>\n  </figure>\n</div>',link:"radio-button-ios",data:{description:'Radio buttons allow the selection a single option from a set.\nThis component follows platform guidelines for iOS.\n\n<div class="screenshots">\n  <figure>\n    <img src="screenshots/radio-enabled.ios.png" />\n    <figcaption>Enabled</figcaption>\n  </figure>\n  <figure>\n    <img src="screenshots/radio-disabled.ios.png" />\n    <figcaption>Disabled</figcaption>\n  </figure>\n</div>',displayName:"RadioButton.IOS",methods:[],statics:[],props:{value:{required:!0,tsType:{name:"string"},description:"Value of the radio button"},status:{required:!1,tsType:{name:"union",raw:"'checked' | 'unchecked'",elements:[{name:"literal",value:"'checked'"},{name:"literal",value:"'unchecked'"}]},description:"Status of radio button."},disabled:{required:!1,tsType:{name:"boolean"},description:"Whether radio is disabled."},onPress:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Function to execute on press."},color:{required:!1,tsType:{name:"string"},description:"Custom color for radio."},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/RadioButton/RadioButtonIOS.tsx"],group:"RadioButton"},{filepath:"../src/components/RadioButton/RadioButtonItem.tsx",title:"RadioButton.Item",description:'RadioButton.Item allows you to press the whole row (item) instead of only the RadioButton.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/radio-item.ios.png" />\n    <figcaption>Pressed</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { RadioButton } from \'react-native-paper\';\n\nconst MyComponent = () => {\n  const [value, setValue] = React.useState(\'first\');\n\n  return (\n    <RadioButton.Group onValueChange={value => setValue(value)} value={value}>\n      <RadioButton.Item label="First item" value="first" />\n      <RadioButton.Item label="Second item" value="second" />\n    </RadioButton.Group>\n  );\n};\n\nexport default MyComponent;\n```',link:"radio-button-item",data:{description:'RadioButton.Item allows you to press the whole row (item) instead of only the RadioButton.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/radio-item.ios.png" />\n    <figcaption>Pressed</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { RadioButton } from \'react-native-paper\';\n\nconst MyComponent = () => {\n  const [value, setValue] = React.useState(\'first\');\n\n  return (\n    <RadioButton.Group onValueChange={value => setValue(value)} value={value}>\n      <RadioButton.Item label="First item" value="first" />\n      <RadioButton.Item label="Second item" value="second" />\n    </RadioButton.Group>\n  );\n};\n\nexport default MyComponent;\n```',displayName:"RadioButton.Item",methods:[],statics:[],props:{value:{required:!0,tsType:{name:"string"},description:"Value of the radio button."},label:{required:!0,tsType:{name:"string"},description:"Label to be displayed on the item."},disabled:{required:!1,tsType:{name:"boolean"},description:"Whether radio is disabled."},onPress:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Function to execute on press."},accessibilityLabel:{required:!1,tsType:{name:"string"},description:"Accessibility label for the touchable. This is read by the screen reader when the user taps the touchable."},uncheckedColor:{required:!1,tsType:{name:"string"},description:"Custom color for unchecked radio."},color:{required:!1,tsType:{name:"string"},description:"Custom color for radio."},status:{required:!1,tsType:{name:"union",raw:"'checked' | 'unchecked'",elements:[{name:"literal",value:"'checked'"},{name:"literal",value:"'unchecked'"}]},description:"Status of radio button."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:"Additional styles for container View."},labelStyle:{required:!1,tsType:{name:"StyleProp",elements:[{name:"TextStyle"}],raw:"StyleProp<TextStyle>"},description:"Style that is passed to Label element."},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/RadioButton/RadioButtonItem.tsx"],group:"RadioButton"},{filepath:"../src/components/Searchbar.tsx",title:"Searchbar",description:'Searchbar is a simple input box where users can type search queries.\n\n<div class="screenshots">\n  <img class="medium" src="screenshots/searchbar.png" />\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Searchbar } from \'react-native-paper\';\n\nconst MyComponent = () => {\n  const [searchQuery, setSearchQuery] = React.useState(\'\');\n\n  const onChangeSearch = query => setSearchQuery(query);\n\n  return (\n    <Searchbar\n      placeholder="Search"\n      onChangeText={onChangeSearch}\n      value={searchQuery}\n    />\n  );\n};\n\nexport default MyComponent;\n\n```',link:"searchbar",data:{description:'Searchbar is a simple input box where users can type search queries.\n\n<div class="screenshots">\n  <img class="medium" src="screenshots/searchbar.png" />\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Searchbar } from \'react-native-paper\';\n\nconst MyComponent = () => {\n  const [searchQuery, setSearchQuery] = React.useState(\'\');\n\n  const onChangeSearch = query => setSearchQuery(query);\n\n  return (\n    <Searchbar\n      placeholder="Search"\n      onChangeText={onChangeSearch}\n      value={searchQuery}\n    />\n  );\n};\n\nexport default MyComponent;\n\n```',displayName:"Searchbar",methods:[{name:"setNativeProps",docblock:"@internal",modifiers:[],params:[{name:"args",type:{name:"Object",alias:"Object"}}],returns:null,description:null},{name:"isFocused",docblock:"Returns `true` if the input is currently focused, `false` otherwise.",modifiers:[],params:[],returns:null,description:"Returns `true` if the input is currently focused, `false` otherwise."},{name:"clear",docblock:"Removes all text from the TextInput.",modifiers:[],params:[],returns:null,description:"Removes all text from the TextInput."},{name:"focus",docblock:"Focuses the input.",modifiers:[],params:[],returns:null,description:"Focuses the input."},{name:"blur",docblock:"Removes focus from the input.",modifiers:[],params:[],returns:null,description:"Removes focus from the input."}],statics:[],props:{clearAccessibilityLabel:{required:!1,tsType:{name:"string"},description:"Accessibility label for the button. This is read by the screen reader when the user taps the button.",defaultValue:{value:"'clear'",computed:!1}},searchAccessibilityLabel:{required:!1,tsType:{name:"string"},description:"Accessibility label for the button. This is read by the screen reader when the user taps the button.",defaultValue:{value:"'search'",computed:!1}},placeholder:{required:!1,tsType:{name:"string"},description:"Hint text shown when the input is empty."},value:{required:!0,tsType:{name:"string"},description:"The value of the text input."},icon:{required:!1,tsType:{name:"IconSource"},description:"Icon name for the left icon button (see `onIconPress`)."},onChangeText:{required:!1,tsType:{name:"signature",type:"function",raw:"(query: string) => void",signature:{arguments:[{name:"query",type:{name:"string"}}],return:{name:"void"}}},description:"Callback that is called when the text input's text changes."},onIconPress:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Callback to execute if we want the left icon to act as button."},inputStyle:{required:!1,tsType:{name:"StyleProp",elements:[{name:"TextStyle"}],raw:"StyleProp<TextStyle>"},description:"Set style of the TextInput component inside the searchbar"},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"},iconColor:{required:!1,tsType:{name:"string"},description:"Custom color for icon, default will be derived from theme"},clearIcon:{required:!1,tsType:{name:"IconSource"},description:"Custom icon for clear button, default will be icon close"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Searchbar.tsx"]},{filepath:"../src/components/Snackbar.tsx",title:"Snackbar",description:"Snackbars provide brief feedback about an operation through a message at the bottom of the screen.\nSnackbar by default use onSurface color from theme\n<div class=\"screenshots\">\n  <img class=\"medium\" src=\"screenshots/snackbar.gif\" />\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View, StyleSheet } from 'react-native';\nimport { Button, Snackbar } from 'react-native-paper';\n\nconst MyComponent = () => {\n  const [visible, setVisible] = React.useState(false);\n\n  const onToggleSnackBar = () => setVisible(!visible);\n\n  const onDismissSnackBar = () => setVisible(false);\n\n  return (\n    <View style={styles.container}>\n      <Button onPress={onToggleSnackBar}>{visible ? 'Hide' : 'Show'}</Button>\n      <Snackbar\n        visible={visible}\n        onDismiss={onDismissSnackBar}\n        action={{\n          label: 'Undo',\n          onPress: () => {\n            // Do something\n          },\n        }}>\n        Hey there! I'm a Snackbar.\n      </Snackbar>\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'space-between',\n  },\n});\n\nexport default MyComponent;\n```",link:"snackbar",data:{description:"Snackbars provide brief feedback about an operation through a message at the bottom of the screen.\nSnackbar by default use onSurface color from theme\n<div class=\"screenshots\">\n  <img class=\"medium\" src=\"screenshots/snackbar.gif\" />\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { View, StyleSheet } from 'react-native';\nimport { Button, Snackbar } from 'react-native-paper';\n\nconst MyComponent = () => {\n  const [visible, setVisible] = React.useState(false);\n\n  const onToggleSnackBar = () => setVisible(!visible);\n\n  const onDismissSnackBar = () => setVisible(false);\n\n  return (\n    <View style={styles.container}>\n      <Button onPress={onToggleSnackBar}>{visible ? 'Hide' : 'Show'}</Button>\n      <Snackbar\n        visible={visible}\n        onDismiss={onDismissSnackBar}\n        action={{\n          label: 'Undo',\n          onPress: () => {\n            // Do something\n          },\n        }}>\n        Hey there! I'm a Snackbar.\n      </Snackbar>\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'space-between',\n  },\n});\n\nexport default MyComponent;\n```",displayName:"Snackbar",methods:[],statics:[{name:"DURATION_SHORT",description:"Show the Snackbar for a short duration.",docblock:"Show the Snackbar for a short duration.",type:null},{name:"DURATION_MEDIUM",description:"Show the Snackbar for a medium duration.",docblock:"Show the Snackbar for a medium duration.",type:null},{name:"DURATION_LONG",description:"Show the Snackbar for a long duration.",docblock:"Show the Snackbar for a long duration.",type:null}],props:{visible:{required:!0,tsType:{name:"boolean"},description:"Whether the Snackbar is currently visible."},action:{required:!1,tsType:{name:"signature",type:"object",raw:"{\n  label: string;\n  accessibilityLabel?: string;\n  onPress: () => void;\n}",signature:{properties:[{key:"label",value:{name:"string",required:!0}},{key:"accessibilityLabel",value:{name:"string",required:!1}},{key:"onPress",value:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}},required:!0}}]}},description:"Label and press callback for the action button. It should contain the following properties:\n- `label` - Label of the action button\n- `onPress` - Callback that is called when action button is pressed."},duration:{required:!1,tsType:{name:"number"},description:"The duration for which the Snackbar is shown.",defaultValue:{value:"7000",computed:!1}},onDismiss:{required:!0,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Callback called when Snackbar is dismissed. The `visible` prop needs to be updated when this is called."},children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Text content of the Snackbar."},wrapperStyle:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:"Style for the wrapper of the snackbar"},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""},ref:{required:!1,tsType:{name:"ReactRefObject",raw:"React.RefObject<View>",elements:[{name:"View"}]},description:""},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Snackbar.tsx"]},{filepath:"../src/components/Surface.tsx",title:"Surface",description:'Surface is a basic container that can give depth to an element with elevation shadow.\nOn dark theme with `adaptive` mode, surface is constructed by also placing a semi-transparent white overlay over a component surface.\nSee [Dark Theme](https://callstack.github.io/react-native-paper/theming.html#dark-theme) for more informations.\nOverlay and/or shadow can be applied by specifying the `elevation` property both on Android and iOS.\n\n<div class="screenshots">\n  <img src="screenshots/surface-1.png" />\n  <img src="screenshots/surface-2.png" />\n  <img src="screenshots/surface-3.png" />\n</div>\n\n<div class="screenshots">\n  <img src="screenshots/surface-dark-1.png" />\n  <img src="screenshots/surface-dark-2.png" />\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Surface, Text } from \'react-native-paper\';\nimport { StyleSheet } from \'react-native\';\n\nconst MyComponent = () => (\n  <Surface style={styles.surface}>\n     <Text>Surface</Text>\n  </Surface>\n);\n\nexport default MyComponent;\n\nconst styles = StyleSheet.create({\n  surface: {\n    padding: 8,\n    height: 80,\n    width: 80,\n    alignItems: \'center\',\n    justifyContent: \'center\',\n    elevation: 4,\n  },\n});\n```',link:"surface",data:{description:'Surface is a basic container that can give depth to an element with elevation shadow.\nOn dark theme with `adaptive` mode, surface is constructed by also placing a semi-transparent white overlay over a component surface.\nSee [Dark Theme](https://callstack.github.io/react-native-paper/theming.html#dark-theme) for more informations.\nOverlay and/or shadow can be applied by specifying the `elevation` property both on Android and iOS.\n\n<div class="screenshots">\n  <img src="screenshots/surface-1.png" />\n  <img src="screenshots/surface-2.png" />\n  <img src="screenshots/surface-3.png" />\n</div>\n\n<div class="screenshots">\n  <img src="screenshots/surface-dark-1.png" />\n  <img src="screenshots/surface-dark-2.png" />\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Surface, Text } from \'react-native-paper\';\nimport { StyleSheet } from \'react-native\';\n\nconst MyComponent = () => (\n  <Surface style={styles.surface}>\n     <Text>Surface</Text>\n  </Surface>\n);\n\nexport default MyComponent;\n\nconst styles = StyleSheet.create({\n  surface: {\n    padding: 8,\n    height: 80,\n    width: 80,\n    alignItems: \'center\',\n    justifyContent: \'center\',\n    elevation: 4,\n  },\n});\n```',displayName:"Surface",methods:[],statics:[],props:{children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Content of the `Surface`."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Surface.tsx"]},{filepath:"../src/components/Switch.tsx",title:"Switch",description:'Switch is a visual toggle between two mutually exclusive states — on and off.\n\n<div class="screenshots">\n  <figure>\n    <img src="screenshots/switch-enabled.android.png" />\n    <figcaption>Android (enabled)</figcaption>\n  </figure>\n  <figure>\n    <img src="screenshots/switch-disabled.android.png" />\n    <figcaption>Android (disabled)</figcaption>\n  </figure>\n  <figure>\n    <img src="screenshots/switch-enabled.ios.png" />\n    <figcaption>iOS (enabled)</figcaption>\n  </figure>\n  <figure>\n    <img src="screenshots/switch-disabled.ios.png" />\n    <figcaption>iOS (disabled)</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Switch } from \'react-native-paper\';\n\nconst MyComponent = () => {\n  const [isSwitchOn, setIsSwitchOn] = React.useState(false);\n\n  const onToggleSwitch = () => setIsSwitchOn(!isSwitchOn);\n\n  return <Switch value={isSwitchOn} onValueChange={onToggleSwitch} />;\n};\n\nexport default MyComponent;\n```',link:"switch",data:{description:'Switch is a visual toggle between two mutually exclusive states — on and off.\n\n<div class="screenshots">\n  <figure>\n    <img src="screenshots/switch-enabled.android.png" />\n    <figcaption>Android (enabled)</figcaption>\n  </figure>\n  <figure>\n    <img src="screenshots/switch-disabled.android.png" />\n    <figcaption>Android (disabled)</figcaption>\n  </figure>\n  <figure>\n    <img src="screenshots/switch-enabled.ios.png" />\n    <figcaption>iOS (enabled)</figcaption>\n  </figure>\n  <figure>\n    <img src="screenshots/switch-disabled.ios.png" />\n    <figcaption>iOS (disabled)</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { Switch } from \'react-native-paper\';\n\nconst MyComponent = () => {\n  const [isSwitchOn, setIsSwitchOn] = React.useState(false);\n\n  const onToggleSwitch = () => setIsSwitchOn(!isSwitchOn);\n\n  return <Switch value={isSwitchOn} onValueChange={onToggleSwitch} />;\n};\n\nexport default MyComponent;\n```',displayName:"Switch",methods:[],statics:[],props:{disabled:{required:!1,tsType:{name:"boolean"},description:"Disable toggling the switch."},value:{required:!1,tsType:{name:"boolean"},description:"Value of the switch, true means 'on', false means 'off'."},color:{required:!1,tsType:{name:"string"},description:"Custom color for switch."},onValueChange:{required:!1,tsType:{name:"Function"},description:"Callback called with the new value when it changes."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Switch.tsx"]},{filepath:"../src/components/TextInput/TextInput.tsx",title:"TextInput",description:'A component to allow users to input text.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/textinput-flat.focused.png" />\n    <figcaption>Flat (focused)</figcaption>\n  </figure>\n  <figure>\n    <img class="medium" src="screenshots/textinput-flat.disabled.png" />\n    <figcaption>Flat (disabled)</figcaption>\n  </figure>\n  <figure>\n    <img class="medium" src="screenshots/textinput-outlined.focused.png" />\n    <figcaption>Outlined (focused)</figcaption>\n  </figure>\n  <figure>\n    <img class="medium" src="screenshots/textinput-outlined.disabled.png" />\n    <figcaption>Outlined (disabled)</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { TextInput } from \'react-native-paper\';\n\nconst MyComponent = () => {\n  const [text, setText] = React.useState(\'\');\n\n  return (\n    <TextInput\n      label="Email"\n      value={text}\n      onChangeText={text => setText(text)}\n    />\n  );\n};\n\nexport default MyComponent;\n```\n\n@extends TextInput props https://facebook.github.io/react-native/docs/textinput.html#props',link:"text-input",data:{description:'A component to allow users to input text.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/textinput-flat.focused.png" />\n    <figcaption>Flat (focused)</figcaption>\n  </figure>\n  <figure>\n    <img class="medium" src="screenshots/textinput-flat.disabled.png" />\n    <figcaption>Flat (disabled)</figcaption>\n  </figure>\n  <figure>\n    <img class="medium" src="screenshots/textinput-outlined.focused.png" />\n    <figcaption>Outlined (focused)</figcaption>\n  </figure>\n  <figure>\n    <img class="medium" src="screenshots/textinput-outlined.disabled.png" />\n    <figcaption>Outlined (disabled)</figcaption>\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { TextInput } from \'react-native-paper\';\n\nconst MyComponent = () => {\n  const [text, setText] = React.useState(\'\');\n\n  return (\n    <TextInput\n      label="Email"\n      value={text}\n      onChangeText={text => setText(text)}\n    />\n  );\n};\n\nexport default MyComponent;\n```\n\n@extends TextInput props https://facebook.github.io/react-native/docs/textinput.html#props',displayName:"TextInput",methods:[{name:"setNativeProps",docblock:"@internal",modifiers:[],params:[{name:"args",type:{name:"Object",alias:"Object"}}],returns:null,description:null},{name:"isFocused",docblock:"Returns `true` if the input is currently focused, `false` otherwise.",modifiers:[],params:[],returns:null,description:"Returns `true` if the input is currently focused, `false` otherwise."},{name:"clear",docblock:"Removes all text from the TextInput.",modifiers:[],params:[],returns:null,description:"Removes all text from the TextInput."},{name:"focus",docblock:"Focuses the input.",modifiers:[],params:[],returns:null,description:"Focuses the input."},{name:"blur",docblock:"Removes focus from the input.",modifiers:[],params:[],returns:null,description:"Removes focus from the input."}],statics:[],props:{mode:{required:!1,tsType:{name:"union",raw:"'flat' | 'outlined'",elements:[{name:"literal",value:"'flat'"},{name:"literal",value:"'outlined'"}]},description:"Mode of the TextInput.\n- `flat` - flat input with an underline.\n- `outlined` - input with an outline.\n\nIn `outlined` mode, the background color of the label is derived from `colors.background` in theme or the `backgroundColor` style.\nThis component render TextInputOutlined or TextInputFlat based on that props",defaultValue:{value:"'flat'",computed:!1}},disabled:{required:!1,tsType:{name:"boolean"},description:"If true, user won't be able to interact with the component.",defaultValue:{value:"false",computed:!1}},label:{required:!1,tsType:{name:"string"},description:"The text to use for the floating label."},placeholder:{required:!1,tsType:{name:"string"},description:"Placeholder for the input."},error:{required:!1,tsType:{name:"boolean"},description:"Whether to style the TextInput with error style.",defaultValue:{value:"false",computed:!1}},onChangeText:{required:!1,tsType:{name:"Function"},description:"Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler."},selectionColor:{required:!1,tsType:{name:"string"},description:"Selection color of the input"},underlineColor:{required:!1,tsType:{name:"string"},description:"Underline color of the input."},dense:{required:!1,tsType:{name:"boolean"},description:"Sets min height with densed layout. For `TextInput` in `flat` mode\nheight is `64dp` or in dense layout - `52dp` with label or `40dp` without label.\nFor `TextInput` in `outlined` mode\nheight is `56dp` or in dense layout - `40dp` regardless of label.\nWhen you apply `heigh` prop in style the `dense` prop affects only `paddingVertical` inside `TextInput`",defaultValue:{value:"false",computed:!1}},multiline:{required:!1,tsType:{name:"boolean"},description:"Whether the input can have multiple lines.",defaultValue:{value:"false",computed:!1}},numberOfLines:{required:!1,tsType:{name:"number"},description:"The number of lines to show in the input (Android only)."},onFocus:{required:!1,tsType:{name:"signature",type:"function",raw:"(args: any) => void",signature:{arguments:[{name:"args",type:{name:"any"}}],return:{name:"void"}}},description:"Callback that is called when the text input is focused."},onBlur:{required:!1,tsType:{name:"signature",type:"function",raw:"(args: any) => void",signature:{arguments:[{name:"args",type:{name:"any"}}],return:{name:"void"}}},description:"Callback that is called when the text input is blurred."},render:{required:!1,tsType:{name:"signature",type:"function",raw:"(props: RenderProps) => React.ReactNode",signature:{arguments:[{name:"props",type:{name:"RenderProps"}}],return:{name:"ReactReactNode",raw:"React.ReactNode"}}},description:'Callback to render a custom input component such as `react-native-text-input-mask`\ninstead of the default `TextInput` component from `react-native`.\n\nExample:\n```js\n<TextInput\n  label="Phone number"\n  render={props =>\n    <TextInputMask\n      {...props}\n      mask="+[00] [000] [000] [000]"\n    />\n  }\n/>\n```',defaultValue:{value:"(props: RenderProps) => <NativeTextInput {...props} />",computed:!1}},value:{required:!1,tsType:{name:"string"},description:"Value of the text input."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"TextStyle"}],raw:"StyleProp<TextStyle>"},description:"Pass `fontSize` prop to modify the font size inside `TextInput`.\nPass `height` prop to set `TextInput` height. When `height` is passed,\n`dense` prop will affect only input's `paddingVertical`.\nPass `paddingHorizontal` to modify horizontal padding.\nThis can be used to get MD Guidelines v1 TextInput look."},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"},editable:{defaultValue:{value:"true",computed:!1},required:!1}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/TextInput/TextInput.tsx"]},{filepath:"../src/components/ToggleButton/ToggleButton.tsx",title:"ToggleButton",description:"Toggle buttons can be used to group related options. To emphasize groups of related toggle buttons,\na group should share a common container.\n\n<div class=\"screenshots\">\n  <img class=\"medium\" src=\"screenshots/toggle-button.png\" />\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ToggleButton } from 'react-native-paper';\n\nconst ToggleButtonExample = () => {\n  const [status, setStatus] = React.useState('checked');\n\n  const onButtonToggle = value => {\n    setStatus(status === 'checked' ? 'unchecked' : 'checked');\n  };\n\n  return (\n    <ToggleButton\n      icon=\"bluetooth\"\n      value=\"bluetooth\"\n      status={status}\n      onPress={onButtonToggle}\n    />\n  );\n};\n\nexport default ToggleButtonExample;\n\n```",link:"toggle-button",data:{description:"Toggle buttons can be used to group related options. To emphasize groups of related toggle buttons,\na group should share a common container.\n\n<div class=\"screenshots\">\n  <img class=\"medium\" src=\"screenshots/toggle-button.png\" />\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { ToggleButton } from 'react-native-paper';\n\nconst ToggleButtonExample = () => {\n  const [status, setStatus] = React.useState('checked');\n\n  const onButtonToggle = value => {\n    setStatus(status === 'checked' ? 'unchecked' : 'checked');\n  };\n\n  return (\n    <ToggleButton\n      icon=\"bluetooth\"\n      value=\"bluetooth\"\n      status={status}\n      onPress={onButtonToggle}\n    />\n  );\n};\n\nexport default ToggleButtonExample;\n\n```",displayName:"ToggleButton",methods:[],statics:[{name:"Group",description:null,docblock:null,type:{name:"static"},link:"toggle-button-group.html"},{name:"Row",description:null,docblock:null,type:{name:"static"},link:"toggle-button-row.html"}],props:{icon:{required:!0,tsType:{name:"IconSource"},description:"Icon to display for the `ToggleButton`."},size:{required:!1,tsType:{name:"number"},description:"Size of the icon."},color:{required:!1,tsType:{name:"string"},description:"Custom text color for button."},disabled:{required:!1,tsType:{name:"boolean"},description:"Whether the button is disabled."},accessibilityLabel:{required:!1,tsType:{name:"string"},description:"Accessibility label for the `ToggleButton`. This is read by the screen reader when the user taps the button."},onPress:{required:!1,tsType:{name:"signature",type:"function",raw:"(value?: GestureResponderEvent | string) => void",signature:{arguments:[{name:"value",type:{name:"union",raw:"GestureResponderEvent | string",elements:[{name:"GestureResponderEvent"},{name:"string"}]}}],return:{name:"void"}}},description:"Function to execute on press."},value:{required:!1,tsType:{name:"string"},description:"Value of button."},status:{required:!1,tsType:{name:"union",raw:"'checked' | 'unchecked'",elements:[{name:"literal",value:"'checked'"},{name:"literal",value:"'unchecked'"}]},description:"Status of button."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/ToggleButton/ToggleButton.tsx"]},{filepath:"../src/components/ToggleButton/ToggleButtonGroup.tsx",title:"ToggleButton.Group",description:'Toggle group allows to control a group of toggle buttons.</br>\nIt doesn\'t change the appearance of the toggle buttons. If you want to group them in a row, checkout <a href="/toggle-button-row.html">`ToggleButton.Row`</a>.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/toggle-button-group.gif" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { ToggleButton } from \'react-native-paper\';\n\nconst MyComponent = () => {\n  const [value, setValue] = React.useState(\'left\');\n\n  return (\n    <ToggleButton.Group\n      onValueChange={value => setValue(value)}\n      value={value}>\n      <ToggleButton icon="format-align-left" value="left" />\n      <ToggleButton icon="format-align-right" value="right" />\n    </ToggleButton.Group>\n  );\n};\n\nexport default MyComponent;\n```',link:"toggle-button-group",data:{description:'Toggle group allows to control a group of toggle buttons.</br>\nIt doesn\'t change the appearance of the toggle buttons. If you want to group them in a row, checkout <a href="/toggle-button-row.html">`ToggleButton.Row`</a>.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/toggle-button-group.gif" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { ToggleButton } from \'react-native-paper\';\n\nconst MyComponent = () => {\n  const [value, setValue] = React.useState(\'left\');\n\n  return (\n    <ToggleButton.Group\n      onValueChange={value => setValue(value)}\n      value={value}>\n      <ToggleButton icon="format-align-left" value="left" />\n      <ToggleButton icon="format-align-right" value="right" />\n    </ToggleButton.Group>\n  );\n};\n\nexport default MyComponent;\n```',displayName:"ToggleButton.Group",methods:[],statics:[],props:{onValueChange:{required:!0,tsType:{name:"signature",type:"function",raw:"(value: string) => void",signature:{arguments:[{name:"value",type:{name:"string"}}],return:{name:"void"}}},description:"Function to execute on selection change."},value:{required:!0,tsType:{name:"string"},description:"Value of the currently selected toggle button."},children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"React elements containing toggle buttons."}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/ToggleButton/ToggleButtonGroup.tsx"],group:"ToggleButton"},{filepath:"../src/components/ToggleButton/ToggleButtonRow.tsx",title:"ToggleButton.Row",description:'Toggle button row renders a group of toggle buttons in a row.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/toggle-button-row.gif" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { ToggleButton } from \'react-native-paper\';\n\nconst MyComponent = () => {\n  const [value, setValue] = React.useState(\'left\');\n\n  return (\n    <ToggleButton.Row onValueChange={value => setValue(value)} value={value}>\n      <ToggleButton icon="format-align-left" value="left" />\n      <ToggleButton icon="format-align-right" value="right" />\n    </ToggleButton.Row>\n  );\n};\n\nexport default MyComponent;\n\n```',link:"toggle-button-row",data:{description:'Toggle button row renders a group of toggle buttons in a row.\n\n<div class="screenshots">\n  <figure>\n    <img class="medium" src="screenshots/toggle-button-row.gif" />\n  </figure>\n</div>\n\n## Usage\n```js\nimport * as React from \'react\';\nimport { ToggleButton } from \'react-native-paper\';\n\nconst MyComponent = () => {\n  const [value, setValue] = React.useState(\'left\');\n\n  return (\n    <ToggleButton.Row onValueChange={value => setValue(value)} value={value}>\n      <ToggleButton icon="format-align-left" value="left" />\n      <ToggleButton icon="format-align-right" value="right" />\n    </ToggleButton.Row>\n  );\n};\n\nexport default MyComponent;\n\n```',displayName:"ToggleButton.Row",methods:[],statics:[],props:{onValueChange:{required:!0,tsType:{name:"signature",type:"function",raw:"(value: string) => void",signature:{arguments:[{name:"value",type:{name:"string"}}],return:{name:"void"}}},description:"Function to execute on selection change."},value:{required:!0,tsType:{name:"string"},description:"Value of the currently selected toggle button."},children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"React elements containing toggle buttons."},style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"ViewStyle"}],raw:"StyleProp<ViewStyle>"},description:""}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/ToggleButton/ToggleButtonRow.tsx"],group:"ToggleButton"},{filepath:"../src/components/Typography/Caption.tsx",title:"Caption",description:"Typography component for showing a caption.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/caption.png\" />\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Caption } from 'react-native-paper';\n\nconst MyComponent = () => (\n  <Caption>Caption</Caption>\n);\n\nexport default MyComponent;\n```",link:"caption",data:{description:"Typography component for showing a caption.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/caption.png\" />\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Caption } from 'react-native-paper';\n\nconst MyComponent = () => (\n  <Caption>Caption</Caption>\n);\n\nexport default MyComponent;\n```",displayName:"Caption",methods:[],statics:[],props:{style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"TextStyle"}],raw:"StyleProp<TextStyle>"},description:""},children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Typography/Caption.tsx"],group:"Typography"},{filepath:"../src/components/Typography/Headline.tsx",title:"Headline",description:"Typography component for showing a headline.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/headline.png\" />\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Headline } from 'react-native-paper';\n\nconst MyComponent = () => (\n  <Headline>Headline</Headline>\n);\n\nexport default MyComponent;\n```",link:"headline",data:{description:"Typography component for showing a headline.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/headline.png\" />\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Headline } from 'react-native-paper';\n\nconst MyComponent = () => (\n  <Headline>Headline</Headline>\n);\n\nexport default MyComponent;\n```",displayName:"Headline",methods:[],statics:[],props:{style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"TextStyle"}],raw:"StyleProp<TextStyle>"},description:""},children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Typography/Headline.tsx"],group:"Typography"},{filepath:"../src/components/Typography/Paragraph.tsx",title:"Paragraph",description:"Typography component for showing a paragraph.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/paragraph.png\" />\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Paragraph } from 'react-native-paper';\n\nconst MyComponent = () => (\n  <Paragraph>Paragraph</Paragraph>\n);\n\nexport default MyComponent;\n```",link:"paragraph",data:{description:"Typography component for showing a paragraph.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/paragraph.png\" />\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Paragraph } from 'react-native-paper';\n\nconst MyComponent = () => (\n  <Paragraph>Paragraph</Paragraph>\n);\n\nexport default MyComponent;\n```",displayName:"Paragraph",methods:[],statics:[],props:{children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Typography/Paragraph.tsx"],group:"Typography"},{filepath:"../src/components/Typography/Subheading.tsx",title:"Subheading",description:"Typography component for showing a subheading.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/subheading.png\" />\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Subheading } from 'react-native-paper';\n\nconst MyComponent = () => (\n  <Subheading>Subheading</Subheading>\n);\n\nexport default MyComponent;\n```",link:"subheading",data:{description:"Typography component for showing a subheading.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/subheading.png\" />\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Subheading } from 'react-native-paper';\n\nconst MyComponent = () => (\n  <Subheading>Subheading</Subheading>\n);\n\nexport default MyComponent;\n```",displayName:"Subheading",methods:[],statics:[],props:{style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"TextStyle"}],raw:"StyleProp<TextStyle>"},description:""},children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Typography/Subheading.tsx"],group:"Typography"},{filepath:"../src/components/Typography/Text.tsx",title:"Text",description:"Text component which follows styles from the theme.\n\n@extends Text props https://facebook.github.io/react-native/docs/text.html#props",link:"text",data:{description:"Text component which follows styles from the theme.\n\n@extends Text props https://facebook.github.io/react-native/docs/text.html#props",displayName:"Text",methods:[{name:"setNativeProps",docblock:"@internal",modifiers:[],params:[{name:"args",type:{name:"Object",alias:"Object"}}],returns:null,description:null}],statics:[],props:{style:{required:!1,tsType:{name:"StyleProp",elements:[{name:"TextStyle"}],raw:"StyleProp<TextStyle>"},description:""},theme:{required:!0,tsType:{name:"Theme"},description:"@optional"}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Typography/Text.tsx"],group:"Typography"},{filepath:"../src/components/Typography/Title.tsx",title:"Title",description:"Typography component for showing a title.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/title.png\" />\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Title } from 'react-native-paper';\n\nconst MyComponent = () => (\n  <Title>Title</Title>\n);\n\nexport default MyComponent;\n```",link:"title",data:{description:"Typography component for showing a title.\n\n<div class=\"screenshots\">\n  <img src=\"screenshots/title.png\" />\n</div>\n\n## Usage\n```js\nimport * as React from 'react';\nimport { Title } from 'react-native-paper';\n\nconst MyComponent = () => (\n  <Title>Title</Title>\n);\n\nexport default MyComponent;\n```",displayName:"Title",methods:[],statics:[],props:{children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""}}},type:"component",dependencies:["/Users/drakeoon/Desktop/Dev/projects/react-native-paper/src/components/Typography/Title.tsx"],group:"Typography"}]},"./dist/3.0/app.src.js":function(e,t,n){"use strict";n.r(t);var r=n("./node_modules/react/index.js"),o=n.n(r),i=n("./node_modules/react-dom/index.js"),a=n.n(i),s=n("./node_modules/redbox-react/lib/index.js"),l=n.n(s),c=n("./node_modules/component-docs/dist/templates/App.js"),u=n.n(c),p=n("./dist/3.0/app.data.js"),d=n.n(p),m=(n("./node_modules/component-docs/dist/styles/reset.css"),n("./node_modules/component-docs/dist/styles/globals.css"),n("./assets/styles.css"),document.getElementById("root"));(function(){try{a.a.hydrate(o.a.createElement(u.a,{name:window.__INITIAL_PATH__,data:d.a,github:"https://github.com/callstack/react-native-paper/edit/master/",logo:"images/sidebar-logo.svg",title:"[title] · React Native Paper"}),m)}catch(e){a.a.render(o.a.createElement(l.a,{error:e}),m)}})()},"./node_modules/@emotion/is-prop-valid/dist/is-prop-valid.browser.esm.js":function(e,t,n){"use strict";n.r(t);var r=/^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|default|defer|dir|disabled|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|itemProp|itemScope|itemType|itemID|itemRef|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/,o=function(e){var t={};return function(n){return void 0===t[n]&&(t[n]=e(n)),t[n]}}((function(e){return r.test(e)||111===e.charCodeAt(0)&&110===e.charCodeAt(1)&&e.charCodeAt(2)<91}));t.default=o},"./node_modules/@mdx-js/tag/dist/index.js":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n("./node_modules/@mdx-js/tag/dist/mdx-tag.js");Object.defineProperty(t,"MDXTag",{enumerable:!0,get:function(){return i(r).default}});var o=n("./node_modules/@mdx-js/tag/dist/mdx-provider.js");function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"MDXProvider",{enumerable:!0,get:function(){return i(o).default}})},"./node_modules/@mdx-js/tag/dist/mdx-provider.js":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.withMDXComponents=void 0;var r,o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},i=n("./node_modules/react/index.js"),a=(r=i)&&r.__esModule?r:{default:r};var s=a.default.createContext({}),l=s.Provider,c=s.Consumer;t.withMDXComponents=function(e){return function(t){return a.default.createElement(c,null,(function(n){return a.default.createElement(e,o({},t,{components:t.components||n}))}))}};t.default=function(e){return a.default.createElement(l,{value:e.components},e.children)}},"./node_modules/@mdx-js/tag/dist/mdx-tag.js":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r,o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},i=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),a=n("./node_modules/react/index.js"),s=(r=a)&&r.__esModule?r:{default:r},l=n("./node_modules/@mdx-js/tag/dist/mdx-provider.js");var c={inlineCode:"code",wrapper:"div"},u=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),i(t,[{key:"render",value:function(){var e=this.props,t=e.name,n=e.parentName,r=e.props,i=void 0===r?{}:r,a=e.children,l=e.components,u=void 0===l?{}:l,p=e.Layout,d=e.layoutProps,m=u[n+"."+t]||u[t]||c[t]||t;return p?s.default.createElement(p,o({components:u},d),s.default.createElement(m,i,a)):s.default.createElement(m,i,a)}}]),t}(a.Component);t.default=(0,l.withMDXComponents)(u)},"./node_modules/bail/index.js":function(e,t,n){"use strict";e.exports=function(e){if(e)throw e}},"./node_modules/ccount/index.js":function(e,t,n){"use strict";e.exports=function(e,t){var n,r=0;if(e=String(e),"string"!=typeof t||1!==t.length)throw new Error("Expected character");n=e.indexOf(t);for(;-1!==n;)r++,n=e.indexOf(t,n+1);return r}},"./node_modules/character-entities-html4/index.json":function(e){e.exports=JSON.parse('{"nbsp":" ","iexcl":"¡","cent":"¢","pound":"£","curren":"¤","yen":"¥","brvbar":"¦","sect":"§","uml":"¨","copy":"©","ordf":"ª","laquo":"«","not":"¬","shy":"­","reg":"®","macr":"¯","deg":"°","plusmn":"±","sup2":"²","sup3":"³","acute":"´","micro":"µ","para":"¶","middot":"·","cedil":"¸","sup1":"¹","ordm":"º","raquo":"»","frac14":"¼","frac12":"½","frac34":"¾","iquest":"¿","Agrave":"À","Aacute":"Á","Acirc":"Â","Atilde":"Ã","Auml":"Ä","Aring":"Å","AElig":"Æ","Ccedil":"Ç","Egrave":"È","Eacute":"É","Ecirc":"Ê","Euml":"Ë","Igrave":"Ì","Iacute":"Í","Icirc":"Î","Iuml":"Ï","ETH":"Ð","Ntilde":"Ñ","Ograve":"Ò","Oacute":"Ó","Ocirc":"Ô","Otilde":"Õ","Ouml":"Ö","times":"×","Oslash":"Ø","Ugrave":"Ù","Uacute":"Ú","Ucirc":"Û","Uuml":"Ü","Yacute":"Ý","THORN":"Þ","szlig":"ß","agrave":"à","aacute":"á","acirc":"â","atilde":"ã","auml":"ä","aring":"å","aelig":"æ","ccedil":"ç","egrave":"è","eacute":"é","ecirc":"ê","euml":"ë","igrave":"ì","iacute":"í","icirc":"î","iuml":"ï","eth":"ð","ntilde":"ñ","ograve":"ò","oacute":"ó","ocirc":"ô","otilde":"õ","ouml":"ö","divide":"÷","oslash":"ø","ugrave":"ù","uacute":"ú","ucirc":"û","uuml":"ü","yacute":"ý","thorn":"þ","yuml":"ÿ","fnof":"ƒ","Alpha":"Α","Beta":"Β","Gamma":"Γ","Delta":"Δ","Epsilon":"Ε","Zeta":"Ζ","Eta":"Η","Theta":"Θ","Iota":"Ι","Kappa":"Κ","Lambda":"Λ","Mu":"Μ","Nu":"Ν","Xi":"Ξ","Omicron":"Ο","Pi":"Π","Rho":"Ρ","Sigma":"Σ","Tau":"Τ","Upsilon":"Υ","Phi":"Φ","Chi":"Χ","Psi":"Ψ","Omega":"Ω","alpha":"α","beta":"β","gamma":"γ","delta":"δ","epsilon":"ε","zeta":"ζ","eta":"η","theta":"θ","iota":"ι","kappa":"κ","lambda":"λ","mu":"μ","nu":"ν","xi":"ξ","omicron":"ο","pi":"π","rho":"ρ","sigmaf":"ς","sigma":"σ","tau":"τ","upsilon":"υ","phi":"φ","chi":"χ","psi":"ψ","omega":"ω","thetasym":"ϑ","upsih":"ϒ","piv":"ϖ","bull":"•","hellip":"…","prime":"′","Prime":"″","oline":"‾","frasl":"⁄","weierp":"℘","image":"ℑ","real":"ℜ","trade":"™","alefsym":"ℵ","larr":"←","uarr":"↑","rarr":"→","darr":"↓","harr":"↔","crarr":"↵","lArr":"⇐","uArr":"⇑","rArr":"⇒","dArr":"⇓","hArr":"⇔","forall":"∀","part":"∂","exist":"∃","empty":"∅","nabla":"∇","isin":"∈","notin":"∉","ni":"∋","prod":"∏","sum":"∑","minus":"−","lowast":"∗","radic":"√","prop":"∝","infin":"∞","ang":"∠","and":"∧","or":"∨","cap":"∩","cup":"∪","int":"∫","there4":"∴","sim":"∼","cong":"≅","asymp":"≈","ne":"≠","equiv":"≡","le":"≤","ge":"≥","sub":"⊂","sup":"⊃","nsub":"⊄","sube":"⊆","supe":"⊇","oplus":"⊕","otimes":"⊗","perp":"⊥","sdot":"⋅","lceil":"⌈","rceil":"⌉","lfloor":"⌊","rfloor":"⌋","lang":"〈","rang":"〉","loz":"◊","spades":"♠","clubs":"♣","hearts":"♥","diams":"♦","quot":"\\"","amp":"&","lt":"<","gt":">","OElig":"Œ","oelig":"œ","Scaron":"Š","scaron":"š","Yuml":"Ÿ","circ":"ˆ","tilde":"˜","ensp":" ","emsp":" ","thinsp":" ","zwnj":"‌","zwj":"‍","lrm":"‎","rlm":"‏","ndash":"–","mdash":"—","lsquo":"‘","rsquo":"’","sbquo":"‚","ldquo":"“","rdquo":"”","bdquo":"„","dagger":"†","Dagger":"‡","permil":"‰","lsaquo":"‹","rsaquo":"›","euro":"€"}')},"./node_modules/character-entities-legacy/index.json":function(e){e.exports=JSON.parse('{"AElig":"Æ","AMP":"&","Aacute":"Á","Acirc":"Â","Agrave":"À","Aring":"Å","Atilde":"Ã","Auml":"Ä","COPY":"©","Ccedil":"Ç","ETH":"Ð","Eacute":"É","Ecirc":"Ê","Egrave":"È","Euml":"Ë","GT":">","Iacute":"Í","Icirc":"Î","Igrave":"Ì","Iuml":"Ï","LT":"<","Ntilde":"Ñ","Oacute":"Ó","Ocirc":"Ô","Ograve":"Ò","Oslash":"Ø","Otilde":"Õ","Ouml":"Ö","QUOT":"\\"","REG":"®","THORN":"Þ","Uacute":"Ú","Ucirc":"Û","Ugrave":"Ù","Uuml":"Ü","Yacute":"Ý","aacute":"á","acirc":"â","acute":"´","aelig":"æ","agrave":"à","amp":"&","aring":"å","atilde":"ã","auml":"ä","brvbar":"¦","ccedil":"ç","cedil":"¸","cent":"¢","copy":"©","curren":"¤","deg":"°","divide":"÷","eacute":"é","ecirc":"ê","egrave":"è","eth":"ð","euml":"ë","frac12":"½","frac14":"¼","frac34":"¾","gt":">","iacute":"í","icirc":"î","iexcl":"¡","igrave":"ì","iquest":"¿","iuml":"ï","laquo":"«","lt":"<","macr":"¯","micro":"µ","middot":"·","nbsp":" ","not":"¬","ntilde":"ñ","oacute":"ó","ocirc":"ô","ograve":"ò","ordf":"ª","ordm":"º","oslash":"ø","otilde":"õ","ouml":"ö","para":"¶","plusmn":"±","pound":"£","quot":"\\"","raquo":"»","reg":"®","sect":"§","shy":"­","sup1":"¹","sup2":"²","sup3":"³","szlig":"ß","thorn":"þ","times":"×","uacute":"ú","ucirc":"û","ugrave":"ù","uml":"¨","uuml":"ü","yacute":"ý","yen":"¥","yuml":"ÿ"}')},"./node_modules/character-reference-invalid/index.json":function(e){e.exports=JSON.parse('{"0":"�","128":"€","130":"‚","131":"ƒ","132":"„","133":"…","134":"†","135":"‡","136":"ˆ","137":"‰","138":"Š","139":"‹","140":"Œ","142":"Ž","145":"‘","146":"’","147":"“","148":"”","149":"•","150":"–","151":"—","152":"˜","153":"™","154":"š","155":"›","156":"œ","158":"ž","159":"Ÿ"}')},"./node_modules/color-convert/conversions.js":function(e,t,n){var r=n("./node_modules/color-convert/node_modules/color-name/index.js"),o={};for(var i in r)r.hasOwnProperty(i)&&(o[r[i]]=i);var a=e.exports={rgb:{channels:3,labels:"rgb"},hsl:{channels:3,labels:"hsl"},hsv:{channels:3,labels:"hsv"},hwb:{channels:3,labels:"hwb"},cmyk:{channels:4,labels:"cmyk"},xyz:{channels:3,labels:"xyz"},lab:{channels:3,labels:"lab"},lch:{channels:3,labels:"lch"},hex:{channels:1,labels:["hex"]},keyword:{channels:1,labels:["keyword"]},ansi16:{channels:1,labels:["ansi16"]},ansi256:{channels:1,labels:["ansi256"]},hcg:{channels:3,labels:["h","c","g"]},apple:{channels:3,labels:["r16","g16","b16"]},gray:{channels:1,labels:["gray"]}};for(var s in a)if(a.hasOwnProperty(s)){if(!("channels"in a[s]))throw new Error("missing channels property: "+s);if(!("labels"in a[s]))throw new Error("missing channel labels property: "+s);if(a[s].labels.length!==a[s].channels)throw new Error("channel and label counts mismatch: "+s);var l=a[s].channels,c=a[s].labels;delete a[s].channels,delete a[s].labels,Object.defineProperty(a[s],"channels",{value:l}),Object.defineProperty(a[s],"labels",{value:c})}a.rgb.hsl=function(e){var t,n,r=e[0]/255,o=e[1]/255,i=e[2]/255,a=Math.min(r,o,i),s=Math.max(r,o,i),l=s-a;return s===a?t=0:r===s?t=(o-i)/l:o===s?t=2+(i-r)/l:i===s&&(t=4+(r-o)/l),(t=Math.min(60*t,360))<0&&(t+=360),n=(a+s)/2,[t,100*(s===a?0:n<=.5?l/(s+a):l/(2-s-a)),100*n]},a.rgb.hsv=function(e){var t,n,r,o,i,a=e[0]/255,s=e[1]/255,l=e[2]/255,c=Math.max(a,s,l),u=c-Math.min(a,s,l),p=function(e){return(c-e)/6/u+.5};return 0===u?o=i=0:(i=u/c,t=p(a),n=p(s),r=p(l),a===c?o=r-n:s===c?o=1/3+t-r:l===c&&(o=2/3+n-t),o<0?o+=1:o>1&&(o-=1)),[360*o,100*i,100*c]},a.rgb.hwb=function(e){var t=e[0],n=e[1],r=e[2];return[a.rgb.hsl(e)[0],100*(1/255*Math.min(t,Math.min(n,r))),100*(r=1-1/255*Math.max(t,Math.max(n,r)))]},a.rgb.cmyk=function(e){var t,n=e[0]/255,r=e[1]/255,o=e[2]/255;return[100*((1-n-(t=Math.min(1-n,1-r,1-o)))/(1-t)||0),100*((1-r-t)/(1-t)||0),100*((1-o-t)/(1-t)||0),100*t]},a.rgb.keyword=function(e){var t=o[e];if(t)return t;var n,i,a,s=1/0;for(var l in r)if(r.hasOwnProperty(l)){var c=r[l],u=(i=e,a=c,Math.pow(i[0]-a[0],2)+Math.pow(i[1]-a[1],2)+Math.pow(i[2]-a[2],2));u<s&&(s=u,n=l)}return n},a.keyword.rgb=function(e){return r[e]},a.rgb.xyz=function(e){var t=e[0]/255,n=e[1]/255,r=e[2]/255;return[100*(.4124*(t=t>.04045?Math.pow((t+.055)/1.055,2.4):t/12.92)+.3576*(n=n>.04045?Math.pow((n+.055)/1.055,2.4):n/12.92)+.1805*(r=r>.04045?Math.pow((r+.055)/1.055,2.4):r/12.92)),100*(.2126*t+.7152*n+.0722*r),100*(.0193*t+.1192*n+.9505*r)]},a.rgb.lab=function(e){var t=a.rgb.xyz(e),n=t[0],r=t[1],o=t[2];return r/=100,o/=108.883,n=(n/=95.047)>.008856?Math.pow(n,1/3):7.787*n+16/116,[116*(r=r>.008856?Math.pow(r,1/3):7.787*r+16/116)-16,500*(n-r),200*(r-(o=o>.008856?Math.pow(o,1/3):7.787*o+16/116))]},a.hsl.rgb=function(e){var t,n,r,o,i,a=e[0]/360,s=e[1]/100,l=e[2]/100;if(0===s)return[i=255*l,i,i];t=2*l-(n=l<.5?l*(1+s):l+s-l*s),o=[0,0,0];for(var c=0;c<3;c++)(r=a+1/3*-(c-1))<0&&r++,r>1&&r--,i=6*r<1?t+6*(n-t)*r:2*r<1?n:3*r<2?t+(n-t)*(2/3-r)*6:t,o[c]=255*i;return o},a.hsl.hsv=function(e){var t=e[0],n=e[1]/100,r=e[2]/100,o=n,i=Math.max(r,.01);return n*=(r*=2)<=1?r:2-r,o*=i<=1?i:2-i,[t,100*(0===r?2*o/(i+o):2*n/(r+n)),100*((r+n)/2)]},a.hsv.rgb=function(e){var t=e[0]/60,n=e[1]/100,r=e[2]/100,o=Math.floor(t)%6,i=t-Math.floor(t),a=255*r*(1-n),s=255*r*(1-n*i),l=255*r*(1-n*(1-i));switch(r*=255,o){case 0:return[r,l,a];case 1:return[s,r,a];case 2:return[a,r,l];case 3:return[a,s,r];case 4:return[l,a,r];case 5:return[r,a,s]}},a.hsv.hsl=function(e){var t,n,r,o=e[0],i=e[1]/100,a=e[2]/100,s=Math.max(a,.01);return r=(2-i)*a,n=i*s,[o,100*(n=(n/=(t=(2-i)*s)<=1?t:2-t)||0),100*(r/=2)]},a.hwb.rgb=function(e){var t,n,r,o,i,a,s,l=e[0]/360,c=e[1]/100,u=e[2]/100,p=c+u;switch(p>1&&(c/=p,u/=p),r=6*l-(t=Math.floor(6*l)),0!=(1&t)&&(r=1-r),o=c+r*((n=1-u)-c),t){default:case 6:case 0:i=n,a=o,s=c;break;case 1:i=o,a=n,s=c;break;case 2:i=c,a=n,s=o;break;case 3:i=c,a=o,s=n;break;case 4:i=o,a=c,s=n;break;case 5:i=n,a=c,s=o}return[255*i,255*a,255*s]},a.cmyk.rgb=function(e){var t=e[0]/100,n=e[1]/100,r=e[2]/100,o=e[3]/100;return[255*(1-Math.min(1,t*(1-o)+o)),255*(1-Math.min(1,n*(1-o)+o)),255*(1-Math.min(1,r*(1-o)+o))]},a.xyz.rgb=function(e){var t,n,r,o=e[0]/100,i=e[1]/100,a=e[2]/100;return n=-.9689*o+1.8758*i+.0415*a,r=.0557*o+-.204*i+1.057*a,t=(t=3.2406*o+-1.5372*i+-.4986*a)>.0031308?1.055*Math.pow(t,1/2.4)-.055:12.92*t,n=n>.0031308?1.055*Math.pow(n,1/2.4)-.055:12.92*n,r=r>.0031308?1.055*Math.pow(r,1/2.4)-.055:12.92*r,[255*(t=Math.min(Math.max(0,t),1)),255*(n=Math.min(Math.max(0,n),1)),255*(r=Math.min(Math.max(0,r),1))]},a.xyz.lab=function(e){var t=e[0],n=e[1],r=e[2];return n/=100,r/=108.883,t=(t/=95.047)>.008856?Math.pow(t,1/3):7.787*t+16/116,[116*(n=n>.008856?Math.pow(n,1/3):7.787*n+16/116)-16,500*(t-n),200*(n-(r=r>.008856?Math.pow(r,1/3):7.787*r+16/116))]},a.lab.xyz=function(e){var t,n,r,o=e[0];t=e[1]/500+(n=(o+16)/116),r=n-e[2]/200;var i=Math.pow(n,3),a=Math.pow(t,3),s=Math.pow(r,3);return n=i>.008856?i:(n-16/116)/7.787,t=a>.008856?a:(t-16/116)/7.787,r=s>.008856?s:(r-16/116)/7.787,[t*=95.047,n*=100,r*=108.883]},a.lab.lch=function(e){var t,n=e[0],r=e[1],o=e[2];return(t=360*Math.atan2(o,r)/2/Math.PI)<0&&(t+=360),[n,Math.sqrt(r*r+o*o),t]},a.lch.lab=function(e){var t,n=e[0],r=e[1];return t=e[2]/360*2*Math.PI,[n,r*Math.cos(t),r*Math.sin(t)]},a.rgb.ansi16=function(e){var t=e[0],n=e[1],r=e[2],o=1 in arguments?arguments[1]:a.rgb.hsv(e)[2];if(0===(o=Math.round(o/50)))return 30;var i=30+(Math.round(r/255)<<2|Math.round(n/255)<<1|Math.round(t/255));return 2===o&&(i+=60),i},a.hsv.ansi16=function(e){return a.rgb.ansi16(a.hsv.rgb(e),e[2])},a.rgb.ansi256=function(e){var t=e[0],n=e[1],r=e[2];return t===n&&n===r?t<8?16:t>248?231:Math.round((t-8)/247*24)+232:16+36*Math.round(t/255*5)+6*Math.round(n/255*5)+Math.round(r/255*5)},a.ansi16.rgb=function(e){var t=e%10;if(0===t||7===t)return e>50&&(t+=3.5),[t=t/10.5*255,t,t];var n=.5*(1+~~(e>50));return[(1&t)*n*255,(t>>1&1)*n*255,(t>>2&1)*n*255]},a.ansi256.rgb=function(e){if(e>=232){var t=10*(e-232)+8;return[t,t,t]}var n;return e-=16,[Math.floor(e/36)/5*255,Math.floor((n=e%36)/6)/5*255,n%6/5*255]},a.rgb.hex=function(e){var t=(((255&Math.round(e[0]))<<16)+((255&Math.round(e[1]))<<8)+(255&Math.round(e[2]))).toString(16).toUpperCase();return"000000".substring(t.length)+t},a.hex.rgb=function(e){var t=e.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);if(!t)return[0,0,0];var n=t[0];3===t[0].length&&(n=n.split("").map((function(e){return e+e})).join(""));var r=parseInt(n,16);return[r>>16&255,r>>8&255,255&r]},a.rgb.hcg=function(e){var t,n=e[0]/255,r=e[1]/255,o=e[2]/255,i=Math.max(Math.max(n,r),o),a=Math.min(Math.min(n,r),o),s=i-a;return t=s<=0?0:i===n?(r-o)/s%6:i===r?2+(o-n)/s:4+(n-r)/s+4,t/=6,[360*(t%=1),100*s,100*(s<1?a/(1-s):0)]},a.hsl.hcg=function(e){var t=e[1]/100,n=e[2]/100,r=1,o=0;return(r=n<.5?2*t*n:2*t*(1-n))<1&&(o=(n-.5*r)/(1-r)),[e[0],100*r,100*o]},a.hsv.hcg=function(e){var t=e[1]/100,n=e[2]/100,r=t*n,o=0;return r<1&&(o=(n-r)/(1-r)),[e[0],100*r,100*o]},a.hcg.rgb=function(e){var t=e[0]/360,n=e[1]/100,r=e[2]/100;if(0===n)return[255*r,255*r,255*r];var o,i=[0,0,0],a=t%1*6,s=a%1,l=1-s;switch(Math.floor(a)){case 0:i[0]=1,i[1]=s,i[2]=0;break;case 1:i[0]=l,i[1]=1,i[2]=0;break;case 2:i[0]=0,i[1]=1,i[2]=s;break;case 3:i[0]=0,i[1]=l,i[2]=1;break;case 4:i[0]=s,i[1]=0,i[2]=1;break;default:i[0]=1,i[1]=0,i[2]=l}return o=(1-n)*r,[255*(n*i[0]+o),255*(n*i[1]+o),255*(n*i[2]+o)]},a.hcg.hsv=function(e){var t=e[1]/100,n=t+e[2]/100*(1-t),r=0;return n>0&&(r=t/n),[e[0],100*r,100*n]},a.hcg.hsl=function(e){var t=e[1]/100,n=e[2]/100*(1-t)+.5*t,r=0;return n>0&&n<.5?r=t/(2*n):n>=.5&&n<1&&(r=t/(2*(1-n))),[e[0],100*r,100*n]},a.hcg.hwb=function(e){var t=e[1]/100,n=t+e[2]/100*(1-t);return[e[0],100*(n-t),100*(1-n)]},a.hwb.hcg=function(e){var t=e[1]/100,n=1-e[2]/100,r=n-t,o=0;return r<1&&(o=(n-r)/(1-r)),[e[0],100*r,100*o]},a.apple.rgb=function(e){return[e[0]/65535*255,e[1]/65535*255,e[2]/65535*255]},a.rgb.apple=function(e){return[e[0]/255*65535,e[1]/255*65535,e[2]/255*65535]},a.gray.rgb=function(e){return[e[0]/100*255,e[0]/100*255,e[0]/100*255]},a.gray.hsl=a.gray.hsv=function(e){return[0,0,e[0]]},a.gray.hwb=function(e){return[0,100,e[0]]},a.gray.cmyk=function(e){return[0,0,0,e[0]]},a.gray.lab=function(e){return[e[0],0,0]},a.gray.hex=function(e){var t=255&Math.round(e[0]/100*255),n=((t<<16)+(t<<8)+t).toString(16).toUpperCase();return"000000".substring(n.length)+n},a.rgb.gray=function(e){return[(e[0]+e[1]+e[2])/3/255*100]}},"./node_modules/color-convert/index.js":function(e,t,n){var r=n("./node_modules/color-convert/conversions.js"),o=n("./node_modules/color-convert/route.js"),i={};Object.keys(r).forEach((function(e){i[e]={},Object.defineProperty(i[e],"channels",{value:r[e].channels}),Object.defineProperty(i[e],"labels",{value:r[e].labels});var t=o(e);Object.keys(t).forEach((function(n){var r=t[n];i[e][n]=function(e){var t=function(t){if(null==t)return t;arguments.length>1&&(t=Array.prototype.slice.call(arguments));var n=e(t);if("object"==typeof n)for(var r=n.length,o=0;o<r;o++)n[o]=Math.round(n[o]);return n};return"conversion"in e&&(t.conversion=e.conversion),t}(r),i[e][n].raw=function(e){var t=function(t){return null==t?t:(arguments.length>1&&(t=Array.prototype.slice.call(arguments)),e(t))};return"conversion"in e&&(t.conversion=e.conversion),t}(r)}))})),e.exports=i},"./node_modules/color-convert/node_modules/color-name/index.js":function(e,t,n){"use strict";e.exports={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]}},"./node_modules/color-convert/route.js":function(e,t,n){var r=n("./node_modules/color-convert/conversions.js");function o(e){var t=function(){for(var e={},t=Object.keys(r),n=t.length,o=0;o<n;o++)e[t[o]]={distance:-1,parent:null};return e}(),n=[e];for(t[e].distance=0;n.length;)for(var o=n.pop(),i=Object.keys(r[o]),a=i.length,s=0;s<a;s++){var l=i[s],c=t[l];-1===c.distance&&(c.distance=t[o].distance+1,c.parent=o,n.unshift(l))}return t}function i(e,t){return function(n){return t(e(n))}}function a(e,t){for(var n=[t[e].parent,e],o=r[t[e].parent][e],a=t[e].parent;t[a].parent;)n.unshift(t[a].parent),o=i(r[t[a].parent][a],o),a=t[a].parent;return o.conversion=n,o}e.exports=function(e){for(var t=o(e),n={},r=Object.keys(t),i=r.length,s=0;s<i;s++){var l=r[s];null!==t[l].parent&&(n[l]=a(l,t))}return n}},"./node_modules/color-name/index.js":function(e,t,n){"use strict";e.exports={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]}},"./node_modules/color-string/index.js":function(e,t,n){var r=n("./node_modules/color-name/index.js"),o=n("./node_modules/simple-swizzle/index.js"),i={};for(var a in r)r.hasOwnProperty(a)&&(i[r[a]]=a);var s=e.exports={to:{},get:{}};function l(e,t,n){return Math.min(Math.max(t,e),n)}function c(e){var t=e.toString(16).toUpperCase();return t.length<2?"0"+t:t}s.get=function(e){var t,n;switch(e.substring(0,3).toLowerCase()){case"hsl":t=s.get.hsl(e),n="hsl";break;case"hwb":t=s.get.hwb(e),n="hwb";break;default:t=s.get.rgb(e),n="rgb"}return t?{model:n,value:t}:null},s.get.rgb=function(e){if(!e)return null;var t,n,o,i=[0,0,0,1];if(t=e.match(/^#([a-f0-9]{6})([a-f0-9]{2})?$/i)){for(o=t[2],t=t[1],n=0;n<3;n++){var a=2*n;i[n]=parseInt(t.slice(a,a+2),16)}o&&(i[3]=Math.round(parseInt(o,16)/255*100)/100)}else if(t=e.match(/^#([a-f0-9]{3,4})$/i)){for(o=(t=t[1])[3],n=0;n<3;n++)i[n]=parseInt(t[n]+t[n],16);o&&(i[3]=Math.round(parseInt(o+o,16)/255*100)/100)}else if(t=e.match(/^rgba?\(\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/)){for(n=0;n<3;n++)i[n]=parseInt(t[n+1],0);t[4]&&(i[3]=parseFloat(t[4]))}else{if(!(t=e.match(/^rgba?\(\s*([+-]?[\d\.]+)\%\s*,\s*([+-]?[\d\.]+)\%\s*,\s*([+-]?[\d\.]+)\%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/)))return(t=e.match(/(\D+)/))?"transparent"===t[1]?[0,0,0,0]:(i=r[t[1]])?(i[3]=1,i):null:null;for(n=0;n<3;n++)i[n]=Math.round(2.55*parseFloat(t[n+1]));t[4]&&(i[3]=parseFloat(t[4]))}for(n=0;n<3;n++)i[n]=l(i[n],0,255);return i[3]=l(i[3],0,1),i},s.get.hsl=function(e){if(!e)return null;var t=e.match(/^hsla?\(\s*([+-]?(?:\d*\.)?\d+)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/);if(t){var n=parseFloat(t[4]);return[(parseFloat(t[1])+360)%360,l(parseFloat(t[2]),0,100),l(parseFloat(t[3]),0,100),l(isNaN(n)?1:n,0,1)]}return null},s.get.hwb=function(e){if(!e)return null;var t=e.match(/^hwb\(\s*([+-]?\d*[\.]?\d+)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/);if(t){var n=parseFloat(t[4]);return[(parseFloat(t[1])%360+360)%360,l(parseFloat(t[2]),0,100),l(parseFloat(t[3]),0,100),l(isNaN(n)?1:n,0,1)]}return null},s.to.hex=function(){var e=o(arguments);return"#"+c(e[0])+c(e[1])+c(e[2])+(e[3]<1?c(Math.round(255*e[3])):"")},s.to.rgb=function(){var e=o(arguments);return e.length<4||1===e[3]?"rgb("+Math.round(e[0])+", "+Math.round(e[1])+", "+Math.round(e[2])+")":"rgba("+Math.round(e[0])+", "+Math.round(e[1])+", "+Math.round(e[2])+", "+e[3]+")"},s.to.rgb.percent=function(){var e=o(arguments),t=Math.round(e[0]/255*100),n=Math.round(e[1]/255*100),r=Math.round(e[2]/255*100);return e.length<4||1===e[3]?"rgb("+t+"%, "+n+"%, "+r+"%)":"rgba("+t+"%, "+n+"%, "+r+"%, "+e[3]+")"},s.to.hsl=function(){var e=o(arguments);return e.length<4||1===e[3]?"hsl("+e[0]+", "+e[1]+"%, "+e[2]+"%)":"hsla("+e[0]+", "+e[1]+"%, "+e[2]+"%, "+e[3]+")"},s.to.hwb=function(){var e=o(arguments),t="";return e.length>=4&&1!==e[3]&&(t=", "+e[3]),"hwb("+e[0]+", "+e[1]+"%, "+e[2]+"%"+t+")"},s.to.keyword=function(e){return i[e.slice(0,3)]}},"./node_modules/color/index.js":function(e,t,n){"use strict";var r=n("./node_modules/color-string/index.js"),o=n("./node_modules/color-convert/index.js"),i=[].slice,a=["keyword","gray","hex"],s={};Object.keys(o).forEach((function(e){s[i.call(o[e].labels).sort().join("")]=e}));var l={};function c(e,t){if(!(this instanceof c))return new c(e,t);if(t&&t in a&&(t=null),t&&!(t in o))throw new Error("Unknown model: "+t);var n,u;if(null==e)this.model="rgb",this.color=[0,0,0],this.valpha=1;else if(e instanceof c)this.model=e.model,this.color=e.color.slice(),this.valpha=e.valpha;else if("string"==typeof e){var p=r.get(e);if(null===p)throw new Error("Unable to parse color from string: "+e);this.model=p.model,u=o[this.model].channels,this.color=p.value.slice(0,u),this.valpha="number"==typeof p.value[u]?p.value[u]:1}else if(e.length){this.model=t||"rgb",u=o[this.model].channels;var d=i.call(e,0,u);this.color=m(d,u),this.valpha="number"==typeof e[u]?e[u]:1}else if("number"==typeof e)e&=16777215,this.model="rgb",this.color=[e>>16&255,e>>8&255,255&e],this.valpha=1;else{this.valpha=1;var f=Object.keys(e);"alpha"in e&&(f.splice(f.indexOf("alpha"),1),this.valpha="number"==typeof e.alpha?e.alpha:0);var h=f.sort().join("");if(!(h in s))throw new Error("Unable to parse color from object: "+JSON.stringify(e));this.model=s[h];var g=o[this.model].labels,y=[];for(n=0;n<g.length;n++)y.push(e[g[n]]);this.color=m(y)}if(l[this.model])for(u=o[this.model].channels,n=0;n<u;n++){var b=l[this.model][n];b&&(this.color[n]=b(this.color[n]))}this.valpha=Math.max(0,Math.min(1,this.valpha)),Object.freeze&&Object.freeze(this)}function u(e,t,n){return(e=Array.isArray(e)?e:[e]).forEach((function(e){(l[e]||(l[e]=[]))[t]=n})),e=e[0],function(r){var o;return arguments.length?(n&&(r=n(r)),(o=this[e]()).color[t]=r,o):(o=this[e]().color[t],n&&(o=n(o)),o)}}function p(e){return function(t){return Math.max(0,Math.min(e,t))}}function d(e){return Array.isArray(e)?e:[e]}function m(e,t){for(var n=0;n<t;n++)"number"!=typeof e[n]&&(e[n]=0);return e}c.prototype={toString:function(){return this.string()},toJSON:function(){return this[this.model]()},string:function(e){var t=this.model in r.to?this:this.rgb(),n=1===(t=t.round("number"==typeof e?e:1)).valpha?t.color:t.color.concat(this.valpha);return r.to[t.model](n)},percentString:function(e){var t=this.rgb().round("number"==typeof e?e:1),n=1===t.valpha?t.color:t.color.concat(this.valpha);return r.to.rgb.percent(n)},array:function(){return 1===this.valpha?this.color.slice():this.color.concat(this.valpha)},object:function(){for(var e={},t=o[this.model].channels,n=o[this.model].labels,r=0;r<t;r++)e[n[r]]=this.color[r];return 1!==this.valpha&&(e.alpha=this.valpha),e},unitArray:function(){var e=this.rgb().color;return e[0]/=255,e[1]/=255,e[2]/=255,1!==this.valpha&&e.push(this.valpha),e},unitObject:function(){var e=this.rgb().object();return e.r/=255,e.g/=255,e.b/=255,1!==this.valpha&&(e.alpha=this.valpha),e},round:function(e){return e=Math.max(e||0,0),new c(this.color.map(function(e){return function(t){return function(e,t){return Number(e.toFixed(t))}(t,e)}}(e)).concat(this.valpha),this.model)},alpha:function(e){return arguments.length?new c(this.color.concat(Math.max(0,Math.min(1,e))),this.model):this.valpha},red:u("rgb",0,p(255)),green:u("rgb",1,p(255)),blue:u("rgb",2,p(255)),hue:u(["hsl","hsv","hsl","hwb","hcg"],0,(function(e){return(e%360+360)%360})),saturationl:u("hsl",1,p(100)),lightness:u("hsl",2,p(100)),saturationv:u("hsv",1,p(100)),value:u("hsv",2,p(100)),chroma:u("hcg",1,p(100)),gray:u("hcg",2,p(100)),white:u("hwb",1,p(100)),wblack:u("hwb",2,p(100)),cyan:u("cmyk",0,p(100)),magenta:u("cmyk",1,p(100)),yellow:u("cmyk",2,p(100)),black:u("cmyk",3,p(100)),x:u("xyz",0,p(100)),y:u("xyz",1,p(100)),z:u("xyz",2,p(100)),l:u("lab",0,p(100)),a:u("lab",1),b:u("lab",2),keyword:function(e){return arguments.length?new c(e):o[this.model].keyword(this.color)},hex:function(e){return arguments.length?new c(e):r.to.hex(this.rgb().round().color)},rgbNumber:function(){var e=this.rgb().color;return(255&e[0])<<16|(255&e[1])<<8|255&e[2]},luminosity:function(){for(var e=this.rgb().color,t=[],n=0;n<e.length;n++){var r=e[n]/255;t[n]=r<=.03928?r/12.92:Math.pow((r+.055)/1.055,2.4)}return.2126*t[0]+.7152*t[1]+.0722*t[2]},contrast:function(e){var t=this.luminosity(),n=e.luminosity();return t>n?(t+.05)/(n+.05):(n+.05)/(t+.05)},level:function(e){var t=this.contrast(e);return t>=7.1?"AAA":t>=4.5?"AA":""},isDark:function(){var e=this.rgb().color;return(299*e[0]+587*e[1]+114*e[2])/1e3<128},isLight:function(){return!this.isDark()},negate:function(){for(var e=this.rgb(),t=0;t<3;t++)e.color[t]=255-e.color[t];return e},lighten:function(e){var t=this.hsl();return t.color[2]+=t.color[2]*e,t},darken:function(e){var t=this.hsl();return t.color[2]-=t.color[2]*e,t},saturate:function(e){var t=this.hsl();return t.color[1]+=t.color[1]*e,t},desaturate:function(e){var t=this.hsl();return t.color[1]-=t.color[1]*e,t},whiten:function(e){var t=this.hwb();return t.color[1]+=t.color[1]*e,t},blacken:function(e){var t=this.hwb();return t.color[2]+=t.color[2]*e,t},grayscale:function(){var e=this.rgb().color,t=.3*e[0]+.59*e[1]+.11*e[2];return c.rgb(t,t,t)},fade:function(e){return this.alpha(this.valpha-this.valpha*e)},opaquer:function(e){return this.alpha(this.valpha+this.valpha*e)},rotate:function(e){var t=this.hsl(),n=t.color[0];return n=(n=(n+e)%360)<0?360+n:n,t.color[0]=n,t},mix:function(e,t){if(!e||!e.rgb)throw new Error('Argument to "mix" was not a Color instance, but rather an instance of '+typeof e);var n=e.rgb(),r=this.rgb(),o=void 0===t?.5:t,i=2*o-1,a=n.alpha()-r.alpha(),s=((i*a==-1?i:(i+a)/(1+i*a))+1)/2,l=1-s;return c.rgb(s*n.red()+l*r.red(),s*n.green()+l*r.green(),s*n.blue()+l*r.blue(),n.alpha()*o+r.alpha()*(1-o))}},Object.keys(o).forEach((function(e){if(-1===a.indexOf(e)){var t=o[e].channels;c.prototype[e]=function(){if(this.model===e)return new c(this);if(arguments.length)return new c(arguments,e);var n="number"==typeof arguments[t]?t:this.valpha;return new c(d(o[this.model][e].raw(this.color)).concat(n),e)},c[e]=function(n){return"number"==typeof n&&(n=m(i.call(arguments),t)),new c(n,e)}}})),e.exports=c},"./node_modules/comma-separated-tokens/index.js":function(e,t,n){"use strict";t.parse=function(e){var t,n=[],o=String(e||i),a=o.indexOf(r),s=0,l=!1;for(;!l;)-1===a&&(a=o.length,l=!0),!(t=o.slice(s,a).trim())&&l||n.push(t),s=a+1,a=o.indexOf(r,s);return n},t.stringify=function(e,t){var n=t||{},a=!1===n.padLeft?i:o,s=n.padRight?o:i;e[e.length-1]===i&&(e=e.concat(i));return e.join(s+r+a).trim()};var r=",",o=" ",i=""},"./node_modules/component-docs/components.js":function(e,t,n){t.Link=n("./node_modules/component-docs/dist/templates/Link.js").default,t.ThemeToggle=n("./node_modules/component-docs/dist/templates/ThemeToggle.js").default,t.Header=n("./node_modules/component-docs/dist/templates/Header.js").default},"./node_modules/component-docs/dist/configs/santize-config.json":function(e){e.exports=JSON.parse('{"allowedTags":["h1","h2","h3","h4","h5","h6","h7","h8","br","b","i","strong","em","a","pre","code","img","figure","figcaption","tt","div","ins","del","sup","sub","p","ol","ul","table","thead","tbody","tfoot","blockquote","dl","dt","dd","kbd","q","samp","var","hr","ruby","rt","rp","li","tr","td","th","s","strike","summary","details","span","svg","path"],"allowedAttributes":{"a":["href","target"],"img":["src","longDesc"],"div":["itemScope","itemType"],"blockquote":["cite"],"del":["cite"],"ins":["cite"],"q":["cite"],"svg":["viewBox"],"path":["fill-rule","d"],"*":["area-hidden","abbr","accept","acceptCharset","accessKey","action","align","alt","axis","border","cellPadding","cellSpacing","char","charoff","charSet","checked","clear","cols","colSpan","color","compact","coords","dateTime","dir","disabled","encType","htmlFor","frame","headers","height","hrefLang","hspace","isMap","id","label","lang","maxLength","media","method","multiple","name","nohref","noshade","nowrap","open","prompt","readOnly","rel","rev","rows","rowSpan","rules","scope","selected","shape","size","span","start","summary","tabIndex","target","title","type","useMap","valign","value","vspace","width","itemProp","class"]},"selfClosing":["img","br","hr","area","base","basefont","input","link","meta"],"allowedSchemes":["http","https"],"allowedSchemesByTag":{"a":["http","https","mailto"]},"allowedSchemesAppliedToAttributes":["href","src","cite"],"allowProtocolRelative":true,"allowedIframeHostnames":["www.youtube.com","player.vimeo.com"]}')},"./node_modules/component-docs/dist/css/src/templates/Content.css":function(e,t,n){},"./node_modules/component-docs/dist/css/src/templates/Documentation.css":function(e,t,n){},"./node_modules/component-docs/dist/css/src/templates/EditButton.css":function(e,t,n){},"./node_modules/component-docs/dist/css/src/templates/Header.css":function(e,t,n){},"./node_modules/component-docs/dist/css/src/templates/Layout.css":function(e,t,n){},"./node_modules/component-docs/dist/css/src/templates/Sidebar.css":function(e,t,n){},"./node_modules/component-docs/dist/css/src/templates/ThemeToggle.css":function(e,t,n){},"./node_modules/component-docs/dist/styles/globals.css":function(e,t,n){},"./node_modules/component-docs/dist/styles/reset.css":function(e,t,n){},"./node_modules/component-docs/dist/templates/App.js":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function({path:e,data:t,github:n,logo:i,title:a}){const s=f(t,n,i);return r.createElement(o.default,{path:e,routes:s,title:a})};var r=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=p();if(t&&t.has(e))return t.get(e);var n={},r=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var o in e)if(Object.prototype.hasOwnProperty.call(e,o)){var i=r?Object.getOwnPropertyDescriptor(e,o):null;i&&(i.get||i.set)?Object.defineProperty(n,o,i):n[o]=e[o]}n.default=e,t&&t.set(e,n);return n}(n("./node_modules/react/index.js")),o=u(n("./node_modules/component-docs/dist/templates/Router.js")),i=u(n("./node_modules/component-docs/dist/templates/Documentation.js")),a=u(n("./node_modules/component-docs/dist/templates/Markdown.js")),s=u(n("./node_modules/component-docs/dist/templates/Layout.js")),l=u(n("./node_modules/component-docs/dist/templates/Sidebar.js")),c=u(n("./node_modules/component-docs/dist/templates/Content.js"));function u(e){return e&&e.__esModule?e:{default:e}}function p(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return p=function(){return e},e}function d(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function m(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const f=(e,t,n)=>{return e.filter(e=>"separator"!==e.type).map(o=>{let u;switch(o.type){case"md":{const t=o.data;u=o=>r.createElement(s.default,null,r.createElement(l.default,{path:o.path,data:e}),r.createElement(c.default,{logo:n},r.createElement(a.default,{source:t})))}break;case"component":{const a=o.data;u=c=>r.createElement(s.default,null,r.createElement(l.default,{path:c.path,data:e}),r.createElement(i.default,{name:o.title,info:a,github:t,logo:n,filepath:o.filepath}))}break;case"custom":{const t=o.data;u=n=>r.createElement(s.default,null,r.createElement(l.default,{path:n.path,data:e}),r.createElement(t,null))}break;default:throw new Error(`Unknown type ${o.type}`)}return function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?d(Object(n),!0).forEach((function(t){m(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):d(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({},o,{render:u})})}},"./node_modules/component-docs/dist/templates/Content.js":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function({logo:e,children:t}){return o.createElement(l,null,o.createElement(a.default,{logo:e}),o.createElement(c,null,t))};var r,o=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=s();if(t&&t.has(e))return t.get(e);var n={},r=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var o in e)if(Object.prototype.hasOwnProperty.call(e,o)){var i=r?Object.getOwnPropertyDescriptor(e,o):null;i&&(i.get||i.set)?Object.defineProperty(n,o,i):n[o]=e[o]}n.default=e,t&&t.set(e,n);return n}(n("./node_modules/react/index.js")),i=n("./node_modules/component-docs/node_modules/linaria/react.js"),a=(r=n("./node_modules/component-docs/dist/templates/Header.js"))&&r.__esModule?r:{default:r};function s(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return s=function(){return e},e}const l=(0,i.styled)("main")({name:"Container",class:"Container_c119hgic"}),c=(0,i.styled)("div")({name:"Inner",class:"Inner_ir6lat6"});n("./node_modules/component-docs/dist/css/src/templates/Content.css")},"./node_modules/component-docs/dist/templates/Documentation.js":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function({name:e,info:t,logo:n,github:o,filepath:a}){const l=[],c=t.description.split("\n").filter(e=>{if(e.startsWith(w)){const t=e.split(" ").slice(1),n=t.pop();return l.push({name:t.join(" "),link:n}),!1}return!0}).join("\n"),p=t.props||{},m=Object.keys(p).filter(e=>!x(p[e],T)),g=t.methods.filter(e=>!(e.name.startsWith("_")||e.modifiers.includes("static")||null==e.docblock||x(e,T))),y=t.statics.map(e=>({type:"property",info:e})).concat(t.methods.filter(e=>e.modifiers.includes("static")&&null!=e.docblock&&!_.includes(e.name)).map(e=>({type:"method",info:d({},e,{type:{raw:"Function"}})}))).filter(e=>!(e.info.name.startsWith("_")||x(e.info,T)));return r.createElement(i.default,{logo:n},r.createElement(f,null,e),r.createElement(h,{source:c,options:{linkify:!0}}),m.length||l.length?r.createElement(r.Fragment,null,r.createElement("h2",null,"Props"),m.map(e=>r.createElement(S,u({key:e,name:e},p[e]))),l.map(e=>r.createElement(v,{key:e.name,href:e.link},r.createElement("code",null,"...",e.name)))):null,g.length?r.createElement(r.Fragment,null,r.createElement("h2",null,"Methods"),r.createElement("p",null,"These methods can be accessed on the ",r.createElement("code",null,"ref")," of the component, e.g."," ",r.createElement("code",null,E(e),"Ref.",g[0].name,"(...args)"),"."),g.map(e=>r.createElement(C,u({key:e.name,type:null},e)))):null,y.length?r.createElement(r.Fragment,null,r.createElement("h2",null,"Static properties"),r.createElement("p",null,"These properties can be accessed on ",r.createElement("code",null,e)," by using the dot notation, e.g."," ",r.createElement("code",null,e,".",y[0].info.name),"."),y.map(e=>"method"===e.type?r.createElement(C,u({key:e.info.name},e.info)):r.createElement(A,u({key:e.info.name},e.info)))):null,r.createElement(s.default,{github:o,filepath:a}))};var r=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=c();if(t&&t.has(e))return t.get(e);var n={},r=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var o in e)if(Object.prototype.hasOwnProperty.call(e,o)){var i=r?Object.getOwnPropertyDescriptor(e,o):null;i&&(i.get||i.set)?Object.defineProperty(n,o,i):n[o]=e[o]}n.default=e,t&&t.set(e,n);return n}(n("./node_modules/react/index.js")),o=n("./node_modules/component-docs/node_modules/linaria/react.js"),i=l(n("./node_modules/component-docs/dist/templates/Content.js")),a=l(n("./node_modules/component-docs/dist/templates/Markdown.js")),s=l(n("./node_modules/component-docs/dist/templates/EditButton.js"));function l(e){return e&&e.__esModule?e:{default:e}}function c(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return c=function(){return e},e}function u(){return(u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function p(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function d(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?p(Object(n),!0).forEach((function(t){m(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):p(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function m(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const f=(0,o.styled)("h1")({name:"Title",class:"Title_t1dytcq5"}),h=(0,o.styled)(a.default)({name:"MarkdownContent",class:"MarkdownContent_m3ctz2y"}),g=(0,o.styled)("div")({name:"PropInfo",class:"PropInfo_p1eats2g"}),y=(0,o.styled)("a")({name:"PropLabel",class:"PropLabel_psi127e"}),b=(0,o.styled)("div")({name:"PropItem",class:"PropItem_pwdtv5j"}),v=(0,o.styled)("a")({name:"RestPropsLabel",class:"RestPropsLabel_r5pwgte"}),_=["getDerivedStateFromProps"],T="@internal",w="@extends",k=e=>e.raw||e.name||"",x=(e,t)=>e.description?e.description.startsWith(t):!!e.docblock&&e.docblock.startsWith(t),E=e=>e.replace(/^[A-Z]+/g,e=>e.toLowerCase()),S=({name:e,description:t,flowType:n,tsType:o,type:i,required:a,defaultValue:s})=>{const l=a&&null==s&&!t.startsWith("@optional"),c=n?k(n):o?k(o):i?k(i):null;return r.createElement(g,null,r.createElement(y,{name:e,href:`#${e}`},r.createElement("code",null,e),l?" (required)":""),c&&"unknown"!==c?r.createElement(b,null,r.createElement("span",null,"Type: "),r.createElement("code",null,c)):null,s?r.createElement(b,null,r.createElement("span",null,"Default value: "),r.createElement("code",null,s.value)):null,t?r.createElement(b,{as:h,source:t.replace(/^@optional/,"").trim()}):null)},C=({name:e,description:t,type:n,params:o,returns:i})=>{const a=n?k(n):null;return r.createElement(g,{key:e},r.createElement(y,{name:e,href:`#${e}`},r.createElement("code",null,e)),a&&"unknown"!==a?r.createElement(b,null,r.createElement("span",null,"Type: "),r.createElement("code",null,a)):null,o.length?r.createElement(b,null,r.createElement("span",null,"Params: "),r.createElement("code",null,o.map(e=>`${e.name}${e.type?`: ${k(e.type)}`:""}`).join(", "))):null,i&&i.type?r.createElement(b,null,r.createElement("span",null,"Returns: "),r.createElement("code",null,k(i.type))):null,t?r.createElement(b,{as:h,source:t.trim()}):null)},A=({name:e,description:t,type:n,value:o,link:i})=>{const a=n?k(n):null;return r.createElement(g,null,r.createElement(y,{name:e,href:`${"static"===a&&i?`${i}`:`#${e}`}`},r.createElement("code",null,e)),a&&"unknown"!==a?r.createElement(b,null,r.createElement("span",null,"Type: "),r.createElement("code",null,a)):null,"string"==typeof o||"number"==typeof o?r.createElement(b,null,r.createElement("span",null,"Value: "),r.createElement("code",null,o)):null,t?r.createElement(b,{as:h,source:t.replace(/^@optional/,"").trim()}):null)};n("./node_modules/component-docs/dist/css/src/templates/Documentation.css")},"./node_modules/component-docs/dist/templates/EditButton.js":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function({github:e,filepath:t}){return e?r.createElement(i,{target:"_blank",href:`${e}/${t}`},r.createElement("svg",{width:"16px",height:"16px",viewBox:"0 0 18 20"},r.createElement("path",{fill:"none",transform:"translate(2.000000, 2.000000)",d:"M1.5,14.5363545 L1.5,11.3292488 L9.36649374,3.4627884 L12.5735698,6.66982438 L4.7071064,14.5363545 L1.5,14.5363545 Z M14.1535993,5.08986045 L12.5666426,6.67673666 L9.35957774,3.46971186 L10.9465031,1.88274634 C11.4083588,1.42089061 12.1250348,1.42089061 12.5868905,1.88274634 L14.1536082,3.44946407 C14.6154639,3.91131979 14.6154639,4.62799577 14.1536082,5.08985149 Z"})),"Edit this page"):null};var r=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=o();if(t&&t.has(e))return t.get(e);var n={},r=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in e)if(Object.prototype.hasOwnProperty.call(e,i)){var a=r?Object.getOwnPropertyDescriptor(e,i):null;a&&(a.get||a.set)?Object.defineProperty(n,i,a):n[i]=e[i]}n.default=e,t&&t.set(e,n);return n}(n("./node_modules/react/index.js"));function o(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return o=function(){return e},e}const i=(0,n("./node_modules/component-docs/node_modules/linaria/react.js").styled)("a")({name:"EditButtonContainer",class:"EditButtonContainer_emlbhqm"});n("./node_modules/component-docs/dist/css/src/templates/EditButton.css")},"./node_modules/component-docs/dist/templates/Header.js":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function({logo:e}){return o.createElement(l,null,o.createElement(c,null,e?o.createElement(u,{src:e,alt:"Logo"}):null),o.createElement(a.default,null))};var r,o=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=s();if(t&&t.has(e))return t.get(e);var n={},r=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var o in e)if(Object.prototype.hasOwnProperty.call(e,o)){var i=r?Object.getOwnPropertyDescriptor(e,o):null;i&&(i.get||i.set)?Object.defineProperty(n,o,i):n[o]=e[o]}n.default=e,t&&t.set(e,n);return n}(n("./node_modules/react/index.js")),i=n("./node_modules/component-docs/node_modules/linaria/react.js"),a=(r=n("./node_modules/component-docs/dist/templates/ThemeToggle.js"))&&r.__esModule?r:{default:r};function s(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return s=function(){return e},e}const l=(0,i.styled)("div")({name:"HeaderWrapper",class:"HeaderWrapper_h1b6fqjq"}),c=(0,i.styled)("div")({name:"LogoContainer",class:"LogoContainer_lz0sul8"}),u=(0,i.styled)("img")({name:"LogoImage",class:"LogoImage_l1tdaxxn"});n("./node_modules/component-docs/dist/css/src/templates/Header.css")},"./node_modules/component-docs/dist/templates/Layout.js":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=(0,n("./node_modules/component-docs/node_modules/linaria/react.js").styled)("div")({name:"Layout",class:"Layout_lugqar2"});t.default=r,n("./node_modules/component-docs/dist/css/src/templates/Layout.css")},"./node_modules/component-docs/dist/templates/Link.js":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=i();if(t&&t.has(e))return t.get(e);var n={},r=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var o in e)if(Object.prototype.hasOwnProperty.call(e,o)){var a=r?Object.getOwnPropertyDescriptor(e,o):null;a&&(a.get||a.set)?Object.defineProperty(n,o,a):n[o]=e[o]}n.default=e,t&&t.set(e,n);return n}(n("./node_modules/react/index.js")),o=n("./node_modules/component-docs/dist/templates/Router.js");function i(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return i=function(){return e},e}function a(){return(a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function s(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}class c extends r.Component{constructor(...e){super(...e),l(this,"props",void 0),l(this,"_handleClick",e=>{if(this.props.onClick&&this.props.onClick(e),e.ctrlKey||e.shiftKey||e.altKey||e.metaKey)return;if(e.preventDefault(),!this.props.to)return;const t=`${this.props.to}.html`;try{if(!o.history)throw new Error("");o.history.push(t)}catch(e){if(!e.message.startsWith("Failed to execute 'pushState' on 'History'"))throw e;const{pathname:n}=window.location;if(n.endsWith("/"))window.location.pathname=`${n}/${t}`;else{const e=n.split("/");e.pop(),window.location.pathname=`${e.join("/")}/${t}`}}})}render(){const e=this.props,{to:t}=e,n=s(e,["to"]);return r.default.createElement("a",a({},n,{href:t?`${t}.html`:"",onClick:this._handleClick}))}}t.default=c},"./node_modules/component-docs/dist/templates/Markdown.js":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=u();if(t&&t.has(e))return t.get(e);var n={},r=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var o in e)if(Object.prototype.hasOwnProperty.call(e,o)){var i=r?Object.getOwnPropertyDescriptor(e,o):null;i&&(i.get||i.set)?Object.defineProperty(n,o,i):n[o]=e[o]}n.default=e,t&&t.set(e,n);return n}(n("./node_modules/react/index.js")),o=c(n("./node_modules/marked/src/marked.js")),i=c(n("./node_modules/sanitize-html/dist/sanitize-html.js")),a=c(n("./node_modules/escape-html/index.js")),s=c(n("./node_modules/rehype/index.js")),l=c(n("./node_modules/component-docs/dist/utils/highlight.js"));function c(e){return e&&e.__esModule?e:{default:e}}function u(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return u=function(){return e},e}const p=new o.default.Renderer;p.heading=function(...e){return o.default.Renderer.prototype.heading.apply(this,e).replace(/^(<h[1-3] [^>]+>)(.+)(<\/h[1-3]>)/,(e,t,n,r)=>`${t}\n          <a class="anchor" href="#${n.toLowerCase().replace(/(<([^>]+)>)/g,"").replace(/[^a-z0-9]+/g,"-")}">\n            <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">\n              <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>\n            </svg>\n          </a>\n        ${n}${r}`)};class d extends r.Component{render(){let e=(0,o.default)(this.props.source,{renderer:p,gfm:!0,silent:!0,highlight:(e,t)=>{try{const n=(0,l.default)(e,t);return(0,s.default)().stringify({type:"root",children:n}).toString()}catch(t){if(/Unknown language/.test(t.message))return(0,a.default)(e);throw t}}});return e=(0,i.default)(e,n("./node_modules/component-docs/dist/configs/santize-config.json")),r.createElement("div",{dangerouslySetInnerHTML:{__html:e},className:this.props.className})}}t.default=d},"./node_modules/component-docs/dist/templates/Router.js":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.history=void 0;var r=n("./node_modules/react/index.js"),o=n("./node_modules/history/esm/history.js");function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}let s;t.history=s;try{t.history=s=(0,o.createBrowserHistory)()}catch(e){t.history=s=null}class l extends r.Component{constructor(e){super(e),a(this,"state",void 0),a(this,"props",void 0),a(this,"_parse",e=>e.split("/").pop().split(".")[0]||"index"),a(this,"_unlisten",void 0),this.state={path:s?this._parse(s.location.pathname):e.path}}componentDidMount(){this._unlisten=s.listen(e=>this.setState({path:this._parse(e.pathname)}))}componentDidUpdate(e,t){const{routes:n,title:r}=this.props;if(t.path!==this.state.path){const e=n.find(e=>e.link===this.state.path);e&&(document.title=r?r.replace(/\[title\]/g,e.title):e.title||"")}}componentWillUnmount(){this._unlisten()}render(){const e=this.props.routes.find(e=>e.link===this.state.path);return e?e.render(function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({},e.props,{path:this.state.path})):null}}t.default=l},"./node_modules/component-docs/dist/templates/Sidebar.js":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r,o=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=s();if(t&&t.has(e))return t.get(e);var n={},r=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var o in e)if(Object.prototype.hasOwnProperty.call(e,o)){var i=r?Object.getOwnPropertyDescriptor(e,o):null;i&&(i.get||i.set)?Object.defineProperty(n,o,i):n[o]=e[o]}n.default=e,t&&t.set(e,n);return n}(n("./node_modules/react/index.js")),i=n("./node_modules/component-docs/node_modules/linaria/react.js"),a=(r=n("./node_modules/component-docs/dist/templates/Link.js"))&&r.__esModule?r:{default:r};function s(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return s=function(){return e},e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){u(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function u(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const p=(0,i.styled)("aside")({name:"SidebarContent",class:"SidebarContent_s9nrg4n"}),d=(0,i.styled)("nav")({name:"Navigation",class:"Navigation_nlggdah"}),m=(0,i.styled)("input")({name:"Searchbar",class:"Searchbar_s1nn5lbd"}),f=(0,i.styled)("div")({name:"MenuContent",class:"MenuContent_mdzibsv"}),h=(0,i.styled)("label")({name:"MenuIcon",class:"MenuIcon_m1mups47"}),g=(0,i.styled)("input")({name:"MenuButton",class:"MenuButton_mzfqg8l"}),y=(0,i.styled)("hr")({name:"SeparatorItem",class:"SeparatorItem_slziuo3"}),b=(0,i.styled)(a.default)({name:"LinkItem",class:"LinkItem_l1gpol2t"}),v=(0,i.styled)("div")({name:"Row",class:"Row_r5q2p2e"}),_=(0,i.styled)("div")({name:"GroupItems",class:"GroupItems_gl210no"}),T=(0,i.styled)("button")({name:"ButtonIcon",class:"ButtonIcon_b1ol5l8s"});class w extends o.Component{constructor(...e){super(...e),u(this,"state",{query:"",open:!1,expanded:this.props.data.reduce((e,t)=>{if("separator"===t.type)return e;if(t.group){e[t.group]||(e[t.group]={height:null,expanded:!0})}return e},{}),mode:"light"}),u(this,"_measureHeights",()=>this.setState({expanded:this.props.data.reduce((e,t)=>{if("separator"===t.type)return e;if(t.group){const n=e[t.group],r=this._items[t.group]?this._items[t.group].clientHeight:null;n||(e[t.group]={height:r,expanded:!0})}return e},{})})),u(this,"_items",{})}componentDidMount(){setTimeout(()=>this._measureHeights(),1e3)}componentDidUpdate(e){e.data!==this.props.data&&this._measureHeights()}render(){const{path:e,data:t}=this.props,n=(t,r)=>{if("separator"===t.type)return o.createElement(y,{key:`separator-${r+1}`});if("group"===t.type){const i=this.state.expanded[t.title]||{height:null,expanded:!0};return o.createElement("div",{key:t.link||t.title+r},o.createElement(v,null,o.createElement(b,{"data-selected":e===t.link,to:t.link,onClick:()=>this.setState(n=>{const r=n.expanded[t.title];return{expanded:c({},n.expanded,{[t.title]:c({},r,{expanded:e!==t.link&&t.link?r.expanded:!r.expanded})}),open:e===t.link&&n.open,query:""}})},t.title),o.createElement(T,{"data-expanded":i.expanded,style:{opacity:"number"==typeof i.height?1:0},onClick:()=>this.setState(e=>{const n=e.expanded[t.title];return{expanded:c({},e.expanded,{[t.title]:c({},n,{expanded:!n.expanded})})}})},o.createElement("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16"},o.createElement("polygon",{stroke:"none",strokeWidth:"1",fillRule:"evenodd",fill:"currentColor",points:"8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"})))),o.createElement(_,{ref:e=>{this._items[t.title]=e},"data-visible":!!i.expanded,style:"number"==typeof i.height?{height:`${i.expanded?i.height:0}px`}:null},t.items.map(n)))}return o.createElement(b,{"data-selected":e===t.link,key:t.link,to:t.link,onClick:()=>this.setState({open:!1,query:""})},t.title)};let r;if(this.state.query)r=t.filter(e=>"separator"!==e.type&&e.title.toLowerCase().includes(this.state.query.toLowerCase()));else{const e=t.filter(e=>Boolean(e.group)).map(e=>e.group).filter((e,t,n)=>n.lastIndexOf(e)===t).reduce((e,t)=>Object.assign(e,{[t]:{type:"group",items:[],title:t}}),{});r=t.reduce((t,n)=>{if("separator"===n.type)t.push(n);else if(n.title in e){const r=e[n.title];t.push(c({},r,{link:n.link}))}else if(n.group){const r=t.findIndex(e=>e.title===n.group);let o=t[r];o?"group"!==o.type?(o=c({},e[n.group],{link:n.link}),t[r]=o):o.items.push(n):((o=e[n.group]).items.push(n),t.push(o))}else t.push(n);return t},[])}const i=r.map(n);return o.createElement(p,null,o.createElement(g,{id:"slide-sidebar",type:"checkbox",role:"button",checked:this.state.open,onChange:e=>this.setState({open:e.target.checked})}),o.createElement(h,{htmlFor:"slide-sidebar"},"☰"),o.createElement(f,null,o.createElement(m,{type:"search",value:this.state.query,onChange:e=>this.setState({query:e.target.value}),placeholder:"Filter…"}),o.createElement(d,null,i)))}}t.default=w,n("./node_modules/component-docs/dist/css/src/templates/Sidebar.css")},"./node_modules/component-docs/dist/templates/ThemeToggle.js":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(){const[e,t]=r.useState(!1),[n,o]=r.useState(!1);return r.useEffect(()=>{e?(n?document.body&&document.body.classList.add("dark-theme"):document.body&&document.body.classList.remove("dark-theme"),localStorage.setItem("preference-theme",n?"dark":"light")):(document.body&&document.body.classList.contains("dark-theme")&&o(!0),t(!0))},[n,e]),r.createElement(s,null,r.createElement(a,{isDark:n},r.createElement(c,{type:"checkbox",checked:n,disabled:!e,onChange:()=>o(e=>!e)}),r.createElement(l,null)),r.createElement(u,{value:n?"dark":"light"}))};var r=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=i();if(t&&t.has(e))return t.get(e);var n={},r=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var o in e)if(Object.prototype.hasOwnProperty.call(e,o)){var a=r?Object.getOwnPropertyDescriptor(e,o):null;a&&(a.get||a.set)?Object.defineProperty(n,o,a):n[o]=e[o]}n.default=e,t&&t.set(e,n);return n}(n("./node_modules/react/index.js")),o=n("./node_modules/component-docs/node_modules/linaria/react.js");function i(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return i=function(){return e},e}const a=(0,o.styled)("label")({name:"Label",class:"Label_lok00ln",vars:{"lok00ln-0":[e=>e.isDark?"#6200ee":"#000"]}}),s=(0,o.styled)("div")({name:"ThemeSwitchDiv",class:"ThemeSwitchDiv_ti2lwtw"}),l=(0,o.styled)("div")({name:"Switch",class:"Switch_s120pijg"}),c=(0,o.styled)("input")({name:"Input",class:"Input_i1midrh5"});function u({value:e}){return"dark"===e?r.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"19",height:"20",viewBox:"0 0 50 50"},r.createElement("path",{fill:"none",stroke:"#fff",strokeWidth:"2",strokeLinejoin:"round",d:"M37,4a22,22 0 1,0 0,42a22,22 0 0,1 0-42z"})):"light"===e?r.createElement("svg",{version:"1.1",xmlns:"http://www.w3.org/2000/svg",width:"23",height:"22",fill:"orange",viewBox:"0 0 130 130",enableBackground:"new 0 0 129 129"},r.createElement("g",null,r.createElement("g",null,r.createElement("path",{d:"m64.5,92.6c15.5,0 28-12.6 28-28s-12.6-28-28-28-28,12.6-28,28 12.5,28 28,28zm0-47.9c11,0 19.9,8.9 19.9,19.9 0,11-8.9,19.9-19.9,19.9s-19.9-8.9-19.9-19.9c0-11 8.9-19.9 19.9-19.9z"}),r.createElement("path",{d:"m68.6,23.6v-12.9c0-2.3-1.8-4.1-4.1-4.1s-4.1,1.8-4.1,4.1v12.9c0,2.3 1.8,4.1 4.1,4.1s4.1-1.8 4.1-4.1z"}),r.createElement("path",{d:"m60.4,105.6v12.9c0,2.3 1.8,4.1 4.1,4.1s4.1-1.8 4.1-4.1v-12.9c0-2.3-1.8-4.1-4.1-4.1s-4.1,1.8-4.1,4.1z"}),r.createElement("path",{d:"m96.4,38.5l9.1-9.1c1.6-1.6 1.6-4.2 0-5.8-1.6-1.6-4.2-1.6-5.8,0l-9.1,9.1c-1.6,1.6-1.6,4.2 0,5.8 0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2z"}),r.createElement("path",{d:"m23.5,105.6c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l9.1-9.1c1.6-1.6 1.6-4.2 0-5.8-1.6-1.6-4.2-1.6-5.8,0l-9.1,9.1c-1.6,1.6-1.6,4.2 0,5.8z"}),r.createElement("path",{d:"m122.5,64.6c0-2.3-1.8-4.1-4.1-4.1h-12.9c-2.3,0-4.1,1.8-4.1,4.1 0,2.3 1.8,4.1 4.1,4.1h12.9c2.2,1.42109e-14 4.1-1.8 4.1-4.1z"}),r.createElement("path",{d:"m10.6,68.7h12.9c2.3,0 4.1-1.8 4.1-4.1 0-2.3-1.8-4.1-4.1-4.1h-12.9c-2.3,0-4.1,1.8-4.1,4.1 0,2.3 1.9,4.1 4.1,4.1z"}),r.createElement("path",{d:"m102.6,106.8c1,0 2.1-0.4 2.9-1.2 1.6-1.6 1.6-4.2 0-5.8l-9.1-9.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l9.1,9.1c0.8,0.8 1.9,1.2 2.9,1.2z"}),r.createElement("path",{d:"m38.4,38.5c1.6-1.6 1.6-4.2 0-5.8l-9.1-9.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l9.1,9.1c0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2z"})))):null}n("./node_modules/component-docs/dist/css/src/templates/ThemeToggle.css")},"./node_modules/component-docs/dist/utils/highlight.js":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){return o.default.highlight(e,i[t]||t)};var r,o=(r=n("./node_modules/refractor/core.js"))&&r.__esModule?r:{default:r};const i={js:"jsx"};o.default.register(n("./node_modules/refractor/lang/clike.js")),o.default.register(n("./node_modules/refractor/lang/javascript.js")),o.default.register(n("./node_modules/refractor/lang/typescript.js")),o.default.register(n("./node_modules/refractor/lang/markup.js")),o.default.register(n("./node_modules/refractor/lang/jsx.js")),o.default.register(n("./node_modules/refractor/lang/json.js")),o.default.register(n("./node_modules/refractor/lang/bash.js")),o.default.register(n("./node_modules/refractor/lang/swift.js")),o.default.register(n("./node_modules/refractor/lang/java.js")),o.default.register(n("./node_modules/refractor/lang/diff.js"))},"./node_modules/component-docs/node_modules/linaria/lib/core/css.js":function(e,t,n){"use strict";e.exports=function(){throw new Error('Using the "css" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly.')}},"./node_modules/component-docs/node_modules/linaria/lib/core/cx.js":function(e,t,n){"use strict";e.exports=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return t.filter(Boolean).join(" ")}},"./node_modules/component-docs/node_modules/linaria/lib/index.js":function(e,t,n){"use strict";t.css=n("./node_modules/component-docs/node_modules/linaria/lib/core/css.js"),t.cx=n("./node_modules/component-docs/node_modules/linaria/lib/core/cx.js")},"./node_modules/component-docs/node_modules/linaria/lib/react/index.js":function(e,t,n){"use strict";t.styled=n("./node_modules/component-docs/node_modules/linaria/lib/react/styled.js")},"./node_modules/component-docs/node_modules/linaria/lib/react/styled.js":function(e,t,n){"use strict";function r(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/modules/es.array.index-of.js");var o=n("./node_modules/react/index.js"),i=n("./node_modules/@emotion/is-prop-valid/dist/is-prop-valid.browser.esm.js").default,a=n("./node_modules/component-docs/node_modules/linaria/lib/index.js").cx,s=function(e,t){};e.exports=function(e){return function(t){var n=function(n,l){var c,u=n.as,p=void 0===u?e:u,d=n.class,m=r(n,["as","class"]);if("string"==typeof p&&-1===p.indexOf("-"))for(var f in c={},m)("as"===f||i(f))&&(c[f]=m[f]);else c=m;c.ref=l,c.className=a(c.className||d,t.class);var h=t.vars;if(h){var g={};for(var y in h){var b=h[y],v=b[0],_=b[1],T=void 0===_?"":_,w="function"==typeof v?v(n):v;s(w,t.name),g["--"+y]=""+w+T}c.style=Object.assign(g,c.style)}return e.__linaria&&e!==p?(c.as=p,o.createElement(e,c)):o.createElement(p,c)},l=o.forwardRef?o.forwardRef(n):function(e){var t=e.innerRef,o=r(e,["innerRef"]);return n(o,t)};return l.displayName=t.name,l.__linaria={className:t.class,extends:e},l}}},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/an-object.js":function(e,t,n){var r=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/is-object.js");e.exports=function(e){if(!r(e))throw TypeError(String(e)+" is not an object");return e}},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/array-includes.js":function(e,t,n){var r=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/to-indexed-object.js"),o=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/to-length.js"),i=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/to-absolute-index.js"),a=function(e){return function(t,n,a){var s,l=r(t),c=o(l.length),u=i(a,c);if(e&&n!=n){for(;c>u;)if((s=l[u++])!=s)return!0}else for(;c>u;u++)if((e||u in l)&&l[u]===n)return e||u||0;return!e&&-1}};e.exports={includes:a(!0),indexOf:a(!1)}},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/array-method-is-strict.js":function(e,t,n){"use strict";var r=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/fails.js");e.exports=function(e,t){var n=[][e];return!!n&&r((function(){n.call(null,t||function(){throw 1},1)}))}},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/array-method-uses-to-length.js":function(e,t,n){var r=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/descriptors.js"),o=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/fails.js"),i=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/has.js"),a=Object.defineProperty,s={},l=function(e){throw e};e.exports=function(e,t){if(i(s,e))return s[e];t||(t={});var n=[][e],c=!!i(t,"ACCESSORS")&&t.ACCESSORS,u=i(t,0)?t[0]:l,p=i(t,1)?t[1]:void 0;return s[e]=!!n&&!o((function(){if(c&&!r)return!0;var e={length:-1};c?a(e,1,{enumerable:!0,get:l}):e[1]=1,n.call(e,u,p)}))}},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/classof-raw.js":function(e,t){var n={}.toString;e.exports=function(e){return n.call(e).slice(8,-1)}},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/copy-constructor-properties.js":function(e,t,n){var r=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/has.js"),o=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/own-keys.js"),i=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/object-get-own-property-descriptor.js"),a=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/object-define-property.js");e.exports=function(e,t){for(var n=o(t),s=a.f,l=i.f,c=0;c<n.length;c++){var u=n[c];r(e,u)||s(e,u,l(t,u))}}},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/create-non-enumerable-property.js":function(e,t,n){var r=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/descriptors.js"),o=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/object-define-property.js"),i=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/create-property-descriptor.js");e.exports=r?function(e,t,n){return o.f(e,t,i(1,n))}:function(e,t,n){return e[t]=n,e}},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/create-property-descriptor.js":function(e,t){e.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/descriptors.js":function(e,t,n){var r=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/fails.js");e.exports=!r((function(){return 7!=Object.defineProperty({},1,{get:function(){return 7}})[1]}))},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/document-create-element.js":function(e,t,n){var r=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/global.js"),o=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/is-object.js"),i=r.document,a=o(i)&&o(i.createElement);e.exports=function(e){return a?i.createElement(e):{}}},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/enum-bug-keys.js":function(e,t){e.exports=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"]},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/export.js":function(e,t,n){var r=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/global.js"),o=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/object-get-own-property-descriptor.js").f,i=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/create-non-enumerable-property.js"),a=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/redefine.js"),s=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/set-global.js"),l=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/copy-constructor-properties.js"),c=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/is-forced.js");e.exports=function(e,t){var n,u,p,d,m,f=e.target,h=e.global,g=e.stat;if(n=h?r:g?r[f]||s(f,{}):(r[f]||{}).prototype)for(u in t){if(d=t[u],p=e.noTargetGet?(m=o(n,u))&&m.value:n[u],!c(h?u:f+(g?".":"#")+u,e.forced)&&void 0!==p){if(typeof d==typeof p)continue;l(d,p)}(e.sham||p&&p.sham)&&i(d,"sham",!0),a(n,u,d,e)}}},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/fails.js":function(e,t){e.exports=function(e){try{return!!e()}catch(e){return!0}}},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/get-built-in.js":function(e,t,n){var r=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/path.js"),o=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/global.js"),i=function(e){return"function"==typeof e?e:void 0};e.exports=function(e,t){return arguments.length<2?i(r[e])||i(o[e]):r[e]&&r[e][t]||o[e]&&o[e][t]}},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/global.js":function(e,t,n){(function(t){var n=function(e){return e&&e.Math==Math&&e};e.exports=n("object"==typeof globalThis&&globalThis)||n("object"==typeof window&&window)||n("object"==typeof self&&self)||n("object"==typeof t&&t)||Function("return this")()}).call(this,n("./node_modules/webpack/buildin/global.js"))},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/has.js":function(e,t){var n={}.hasOwnProperty;e.exports=function(e,t){return n.call(e,t)}},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/hidden-keys.js":function(e,t){e.exports={}},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/ie8-dom-define.js":function(e,t,n){var r=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/descriptors.js"),o=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/fails.js"),i=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/document-create-element.js");e.exports=!r&&!o((function(){return 7!=Object.defineProperty(i("div"),"a",{get:function(){return 7}}).a}))},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/indexed-object.js":function(e,t,n){var r=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/fails.js"),o=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/classof-raw.js"),i="".split;e.exports=r((function(){return!Object("z").propertyIsEnumerable(0)}))?function(e){return"String"==o(e)?i.call(e,""):Object(e)}:Object},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/inspect-source.js":function(e,t,n){var r=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/shared-store.js"),o=Function.toString;"function"!=typeof r.inspectSource&&(r.inspectSource=function(e){return o.call(e)}),e.exports=r.inspectSource},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/internal-state.js":function(e,t,n){var r,o,i,a=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/native-weak-map.js"),s=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/global.js"),l=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/is-object.js"),c=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/create-non-enumerable-property.js"),u=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/has.js"),p=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/shared-key.js"),d=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/hidden-keys.js"),m=s.WeakMap;if(a){var f=new m,h=f.get,g=f.has,y=f.set;r=function(e,t){return y.call(f,e,t),t},o=function(e){return h.call(f,e)||{}},i=function(e){return g.call(f,e)}}else{var b=p("state");d[b]=!0,r=function(e,t){return c(e,b,t),t},o=function(e){return u(e,b)?e[b]:{}},i=function(e){return u(e,b)}}e.exports={set:r,get:o,has:i,enforce:function(e){return i(e)?o(e):r(e,{})},getterFor:function(e){return function(t){var n;if(!l(t)||(n=o(t)).type!==e)throw TypeError("Incompatible receiver, "+e+" required");return n}}}},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/is-forced.js":function(e,t,n){var r=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/fails.js"),o=/#|\.prototype\./,i=function(e,t){var n=s[a(e)];return n==c||n!=l&&("function"==typeof t?r(t):!!t)},a=i.normalize=function(e){return String(e).replace(o,".").toLowerCase()},s=i.data={},l=i.NATIVE="N",c=i.POLYFILL="P";e.exports=i},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/is-object.js":function(e,t){e.exports=function(e){return"object"==typeof e?null!==e:"function"==typeof e}},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/is-pure.js":function(e,t){e.exports=!1},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/native-weak-map.js":function(e,t,n){var r=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/global.js"),o=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/inspect-source.js"),i=r.WeakMap;e.exports="function"==typeof i&&/native code/.test(o(i))},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/object-define-property.js":function(e,t,n){var r=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/descriptors.js"),o=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/ie8-dom-define.js"),i=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/an-object.js"),a=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/to-primitive.js"),s=Object.defineProperty;t.f=r?s:function(e,t,n){if(i(e),t=a(t,!0),i(n),o)try{return s(e,t,n)}catch(e){}if("get"in n||"set"in n)throw TypeError("Accessors not supported");return"value"in n&&(e[t]=n.value),e}},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/object-get-own-property-descriptor.js":function(e,t,n){var r=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/descriptors.js"),o=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/object-property-is-enumerable.js"),i=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/create-property-descriptor.js"),a=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/to-indexed-object.js"),s=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/to-primitive.js"),l=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/has.js"),c=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/ie8-dom-define.js"),u=Object.getOwnPropertyDescriptor;t.f=r?u:function(e,t){if(e=a(e),t=s(t,!0),c)try{return u(e,t)}catch(e){}if(l(e,t))return i(!o.f.call(e,t),e[t])}},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/object-get-own-property-names.js":function(e,t,n){var r=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/object-keys-internal.js"),o=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/enum-bug-keys.js").concat("length","prototype");t.f=Object.getOwnPropertyNames||function(e){return r(e,o)}},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/object-get-own-property-symbols.js":function(e,t){t.f=Object.getOwnPropertySymbols},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/object-keys-internal.js":function(e,t,n){var r=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/has.js"),o=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/to-indexed-object.js"),i=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/array-includes.js").indexOf,a=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/hidden-keys.js");e.exports=function(e,t){var n,s=o(e),l=0,c=[];for(n in s)!r(a,n)&&r(s,n)&&c.push(n);for(;t.length>l;)r(s,n=t[l++])&&(~i(c,n)||c.push(n));return c}},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/object-property-is-enumerable.js":function(e,t,n){"use strict";var r={}.propertyIsEnumerable,o=Object.getOwnPropertyDescriptor,i=o&&!r.call({1:2},1);t.f=i?function(e){var t=o(this,e);return!!t&&t.enumerable}:r},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/own-keys.js":function(e,t,n){var r=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/get-built-in.js"),o=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/object-get-own-property-names.js"),i=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/object-get-own-property-symbols.js"),a=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/an-object.js");e.exports=r("Reflect","ownKeys")||function(e){var t=o.f(a(e)),n=i.f;return n?t.concat(n(e)):t}},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/path.js":function(e,t,n){var r=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/global.js");e.exports=r},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/redefine.js":function(e,t,n){var r=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/global.js"),o=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/create-non-enumerable-property.js"),i=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/has.js"),a=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/set-global.js"),s=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/inspect-source.js"),l=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/internal-state.js"),c=l.get,u=l.enforce,p=String(String).split("String");(e.exports=function(e,t,n,s){var l=!!s&&!!s.unsafe,c=!!s&&!!s.enumerable,d=!!s&&!!s.noTargetGet;"function"==typeof n&&("string"!=typeof t||i(n,"name")||o(n,"name",t),u(n).source=p.join("string"==typeof t?t:"")),e!==r?(l?!d&&e[t]&&(c=!0):delete e[t],c?e[t]=n:o(e,t,n)):c?e[t]=n:a(t,n)})(Function.prototype,"toString",(function(){return"function"==typeof this&&c(this).source||s(this)}))},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/require-object-coercible.js":function(e,t){e.exports=function(e){if(null==e)throw TypeError("Can't call method on "+e);return e}},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/set-global.js":function(e,t,n){var r=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/global.js"),o=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/create-non-enumerable-property.js");e.exports=function(e,t){try{o(r,e,t)}catch(n){r[e]=t}return t}},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/shared-key.js":function(e,t,n){var r=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/shared.js"),o=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/uid.js"),i=r("keys");e.exports=function(e){return i[e]||(i[e]=o(e))}},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/shared-store.js":function(e,t,n){var r=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/global.js"),o=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/set-global.js"),i=r["__core-js_shared__"]||o("__core-js_shared__",{});e.exports=i},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/shared.js":function(e,t,n){var r=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/is-pure.js"),o=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/shared-store.js");(e.exports=function(e,t){return o[e]||(o[e]=void 0!==t?t:{})})("versions",[]).push({version:"3.6.5",mode:r?"pure":"global",copyright:"© 2020 Denis Pushkarev (zloirock.ru)"})},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/to-absolute-index.js":function(e,t,n){var r=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/to-integer.js"),o=Math.max,i=Math.min;e.exports=function(e,t){var n=r(e);return n<0?o(n+t,0):i(n,t)}},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/to-indexed-object.js":function(e,t,n){var r=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/indexed-object.js"),o=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/require-object-coercible.js");e.exports=function(e){return r(o(e))}},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/to-integer.js":function(e,t){var n=Math.ceil,r=Math.floor;e.exports=function(e){return isNaN(e=+e)?0:(e>0?r:n)(e)}},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/to-length.js":function(e,t,n){var r=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/to-integer.js"),o=Math.min;e.exports=function(e){return e>0?o(r(e),9007199254740991):0}},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/to-primitive.js":function(e,t,n){var r=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/is-object.js");e.exports=function(e,t){if(!r(e))return e;var n,o;if(t&&"function"==typeof(n=e.toString)&&!r(o=n.call(e)))return o;if("function"==typeof(n=e.valueOf)&&!r(o=n.call(e)))return o;if(!t&&"function"==typeof(n=e.toString)&&!r(o=n.call(e)))return o;throw TypeError("Can't convert object to primitive value")}},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/uid.js":function(e,t){var n=0,r=Math.random();e.exports=function(e){return"Symbol("+String(void 0===e?"":e)+")_"+(++n+r).toString(36)}},"./node_modules/component-docs/node_modules/linaria/node_modules/core-js/modules/es.array.index-of.js":function(e,t,n){"use strict";var r=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/export.js"),o=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/array-includes.js").indexOf,i=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/array-method-is-strict.js"),a=n("./node_modules/component-docs/node_modules/linaria/node_modules/core-js/internals/array-method-uses-to-length.js"),s=[].indexOf,l=!!s&&1/[1].indexOf(1,-0)<0,c=i("indexOf"),u=a("indexOf",{ACCESSORS:!0,1:0});r({target:"Array",proto:!0,forced:l||!c||!u},{indexOf:function(e){return l?s.apply(this,arguments)||0:o(this,e,arguments.length>1?arguments[1]:void 0)}})},"./node_modules/component-docs/node_modules/linaria/react.js":function(e,t,n){e.exports=n("./node_modules/component-docs/node_modules/linaria/lib/react/index.js")},"./node_modules/error-stack-parser/error-stack-parser.js":function(e,t,n){var r,o,i;!function(a,s){"use strict";o=[n("./node_modules/stackframe/stackframe.js")],void 0===(i="function"==typeof(r=function(e){var t=/(^|@)\S+\:\d+/,n=/^\s*at .*(\S+\:\d+|\(native\))/m,r=/^(eval@)?(\[native code\])?$/;function o(e,t,n){if("function"==typeof Array.prototype.map)return e.map(t,n);for(var r=new Array(e.length),o=0;o<e.length;o++)r[o]=t.call(n,e[o]);return r}function i(e,t,n){if("function"==typeof Array.prototype.filter)return e.filter(t,n);for(var r=[],o=0;o<e.length;o++)t.call(n,e[o])&&r.push(e[o]);return r}return{parse:function(e){if(void 0!==e.stacktrace||void 0!==e["opera#sourceloc"])return this.parseOpera(e);if(e.stack&&e.stack.match(n))return this.parseV8OrIE(e);if(e.stack)return this.parseFFOrSafari(e);throw new Error("Cannot parse given Error object")},extractLocation:function(e){if(-1===e.indexOf(":"))return[e];var t=/(.+?)(?:\:(\d+))?(?:\:(\d+))?$/.exec(e.replace(/[\(\)]/g,""));return[t[1],t[2]||void 0,t[3]||void 0]},parseV8OrIE:function(t){return o(i(t.stack.split("\n"),(function(e){return!!e.match(n)}),this),(function(t){t.indexOf("(eval ")>-1&&(t=t.replace(/eval code/g,"eval").replace(/(\(eval at [^\()]*)|(\)\,.*$)/g,""));var n=t.replace(/^\s+/,"").replace(/\(eval code/g,"(").split(/\s+/).slice(1),r=this.extractLocation(n.pop()),o=n.join(" ")||void 0,i=function(e,t){if("function"==typeof Array.prototype.indexOf)return e.indexOf(t);for(var n=0;n<e.length;n++)if(e[n]===t)return n;return-1}(["eval","<anonymous>"],r[0])>-1?void 0:r[0];return new e(o,void 0,i,r[1],r[2],t)}),this)},parseFFOrSafari:function(t){return o(i(t.stack.split("\n"),(function(e){return!e.match(r)}),this),(function(t){if(t.indexOf(" > eval")>-1&&(t=t.replace(/ line (\d+)(?: > eval line \d+)* > eval\:\d+\:\d+/g,":$1")),-1===t.indexOf("@")&&-1===t.indexOf(":"))return new e(t);var n=t.split("@"),r=this.extractLocation(n.pop()),o=n.join("@")||void 0;return new e(o,void 0,r[0],r[1],r[2],t)}),this)},parseOpera:function(e){return!e.stacktrace||e.message.indexOf("\n")>-1&&e.message.split("\n").length>e.stacktrace.split("\n").length?this.parseOpera9(e):e.stack?this.parseOpera11(e):this.parseOpera10(e)},parseOpera9:function(t){for(var n=/Line (\d+).*script (?:in )?(\S+)/i,r=t.message.split("\n"),o=[],i=2,a=r.length;i<a;i+=2){var s=n.exec(r[i]);s&&o.push(new e(void 0,void 0,s[2],s[1],void 0,r[i]))}return o},parseOpera10:function(t){for(var n=/Line (\d+).*script (?:in )?(\S+)(?:: In function (\S+))?$/i,r=t.stacktrace.split("\n"),o=[],i=0,a=r.length;i<a;i+=2){var s=n.exec(r[i]);s&&o.push(new e(s[3]||void 0,void 0,s[2],s[1],void 0,r[i]))}return o},parseOpera11:function(n){return o(i(n.stack.split("\n"),(function(e){return!!e.match(t)&&!e.match(/^Error created at/)}),this),(function(t){var n,r=t.split("@"),o=this.extractLocation(r.pop()),i=r.shift()||"",a=i.replace(/<anonymous function(: (\w+))?>/,"$2").replace(/\([^\)]*\)/g,"")||void 0;i.match(/\(([^\)]*)\)/)&&(n=i.replace(/^[^\(]+\(([^\)]*)\)$/,"$1"));var s=void 0===n||"[arguments not available]"===n?void 0:n.split(",");return new e(a,s,o[0],o[1],o[2],t)}),this)}}})?r.apply(t,o):r)||(e.exports=i)}()},"./node_modules/escape-html/index.js":function(e,t,n){"use strict";
/*!
 * escape-html
 * Copyright(c) 2012-2013 TJ Holowaychuk