[
  {
    "path": ".buckconfig",
    "content": "\n[android]\n  target = Google Inc.:Google APIs:23\n\n[maven_repositories]\n  central = https://repo1.maven.org/maven2\n"
  },
  {
    "path": ".eslintrc",
    "content": "{\n  \"env\": {\n    \"node\": true,\n    \"browser\": true,\n    \"es6\": true,\n    \"jest\": true\n  },\n  \"extends\": [\n    \"eslint:recommended\",\n    \"plugin:react/recommended\",\n    \"plugin:prettier/recommended\"\n  ],\n  \"parser\": \"babel-eslint\",\n  \"rules\": {\n    \"no-useless-constructor\": 0,\n    \"import/no-extraneous-dependencies\": 0,\n    \"import/named\": 1,\n    \"import/no-unresolved\": 1,\n    \"react/display-name\": 0,\n    \"react/no-typos\": 0\n  },\n  \"plugins\": [\"prettier\", \"react\", \"import\"],\n  \"settings\": {\n    \"import/resolver\": {\n      \"node\": {\n        \"extensions\": [\".js\", \".ios.js\", \".android.js\", \".web.js\", \".native.js\"]\n      }\n    }\n  }\n}\n"
  },
  {
    "path": ".flowconfig",
    "content": "[ignore]\n; We fork some components by platform\n.*/*[.]android.js\n\n; Ignore \"BUCK\" generated dirs\n<PROJECT_ROOT>/\\.buckd/\n\n; Ignore unexpected extra \"@providesModule\"\n.*/node_modules/.*/node_modules/fbjs/.*\n\n; Ignore duplicate module providers\n; For RN Apps installed via npm, \"Libraries\" folder is inside\n; \"node_modules/react-native\" but in the source repo it is in the root\n.*/Libraries/react-native/React.js\n\n; Ignore polyfills\n.*/Libraries/polyfills/.*\n\n; Ignore metro\n.*/node_modules/metro/.*\n\n[include]\n\n[libs]\nnode_modules/react-native/Libraries/react-native/react-native-interface.js\nnode_modules/react-native/flow/\nnode_modules/react-native/flow-github/\n\n[options]\nemoji=true\n\nesproposal.optional_chaining=enable\nesproposal.nullish_coalescing=enable\n\nmodule.system=haste\nmodule.system.haste.use_name_reducers=true\n# get basename\nmodule.system.haste.name_reducers='^.*/\\([a-zA-Z0-9$_.-]+\\.js\\(\\.flow\\)?\\)$' -> '\\1'\n# strip .js or .js.flow suffix\nmodule.system.haste.name_reducers='^\\(.*\\)\\.js\\(\\.flow\\)?$' -> '\\1'\n# strip .ios suffix\nmodule.system.haste.name_reducers='^\\(.*\\)\\.ios$' -> '\\1'\nmodule.system.haste.name_reducers='^\\(.*\\)\\.android$' -> '\\1'\nmodule.system.haste.name_reducers='^\\(.*\\)\\.native$' -> '\\1'\nmodule.system.haste.paths.blacklist=.*/__tests__/.*\nmodule.system.haste.paths.blacklist=.*/__mocks__/.*\nmodule.system.haste.paths.blacklist=<PROJECT_ROOT>/node_modules/react-native/Libraries/Animated/src/polyfills/.*\nmodule.system.haste.paths.whitelist=<PROJECT_ROOT>/node_modules/react-native/Libraries/.*\n\nmunge_underscores=true\n\nmodule.name_mapper='^[./a-zA-Z0-9$_-]+\\.\\(bmp\\|gif\\|jpg\\|jpeg\\|png\\|psd\\|svg\\|webp\\|m4v\\|mov\\|mp4\\|mpeg\\|mpg\\|webm\\|aac\\|aiff\\|caf\\|m4a\\|mp3\\|wav\\|html\\|pdf\\)$' -> 'RelativeImageStub'\n\nmodule.file_ext=.js\nmodule.file_ext=.jsx\nmodule.file_ext=.json\nmodule.file_ext=.native.js\n\nsuppress_type=$FlowIssue\nsuppress_type=$FlowFixMe\nsuppress_type=$FlowFixMeProps\nsuppress_type=$FlowFixMeState\n\nsuppress_comment=\\\\(.\\\\|\\n\\\\)*\\\\$FlowFixMe\\\\($\\\\|[^(]\\\\|(\\\\(<VERSION>\\\\)? *\\\\(site=[a-z,_]*react_native[a-z,_]*\\\\)?)\\\\)\nsuppress_comment=\\\\(.\\\\|\\n\\\\)*\\\\$FlowIssue\\\\((\\\\(<VERSION>\\\\)? *\\\\(site=[a-z,_]*react_native[a-z,_]*\\\\)?)\\\\)?:? #[0-9]+\nsuppress_comment=\\\\(.\\\\|\\n\\\\)*\\\\$FlowFixedInNextDeploy\nsuppress_comment=\\\\(.\\\\|\\n\\\\)*\\\\$FlowExpectedError\n\n[version]\n^0.86.0\n"
  },
  {
    "path": ".gitattributes",
    "content": "*.pbxproj -text\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/bug_report.md",
    "content": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Describe the bug**\nA clear and concise description of what the bug is.\n\n**To Reproduce**\nSteps to reproduce the behavior:\n1. Go to '...'\n2. Click on '....'\n3. Scroll down to '....'\n4. See error\n\n**Expected behavior**\nA clear and concise description of what you expected to happen.\n\n**Screenshots**\nIf applicable, add screenshots to help explain your problem.\n\n**Desktop (please complete the following information):**\n - OS: [e.g. iOS]\n - Browser [e.g. chrome, safari]\n - Version [e.g. 22]\n\n**Smartphone (please complete the following information):**\n - Device: [e.g. iPhone6]\n - OS: [e.g. iOS8.1]\n - Browser [e.g. stock browser, safari]\n - Version [e.g. 22]\n\n**Additional context**\nAdd any other context about the problem here.\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/feature_request.md",
    "content": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: \"[New]\"\nlabels: enhancement\nassignees: ''\n\n---\n\n**Describe your feature request**\n\n**Context**\nDescribe the context around your feature request with screenshots and links. If this is from the docs provide a screenshot and link to the appropriate area. \n\n**Proposed solution**\nDescribe how you would implement this feature or expect this feature to work from a dev perspective.\n"
  },
  {
    "path": ".github/config.yml",
    "content": "# Configuration for request-info - https://github.com/behaviorbot/request-info\n\n# *OPTIONAL* Comment to reply with\n# Can be either a string :\nrequestInfoReplyComment: >\n  We would appreciate it if you could provide us with more info about this issue/pr!\n\n# Or an array:\n# requestInfoReplyComment:\n#  - Ah no! young blade! That was a trifle short!\n#  - Tell me more !\n#  - I am sure you can be more effusive\n\n# *OPTIONAL* default titles to check against for lack of descriptiveness\n# MUST BE ALL LOWERCASE\nrequestInfoDefaultTitles:\n  - update readme.md\n  - updates\n\n# *OPTIONAL* Label to be added to Issues and Pull Requests with insufficient information given\nrequestInfoLabelToAdd: needs-more-info\n\n# *OPTIONAL* Require Issues to contain more information than what is provided in the issue templates\n# Will fail if the issue's body is equal to a provided template\ncheckIssueTemplate: true\n\n# *OPTIONAL* Require Pull Requests to contain more information than what is provided in the PR template\n# Will fail if the pull request's body is equal to the provided template\ncheckPullRequestTemplate: false\n\n# *OPTIONAL* Only warn about insufficient information on these events type\n# Keys must be lowercase. Valid values are 'issue' and 'pullRequest'\nrequestInfoOn:\n  pullRequest: true\n  issue: true\n\n# *OPTIONAL* Add a list of people whose Issues/PRs will not be commented on\n# keys must be GitHub usernames\nrequestInfoUserstoExclude:\n  - codypearce\n"
  },
  {
    "path": ".gitignore",
    "content": "# OSX\n#\n.DS_Store\nsrc/DS_Store\n*.DS_Store\n# Xcode\n#\nbuild/\n*.pbxuser\n!default.pbxuser\n*.mode1v3\n!default.mode1v3\n*.mode2v3\n!default.mode2v3\n*.perspectivev3\n!default.perspectivev3\nxcuserdata\n*.xccheckout\n*.moved-aside\nDerivedData\n*.hmap\n*.ipa\n*.xcuserstate\nproject.xcworkspace\n\n# Android/IntelliJ\n#\nbuild/\n.idea\n.gradle\nlocal.properties\n*.iml\n\n# node.js\n#\nnode_modules/\nnpm-debug.log\nyarn-error.log\n\n# BUCK\nbuck-out/\n\\.buckd/\n*.keystore\n\n# fastlane\n#\n# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the\n# screenshots whenever they are needed.\n# For more information about the recommended setup visit:\n# https://docs.fastlane.tools/best-practices/source-control/\n\n*/fastlane/report.xml\n*/fastlane/Preview.html\n*/fastlane/screenshots\n\n# Bundle artifact\n*.jsbundle\nnode_modules/**/*\nnpm-debug.*\n*.jks\n*.p12\n*.key\n*.mobileprovision\nios/Index\ndocs/public\ndocs/node_modules\ndocs/.cache\ngh/**/*\n"
  },
  {
    "path": ".jest-test-results.json",
    "content": "{\"numFailedTestSuites\":0,\"numFailedTests\":0,\"numPassedTestSuites\":72,\"numPassedTests\":73,\"numPendingTestSuites\":0,\"numPendingTests\":0,\"numRuntimeErrorTestSuites\":0,\"numTotalTestSuites\":72,\"numTotalTests\":73,\"openHandles\":[],\"snapshot\":{\"added\":0,\"didUpdate\":false,\"failure\":false,\"filesAdded\":0,\"filesRemoved\":0,\"filesUnmatched\":0,\"filesUpdated\":0,\"matched\":73,\"total\":73,\"unchecked\":0,\"uncheckedKeysByFile\":[],\"unmatched\":0,\"updated\":0},\"startTime\":1586270099034,\"success\":true,\"testResults\":[{\"assertionResults\":[{\"ancestorTitles\":[\"BaseText\"],\"failureMessages\":[],\"fullName\":\"BaseText renders\",\"location\":null,\"status\":\"passed\",\"title\":\"renders\"},{\"ancestorTitles\":[\"BaseText\"],\"failureMessages\":[],\"fullName\":\"BaseText renders with different theme color\",\"location\":null,\"status\":\"passed\",\"title\":\"renders with different theme color\"}],\"endTime\":1586270102447,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Typography/BaseText/BaseTest.test.js\",\"startTime\":1586270100849,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"BottomNavigationItem Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"BottomNavigationItem Renders\"}],\"endTime\":1586270104028,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/BottomNavigation/BottomNavigationItem/BottomNavigationItem.test.js\",\"startTime\":1586270100862,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"ToggleButtonGroup Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"ToggleButtonGroup Renders\"}],\"endTime\":1586270112032,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/ToggleButton/ToggleButtonGroup/ToggleButtonGroup.test.js\",\"startTime\":1586270102456,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"BottomNavigation Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"BottomNavigation Renders\"}],\"endTime\":1586270112035,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/BottomNavigation/BottomNavigation.test.js\",\"startTime\":1586270104078,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"DataTablePagination Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"DataTablePagination Renders\"}],\"endTime\":1586270112037,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/DataTable/DataTablePagination/DataTablePagination.test.js\",\"startTime\":1586270100855,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"Switch Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"Switch Renders\"}],\"endTime\":1586270112057,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Utils/Hoverable/Hoverable.test.js\",\"startTime\":1586270100849,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"FabSpeedDial Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"FabSpeedDial Renders\"}],\"endTime\":1586270112111,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Fab/FabSpeedDial/FabSpeedDial.test.js\",\"startTime\":1586270100850,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"ListExpanded Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"ListExpanded Renders\"}],\"endTime\":1586270112188,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/List/ListSection/ListSection.test.js\",\"startTime\":1586270112046,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"SelectFilled Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"SelectFilled Renders\"}],\"endTime\":1586270112206,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Select/SelectFilled/SelectFilled.test.js\",\"startTime\":1586270112047,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"SelectOutlined Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"SelectOutlined Renders\"}],\"endTime\":1586270112210,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Select/SelectOutlined/SelectOutlined.test.js\",\"startTime\":1586270112040,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"SelectFlat Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"SelectFlat Renders\"}],\"endTime\":1586270112235,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Select/SelectFlat/SelectFlat.test.js\",\"startTime\":1586270112070,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"ToggleButton Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"ToggleButton Renders\"}],\"endTime\":1586270112308,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/ToggleButton/ToggleButton.test.js\",\"startTime\":1586270112120,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"SearchField Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"SearchField Renders\"}],\"endTime\":1586270112367,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/TextField/Searchfield/Searchfield.test.js\",\"startTime\":1586270112193,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"ListExpanded Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"ListExpanded Renders\"}],\"endTime\":1586270112398,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/List/ListExpand/ListExpand.test.js\",\"startTime\":1586270112213,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"ProgressBar Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"ProgressBar Renders\"}],\"endTime\":1586270112401,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Progress/ProgressBar/ProgressBar.test.js\",\"startTime\":1586270112215,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"ListExpanded Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"ListExpanded Renders\"}],\"endTime\":1586270112460,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/List/ListItem/ListItem.test.js\",\"startTime\":1586270112318,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"IconButton Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"IconButton Renders\"}],\"endTime\":1586270112507,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/IconButton/IconButton.test.js\",\"startTime\":1586270112373,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"Searchbar Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"Searchbar Renders\"}],\"endTime\":1586270112527,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Appbar/Searchbar/Searchbar.test.js\",\"startTime\":1586270112403,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"Snackbar Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"Snackbar Renders\"}],\"endTime\":1586270112659,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Snackbar/Snackbar.test.js\",\"startTime\":1586270112534,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"TextField Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"TextField Renders\"}],\"endTime\":1586270112662,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/TextField/TextField.test.js\",\"startTime\":1586270112467,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"Backdrop Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"Backdrop Renders\"}],\"endTime\":1586270112687,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Backdrop/Backdrop.test.js\",\"startTime\":1586270112517,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"Dialog Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"Dialog Renders\"}],\"endTime\":1586270112825,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Dialog/Dialog.test.js\",\"startTime\":1586270112667,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"Tooltip Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"Tooltip Renders\"}],\"endTime\":1586270112842,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Tooltip/Tooltip.test.js\",\"startTime\":1586270112696,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"Checkbox Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"Checkbox Renders\"}],\"endTime\":1586270112845,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Checkbox/Checkbox.test.js\",\"startTime\":1586270112667,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"Slider Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"Slider Renders\"}],\"endTime\":1586270113064,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Slider/Slider.test.js\",\"startTime\":1586270112837,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"Menu Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"Menu Renders\"}],\"endTime\":1586270113100,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Menu/Menu.test.js\",\"startTime\":1586270112868,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"TextFieldUnderline Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"TextFieldUnderline Renders\"}],\"endTime\":1586270113152,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/TextField/TextFieldUnderline/TextFieldUnderline.test.js\",\"startTime\":1586270112852,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"Switch Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"Switch Renders\"}],\"endTime\":1586270113200,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Switch/Switch.test.js\",\"startTime\":1586270113074,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"Button Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"Button Renders\"}],\"endTime\":1586270113227,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Button/Button.test.js\",\"startTime\":1586270113105,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"Banner Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"Banner Renders\"}],\"endTime\":1586270113275,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Banner/Banner.test.js\",\"startTime\":1586270113161,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"Icon Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"Icon Renders\"}],\"endTime\":1586270113360,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Icon/Icon.test.js\",\"startTime\":1586270113233,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"TextFieldHelperText Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"TextFieldHelperText Renders\"}],\"endTime\":1586270113360,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/TextField/TextFieldHelperText/TextFieldHelperText.test.js\",\"startTime\":1586270113204,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"Tabs Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"Tabs Renders\"}],\"endTime\":1586270113413,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Tabs/Tabs.test.js\",\"startTime\":1586270113281,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"Tab Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"Tab Renders\"}],\"endTime\":1586270113503,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Tabs/Tab/Tab.test.js\",\"startTime\":1586270113366,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"Fab Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"Fab Renders\"}],\"endTime\":1586270113566,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Fab/Fab.test.js\",\"startTime\":1586270113420,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"TextFieldLabel Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"TextFieldLabel Renders\"}],\"endTime\":1586270113675,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/TextField/TextFieldLabel/TextFieldLabel.test.js\",\"startTime\":1586270113572,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"DataTableHeader Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"DataTableHeader Renders\"}],\"endTime\":1586270113835,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/DataTable/DataTableHeader/DataTableHeader.test.js\",\"startTime\":1586270113684,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"SheetSide Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"SheetSide Renders\"}],\"endTime\":1586270114682,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/SheetSide/SheetSide.test.js\",\"startTime\":1586270112406,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"SheetBottom Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"SheetBottom Renders\"}],\"endTime\":1586270114714,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/SheetBottom/SheetBottom.test.js\",\"startTime\":1586270112241,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"DrawerSection Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"DrawerSection Renders\"}],\"endTime\":1586270114972,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Drawer/DrawerSection/DrawerSection.test.js\",\"startTime\":1586270114740,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"ProgressCircle Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"ProgressCircle Renders\"}],\"endTime\":1586270115153,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Progress/ProgressCircle/ProgressCircle.test.js\",\"startTime\":1586270114692,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"DataTableCell Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"DataTableCell Renders\"}],\"endTime\":1586270115170,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/DataTable/DataTableCell/DataTableCell.test.js\",\"startTime\":1586270114981,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"DataTableRow Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"DataTableRow Renders\"}],\"endTime\":1586270115297,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/DataTable/DataTableRow/DataTableRow.test.js\",\"startTime\":1586270115177,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"AppbarBottom Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"AppbarBottom Renders\"}],\"endTime\":1586270115298,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/AppbarBottom/AppbarBottom.test.js\",\"startTime\":1586270115161,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"DrawerHeader Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"DrawerHeader Renders\"}],\"endTime\":1586270115433,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Drawer/DrawerHeader/DrawerHeader.test.js\",\"startTime\":1586270115305,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"DrawerBottom Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"DrawerBottom Renders\"}],\"endTime\":1586270115455,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/DrawerBottom/DrawerBottom.test.js\",\"startTime\":1586270115303,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"CardContent Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"CardContent Renders\"}],\"endTime\":1586270115554,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Card/CardContent/CardContent.test.js\",\"startTime\":1586270115461,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"CardActions Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"CardActions Renders\"}],\"endTime\":1586270115592,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Card/CardActions/CardActions.test.js\",\"startTime\":1586270115444,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"TextFieldOutline Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"TextFieldOutline Renders\"}],\"endTime\":1586270115604,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/TextField/TextFieldOutline/TextFieldOutline.test.js\",\"startTime\":1586270113368,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"TextFieldFilled Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"TextFieldFilled Renders\"}],\"endTime\":1586270115672,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/TextField/TextFieldFilled/TextFieldFilled.test.js\",\"startTime\":1586270113507,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"RadioButton Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"RadioButton Renders\"}],\"endTime\":1586270115700,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/RadioButton/RadioButton.test.js\",\"startTime\":1586270115562,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"CardHeader Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"CardHeader Renders\"}],\"endTime\":1586270115738,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Card/CardHeader/CardHeader.test.js\",\"startTime\":1586270115683,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"CardMedia Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"CardMedia Renders\"}],\"endTime\":1586270115769,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Card/CardMedia/CardMedia.test.js\",\"startTime\":1586270115706,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"DrawerItem Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"DrawerItem Renders\"}],\"endTime\":1586270115834,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Drawer/DrawerItem/DrawerItem.test.js\",\"startTime\":1586270115613,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"MenuItem Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"MenuItem Renders\"}],\"endTime\":1586270115925,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Menu/MenuItem/MenuItem.test.js\",\"startTime\":1586270115743,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"TextFieldFlat Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"TextFieldFlat Renders\"}],\"endTime\":1586270115939,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/TextField/TextFieldFlat/TextFieldFlat.test.js\",\"startTime\":1586270113846,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"DataTable Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"DataTable Renders\"}],\"endTime\":1586270115978,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/DataTable/DataTable.test.js\",\"startTime\":1586270115599,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"Subtitle Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"Subtitle Renders\"}],\"endTime\":1586270115990,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Typography/Subtitle/Subtitle.test.js\",\"startTime\":1586270115843,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"Overline Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"Overline Renders\"}],\"endTime\":1586270115991,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Typography/Overline/Overline.test.js\",\"startTime\":1586270115780,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"BodyText Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"BodyText Renders\"}],\"endTime\":1586270116055,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Typography/BodyText/BodyText.test.js\",\"startTime\":1586270115931,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"Heading Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"Heading Renders\"}],\"endTime\":1586270116084,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Typography/Heading/Heading.test.js\",\"startTime\":1586270115944,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"Divider Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"Divider Renders\"}],\"endTime\":1586270116117,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Divider/Divider.test.js\",\"startTime\":1586270115996,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"List Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"List Renders\"}],\"endTime\":1586270116133,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/List/List.test.js\",\"startTime\":1586270115997,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"Caption Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"Caption Renders\"}],\"endTime\":1586270116184,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Typography/Caption/Caption.test.js\",\"startTime\":1586270115993,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"Avatar Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"Avatar Renders\"}],\"endTime\":1586270116206,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Avatar/Avatar.test.js\",\"startTime\":1586270116122,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"Ripple Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"Ripple Renders\"}],\"endTime\":1586270116256,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Ripple/Ripple.test.js\",\"startTime\":1586270116071,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"Appbar Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"Appbar Renders\"}],\"endTime\":1586270116271,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Appbar/Appbar.test.js\",\"startTime\":1586270116148,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"Drawer Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"Drawer Renders\"}],\"endTime\":1586270116275,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Drawer/Drawer.test.js\",\"startTime\":1586270116089,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"Paper Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"Paper Renders\"}],\"endTime\":1586270116314,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Paper/Paper.test.js\",\"startTime\":1586270116190,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"Card Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"Card Renders\"}],\"endTime\":1586270116369,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Card/Card.test.js\",\"startTime\":1586270116262,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"Badge Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"Badge Renders\"}],\"endTime\":1586270116404,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Badge/Badge.test.js\",\"startTime\":1586270116217,\"status\":\"passed\",\"summary\":\"\"},{\"assertionResults\":[{\"ancestorTitles\":[],\"failureMessages\":[],\"fullName\":\"Chip Renders\",\"location\":null,\"status\":\"passed\",\"title\":\"Chip Renders\"}],\"endTime\":1586270116411,\"message\":\"\",\"name\":\"/Users/cody/projects/material-bread/src/Components/Chip/Chip.test.js\",\"startTime\":1586270116280,\"status\":\"passed\",\"summary\":\"\"}],\"wasInterrupted\":false}"
  },
  {
    "path": ".npmignore",
    "content": "# OSX\n#\n.DS_Store\nsrc/DS_Store\n*.DS_Store\n# Xcode\n#\nbuild/\n*.pbxuser\n!default.pbxuser\n*.mode1v3\n!default.mode1v3\n*.mode2v3\n!default.mode2v3\n*.perspectivev3\n!default.perspectivev3\nxcuserdata\n*.xccheckout\n*.moved-aside\nDerivedData\n*.hmap\n*.ipa\n*.xcuserstate\nproject.xcworkspace\n\n# Android/IntelliJ\n#\nbuild/\n.idea\n.gradle\nlocal.properties\n*.iml\n\n# node.js\n#\nnode_modules/\nnpm-debug.log\nyarn-error.log\n\n# BUCK\nbuck-out/\n\\.buckd/\n*.keystore\n\n# fastlane\n#\n# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the\n# screenshots whenever they are needed.\n# For more information about the recommended setup visit:\n# https://docs.fastlane.tools/best-practices/source-control/\n\n*/fastlane/report.xml\n*/fastlane/Preview.html\n*/fastlane/screenshots\n\n# Bundle artifact\n*.jsbundle\nnode_modules/**/*\nnpm-debug.*\n*.jks\n*.p12\n*.key\n*.mobileprovision\nios/Index\ndocs/public\ndocs/node_modules\ndocs/.cache\ngh/**/*\njest-test-results.json\n.jest-test-results.json\n\n\ndocs/**/*\n\n__tests__\n.git\n.storybook\nandroid\ndocker\ndocs\nios\npublic\nstorybook\n.buckconfig\n.eslintrc\n.flowconfig\n.gitattributes\n.gitignore\n.prettierrc\n.travis.yml\n.watchmanconfig\nApp.js\napp.json\nbabel.config.js\npackage-lock.json\nrn-cli.config.js\nwebpack.config.js\nyarn.lock\nsrc/**/*.stories.js\nsrc/**/*.test.js\nsrc/storybook/**/*\n**/*/__snapshots__\ndist/**/*.test.js\ndist/**/*.stories.js\ndist/storybook/**/*\nmedia\n.github"
  },
  {
    "path": ".prettierrc",
    "content": "{\n    \"singleQuote\": true,\n    \"trailingComma\": \"all\",\n    \"bracketSpacing\": true,\n    \"jsxBracketSameLine\": true\n  }\n  "
  },
  {
    "path": ".storybook/addons.js",
    "content": "import '@storybook/addon-links/register';\nimport '@storybook/addon-storysource/register';\n// import '@storybook/addon-actions/register';\nimport '@storybook/addon-jest/register';\nimport '@storybook/addon-backgrounds/register';\nimport '@storybook/addon-google-analytics/register';\nimport '@storybook/addon-a11y/register';\n// import '@storybook/addon-viewport/register';\n"
  },
  {
    "path": ".storybook/babel.config.js",
    "content": "module.exports = function(api) {\n  api.cache(true);\n  return {\n    presets: ['module:metro-react-native-babel-preset'],\n    plugins: ['react-native-web', '@babel/plugin-proposal-object-rest-spread'],\n  };\n};\n"
  },
  {
    "path": ".storybook/config.js",
    "content": "import {\n  addDecorator,\n  configure,\n  setAddon,\n  addParameters,\n} from '@storybook/react';\nimport { withTests } from '@storybook/addon-jest';\nimport { withA11y } from '@storybook/addon-a11y';\nimport results from '../.jest-test-results.json';\nimport '@storybook/addon-console';\n\n// Generate required css\nconst materialIconFont = require('react-native-vector-icons/Fonts/MaterialIcons.ttf');\nconst materialCommIconFont = require('react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf');\nconst iconFontStyles = `@font-face {\n  src: url(${materialIconFont}); \n  font-family: MaterialIcons;\n}\n@font-face {\n  src: url(${materialCommIconFont}); \n  font-family: MaterialCommunityIcons;\n}`;\n\naddParameters({\n  options: {\n    showPanel: true,\n    panelPosition: 'bottom',\n    isToolshown: true,\n\n    name: 'Material Bread',\n  },\n  backgrounds: [\n    { name: 'white', value: '#fff', default: true },\n    { name: 'light', value: '#eeeeee' },\n  ],\n  viewport: {},\n});\n\naddDecorator(\n  withTests({\n    results,\n  }),\n  withA11y,\n);\n\nfunction loadStories() {\n  require('../src/storybook/stories');\n}\n\nconfigure(loadStories, module);\n\n// Create stylesheet\nconst style = document.createElement('style');\nstyle.type = 'text/css';\nif (style.styleSheet) {\n  style.styleSheet.cssText = iconFontStyles;\n} else {\n  style.appendChild(document.createTextNode(iconFontStyles));\n}\n// Inject stylesheet\ndocument.head.appendChild(style);\nwindow.STORYBOOK_GA_ID = 'UA-72995758-3';\n"
  },
  {
    "path": ".storybook/webpack.config.js",
    "content": "const path = require('path');\nconst webpack = require('webpack');\n\nmodule.exports = ({ config, mode }) => {\n  config.module.rules.push(\n    {\n      test: /\\.(gif|jpe?g|png|svg)$/,\n      use: {\n        loader: 'url-loader',\n      },\n    },\n    {\n      test: /\\.(js|jsx|mjs)$/,\n      use: {\n        loader: 'babel-loader',\n      },\n    },\n    {\n      test: /\\.stories\\.js?$/,\n      loaders: [require.resolve('@storybook/addon-storysource/loader')],\n      enforce: 'pre',\n    },\n  );\n\n  config.resolve.extensions = ['.web.js', '.js', '.json', '.web.jsx', '.jsx'];\n\n  config.resolve.alias = {\n    'react-native': 'react-native-web',\n  };\n\n  return config;\n};\n"
  },
  {
    "path": ".travis.yml",
    "content": "sudo: false\nlanguage: node_js\nnode_js:\n  - \"8\"\ncache:\n  directories:\n    - node_modules\ninstall:\n  - yarn install\nscript:\n  - yarn run lint\n  - yarn run test\n"
  },
  {
    "path": ".watchmanconfig",
    "content": "{}"
  },
  {
    "path": "App.js",
    "content": "export default from './src/storybook';\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2019 Cody Pearce\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "<p align=\"center\" style=\"margin-bottom: 0px !important;\">\n  <img width=\"200\" src=\"http://material-bread.org/logo-shadow.svg\" alt=\"Material Bread logo\" align=\"center\">\n</p>\n<h1 align=\"center\" style=\"margin-top: 0px;\">Material Bread</h1>\n\n<p align=\"center\" >Cross Platform React Native Material Design Components</p>\n\n<div align=\"center\" >\n\n[![Build Status](https://img.shields.io/travis/codypearce/material-bread/master.svg?style=for-the-badge)](https://travis-ci.org/codypearce/material-bread) [![NPM registry](https://img.shields.io/npm/v/material-bread.svg?style=for-the-badge)](https://www.npmjs.com/package/material-bread) ![Code style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge) ![NPM license](https://img.shields.io/badge/license-mit-red.svg?style=for-the-badge) [![Storybook](https://cdn.jsdelivr.net/gh/storybooks/brand@master/badge/badge-storybook.svg?style=for-the-badge)](https://codypearce.github.io/material-bread/)\n\n</div>\n\n<p align=\"center\" style=\"margin-bottom: 0px !important;\">\n  <img width=\"800\" src=\"media/cross-platform.gif\" alt=\"adf\" align=\"center\">\n</p>\n\n<p align=\"center\" style=\"margin-bottom: 0px !important;\">\n  <h2 align=\"center\" style=\"margin-top: 0px;\">Choose a platform to get started</h2>\n</p>\n\n<p align=\"center\" style=\"margin-bottom: 0px !important;\">\n  <a href=\"https://material-bread.org/getting-started/react-native\">\n    <img  src=\"media/buttons/mb-rn.png\" alt=\"adf\" align=\"center\">\n  </a>\n <a href=\"https://material-bread.org/getting-started/web\">\n    <img  src=\"media/buttons/mb-web.png\" alt=\"adf\" align=\"center\">\n  </a>\n  <a href=\"https://material-bread.org/getting-started/electron\">\n    <img  src=\"media/buttons/mb-electron.png\" alt=\"adf\" align=\"center\">\n  </a>\n   <a href=\"https://material-bread.org/getting-started/macos\">\n    <img  src=\"media/buttons/mb-macos.png\" alt=\"adf\" align=\"center\">\n  </a>\n  <a href=\"https://material-bread.org/getting-started/windows\">\n    <img  src=\"media/buttons/mb-windows.png\" alt=\"adf\" align=\"center\">\n  </a>\n  <a href=\"https://material-bread.org/getting-started/nextjs\">\n    <img  src=\"media/buttons/mb-next.png\" alt=\"adf\" align=\"center\">\n  </a>\n  <a href=\"https://material-bread.org/getting-started/expo\">\n    <img  src=\"media/buttons/mb-expo.png\" alt=\"adf\" align=\"center\">\n  </a>\n  <a href=\"https://material-bread.org/getting-started/vue-native\">\n    <img  src=\"media/buttons/mb-vue-native.png\" alt=\"adf\" align=\"center\">\n  </a>\n  \n</p>\n\n### Features\n\n- Highly Customizable React Native Components.\n- Cross platform support: React Native (iOS, Android), React-native-web (Browsers), Electron (Windows, Mac, Linux), react-native-windows, react-native-macos, Next.js, Expo, Vue Native\n- Support for Material Design 2.0 components.\n- Live react native demos you can edit in in your browser.\n- Typescript support\n\n## Table of Contents\n\n- [Quick Start](#quick-start)\n- [Documentation](#documentation)\n- [Getting Started](#getting-started)\n  - [Guides](#guides)\n  - [Example Repos](#example-repos)\n  - [Usage](#usage)\n- [Supported Components](#supported-components)\n- [Contributing](#contributing)\n  - [Library](#contribute-to-library)\n  - [Docs](#contribute-to-docs)\n  - [Easy Contribution](#easy-first-contribution)\n- [Tests](#tests)\n- [Accessibility](#accessibility)\n- [Copyright and License](#copyright-and-license)\n\n## Quick Start\n\n1. `npm install material-bread` or `yarn add material-bread`\n2. Install and link [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) and [react-native-svg](https://github.com/react-native-community/react-native-svg)\n3. Wrap your root `<App>` with a `<BreadProvider>`\n\n```jsx\n<BreadProvider>\n  <Root />\n</BreadProvider>\n```\n\n4. Start developing!\n\nRead the [getting started](#getting-started) guides for your platform to learn more.\n\n## Documentation\n\nThe component API docs and curated demos can be found at [material-bread.org](https://material-bread.org). See the [contributing](#contributing) section to learn how to run the docs locally.\n\nMore demos for each component can be found at the component [Storybook](https://codypearce.github.io/material-bread/). This environment is used for developing cross-platform, see the [contributing](#contributing) section to learn how to set it up locally.\n\n## Getting Started\n\n### Guides\n\n[Getting Started with React Native](http://material-bread.org/getting-started/react-native)\n\n[Getting Started with Web](http://material-bread.org/getting-started/web)\n\n[Getting Started with Electron](http://material-bread.org/getting-started/electron)\n\n[Getting Started with MacOS](http://material-bread.org/getting-started/macos)\n\n[Getting Started with Windows](http://material-bread.org/getting-started/windows)\n\n[Getting Started with NextJS](http://material-bread.org/getting-started/nextjs)\n\n[Getting Started with Expo](http://material-bread.org/getting-started/expo)\n\n[Getting Started with Vue Native](http://material-bread.org/getting-started/vue-native)\n\n### Example Repos\n\nBoilerplate projects with minimal configuration to get started on each platform.\n\nReact Native: [material-bread-rn-example](https://github.com/codypearce/material-bread-rn-example)\n\nReact Web: [material-bread-react-example](https://github.com/codypearce/material-bread-react-example)\n\nElectron: [material-bread-electron-example](https://github.com/codypearce/material-bread-electron-example)\n\nMacOS: [material-bread-macos-example](https://github.com/codypearce/material-bread-macos-example)\n\nWindows: [material-bread-windows-example](https://github.com/codypearce/material-bread-windows-example)\n\nNextJS: [material-bread-next-example](https://github.com/fortezhuo/material-bread-next-example)\n\nExpo: [material-bread-expo-example](https://github.com/codypearce/material-bread-expo-example)\n\nVue Native: [material-bread-vue-native-example](https://github.com/codypearce/material-bread-vue-native-example)\n\n### Usage\n\n```jsx\nimport React from 'react';\nimport { Button } from 'material-bread';\n\nfunction App() {\n  return <Button type=\"contained\">Click Me</Button>;\n}\n```\n\n\n## Sponsored By\n\n<a href=\"https://www.fullstacklabs.co/\">\n  <img width=\"200\" src=\"https://raw.githubusercontent.com/codypearce/material-bread/master/media/FSL-Lockup-Dark-Gradient-Web%402x.png\" alt=\"Fullstack Labs\" >\n</a>\n\n## Supported Components\n\nA major goal of this library is to match all the components found in the material docs or provide enough demos/instructions that a developer can create a non-supported component from supported components. Keep in mind this still a work in progress so not all functionality from the Material Docs is supported yet.\n\nCurrently there are 39 distinct components (though what is a full component and what is a subcomponent is somewhat arbitrary), each with many variations, and 4 utility components.\n\n| Name                                                                         | iOS | Android | Web | Electron |\n| ---------------------------------------------------------------------------- | --- | ------- | --- | -------- |\n| [Appbar](https://material-bread.org/components/appbar)                       | ✓   | ✓       | ✓   | ✓        |\n| [AppbarBottom](https://material-bread.org/components/appbar-bottom)          | ✓   | ✓       | ✓   | ✓        |\n| [Avatar](https://material-bread.org/components/avatar)                       | ✓   | ✓       | ✓   | ✓        |\n| [Backdrop](https://material-bread.org/components/backdrop)                   | ✓   | ✓       | ✓   | ✓        |\n| [Badge](https://material-bread.org/components/badge)                         | ✓   | ✓       | ✓   | ✓        |\n| [Banner](https://material-bread.org/components/banner)                       | ✓   | ✓       | ✓   | ✓        |\n| [Bottom Navigation](https://material-bread.org/components/bottom-navigation) | ✓   | ✓       | ✓   | ✓        |\n| [Button](https://material-bread.org/components/button)                       | ✓   | ✓       | ✓   | ✓        |\n| [Card](https://material-bread.org/components/card)                           | ✓   | ✓       | ✓   | ✓        |\n| [Checkbox](https://material-bread.org/components/checkbox)                   | ✓   | ✓       | ✓   | ✓        |\n| [Chip](https://material-bread.org/components/chip)                           | ✓   | ✓       | ✓   | ✓        |\n| [DataTable](https://material-bread.org/components/datatable)                 | ✓   | ✓       | ✓   | ✓        |\n| [Dialog](https://material-bread.org/components/dialog)                       | ✓   | ✓       | ✓   | ✓        |\n| [Divider](https://material-bread.org/components/divider)                     | ✓   | ✓       | ✓   | ✓        |\n| [Drawer](https://material-bread.org/components/drawer)                       | ✓   | ✓       | ✓   | ✓        |\n| [DrawerBottom](https://material-bread.org/components/drawer-bottom)          | ✓   | ✓       | ✓   | ✓        |\n| [Fab](https://material-bread.org/components/fab)                             | ✓   | ✓       | ✓   | ✓        |\n| [FabSpeeddial](https://material-bread.org/components/fab-speeddial)          | ✓   | ✓       | ✓   | ✓        |\n| [Icon](https://material-bread.org/components/icon)                           | ✓   | ✓       | ✓   | ✓        |\n| [IconButton](https://material-bread.org/components/iconbutton)               | ✓   | ✓       | ✓   | ✓        |\n| [List](https://material-bread.org/components/list)                           | ✓   | ✓       | ✓   | ✓        |\n| [ListExpand](https://material-bread.org/components/list-expand)              | ✓   | ✓       | ✓   | ✓        |\n| [Menu](https://material-bread.org/components/menu)                           | ✓   | ✓       | ✓   | ✓        |\n| [Paper](https://material-bread.org/components/paper)                         | ✓   | ✓       | ✓   | ✓        |\n| [ProgressBar](https://material-bread.org/components/progress-bar)            | ✓   | ✓       | ✓   | ✓        |\n| [ProgressCircle](https://material-bread.org/components/progress-circle)      | ✓   | ✓       | ✓   | ✓        |\n| [RadioButton](https://material-bread.org/components/radiobutton)             | ✓   | ✓       | ✓   | ✓        |\n| [Ripple](https://material-bread.org/components/ripple)                       | ✓   | ✓       | ✓   | ✓        |\n| [Select](https://material-bread.org/components/select)                       | ✓   | ✓       | ✓   | ✓        |\n| [SheetBottom](https://material-bread.org/components/sheet-bottom)            | ✓   | ✓       | ✓   | ✓        |\n| [SheetSide](https://material-bread.org/components/sheet-side)                | ✓   | ✓       | ✓   | ✓        |\n| [Slider](https://material-bread.org/components/slider)                       | ✓   | ✓       | ✓   | ✓        |\n| [Snackbar](https://material-bread.org/components/snackbar)                   | ✓   | ✓       | ✓   | ✓        |\n| [SwipeNav](https://material-bread.org/components/swipenav)                   | ✓   | ✓       | ✓   | ✓        |\n| [Switch](https://material-bread.org/components/switch)                       | ✓   | ✓       | ✓   | ✓        |\n| [Tabs](https://material-bread.org/components/tabs)                           | ✓   | ✓       | ✓   | ✓        |\n| [TextField](https://material-bread.org/components/textfield)                 | ✓   | ✓       | ✓   | ✓        |\n| [ToggleButton](https://material-bread.org/components/togglebutton)           | ✓   | ✓       | ✓   | ✓        |\n| [Tooltip](https://material-bread.org/components/tooltip)                     | ✓   | ✓       | ✓   | ✓        |\n| [Typography](https://material-bread.org/components/typography)               | ✓   | ✓       | ✓   | ✓        |\n\nUtility components\n\n| Name                                                    | iOS | Android | Web | Electron |\n| ------------------------------------------------------- | --- | ------- | --- | -------- |\n| [Anchor](https://material-bread.org/utils/anchor)       | ✓   | ✓       | ✓   | ✓        |\n| [Color](https://material-bread.org/utils/color)         | ✓   | ✓       | ✓   | ✓        |\n| [Hoverable](https://material-bread.org/utils/hoverable) | ✓   | ✓       | ✓   | ✓        |\n| [Shadow](https://material-bread.org/utils/shadow)       | ✓   | ✓       | ✓   | ✓        |\n\n## Contributing\n\nAll contributions are welcome and encouraged. If you are reporting a bug, please follow the bug issue template. If you are proposing an enhancement, please first search the backlogs before creating a new issue.\n\n#### Contribute to library\n\n[Storybook](https://github.com/storybooks/storybook) is used as the dev environment for all components on all platforms. You can learn about how to get the storybook environment running locally for all platforms [here](http://material-bread.org/contributing/library). Please follow the conventions already in place. For example, most components follow the made up \"props for prebuilt, children for custom\" pattern. Additionally, make sure you are testing your components across platforms before making a PR.\n\n#### Contribute to docs\n\nDocumentation is built using [GatsbyJs](https://github.com/gatsbyjs/gatsby) and all pages are built using react components. You can learn how to get the docs running locally [here](https://material-bread.org/contributing/docs).\n\n#### Easy first contribution\n\nYou can start contribute extremely easily by improving demos or adding more interesting demos to the docs or storybook. Interesting, useful, and plentiful demos is a major goal of the project, so any help in that regard would be greatly appreciated.\n\n## Tests\n\n[Jest](https://jestjs.io/) is the current test framework for all components. You can see the result of each component test in our [storybook environement](https://codypearce.github.io/material-bread/?path=/story/components-appbar--simple) under the \"Tests\" tab. Writing more comprehensive tests is on the roadmap, but please consider contributing to speed this process up.\n\nYou can run tests locally using `npm test`.\n\nYou can generate test coverage by running `npm run test:generate-output`, this will output a json file with coverage.\n\n## Accessibility\n\n`react-native-web` describes how to write accessible react-native components on the web [here](https://github.com/necolas/react-native-web/blob/master/docs/guides/accessibility.md). Additionally, the storybook addon, [addon-a11y](https://www.npmjs.com/package/@storybook/addon-a11y), runs some simple accessibility tests on each component story. You can see the output of each accessibility test on the [Accessibility](https://codypearce.github.io/material-bread/?path=/story/components-buttons--custom) tab for each component. Please consider contributing to make accessibility even better.\n\n## Copyright and License\n\nCopyright 2019 Material Bread.\nCode released under the MIT license.\n"
  },
  {
    "path": "android/app/BUCK",
    "content": "# To learn about Buck see [Docs](https://buckbuild.com/).\n# To run your application with Buck:\n# - install Buck\n# - `npm start` - to start the packager\n# - `cd android`\n# - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname \"CN=Android Debug,O=Android,C=US\"`\n# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck\n# - `buck install -r android/app` - compile, install and run application\n#\n\nload(\":build_defs.bzl\", \"create_aar_targets\", \"create_jar_targets\")\n\nlib_deps = []\n\ncreate_aar_targets(glob([\"libs/*.aar\"]))\n\ncreate_jar_targets(glob([\"libs/*.jar\"]))\n\nandroid_library(\n    name = \"all-libs\",\n    exported_deps = lib_deps,\n)\n\nandroid_library(\n    name = \"app-code\",\n    srcs = glob([\n        \"src/main/java/**/*.java\",\n    ]),\n    deps = [\n        \":all-libs\",\n        \":build_config\",\n        \":res\",\n    ],\n)\n\nandroid_build_config(\n    name = \"build_config\",\n    package = \"com.materialbread\",\n)\n\nandroid_resource(\n    name = \"res\",\n    package = \"com.materialbread\",\n    res = \"src/main/res\",\n)\n\nandroid_binary(\n    name = \"app\",\n    keystore = \"//android/keystores:debug\",\n    manifest = \"src/main/AndroidManifest.xml\",\n    package_type = \"debug\",\n    deps = [\n        \":app-code\",\n    ],\n)\n"
  },
  {
    "path": "android/app/build.gradle",
    "content": "apply plugin: \"com.android.application\"\n\nimport com.android.build.OutputFile\n\n/**\n * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets\n * and bundleReleaseJsAndAssets).\n * These basically call `react-native bundle` with the correct arguments during the Android build\n * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the\n * bundle directly from the development server. Below you can see all the possible configurations\n * and their defaults. If you decide to add a configuration block, make sure to add it before the\n * `apply from: \"../../node_modules/react-native/react.gradle\"` line.\n *\n * project.ext.react = [\n *   // the name of the generated asset file containing your JS bundle\n *   bundleAssetName: \"index.android.bundle\",\n *\n *   // the entry file for bundle generation\n *   entryFile: \"index.android.js\",\n *\n *   // whether to bundle JS and assets in debug mode\n *   bundleInDebug: false,\n *\n *   // whether to bundle JS and assets in release mode\n *   bundleInRelease: true,\n *\n *   // whether to bundle JS and assets in another build variant (if configured).\n *   // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants\n *   // The configuration property can be in the following formats\n *   //         'bundleIn${productFlavor}${buildType}'\n *   //         'bundleIn${buildType}'\n *   // bundleInFreeDebug: true,\n *   // bundleInPaidRelease: true,\n *   // bundleInBeta: true,\n *\n *   // whether to disable dev mode in custom build variants (by default only disabled in release)\n *   // for example: to disable dev mode in the staging build type (if configured)\n *   devDisabledInStaging: true,\n *   // The configuration property can be in the following formats\n *   //         'devDisabledIn${productFlavor}${buildType}'\n *   //         'devDisabledIn${buildType}'\n *\n *   // the root of your project, i.e. where \"package.json\" lives\n *   root: \"../../\",\n *\n *   // where to put the JS bundle asset in debug mode\n *   jsBundleDirDebug: \"$buildDir/intermediates/assets/debug\",\n *\n *   // where to put the JS bundle asset in release mode\n *   jsBundleDirRelease: \"$buildDir/intermediates/assets/release\",\n *\n *   // where to put drawable resources / React Native assets, e.g. the ones you use via\n *   // require('./image.png')), in debug mode\n *   resourcesDirDebug: \"$buildDir/intermediates/res/merged/debug\",\n *\n *   // where to put drawable resources / React Native assets, e.g. the ones you use via\n *   // require('./image.png')), in release mode\n *   resourcesDirRelease: \"$buildDir/intermediates/res/merged/release\",\n *\n *   // by default the gradle tasks are skipped if none of the JS files or assets change; this means\n *   // that we don't look at files in android/ or ios/ to determine whether the tasks are up to\n *   // date; if you have any other folders that you want to ignore for performance reasons (gradle\n *   // indexes the entire tree), add them here. Alternatively, if you have JS files in android/\n *   // for example, you might want to remove it from here.\n *   inputExcludes: [\"android/**\", \"ios/**\"],\n *\n *   // override which node gets called and with what additional arguments\n *   nodeExecutableAndArgs: [\"node\"],\n *\n *   // supply additional arguments to the packager\n *   extraPackagerArgs: []\n * ]\n */\n\nproject.ext.react = [\n    entryFile: \"index.js\"\n]\n\napply from: \"../../node_modules/react-native/react.gradle\"\n\n/**\n * Set this to true to create two separate APKs instead of one:\n *   - An APK that only works on ARM devices\n *   - An APK that only works on x86 devices\n * The advantage is the size of the APK is reduced by about 4MB.\n * Upload all the APKs to the Play Store and people will download\n * the correct one based on the CPU architecture of their device.\n */\ndef enableSeparateBuildPerCPUArchitecture = false\n\n/**\n * Run Proguard to shrink the Java bytecode in release builds.\n */\ndef enableProguardInReleaseBuilds = false\n\nandroid {\n    compileSdkVersion rootProject.ext.compileSdkVersion\n    buildToolsVersion rootProject.ext.buildToolsVersion\n\n    defaultConfig {\n        applicationId \"com.materialbread\"\n        minSdkVersion rootProject.ext.minSdkVersion\n        targetSdkVersion rootProject.ext.targetSdkVersion\n        versionCode 1\n        versionName \"1.0\"\n    }\n    splits {\n        abi {\n            reset()\n            enable enableSeparateBuildPerCPUArchitecture\n            universalApk false  // If true, also generate a universal APK\n            include \"armeabi-v7a\", \"x86\", \"arm64-v8a\"\n        }\n    }\n    buildTypes {\n        release {\n            minifyEnabled enableProguardInReleaseBuilds\n            proguardFiles getDefaultProguardFile(\"proguard-android.txt\"), \"proguard-rules.pro\"\n        }\n    }\n    // applicationVariants are e.g. debug, release\n    applicationVariants.all { variant ->\n        variant.outputs.each { output ->\n            // For each separate APK per architecture, set a unique version code as described here:\n            // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits\n            def versionCodes = [\"armeabi-v7a\":1, \"x86\":2, \"arm64-v8a\": 3]\n            def abi = output.getFilter(OutputFile.ABI)\n            if (abi != null) {  // null for the universal-debug, universal-release variants\n                output.versionCodeOverride =\n                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode\n            }\n        }\n    }\n}\n\ndependencies {\n    implementation project(':react-native-svg')\n    implementation project(':react-native-vector-icons')\n    implementation fileTree(dir: \"libs\", include: [\"*.jar\"])\n    implementation \"com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}\"\n    implementation \"com.facebook.react:react-native:+\"  // From node_modules\n}\n\n// Run this once to be able to run the application with BUCK\n// puts all compile dependencies into folder libs for BUCK to use\ntask copyDownloadableDepsToLibs(type: Copy) {\n    from configurations.compile\n    into 'libs'\n}\n"
  },
  {
    "path": "android/app/build_defs.bzl",
    "content": "\"\"\"Helper definitions to glob .aar and .jar targets\"\"\"\n\ndef create_aar_targets(aarfiles):\n    for aarfile in aarfiles:\n        name = \"aars__\" + aarfile[aarfile.rindex(\"/\") + 1:aarfile.rindex(\".aar\")]\n        lib_deps.append(\":\" + name)\n        android_prebuilt_aar(\n            name = name,\n            aar = aarfile,\n        )\n\ndef create_jar_targets(jarfiles):\n    for jarfile in jarfiles:\n        name = \"jars__\" + jarfile[jarfile.rindex(\"/\") + 1:jarfile.rindex(\".jar\")]\n        lib_deps.append(\":\" + name)\n        prebuilt_jar(\n            name = name,\n            binary_jar = jarfile,\n        )\n"
  },
  {
    "path": "android/app/proguard-rules.pro",
    "content": "# Add project specific ProGuard rules here.\n# By default, the flags in this file are appended to flags specified\n# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt\n# You can edit the include path and order by changing the proguardFiles\n# directive in build.gradle.\n#\n# For more details, see\n#   http://developer.android.com/guide/developing/tools/proguard.html\n\n# Add any project specific keep options here:\n\n# If your project uses WebView with JS, uncomment the following\n# and specify the fully qualified class name to the JavaScript interface\n# class:\n#-keepclassmembers class fqcn.of.javascript.interface.for.webview {\n#   public *;\n#}\n"
  },
  {
    "path": "android/app/src/main/AndroidManifest.xml",
    "content": "<manifest xmlns:android=\"http://schemas.android.com/apk/res/android\"\n  package=\"com.materialbread\">\n\n    <uses-permission android:name=\"android.permission.INTERNET\" />\n    <uses-permission android:name=\"android.permission.SYSTEM_ALERT_WINDOW\"/>\n\n    <application\n      android:name=\".MainApplication\"\n      android:label=\"@string/app_name\"\n      android:icon=\"@mipmap/ic_launcher\"\n      android:roundIcon=\"@mipmap/ic_launcher_round\"\n      android:allowBackup=\"false\"\n      android:theme=\"@style/AppTheme\">\n      <activity\n        android:name=\".MainActivity\"\n        android:label=\"@string/app_name\"\n        android:configChanges=\"keyboard|keyboardHidden|orientation|screenSize\"\n        android:windowSoftInputMode=\"adjustResize\">\n        <intent-filter>\n            <action android:name=\"android.intent.action.MAIN\" />\n            <category android:name=\"android.intent.category.LAUNCHER\" />\n        </intent-filter>\n      </activity>\n      <activity android:name=\"com.facebook.react.devsupport.DevSettingsActivity\" />\n    </application>\n\n</manifest>\n"
  },
  {
    "path": "android/app/src/main/java/com/materialbread/MainActivity.java",
    "content": "package com.materialbread;\n\nimport com.facebook.react.ReactActivity;\n\npublic class MainActivity extends ReactActivity {\n\n    /**\n     * Returns the name of the main component registered from JavaScript.\n     * This is used to schedule rendering of the component.\n     */\n    @Override\n    protected String getMainComponentName() {\n        return \"MaterialBread\";\n    }\n}\n"
  },
  {
    "path": "android/app/src/main/java/com/materialbread/MainApplication.java",
    "content": "package com.materialbread;\n\nimport android.app.Application;\n\nimport com.facebook.react.ReactApplication;\nimport com.horcrux.svg.SvgPackage;\nimport com.oblador.vectoricons.VectorIconsPackage;\nimport com.facebook.react.ReactNativeHost;\nimport com.facebook.react.ReactPackage;\nimport com.facebook.react.shell.MainReactPackage;\nimport com.facebook.soloader.SoLoader;\n\nimport java.util.Arrays;\nimport java.util.List;\n\npublic class MainApplication extends Application implements ReactApplication {\n\n  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {\n    @Override\n    public boolean getUseDeveloperSupport() {\n      return BuildConfig.DEBUG;\n    }\n\n    @Override\n    protected List<ReactPackage> getPackages() {\n      return Arrays.<ReactPackage>asList(\n          new MainReactPackage(),\n            new SvgPackage(),\n            new VectorIconsPackage()\n      );\n    }\n\n    @Override\n    protected String getJSMainModuleName() {\n      return \"index\";\n    }\n  };\n\n  @Override\n  public ReactNativeHost getReactNativeHost() {\n    return mReactNativeHost;\n  }\n\n  @Override\n  public void onCreate() {\n    super.onCreate();\n    SoLoader.init(this, /* native exopackage */ false);\n  }\n}\n"
  },
  {
    "path": "android/app/src/main/res/values/strings.xml",
    "content": "<resources>\n    <string name=\"app_name\">MaterialBread</string>\n</resources>\n"
  },
  {
    "path": "android/app/src/main/res/values/styles.xml",
    "content": "<resources>\n\n    <!-- Base application theme. -->\n    <style name=\"AppTheme\" parent=\"Theme.AppCompat.Light.NoActionBar\">\n        <!-- Customize your theme here. -->\n    </style>\n\n</resources>\n"
  },
  {
    "path": "android/build.gradle",
    "content": "// Top-level build file where you can add configuration options common to all sub-projects/modules.\n\nbuildscript {\n    ext {\n        buildToolsVersion = \"28.0.2\"\n        minSdkVersion = 16\n        compileSdkVersion = 28\n        targetSdkVersion = 27\n        supportLibVersion = \"28.0.0\"\n    }\n    repositories {\n        google()\n        jcenter()\n    }\n    dependencies {\n        classpath 'com.android.tools.build:gradle:3.3.0'\n\n        // NOTE: Do not place your application dependencies here; they belong\n        // in the individual module build.gradle files\n    }\n}\n\nallprojects {\n    repositories {\n        mavenLocal()\n        google()\n        jcenter()\n        maven {\n            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm\n            url \"$rootDir/../node_modules/react-native/android\"\n        }\n    }\n}\n\n\ntask wrapper(type: Wrapper) {\n    gradleVersion = '4.7'\n    distributionUrl = distributionUrl.replace(\"bin\", \"all\")\n}\n"
  },
  {
    "path": "android/gradle/wrapper/gradle-wrapper.properties",
    "content": "distributionBase=GRADLE_USER_HOME\ndistributionPath=wrapper/dists\nzipStoreBase=GRADLE_USER_HOME\nzipStorePath=wrapper/dists\ndistributionUrl=https\\://services.gradle.org/distributions/gradle-4.10.1-all.zip\n"
  },
  {
    "path": "android/gradle.properties",
    "content": "# Project-wide Gradle settings.\n\n# IDE (e.g. Android Studio) users:\n# Gradle settings configured through the IDE *will override*\n# any settings specified in this file.\n\n# For more details on how to configure your build environment visit\n# http://www.gradle.org/docs/current/userguide/build_environment.html\n\n# Specifies the JVM arguments used for the daemon process.\n# The setting is particularly useful for tweaking memory settings.\n# Default value: -Xmx10248m -XX:MaxPermSize=256m\n# org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8\n\n# When configured, Gradle will run in incubating parallel mode.\n# This option should only be used with decoupled projects. More details, visit\n# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects\n# org.gradle.parallel=true\n\n\n"
  },
  {
    "path": "android/gradlew",
    "content": "#!/usr/bin/env sh\n\n##############################################################################\n##\n##  Gradle start up script for UN*X\n##\n##############################################################################\n\n# Attempt to set APP_HOME\n# Resolve links: $0 may be a link\nPRG=\"$0\"\n# Need this for relative symlinks.\nwhile [ -h \"$PRG\" ] ; do\n    ls=`ls -ld \"$PRG\"`\n    link=`expr \"$ls\" : '.*-> \\(.*\\)$'`\n    if expr \"$link\" : '/.*' > /dev/null; then\n        PRG=\"$link\"\n    else\n        PRG=`dirname \"$PRG\"`\"/$link\"\n    fi\ndone\nSAVED=\"`pwd`\"\ncd \"`dirname \\\"$PRG\\\"`/\" >/dev/null\nAPP_HOME=\"`pwd -P`\"\ncd \"$SAVED\" >/dev/null\n\nAPP_NAME=\"Gradle\"\nAPP_BASE_NAME=`basename \"$0\"`\n\n# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.\nDEFAULT_JVM_OPTS=\"\"\n\n# Use the maximum available, or set MAX_FD != -1 to use that value.\nMAX_FD=\"maximum\"\n\nwarn () {\n    echo \"$*\"\n}\n\ndie () {\n    echo\n    echo \"$*\"\n    echo\n    exit 1\n}\n\n# OS specific support (must be 'true' or 'false').\ncygwin=false\nmsys=false\ndarwin=false\nnonstop=false\ncase \"`uname`\" in\n  CYGWIN* )\n    cygwin=true\n    ;;\n  Darwin* )\n    darwin=true\n    ;;\n  MINGW* )\n    msys=true\n    ;;\n  NONSTOP* )\n    nonstop=true\n    ;;\nesac\n\nCLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar\n\n# Determine the Java command to use to start the JVM.\nif [ -n \"$JAVA_HOME\" ] ; then\n    if [ -x \"$JAVA_HOME/jre/sh/java\" ] ; then\n        # IBM's JDK on AIX uses strange locations for the executables\n        JAVACMD=\"$JAVA_HOME/jre/sh/java\"\n    else\n        JAVACMD=\"$JAVA_HOME/bin/java\"\n    fi\n    if [ ! -x \"$JAVACMD\" ] ; then\n        die \"ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME\n\nPlease set the JAVA_HOME variable in your environment to match the\nlocation of your Java installation.\"\n    fi\nelse\n    JAVACMD=\"java\"\n    which java >/dev/null 2>&1 || die \"ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.\n\nPlease set the JAVA_HOME variable in your environment to match the\nlocation of your Java installation.\"\nfi\n\n# Increase the maximum file descriptors if we can.\nif [ \"$cygwin\" = \"false\" -a \"$darwin\" = \"false\" -a \"$nonstop\" = \"false\" ] ; then\n    MAX_FD_LIMIT=`ulimit -H -n`\n    if [ $? -eq 0 ] ; then\n        if [ \"$MAX_FD\" = \"maximum\" -o \"$MAX_FD\" = \"max\" ] ; then\n            MAX_FD=\"$MAX_FD_LIMIT\"\n        fi\n        ulimit -n $MAX_FD\n        if [ $? -ne 0 ] ; then\n            warn \"Could not set maximum file descriptor limit: $MAX_FD\"\n        fi\n    else\n        warn \"Could not query maximum file descriptor limit: $MAX_FD_LIMIT\"\n    fi\nfi\n\n# For Darwin, add options to specify how the application appears in the dock\nif $darwin; then\n    GRADLE_OPTS=\"$GRADLE_OPTS \\\"-Xdock:name=$APP_NAME\\\" \\\"-Xdock:icon=$APP_HOME/media/gradle.icns\\\"\"\nfi\n\n# For Cygwin, switch paths to Windows format before running java\nif $cygwin ; then\n    APP_HOME=`cygpath --path --mixed \"$APP_HOME\"`\n    CLASSPATH=`cygpath --path --mixed \"$CLASSPATH\"`\n    JAVACMD=`cygpath --unix \"$JAVACMD\"`\n\n    # We build the pattern for arguments to be converted via cygpath\n    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`\n    SEP=\"\"\n    for dir in $ROOTDIRSRAW ; do\n        ROOTDIRS=\"$ROOTDIRS$SEP$dir\"\n        SEP=\"|\"\n    done\n    OURCYGPATTERN=\"(^($ROOTDIRS))\"\n    # Add a user-defined pattern to the cygpath arguments\n    if [ \"$GRADLE_CYGPATTERN\" != \"\" ] ; then\n        OURCYGPATTERN=\"$OURCYGPATTERN|($GRADLE_CYGPATTERN)\"\n    fi\n    # Now convert the arguments - kludge to limit ourselves to /bin/sh\n    i=0\n    for arg in \"$@\" ; do\n        CHECK=`echo \"$arg\"|egrep -c \"$OURCYGPATTERN\" -`\n        CHECK2=`echo \"$arg\"|egrep -c \"^-\"`                                 ### Determine if an option\n\n        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition\n            eval `echo args$i`=`cygpath --path --ignore --mixed \"$arg\"`\n        else\n            eval `echo args$i`=\"\\\"$arg\\\"\"\n        fi\n        i=$((i+1))\n    done\n    case $i in\n        (0) set -- ;;\n        (1) set -- \"$args0\" ;;\n        (2) set -- \"$args0\" \"$args1\" ;;\n        (3) set -- \"$args0\" \"$args1\" \"$args2\" ;;\n        (4) set -- \"$args0\" \"$args1\" \"$args2\" \"$args3\" ;;\n        (5) set -- \"$args0\" \"$args1\" \"$args2\" \"$args3\" \"$args4\" ;;\n        (6) set -- \"$args0\" \"$args1\" \"$args2\" \"$args3\" \"$args4\" \"$args5\" ;;\n        (7) set -- \"$args0\" \"$args1\" \"$args2\" \"$args3\" \"$args4\" \"$args5\" \"$args6\" ;;\n        (8) set -- \"$args0\" \"$args1\" \"$args2\" \"$args3\" \"$args4\" \"$args5\" \"$args6\" \"$args7\" ;;\n        (9) set -- \"$args0\" \"$args1\" \"$args2\" \"$args3\" \"$args4\" \"$args5\" \"$args6\" \"$args7\" \"$args8\" ;;\n    esac\nfi\n\n# Escape application args\nsave () {\n    for i do printf %s\\\\n \"$i\" | sed \"s/'/'\\\\\\\\''/g;1s/^/'/;\\$s/\\$/' \\\\\\\\/\" ; done\n    echo \" \"\n}\nAPP_ARGS=$(save \"$@\")\n\n# Collect all arguments for the java command, following the shell quoting and substitution rules\neval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS \"\\\"-Dorg.gradle.appname=$APP_BASE_NAME\\\"\" -classpath \"\\\"$CLASSPATH\\\"\" org.gradle.wrapper.GradleWrapperMain \"$APP_ARGS\"\n\n# by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong\nif [ \"$(uname)\" = \"Darwin\" ] && [ \"$HOME\" = \"$PWD\" ]; then\n  cd \"$(dirname \"$0\")\"\nfi\n\nexec \"$JAVACMD\" \"$@\"\n"
  },
  {
    "path": "android/gradlew.bat",
    "content": "@if \"%DEBUG%\" == \"\" @echo off\r\n@rem ##########################################################################\r\n@rem\r\n@rem  Gradle startup script for Windows\r\n@rem\r\n@rem ##########################################################################\r\n\r\n@rem Set local scope for the variables with windows NT shell\r\nif \"%OS%\"==\"Windows_NT\" setlocal\r\n\r\nset DIRNAME=%~dp0\r\nif \"%DIRNAME%\" == \"\" set DIRNAME=.\r\nset APP_BASE_NAME=%~n0\r\nset APP_HOME=%DIRNAME%\r\n\r\n@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.\r\nset DEFAULT_JVM_OPTS=\r\n\r\n@rem Find java.exe\r\nif defined JAVA_HOME goto findJavaFromJavaHome\r\n\r\nset JAVA_EXE=java.exe\r\n%JAVA_EXE% -version >NUL 2>&1\r\nif \"%ERRORLEVEL%\" == \"0\" goto init\r\n\r\necho.\r\necho ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.\r\necho.\r\necho Please set the JAVA_HOME variable in your environment to match the\r\necho location of your Java installation.\r\n\r\ngoto fail\r\n\r\n:findJavaFromJavaHome\r\nset JAVA_HOME=%JAVA_HOME:\"=%\r\nset JAVA_EXE=%JAVA_HOME%/bin/java.exe\r\n\r\nif exist \"%JAVA_EXE%\" goto init\r\n\r\necho.\r\necho ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%\r\necho.\r\necho Please set the JAVA_HOME variable in your environment to match the\r\necho location of your Java installation.\r\n\r\ngoto fail\r\n\r\n:init\r\n@rem Get command-line arguments, handling Windows variants\r\n\r\nif not \"%OS%\" == \"Windows_NT\" goto win9xME_args\r\n\r\n:win9xME_args\r\n@rem Slurp the command line arguments.\r\nset CMD_LINE_ARGS=\r\nset _SKIP=2\r\n\r\n:win9xME_args_slurp\r\nif \"x%~1\" == \"x\" goto execute\r\n\r\nset CMD_LINE_ARGS=%*\r\n\r\n:execute\r\n@rem Setup the command line\r\n\r\nset CLASSPATH=%APP_HOME%\\gradle\\wrapper\\gradle-wrapper.jar\r\n\r\n@rem Execute Gradle\r\n\"%JAVA_EXE%\" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% \"-Dorg.gradle.appname=%APP_BASE_NAME%\" -classpath \"%CLASSPATH%\" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%\r\n\r\n:end\r\n@rem End local scope for the variables with windows NT shell\r\nif \"%ERRORLEVEL%\"==\"0\" goto mainEnd\r\n\r\n:fail\r\nrem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of\r\nrem the _cmd.exe /c_ return code!\r\nif  not \"\" == \"%GRADLE_EXIT_CONSOLE%\" exit 1\r\nexit /b 1\r\n\r\n:mainEnd\r\nif \"%OS%\"==\"Windows_NT\" endlocal\r\n\r\n:omega\r\n"
  },
  {
    "path": "android/keystores/BUCK",
    "content": "keystore(\n    name = \"debug\",\n    properties = \"debug.keystore.properties\",\n    store = \"debug.keystore\",\n    visibility = [\n        \"PUBLIC\",\n    ],\n)\n"
  },
  {
    "path": "android/keystores/debug.keystore.properties",
    "content": "key.store=debug.keystore\nkey.alias=androiddebugkey\nkey.store.password=android\nkey.alias.password=android\n"
  },
  {
    "path": "android/settings.gradle",
    "content": "rootProject.name = 'MaterialBread'\ninclude ':react-native-svg'\nproject(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')\ninclude ':react-native-vector-icons'\nproject(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')\n\ninclude ':app'\n"
  },
  {
    "path": "app.json",
    "content": "{\n  \"name\": \"MaterialBread\",\n  \"displayName\": \"MaterialBread\"\n}"
  },
  {
    "path": "babel.config.js",
    "content": "module.exports = function(api) {\n  api.cache(true);\n  return {\n    presets: ['module:metro-react-native-babel-preset'],\n    plugins: [\n      '@babel/plugin-transform-flow-strip-types',\n      '@babel/plugin-proposal-class-properties',\n      '@babel/plugin-proposal-object-rest-spread',\n      '@babel/plugin-proposal-export-namespace-from',\n    ],\n  };\n};\n"
  },
  {
    "path": "dist/Components/Appbar/Appbar.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _objectWithoutProperties2=_interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutProperties\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _Paper=_interopRequireDefault(require(\"../Paper/Paper\"));var _IconButton=_interopRequireDefault(require(\"../IconButton/IconButton\"));var _Appbar=_interopRequireDefault(require(\"./Appbar.styles\"));var _=require(\"../../\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Appbar/Appbar.js\";function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}var Appbar=function(_Component){(0,_inherits2.default)(Appbar,_Component);function Appbar(){(0,_classCallCheck2.default)(this,Appbar);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(Appbar).apply(this,arguments));}(0,_createClass2.default)(Appbar,[{key:\"_renderAppbarContent\",value:function _renderAppbarContent(){var _this$props=this.props,barType=_this$props.barType,title=_this$props.title,actionItemsStyle=_this$props.actionItemsStyle;return _react.default.createElement(_react.Fragment,{__source:{fileName:_jsxFileName,lineNumber:42}},_react.default.createElement(_reactNative.View,{style:[_Appbar.default.left,{height:barType==='prominent'||barType==='prominent dense'?'100%':'auto'}],__source:{fileName:_jsxFileName,lineNumber:43}},this._renderNavigation(),title&&this._renderTitle()),_react.default.createElement(_reactNative.View,{style:[_Appbar.default.right,actionItemsStyle],__source:{fileName:_jsxFileName,lineNumber:56}},this._renderActionItems()));}},{key:\"_renderNavigation\",value:function _renderNavigation(){var _this$props2=this.props,navigation=_this$props2.navigation,onNavigation=_this$props2.onNavigation,barType=_this$props2.barType;if(typeof navigation==='string'||navigation instanceof String){return _react.default.createElement(_IconButton.default,{name:navigation||'menu',size:24,color:'white',onPress:onNavigation,style:{alignSelf:barType==='prominent'||barType==='prominent dense'?'flex-start':'center'},__source:{fileName:_jsxFileName,lineNumber:68}});}else{return navigation;}}},{key:\"_renderTitle\",value:function _renderTitle(){var onTitle=this.props.onTitle;if(onTitle){return _react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:onTitle,__source:{fileName:_jsxFileName,lineNumber:90}},this._renderTitleInner());}else{return this._renderTitleInner();}}},{key:\"_renderTitleInner\",value:function _renderTitleInner(){var _this$props3=this.props,barType=_this$props3.barType,title=_this$props3.title,navigation=_this$props3.navigation,titleStyles=_this$props3.titleStyles,subtitle=_this$props3.subtitle,subtitleStyles=_this$props3.subtitleStyles,textContainerStyles=_this$props3.textContainerStyles;var titleComponent=typeof title=='string'||title instanceof String?_react.default.createElement(_reactNative.Text,{numberOfLines:barType==='prominent'||barType==='prominent dense'?3:1,style:[_Appbar.default.pageTitle,titleStyles],__source:{fileName:_jsxFileName,lineNumber:112}},title):title;return _react.default.createElement(_reactNative.View,{style:[{marginLeft:navigation?32:0,marginBottom:barType==='prominent'?12:0,alignSelf:barType==='prominent'||barType==='prominent dense'?'flex-end':'center',zIndex:100},textContainerStyles],__source:{fileName:_jsxFileName,lineNumber:124}},titleComponent,subtitle&&barType!=='dense'?_react.default.createElement(_reactNative.Text,{style:[{fontSize:14},{color:'rgba(255,255,255,.87)'},subtitleStyles],__source:{fileName:_jsxFileName,lineNumber:139}},subtitle):null);}},{key:\"_renderActionItems\",value:function _renderActionItems(){var actionItems=this.props.actionItems;if(!actionItems)return null;return _react.default.createElement(_react.Fragment,{__source:{fileName:_jsxFileName,lineNumber:156}},actionItems.map(function(item,index){if(item.name){return _react.default.createElement(_IconButton.default,{key:item.name,name:item.name,size:24,color:'white',style:{marginRight:index+1===actionItems.length?0:16},onPress:item.onPress,__source:{fileName:_jsxFileName,lineNumber:160}});}else{return item;}}));}},{key:\"appbarHeight\",value:function appbarHeight(){var barType=this.props.barType;var height=56;if(barType==='prominent'){height=128;}else if(barType==='dense'){height=48;}else if(barType=='prominent dense'){height=96;}return height;}},{key:\"render\",value:function render(){var _this$props4=this.props,barType=_this$props4.barType,color=_this$props4.color,backgroundImage=_this$props4.backgroundImage,theme=_this$props4.theme,style=_this$props4.style,children=_this$props4.children,position=_this$props4.position,elevation=_this$props4.elevation,rest=(0,_objectWithoutProperties2.default)(_this$props4,[\"barType\",\"color\",\"backgroundImage\",\"theme\",\"style\",\"children\",\"position\",\"elevation\"]);var backgroundColor=color?color:theme.primary.main;var implementedShadow=elevation!=undefined||elevation!=null?(0,_.shadow)(elevation):(0,_.shadow)(4);return _react.default.createElement(_Paper.default,(0,_extends2.default)({style:[_Appbar.default.appbar,_objectSpread({width:'100%',backgroundColor:backgroundColor,height:this.appbarHeight(),padding:barType=='dense'?12:16,position:position||'relative',alignItems:barType=='prominent'||barType==='prominent dense'?'flex-start':'center'},implementedShadow),style]},rest,{__source:{fileName:_jsxFileName,lineNumber:212}}),backgroundImage&&_react.default.cloneElement(backgroundImage,{style:[{position:'absolute',top:0,left:0,right:0,bottom:0}]}),children?children:this._renderAppbarContent());}}]);return Appbar;}(_react.Component);(0,_defineProperty2.default)(Appbar,\"propTypes\",{color:_propTypes.default.string,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),theme:_propTypes.default.object,barType:_propTypes.default.string,backgroundImage:_propTypes.default.node,position:_propTypes.default.string,elevation:_propTypes.default.number,navigation:_propTypes.default.oneOfType([_propTypes.default.node,_propTypes.default.string]),onNavigation:_propTypes.default.func,title:_propTypes.default.oneOfType([_propTypes.default.node,_propTypes.default.string]),titleStyles:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),onTitle:_propTypes.default.func,subtitle:_propTypes.default.string,subtitleStyles:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),textContainerStyles:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),actionItems:_propTypes.default.oneOfType([_propTypes.default.node,_propTypes.default.array]),actionItemsStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),children:_propTypes.default.node});var _default=(0,_withTheme.default)(Appbar);exports.default=_default;"
  },
  {
    "path": "dist/Components/Appbar/Appbar.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _=require(\"../..\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _storybookState=require(\"@sambego/storybook-state\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Appbar/Appbar.stories.js\";var store=new _storybookState.Store({visibleOne:false,visibleTwo:false});var _default=(0,_storiesOf.storiesOf)('Components|Appbar',module).addParameters({jest:['Appbar']}).add('Simple',function(){return _react.default.createElement(_Container.default,{scroll:true,__source:{fileName:_jsxFileName,lineNumber:19}},_react.default.createElement(_Header.default,{title:'Appbar Simple',__source:{fileName:_jsxFileName,lineNumber:20}}),_react.default.createElement(_.Appbar,{barType:'normal',title:'Page Title',style:{marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:22}}),_react.default.createElement(_.Appbar,{barType:'normal',title:'Appbar colored',color:'#E91E63',style:{marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:27}}),_react.default.createElement(_.Appbar,{barType:'normal',title:'Navigation Type',navigation:'menu',color:'#9C27B0',style:{marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:33}}),_react.default.createElement(_.Appbar,{barType:'normal',title:'Different Icon',navigation:'arrow-back',color:'#673AB7',style:{marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:40}}),_react.default.createElement(_.Appbar,{barType:'normal',navigation:'menu',color:'#00BCD4',style:{marginBottom:20},actionItems:[{name:'search',onPress:function onPress(){return console.log('onSearch');}},{name:'more-vert'}],__source:{fileName:_jsxFileName,lineNumber:47}}),_react.default.createElement(_.Appbar,{barType:'normal',color:'#009688',style:{marginBottom:20},actionItems:[{name:'add'},{name:'edit'},{name:'archive'},{name:'delete'}],__source:{fileName:_jsxFileName,lineNumber:57}}),_react.default.createElement(_.Appbar,{barType:'normal',title:'Page Title',color:'#4CAF50',navigation:'menu',onNavigation:function onNavigation(){return console.log('onNavigation!');},actionItems:[_react.default.createElement(_.Badge,{key:1,containerStyle:{marginRight:16,flex:1},color:'#e10050',textColor:'white',size:14,content:77,__source:{fileName:_jsxFileName,lineNumber:75}},_react.default.createElement(_.IconButton,{name:\"favorite\",size:24,color:'white',__source:{fileName:_jsxFileName,lineNumber:82}})),{name:'search',onPress:function onPress(){return console.log('onSearch');}},{name:'more-vert'}],style:{marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:68}}),_react.default.createElement(_.Appbar,{barType:'simple',title:'Page Title',backgroundImage:_react.default.createElement(_reactNative.Image,{source:{uri:'https://images.pexels.com/photos/355465/pexels-photo-355465.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'},__source:{fileName:_jsxFileName,lineNumber:93}}),navigation:'menu',actionItems:[{name:'favorite'},{name:'search',onPress:function onPress(){return console.log('onSearch');}},_react.default.createElement(_.IconButton,{key:3,name:\"more-vert\",size:24,color:'white',__source:{fileName:_jsxFileName,lineNumber:104}})],style:{marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:89}}),_react.default.createElement(_.Appbar,{barType:'simple',title:'PAGE TITLE',titleStyles:{fontSize:18,fontWeight:'300',letterSpacing:2},backgroundImage:_react.default.createElement(_reactNative.Image,{source:{uri:'https://images.pexels.com/photos/355465/pexels-photo-355465.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'},__source:{fileName:_jsxFileName,lineNumber:113}}),navigation:'menu',actionItems:[{name:'favorite'},{name:'search',onPress:function onPress(){return console.log('onSearch');}},_react.default.createElement(_.IconButton,{key:1,name:\"more-vert\",size:24,color:'white',__source:{fileName:_jsxFileName,lineNumber:124}})],style:{marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:108}}));}).add('Prominent',function(){return _react.default.createElement(_Container.default,{scroll:true,__source:{fileName:_jsxFileName,lineNumber:132}},_react.default.createElement(_Header.default,{title:'Appbar Prominent',__source:{fileName:_jsxFileName,lineNumber:133}}),_react.default.createElement(_.Appbar,{barType:'prominent',navigation:'menu',title:'Prominent',style:{marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:134}}),_react.default.createElement(_.Appbar,{barType:'prominent',title:'Actions',color:'#E91E63',navigation:'menu',onNavigation:function onNavigation(){return console.log('onNavigation!');},actionItems:[{name:'more-vert'}],style:{marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:140}}),_react.default.createElement(_.Appbar,{barType:'prominent',title:'Badge and icons',color:'#9C27B0',navigation:'menu',onNavigation:function onNavigation(){return console.log('onNavigation!');},actionItems:[_react.default.createElement(_.Badge,{key:1,containerStyle:{marginRight:16,flex:1},color:'#e10050',textColor:'white',size:14,content:77,__source:{fileName:_jsxFileName,lineNumber:156}},_react.default.createElement(_.IconButton,{name:\"favorite\",size:24,color:'white',__source:{fileName:_jsxFileName,lineNumber:163}})),{name:'search',onPress:function onPress(){return console.log('onSearch');}},{name:'more-vert'}],style:{marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:149}}),_react.default.createElement(_.Appbar,{barType:'prominent',title:'Subtitle',subtitle:'Subtitle',color:'#009688',navigation:'menu',onNavigation:function onNavigation(){return console.log('onNavigation!');},actionItems:[_react.default.createElement(_.Badge,{key:1,containerStyle:{marginRight:16,flex:1},color:'#e10050',textColor:'white',size:14,content:77,__source:{fileName:_jsxFileName,lineNumber:178}},_react.default.createElement(_.IconButton,{name:\"favorite\",size:24,color:'white',__source:{fileName:_jsxFileName,lineNumber:185}})),{name:'search',onPress:function onPress(){return console.log('onSearch');}},{name:'more-vert'}],style:{marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:170}}),_react.default.createElement(_.Appbar,{barType:'prominent',title:'Background image',subtitle:'Subtitle',color:'#9C27B0',navigation:'menu',backgroundImage:_react.default.createElement(_reactNative.Image,{source:{uri:'https://images.pexels.com/photos/355465/pexels-photo-355465.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'},__source:{fileName:_jsxFileName,lineNumber:199}}),onNavigation:function onNavigation(){return console.log('onNavigation!');},actionItems:[_react.default.createElement(_.Badge,{key:1,containerStyle:{marginRight:16,flex:1},color:'#e10050',textColor:'white',size:14,content:77,__source:{fileName:_jsxFileName,lineNumber:208}},_react.default.createElement(_.IconButton,{name:\"favorite\",size:24,color:'white',__source:{fileName:_jsxFileName,lineNumber:215}})),{name:'search',onPress:function onPress(){return console.log('onSearch');}},{name:'more-vert'}],__source:{fileName:_jsxFileName,lineNumber:192}}));}).add('Dense',function(){return _react.default.createElement(_Container.default,{scroll:true,__source:{fileName:_jsxFileName,lineNumber:224}},_react.default.createElement(_Header.default,{title:'Appbar Dense',__source:{fileName:_jsxFileName,lineNumber:225}}),_react.default.createElement(_.Appbar,{barType:'dense',title:'Page Title',style:{marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:226}}),_react.default.createElement(_.Appbar,{barType:'dense',title:'Appbar colored',color:'#E91E63',style:{marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:231}}),_react.default.createElement(_.Appbar,{barType:'dense',title:'Navigation Type',navigation:'menu',color:'#9C27B0',style:{marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:237}}),_react.default.createElement(_.Appbar,{barType:'dense',title:'Different Icon',navigation:'arrow-back',color:'#673AB7',style:{marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:244}}),_react.default.createElement(_.Appbar,{barType:'dense',navigation:'menu',color:'#00BCD4',style:{marginBottom:20},actionItems:[{name:'search',onPress:function onPress(){return console.log('onSearch');}},{name:'more-vert'}],__source:{fileName:_jsxFileName,lineNumber:251}}),_react.default.createElement(_.Appbar,{barType:'dense',color:'#009688',style:{marginBottom:20},actionItems:[{name:'add'},{name:'edit'},{name:'archive'},{name:'delete'}],__source:{fileName:_jsxFileName,lineNumber:261}}),_react.default.createElement(_.Appbar,{barType:'dense',title:'Page Title',color:'#4CAF50',navigation:'menu',onNavigation:function onNavigation(){return console.log('onNavigation!');},actionItems:[_react.default.createElement(_.Badge,{key:1,containerStyle:{marginRight:16,flex:1},color:'#e10050',textColor:'white',size:14,content:77,__source:{fileName:_jsxFileName,lineNumber:279}},_react.default.createElement(_.IconButton,{name:\"favorite\",size:24,color:'white',__source:{fileName:_jsxFileName,lineNumber:286}})),{name:'search',onPress:function onPress(){return console.log('onSearch');}},{name:'more-vert'}],style:{marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:272}}),_react.default.createElement(_.Appbar,{barType:'dense',title:'Page Title',backgroundImage:_react.default.createElement(_reactNative.Image,{source:{uri:'https://images.pexels.com/photos/355465/pexels-photo-355465.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'},__source:{fileName:_jsxFileName,lineNumber:297}}),navigation:'menu',actionItems:[{name:'favorite'},{name:'search',onPress:function onPress(){return console.log('onSearch');}},_react.default.createElement(_.IconButton,{key:3,name:\"more-vert\",size:24,color:'white',__source:{fileName:_jsxFileName,lineNumber:308}})],__source:{fileName:_jsxFileName,lineNumber:293}}));}).add('Prominent Dense',function(){return _react.default.createElement(_Container.default,{scroll:true,__source:{fileName:_jsxFileName,lineNumber:314}},_react.default.createElement(_Header.default,{title:'Appbar Prominent Dense',__source:{fileName:_jsxFileName,lineNumber:315}}),_react.default.createElement(_.Appbar,{barType:'prominent dense',title:'Page Title',style:{marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:316}}),_react.default.createElement(_.Appbar,{barType:'prominent dense',title:'Appbar colored',color:'#E91E63',style:{marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:321}}),_react.default.createElement(_.Appbar,{barType:'prominent dense',title:'Navigation Type',navigation:'menu',color:'#9C27B0',style:{marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:327}}),_react.default.createElement(_.Appbar,{barType:'prominent dense',title:'Different Icon',navigation:'arrow-back',color:'#673AB7',style:{marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:334}}),_react.default.createElement(_.Appbar,{barType:'prominent dense',navigation:'menu',color:'#00BCD4',style:{marginBottom:20},actionItems:[{name:'search',onPress:function onPress(){return console.log('onSearch');}},{name:'more-vert'}],__source:{fileName:_jsxFileName,lineNumber:341}}),_react.default.createElement(_.Appbar,{barType:'prominent dense',color:'#009688',style:{marginBottom:20},actionItems:[{name:'add'},{name:'edit'},{name:'archive'},{name:'delete'}],__source:{fileName:_jsxFileName,lineNumber:351}}),_react.default.createElement(_.Appbar,{barType:'prominent dense',title:'Page Title',color:'#4CAF50',navigation:'menu',onNavigation:function onNavigation(){return console.log('onNavigation!');},actionItems:[_react.default.createElement(_.Badge,{key:1,containerStyle:{marginRight:16,flex:1},color:'#e10050',textColor:'white',size:14,content:77,__source:{fileName:_jsxFileName,lineNumber:369}},_react.default.createElement(_.IconButton,{name:\"favorite\",size:24,color:'white',__source:{fileName:_jsxFileName,lineNumber:376}})),{name:'search',onPress:function onPress(){return console.log('onSearch');}},{name:'more-vert'}],style:{marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:362}}),_react.default.createElement(_.Appbar,{barType:'prominent dense',title:'Page Title',backgroundImage:_react.default.createElement(_reactNative.Image,{source:{uri:'https://images.pexels.com/photos/355465/pexels-photo-355465.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'},__source:{fileName:_jsxFileName,lineNumber:387}}),navigation:'menu',actionItems:[{name:'favorite'},{name:'search',onPress:function onPress(){return console.log('onSearch');}},_react.default.createElement(_.IconButton,{key:3,name:\"more-vert\",size:24,color:'white',__source:{fileName:_jsxFileName,lineNumber:398}})],__source:{fileName:_jsxFileName,lineNumber:383}}));}).add('with menu',function(){return _react.default.createElement(_Container.default,{scroll:true,__source:{fileName:_jsxFileName,lineNumber:404}},_react.default.createElement(_Header.default,{title:'With Overflow Menu',__source:{fileName:_jsxFileName,lineNumber:405}}),_react.default.createElement(_.Appbar,{barType:'normal',navigation:'menu',color:'#00BCD4',style:{marginBottom:20},actionItems:[{name:'search',onPress:function onPress(){return console.log('onSearch');}},_react.default.createElement(ExampleMenu,{key:1,__source:{fileName:_jsxFileName,lineNumber:414}})],__source:{fileName:_jsxFileName,lineNumber:407}}),_react.default.createElement(_.Appbar,{barType:'normal',color:'#009688',style:{marginBottom:20},actionItems:[{name:'add'},{name:'edit'},{name:'archive'},_react.default.createElement(ExampleOverflowMenu,{key:1,__source:{fileName:_jsxFileName,lineNumber:425}})],__source:{fileName:_jsxFileName,lineNumber:417}}));});exports.default=_default;var ExampleMenu=function ExampleMenu(){return _react.default.createElement(_storybookState.State,{store:store,__source:{fileName:_jsxFileName,lineNumber:433}},function(state){var isVisible=state.visibleOne;var dismissMenu=function dismissMenu(){return store.set({visibleOne:false});};var toggleMenu=function toggleMenu(){return store.set({visibleOne:!isVisible});};return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:440}},_react.default.createElement(_.Menu,{visible:isVisible,onBackdropPress:dismissMenu,button:_react.default.createElement(_.Button,{textColor:'white',text:'Show menu',onPress:toggleMenu,type:\"text\",__source:{fileName:_jsxFileName,lineNumber:445}}),__source:{fileName:_jsxFileName,lineNumber:441}},_react.default.createElement(_.MenuItem,{text:'Menu Item 1',onPress:dismissMenu,__source:{fileName:_jsxFileName,lineNumber:452}}),_react.default.createElement(_.MenuItem,{text:'Menu Item 2',onPress:dismissMenu,__source:{fileName:_jsxFileName,lineNumber:453}}),_react.default.createElement(_.MenuItem,{text:'Menu Item 3',onPress:dismissMenu,__source:{fileName:_jsxFileName,lineNumber:454}})));});};var ExampleOverflowMenu=function ExampleOverflowMenu(){return _react.default.createElement(_storybookState.State,{store:store,__source:{fileName:_jsxFileName,lineNumber:465}},function(state){var isVisible=state.visibleTwo;var dismissMenu=function dismissMenu(){return store.set({visibleTwo:false});};var toggleMenu=function toggleMenu(){return store.set({visibleTwo:!state.visibleTwo});};return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:472}},_react.default.createElement(_.Menu,{visible:isVisible,onBackdropPress:dismissMenu,button:_react.default.createElement(_.IconButton,{name:'more-vert',onPress:toggleMenu,size:24,color:'white',__source:{fileName:_jsxFileName,lineNumber:477}}),__source:{fileName:_jsxFileName,lineNumber:473}},_react.default.createElement(_.MenuItem,{text:'Menu Item 1',onPress:dismissMenu,__source:{fileName:_jsxFileName,lineNumber:484}}),_react.default.createElement(_.MenuItem,{text:'Menu Item 2',onPress:dismissMenu,__source:{fileName:_jsxFileName,lineNumber:485}}),_react.default.createElement(_.MenuItem,{text:'Menu Item 3',onPress:dismissMenu,__source:{fileName:_jsxFileName,lineNumber:486}})));});};"
  },
  {
    "path": "dist/Components/Appbar/Appbar.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({appbar:{flexDirection:'row',justifyContent:'space-between',minWidth:'auto',zIndex:2},backgroundImage:{flex:1,position:'absolute',top:0,left:0,right:0,bottom:0,width:'100%',height:'100%'},pageTitle:{fontSize:18,color:'white'},left:{flexDirection:'row',alignItems:'center',minWidth:'auto'},right:{flex:1,flexDirection:'row',alignItems:'center',justifyContent:'flex-end',minWidth:'auto'}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Appbar/Searchbar/Searchbar.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _IconButton=_interopRequireDefault(require(\"../../IconButton/IconButton\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Appbar/Searchbar/Searchbar.js\";var Searchbar=function(_Component){(0,_inherits2.default)(Searchbar,_Component);function Searchbar(){(0,_classCallCheck2.default)(this,Searchbar);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(Searchbar).apply(this,arguments));}(0,_createClass2.default)(Searchbar,[{key:\"_renderNavigation\",value:function _renderNavigation(){var _this$props=this.props,_this$props$navigatio=_this$props.navigationIcon,navigationIcon=_this$props$navigatio===void 0?'':_this$props$navigatio,onNavigation=_this$props.onNavigation,navigationIconComponent=_this$props.navigationIconComponent,theme=_this$props.theme;if(typeof navigationIcon==='string'||navigationIcon instanceof String){return _react.default.createElement(_IconButton.default,{name:navigationIcon||'arrow-back',size:theme.searchBarNavigationIcon.size,color:theme.searchBarNavigationIcon.color,onPress:onNavigation,iconComponent:navigationIconComponent,__source:{fileName:_jsxFileName,lineNumber:35}});}else{return navigationIcon;}}},{key:\"_renderClose\",value:function _renderClose(){var _this$props2=this.props,closeIcon=_this$props2.closeIcon,onCloseIcon=_this$props2.onCloseIcon,closeIconComponent=_this$props2.closeIconComponent,theme=_this$props2.theme;if(typeof closeIcon==='string'||closeIcon instanceof String){return _react.default.createElement(_IconButton.default,{name:closeIcon||'close',size:theme.searchBarcloseIcon.size,color:theme.searchBarcloseIcon.color,onPress:onCloseIcon,iconComponent:closeIconComponent,__source:{fileName:_jsxFileName,lineNumber:53}});}else if(closeIcon){return closeIcon;}}},{key:\"render\",value:function render(){var _this$props3=this.props,style=_this$props3.style,onChangeText=_this$props3.onChangeText,value=_this$props3.value,placeholder=_this$props3.placeholder,theme=_this$props3.theme;return _react.default.createElement(_reactNative.View,{style:[theme.searchBar,style],__source:{fileName:_jsxFileName,lineNumber:69}},this._renderNavigation(),_react.default.createElement(_reactNative.TextInput,{style:theme.searchInput,placeholder:placeholder?placeholder:'Search',onChangeText:onChangeText,value:value,__source:{fileName:_jsxFileName,lineNumber:71}}),this._renderClose());}}]);return Searchbar;}(_react.Component);(0,_defineProperty2.default)(Searchbar,\"propTypes\",{value:_propTypes.default.string,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),onChangeText:_propTypes.default.func,onCloseIcon:_propTypes.default.func,onNavigation:_propTypes.default.func,placeholder:_propTypes.default.string,navigationIcon:_propTypes.default.oneOfType([_propTypes.default.node,_propTypes.default.string]),navigationIconComponent:_propTypes.default.func,closeIcon:_propTypes.default.oneOfType([_propTypes.default.node,_propTypes.default.string]),closeIconComponent:_propTypes.default.func,theme:_propTypes.default.object});var _default=(0,_withTheme.default)(Searchbar);exports.default=_default;"
  },
  {
    "path": "dist/Components/Appbar/Searchbar/Searchbar.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../../..\");var _storybookState=require(\"@sambego/storybook-state\");var _Header=_interopRequireDefault(require(\"../../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../../storybook/components/Container\"));var _storiesOf=require(\"../../../storybook/helpers/storiesOf\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Appbar/Searchbar/Searchbar.stories.js\";var store=new _storybookState.Store({searchOne:''});var _default=(0,_storiesOf.storiesOf)('Components|Appbar/Searchbar',module).addParameters({jest:['Searchbar']}).add('Simple',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:17}},_react.default.createElement(_Header.default,{title:'Searchbar',__source:{fileName:_jsxFileName,lineNumber:18}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:19}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:21}},_react.default.createElement(_.Searchbar,{label:'Label',value:state.searchOne,onChangeText:function onChangeText(value){return store.set({searchOne:value});},onCloseIcon:function onCloseIcon(){return store.set({searchOne:''});},__source:{fileName:_jsxFileName,lineNumber:22}}));}));});exports.default=_default;"
  },
  {
    "path": "dist/Components/Appbar/Searchbar/Searchbar.styles.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _reactNative=require(\"react-native\");var _shadow=_interopRequireDefault(require(\"../../../Utils/Shadow/shadow.js\"));function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}var styles=_reactNative.StyleSheet.create({container:{},searchInput:_objectSpread({},(0,_shadow.default)(1))});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Appbar/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _Appbar.default;}});var _Appbar=_interopRequireDefault(require(\"./Appbar\"));"
  },
  {
    "path": "dist/Components/AppbarBottom/AppbarBottom.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _objectWithoutProperties2=_interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutProperties\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _=require(\"../../\");var _AppbarBottom=_interopRequireDefault(require(\"./AppbarBottom.styles\"));var _AppbarBottomSvg=_interopRequireDefault(require(\"./AppbarBottom.svg.js\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/AppbarBottom/AppbarBottom.js\";var AppbarBottom=function(_Component){(0,_inherits2.default)(AppbarBottom,_Component);function AppbarBottom(props){var _this;(0,_classCallCheck2.default)(this,AppbarBottom);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(AppbarBottom).call(this,props));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{appbarWidth:0,appbarHeight:0});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"measureAppbar\",function(e){var _e$nativeEvent$layout=e.nativeEvent.layout,width=_e$nativeEvent$layout.width,height=_e$nativeEvent$layout.height;_this.setState({appbarWidth:width,appbarHeight:height});});return _this;}(0,_createClass2.default)(AppbarBottom,[{key:\"_renderNavigation\",value:function _renderNavigation(){var _this$props=this.props,navigation=_this$props.navigation,onNavigation=_this$props.onNavigation,fabPosition=_this$props.fabPosition;if(typeof navigation==='string'||navigation instanceof String){return _react.default.createElement(_.IconButton,{name:navigation||'menu',size:24,color:'white',onPress:onNavigation,style:{marginRight:fabPosition==='end'?24:0},__source:{fileName:_jsxFileName,lineNumber:42}});}else{return navigation;}}},{key:\"_renderFab\",value:function _renderFab(){var _this$props2=this.props,fab=_this$props2.fab,fabPosition=_this$props2.fabPosition,fabCutout=_this$props2.fabCutout;if(!fab)return null;var isEnd=fabPosition==='end';var cutOutPadding=fabCutout?18:16;var fabRightStyle={right:cutOutPadding};var fabCenterStyle={right:'auto'};var fabPosStyles=isEnd?fabRightStyle:fabCenterStyle;var isFabSpeedial=fab&&fab.props&&fab.props.actions;return _react.default.cloneElement(fab,{shadow:12,style:[_AppbarBottom.default.fabPos,fabPosStyles],containerStyle:{position:'absolute',width:'100%',paddingRight:isFabSpeedial&&isEnd?cutOutPadding:0,transform:[{translateY:-28}]}});}},{key:\"_renderCutout\",value:function _renderCutout(){var _this$props3=this.props,fabCutout=_this$props3.fabCutout,fabPosition=_this$props3.fabPosition,color=_this$props3.color,theme=_this$props3.theme;var backgroundColor=color?color:theme.primary.main;if(!fabCutout)return null;return _react.default.createElement(_AppbarBottomSvg.default,{fabPosition:fabPosition,paddingHorizontal:32,backgroundColor:backgroundColor,width:this.state.appbarWidth,__source:{fileName:_jsxFileName,lineNumber:90}});}},{key:\"_renderActionItems\",value:function _renderActionItems(){var actionItems=this.props.actionItems;if(!actionItems)return null;return _react.default.createElement(_react.Fragment,{__source:{fileName:_jsxFileName,lineNumber:103}},actionItems.map(function(item,index){if(item.name){return _react.default.createElement(_.IconButton,{key:item.name,name:item.name,size:24,color:'white',style:{marginRight:index+1===actionItems.length?0:16},onPress:item.onPress,__source:{fileName:_jsxFileName,lineNumber:107}});}else{return item;}}));}},{key:\"_renderAppBarContent\",value:function _renderAppBarContent(){return _react.default.createElement(_react.Fragment,{__source:{fileName:_jsxFileName,lineNumber:128}},this._renderNavigation(),_react.default.createElement(_reactNative.View,{style:_AppbarBottom.default.right,__source:{fileName:_jsxFileName,lineNumber:131}},this._renderActionItems()));}},{key:\"render\",value:function render(){var _this$props4=this.props,color=_this$props4.color,children=_this$props4.children,style=_this$props4.style,appbarStyles=_this$props4.appbarStyles,fabPosition=_this$props4.fabPosition,theme=_this$props4.theme,fabCutout=_this$props4.fabCutout,rest=(0,_objectWithoutProperties2.default)(_this$props4,[\"color\",\"children\",\"style\",\"appbarStyles\",\"fabPosition\",\"theme\",\"fabCutout\"]);var appbarWidth=this.state.appbarWidth;var backgroundColor=color?color:theme.primary.main;return _react.default.createElement(_reactNative.View,{style:style,__source:{fileName:_jsxFileName,lineNumber:160}},_react.default.createElement(_reactNative.View,{style:[_AppbarBottom.default.contianer,{opacity:appbarWidth==0?0:1}],onLayout:this.measureAppbar,__source:{fileName:_jsxFileName,lineNumber:161}},this._renderCutout(),_react.default.createElement(_reactNative.View,(0,_extends2.default)({style:[_AppbarBottom.default.appbar,{justifyContent:fabPosition==='end'?'flex-start':'space-between',backgroundColor:!fabCutout?backgroundColor:'transparent'},appbarStyles]},rest,{__source:{fileName:_jsxFileName,lineNumber:165}}),children?children:this._renderAppBarContent())),this._renderFab());}}]);return AppbarBottom;}(_react.Component);(0,_defineProperty2.default)(AppbarBottom,\"propTypes\",{color:_propTypes.default.string,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),theme:_propTypes.default.object,fab:_propTypes.default.oneOfType([_propTypes.default.node,_propTypes.default.string]),fabPosition:_propTypes.default.string,fabCutout:_propTypes.default.bool,navigation:_propTypes.default.oneOfType([_propTypes.default.node,_propTypes.default.string]),onNavigation:_propTypes.default.func,actionItems:_propTypes.default.oneOfType([_propTypes.default.node,_propTypes.default.array]),children:_propTypes.default.node,appbarStyles:_propTypes.default.object});var _default=(0,_withTheme.default)(AppbarBottom);exports.default=_default;"
  },
  {
    "path": "dist/Components/AppbarBottom/AppbarBottom.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _reactNative=require(\"react-native\");var _=require(\"../..\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _storybookState=require(\"@sambego/storybook-state\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/AppbarBottom/AppbarBottom.stories.js\";var store=new _storybookState.Store({isOpen:false,isOpenPermanent:true});var pageWidth=_reactNative.Platform.OS=='web'?600:_reactNative.Dimensions.get('window').width;var _default=(0,_storiesOf.storiesOf)('Components|AppbarBottom',module).addParameters({jest:['AppbarBottom']}).add('Center Fab',function(){return _react.default.createElement(_Container.default,{scroll:true,__source:{fileName:_jsxFileName,lineNumber:34}},_react.default.createElement(_Header.default,{title:'Center Fab',__source:{fileName:_jsxFileName,lineNumber:35}}),_react.default.createElement(_.AppbarBottom,{fab:_react.default.createElement(_.Fab,{backgroundColor:'#04D5BF',__source:{fileName:_jsxFileName,lineNumber:37}}),color:'#6E2CFA',style:{marginBottom:50},__source:{fileName:_jsxFileName,lineNumber:36}}),_react.default.createElement(_.AppbarBottom,{fab:_react.default.createElement(_.Fab,{backgroundColor:'#04D5BF',__source:{fileName:_jsxFileName,lineNumber:42}}),fabCutout:true,color:'#6E2CFA',style:{marginBottom:50},__source:{fileName:_jsxFileName,lineNumber:41}}),_react.default.createElement(_.AppbarBottom,{fab:_react.default.createElement(_.Fab,{icon:'change-history',backgroundColor:'#009688',__source:{fileName:_jsxFileName,lineNumber:48}}),fabPosition:'center',navigation:'menu',color:'#E91E63',style:{marginBottom:50},__source:{fileName:_jsxFileName,lineNumber:47}}),_react.default.createElement(_.AppbarBottom,{fab:_react.default.createElement(_.Fab,{icon:'change-history',backgroundColor:'#009688',__source:{fileName:_jsxFileName,lineNumber:55}}),fabCutout:true,fabPosition:'center',navigation:'menu',color:'#E91E63',style:{marginBottom:50},__source:{fileName:_jsxFileName,lineNumber:54}}),_react.default.createElement(_.AppbarBottom,{fab:_react.default.createElement(_.Fab,{icon:'drafts',backgroundColor:'#8BC34A',__source:{fileName:_jsxFileName,lineNumber:63}}),fabPosition:'center',navigation:'arrow-back',actionItems:[{name:'search',onPress:function onPress(){return console.log('onSearch');}},{name:'more-vert'}],color:'#9C27B0',style:{marginBottom:50},__source:{fileName:_jsxFileName,lineNumber:62}}),_react.default.createElement(_.AppbarBottom,{fab:_react.default.createElement(_.Fab,{icon:'drafts',backgroundColor:'#8BC34A',__source:{fileName:_jsxFileName,lineNumber:74}}),fabCutout:true,fabPosition:'center',navigation:'arrow-back',actionItems:[{name:'search',onPress:function onPress(){return console.log('onSearch');}},{name:'more-vert'}],color:'#9C27B0',style:{marginBottom:50},__source:{fileName:_jsxFileName,lineNumber:73}}),_react.default.createElement(_.AppbarBottom,{fab:_react.default.createElement(_.Fab,{icon:'favorite',backgroundColor:'#E91E63',__source:{fileName:_jsxFileName,lineNumber:86}}),fabPosition:'center',navigation:'menu',actionItems:[_react.default.createElement(_.Badge,{key:1,containerStyle:{marginRight:16,flex:1},color:'#e10050',textColor:'white',size:14,content:77,__source:{fileName:_jsxFileName,lineNumber:90}},_react.default.createElement(_.IconButton,{name:\"favorite\",size:24,color:'white',__source:{fileName:_jsxFileName,lineNumber:97}})),{name:'search',onPress:function onPress(){return console.log('onSearch');}},{name:'more-vert'}],color:'#009688',style:{marginBottom:50},__source:{fileName:_jsxFileName,lineNumber:85}}),_react.default.createElement(_.AppbarBottom,{fab:_react.default.createElement(_.Fab,{icon:'favorite',backgroundColor:'#E91E63',__source:{fileName:_jsxFileName,lineNumber:106}}),fabPosition:'center',fabCutout:true,navigation:'menu',actionItems:[_react.default.createElement(_.Badge,{key:1,containerStyle:{marginRight:16,flex:1},color:'#e10050',textColor:'white',size:14,content:77,__source:{fileName:_jsxFileName,lineNumber:111}},_react.default.createElement(_.IconButton,{name:\"favorite\",size:24,color:'white',__source:{fileName:_jsxFileName,lineNumber:118}})),{name:'search',onPress:function onPress(){return console.log('onSearch');}},{name:'more-vert'}],color:'#009688',style:{marginBottom:50},__source:{fileName:_jsxFileName,lineNumber:105}}));}).add('End Fab',function(){return _react.default.createElement(_Container.default,{scroll:true,__source:{fileName:_jsxFileName,lineNumber:129}},_react.default.createElement(_Header.default,{title:'End Fab',__source:{fileName:_jsxFileName,lineNumber:130}}),_react.default.createElement(_.AppbarBottom,{fab:_react.default.createElement(_.Fab,{backgroundColor:'#04D5BF',__source:{fileName:_jsxFileName,lineNumber:132}}),fabPosition:'end',color:'#6E2CFA',style:{marginBottom:50},__source:{fileName:_jsxFileName,lineNumber:131}}),_react.default.createElement(_.AppbarBottom,{fab:_react.default.createElement(_.Fab,{backgroundColor:'#04D5BF',__source:{fileName:_jsxFileName,lineNumber:138}}),fabCutout:true,fabPosition:'end',color:'#6E2CFA',style:{marginBottom:50},__source:{fileName:_jsxFileName,lineNumber:137}}),_react.default.createElement(_.AppbarBottom,{fab:_react.default.createElement(_.Fab,{icon:'change-history',backgroundColor:'#009688',__source:{fileName:_jsxFileName,lineNumber:145}}),fabPosition:'end',navigation:'menu',color:'#E91E63',style:{marginBottom:50},__source:{fileName:_jsxFileName,lineNumber:144}}),_react.default.createElement(_.AppbarBottom,{fab:_react.default.createElement(_.Fab,{icon:'change-history',backgroundColor:'#009688',__source:{fileName:_jsxFileName,lineNumber:152}}),fabCutout:true,fabPosition:'end',navigation:'menu',color:'#E91E63',style:{marginBottom:50},__source:{fileName:_jsxFileName,lineNumber:151}}),_react.default.createElement(_.AppbarBottom,{fab:_react.default.createElement(_.Fab,{icon:'drafts',backgroundColor:'#8BC34A',__source:{fileName:_jsxFileName,lineNumber:160}}),fabPosition:'end',navigation:'arrow-back',actionItems:[{name:'search',onPress:function onPress(){return console.log('onSearch');}},{name:'more-vert'}],color:'#9C27B0',style:{marginBottom:50},__source:{fileName:_jsxFileName,lineNumber:159}}),_react.default.createElement(_.AppbarBottom,{fab:_react.default.createElement(_.Fab,{icon:'drafts',backgroundColor:'#8BC34A',__source:{fileName:_jsxFileName,lineNumber:171}}),fabCutout:true,fabPosition:'end',navigation:'arrow-back',actionItems:[{name:'search',onPress:function onPress(){return console.log('onSearch');}},{name:'more-vert'}],color:'#9C27B0',style:{marginBottom:50},__source:{fileName:_jsxFileName,lineNumber:170}}),_react.default.createElement(_.AppbarBottom,{fab:_react.default.createElement(_.Fab,{icon:'favorite',backgroundColor:'#E91E63',__source:{fileName:_jsxFileName,lineNumber:183}}),fabPosition:'end',navigation:'menu',actionItems:[_react.default.createElement(_.Badge,{key:1,containerStyle:{marginRight:16,flex:1},color:'#e10050',textColor:'white',size:14,content:77,__source:{fileName:_jsxFileName,lineNumber:187}},_react.default.createElement(_.IconButton,{name:\"favorite\",size:24,color:'white',__source:{fileName:_jsxFileName,lineNumber:194}})),{name:'search',onPress:function onPress(){return console.log('onSearch');}},{name:'more-vert'}],color:'#009688',style:{marginBottom:50},__source:{fileName:_jsxFileName,lineNumber:182}}),_react.default.createElement(_.AppbarBottom,{fab:_react.default.createElement(_.Fab,{icon:'favorite',backgroundColor:'#E91E63',__source:{fileName:_jsxFileName,lineNumber:203}}),fabPosition:'end',fabCutout:true,navigation:'menu',actionItems:[_react.default.createElement(_.Badge,{key:1,containerStyle:{marginRight:16,flex:1},color:'#e10050',textColor:'white',size:14,content:77,__source:{fileName:_jsxFileName,lineNumber:208}},_react.default.createElement(_.IconButton,{name:\"favorite\",size:24,color:'white',__source:{fileName:_jsxFileName,lineNumber:215}})),{name:'search',onPress:function onPress(){return console.log('onSearch');}},{name:'more-vert'}],color:'#009688',style:{marginBottom:50},__source:{fileName:_jsxFileName,lineNumber:202}}));}).add('No Fab',function(){return _react.default.createElement(_Container.default,{scroll:true,__source:{fileName:_jsxFileName,lineNumber:226}},_react.default.createElement(_Header.default,{title:'No Fab',__source:{fileName:_jsxFileName,lineNumber:227}}),_react.default.createElement(_.AppbarBottom,{color:'#6E2CFA',style:{marginBottom:50},actionItems:[{name:'add'},{name:'edit'},{name:'archive'},{name:'delete'}],__source:{fileName:_jsxFileName,lineNumber:228}}),_react.default.createElement(_.AppbarBottom,{fabStyles:{backgroundColor:'#009688'},navigation:'menu',color:'#E91E63',style:{marginBottom:50},actionItems:[{name:'add'},{name:'edit'},{name:'archive'},{name:'delete'}],__source:{fileName:_jsxFileName,lineNumber:239}}),_react.default.createElement(_.AppbarBottom,{navigation:'arrow-back',actionItems:[{name:'search',onPress:function onPress(){return console.log('onSearch');}},{name:'more-vert'}],color:'#9C27B0',style:{marginBottom:50},__source:{fileName:_jsxFileName,lineNumber:252}}),_react.default.createElement(_.AppbarBottom,{navigation:'menu',actionItems:[_react.default.createElement(_.Badge,{key:1,containerStyle:{marginRight:16,flex:1},color:'#e10050',textColor:'white',size:14,content:77,__source:{fileName:_jsxFileName,lineNumber:265}},_react.default.createElement(_.IconButton,{name:\"favorite\",size:24,color:'white',__source:{fileName:_jsxFileName,lineNumber:272}})),{name:'search',onPress:function onPress(){return console.log('onSearch');}},{name:'more-vert'}],color:'#009688',style:{marginBottom:50},__source:{fileName:_jsxFileName,lineNumber:262}}));}).add('with speeddial',function(){return _react.default.createElement(_Container.default,{scroll:true,__source:{fileName:_jsxFileName,lineNumber:283}},_react.default.createElement(_Header.default,{title:'SpeedDial',__source:{fileName:_jsxFileName,lineNumber:284}}),_react.default.createElement(_.AppbarBottom,{fab:_react.default.createElement(_.FabSpeedDial,{actions:actions,fab:_react.default.createElement(_.Fab,{backgroundColor:'#04D5BF',__source:{fileName:_jsxFileName,lineNumber:290}}),__source:{fileName:_jsxFileName,lineNumber:288}}),color:'#6E2CFA',fabCutout:true,fabPosition:'end',navigation:'arrow-back',fabStyles:{},actionItems:[{name:'search',onPress:function onPress(){return console.log('onSearch');}},{name:'more-vert'}],style:{marginTop:300},__source:{fileName:_jsxFileName,lineNumber:286}}));}).add('open sidebar',function(){return _react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:307}},function(state){return _react.default.createElement(_reactNative.View,{style:styles.container,__source:{fileName:_jsxFileName,lineNumber:309}},_react.default.createElement(_.Drawer,{open:state.isOpen,pageWidth:pageWidth,pageHeight:400,drawerContent:_react.default.createElement(DrawerContent,{__source:{fileName:_jsxFileName,lineNumber:314}}),onClose:function onClose(){return store.set({isOpen:false});},animationTime:250,opacity:0.33,__source:{fileName:_jsxFileName,lineNumber:310}},_react.default.createElement(_reactNative.View,{style:styles.body,__source:{fileName:_jsxFileName,lineNumber:318}},_react.default.createElement(PageContent,{__source:{fileName:_jsxFileName,lineNumber:319}}),_react.default.createElement(_.AppbarBottom,{color:'#6E2CFA',fab:_react.default.createElement(_.Fab,{backgroundColor:'#04D5BF',__source:{fileName:_jsxFileName,lineNumber:322}}),fabCutout:true,fabPosition:'center',navigation:'menu',onNavigation:function onNavigation(){return store.set({isOpen:!state.isOpen});},actionItems:[{name:'search',onPress:function onPress(){return console.log('onSearch');}},{name:'more-vert'}],__source:{fileName:_jsxFileName,lineNumber:320}}))));});}).add('open drawer bottom',function(){return _react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:339}},function(state){return _react.default.createElement(_reactNative.View,{style:{height:500,position:'relative'},__source:{fileName:_jsxFileName,lineNumber:341}},_react.default.createElement(_.AppbarBottom,{fab:_react.default.createElement(_.Fab,{backgroundColor:'#04D5BF',__source:{fileName:_jsxFileName,lineNumber:343}}),fabCutout:true,color:'#6E2CFA',fabPosition:'center',navigation:'menu',style:{marginTop:300},onNavigation:function onNavigation(){return store.set({isOpenBottom:!state.isOpenBottom});},actionItems:[{name:'search',onPress:function onPress(){return console.log('onSearch');}},{name:'more-vert'}],__source:{fileName:_jsxFileName,lineNumber:342}}),_react.default.createElement(_.DrawerBottom,{visible:state.isOpenBottom,onBackdropPress:function onBackdropPress(){return store.set({isOpenBottom:false});},onSwipeDown:function onSwipeDown(){return store.set({isOpenBottom:false});},__source:{fileName:_jsxFileName,lineNumber:357}},_react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:361}},_react.default.createElement(_.DrawerHeader,{title:'Jon Snow',subtitle:'Knows nothing',__source:{fileName:_jsxFileName,lineNumber:362}}),_react.default.createElement(_.DrawerSection,{bottomDivider:true,__source:{fileName:_jsxFileName,lineNumber:363}},_react.default.createElement(_.DrawerItem,{text:'Inbox',icon:'mail',active:true,__source:{fileName:_jsxFileName,lineNumber:364}}),_react.default.createElement(_.DrawerItem,{text:'Outbox',icon:'send',__source:{fileName:_jsxFileName,lineNumber:365}}),_react.default.createElement(_.DrawerItem,{text:'Favorites',icon:'favorite',__source:{fileName:_jsxFileName,lineNumber:366}})))));});});exports.default=_default;var DrawerContent=function DrawerContent(){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:377}},_react.default.createElement(_.DrawerHeader,{title:'Jon Snow',subtitle:'Knows nothing',__source:{fileName:_jsxFileName,lineNumber:378}}),_react.default.createElement(_.DrawerSection,{bottomDivider:true,__source:{fileName:_jsxFileName,lineNumber:379}},_react.default.createElement(_.DrawerItem,{text:'Inbox',icon:'mail',active:true,__source:{fileName:_jsxFileName,lineNumber:380}}),_react.default.createElement(_.DrawerItem,{text:'Outbox',icon:'send',__source:{fileName:_jsxFileName,lineNumber:381}}),_react.default.createElement(_.DrawerItem,{text:'Favorites',icon:'favorite',__source:{fileName:_jsxFileName,lineNumber:382}})));};var PageContent=function PageContent(){return _react.default.createElement(_reactNative.View,{style:{marginTop:20,alignItems:'center',height:325},__source:{fileName:_jsxFileName,lineNumber:390}},_react.default.createElement(_.Heading,{type:4,style:{marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:391}},\"This is a page\"),_react.default.createElement(_.BodyText,{text:\"Click the menu button to open the drawer\",__source:{fileName:_jsxFileName,lineNumber:394}}),_react.default.createElement(_.BodyText,{text:\"Click outside the drawer to close it\",__source:{fileName:_jsxFileName,lineNumber:395}}));};var actions=[_react.default.createElement(_.Fab,{key:1,backgroundColor:'#E91E63',icon:'archive',__source:{fileName:_jsxFileName,lineNumber:401}}),_react.default.createElement(_.Fab,{key:2,backgroundColor:'#F44336',icon:'delete',__source:{fileName:_jsxFileName,lineNumber:402}}),_react.default.createElement(_.Fab,{key:3,backgroundColor:'#009688',icon:'edit',__source:{fileName:_jsxFileName,lineNumber:403}}),_react.default.createElement(_.Fab,{key:4,backgroundColor:'black',icon:'attach-money',__source:{fileName:_jsxFileName,lineNumber:404}})];var styles=_reactNative.StyleSheet.create({container:{zIndex:1,position:'relative'},body:{width:pageWidth,height:400}});"
  },
  {
    "path": "dist/Components/AppbarBottom/AppbarBottom.styles.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _reactNative=require(\"react-native\");var _shadow=_interopRequireDefault(require(\"../../Utils/Shadow/shadow\"));function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}var styles=_reactNative.StyleSheet.create({contianer:{},appbar:_objectSpread({height:56,padding:16,flexDirection:'row',alignItems:'center',position:'relative',minWidth:'auto'},(0,_shadow.default)(8)),left:{flexDirection:'row',alignItems:'center'},right:{flexDirection:'row',alignItems:'center'},fabPos:{position:_reactNative.Platform.OS==='android'?'relative':'absolute',zIndex:100,elevation:_reactNative.Platform.OS==='android'?10:0},centerCut:{position:'absolute',zIndex:10,backgroundColor:_reactNative.Platform.OS==='web'?'rgba(255,255,255,1)':'white',borderRadius:56+16,transform:[{translateY:-65/2}],width:56+16,height:56+16}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/AppbarBottom/AppbarBottom.svg.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _reactNativeSvg=_interopRequireWildcard(require(\"react-native-svg\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/AppbarBottom/AppbarBottom.svg.js\";var AppbarBottomSVG=function AppbarBottomSVG(_ref){var paddingHorizontal=_ref.paddingHorizontal,width=_ref.width,backgroundColor=_ref.backgroundColor,fabPosition=_ref.fabPosition;if(!width){width=_reactNative.Dimensions.get('screen').width-paddingHorizontal;}var widthOfPath=92;var rectWidth=width/2-widthOfPath/2;var middlePosition=width/2-widthOfPath/2;var rightPosition=width/2+widthOfPath/2;if(fabPosition=='end'){rectWidth=width-widthOfPath;middlePosition=width-widthOfPath;}return _react.default.createElement(_reactNativeSvg.default,{width:'100%',height:56,style:{position:'absolute'},__source:{fileName:_jsxFileName,lineNumber:29}},_react.default.createElement(_reactNativeSvg.Rect,{height:56,width:rectWidth+1,fill:backgroundColor,x:0,y:0,__source:{fileName:_jsxFileName,lineNumber:30}}),_react.default.createElement(_reactNativeSvg.G,{x:middlePosition,__source:{fileName:_jsxFileName,lineNumber:37}},_react.default.createElement(_reactNativeSvg.Path,{fill:backgroundColor,d:\"M0 0v56h92V0h-7.125c-1.662 0-3 1.338-3 3h-.025C80.29 21.644 64.71 35.987 46 36c-18.711-.011-34.294-14.354-35.854-33h-.033c0-1.662-1.338-3-3-3H0z\",fillRule:\"evenodd\",__source:{fileName:_jsxFileName,lineNumber:38}})),fabPosition=='end'?null:_react.default.createElement(_reactNativeSvg.Rect,{height:56,width:rectWidth+1,fill:backgroundColor,x:rightPosition-1,y:0,__source:{fileName:_jsxFileName,lineNumber:45}}));};AppbarBottomSVG.propTypes={paddingHorizontal:_propTypes.default.number,width:_propTypes.default.number,backgroundColor:_propTypes.default.string,fabPosition:_propTypes.default.string};var _default=AppbarBottomSVG;exports.default=_default;"
  },
  {
    "path": "dist/Components/AppbarBottom/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _AppbarBottom.default;}});var _AppbarBottom=_interopRequireDefault(require(\"./AppbarBottom\"));"
  },
  {
    "path": "dist/Components/Avatar/Avatar.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _Icon=_interopRequireDefault(require(\"../Icon/Icon\"));var _Ripple=_interopRequireDefault(require(\"../Ripple/Ripple\"));var _Typography=require(\"../Typography\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Avatar/Avatar.js\";var Avatar=function(_Component){(0,_inherits2.default)(Avatar,_Component);function Avatar(){(0,_classCallCheck2.default)(this,Avatar);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(Avatar).apply(this,arguments));}(0,_createClass2.default)(Avatar,[{key:\"_renderImage\",value:function _renderImage(){var _this$props=this.props,image=_this$props.image,size=_this$props.size;return _react.default.cloneElement(image,{style:{width:size,height:size,borderRadius:size/2}});}},{key:\"_renderIcon\",value:function _renderIcon(){var _this$props2=this.props,content=_this$props2.content,contentSize=_this$props2.contentSize,contentStyles=_this$props2.contentStyles,size=_this$props2.size,contentColor=_this$props2.contentColor;return _react.default.createElement(_Icon.default,{name:content,size:contentSize?contentSize:size/1.5,style:contentStyles,color:contentColor,__source:{fileName:_jsxFileName,lineNumber:55}});}},{key:\"_renderTypographyText\",value:function _renderTypographyText(){var _this$props3=this.props,content=_this$props3.content,contentColor=_this$props3.contentColor,contentSize=_this$props3.contentSize,contentStyles=_this$props3.contentStyles,size=_this$props3.size;return _react.default.createElement(_Typography.BodyText,{type:1,style:[{color:contentColor?contentColor:'white',fontSize:contentSize?contentSize:size/2},contentStyles],__source:{fileName:_jsxFileName,lineNumber:74}},content);}},{key:\"_renderItem\",value:function _renderItem(){var type=this.props.type;if(type=='image'){return this._renderImage();}else if(type=='icon'){return this._renderIcon();}else if(type=='text'){return this._renderTypographyText();}}},{key:\"_renderAvatarContent\",value:function _renderAvatarContent(){var _this$props4=this.props,style=_this$props4.style,color=_this$props4.color,size=_this$props4.size,children=_this$props4.children,theme=_this$props4.theme;return _react.default.createElement(_reactNative.View,{style:[{width:size,height:size,borderRadius:size/2,backgroundColor:color?color:theme.primary.main,alignItems:'center',justifyContent:'center'},style],__source:{fileName:_jsxFileName,lineNumber:102}},children?children:this._renderItem());}},{key:\"render\",value:function render(){var _this$props5=this.props,onPress=_this$props5.onPress,ripple=_this$props5.ripple,rippleProps=_this$props5.rippleProps;if(onPress){return _react.default.createElement(_Ripple.default,(0,_extends2.default)({onPress:onPress,disable:!ripple,rippleContainerBorderRadius:100},rippleProps,{__source:{fileName:_jsxFileName,lineNumber:124}}),this._renderAvatarContent());}return this._renderAvatarContent();}}]);return Avatar;}(_react.Component);(0,_defineProperty2.default)(Avatar,\"propTypes\",{style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),theme:_propTypes.default.object,color:_propTypes.default.string,type:_propTypes.default.string,size:_propTypes.default.number,contentSize:_propTypes.default.number,contentColor:_propTypes.default.string,contentStyles:_propTypes.default.object,content:_propTypes.default.string,image:_propTypes.default.node,onPress:_propTypes.default.func,ripple:_propTypes.default.bool,rippleProps:_propTypes.default.object,testID:_propTypes.default.string,children:_propTypes.default.node});(0,_defineProperty2.default)(Avatar,\"defaultProps\",{size:24});var _default=(0,_withTheme.default)(Avatar);exports.default=_default;"
  },
  {
    "path": "dist/Components/Avatar/Avatar.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _=require(\"../..\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Avatar/Avatar.stories.js\";var _default=(0,_storiesOf.storiesOf)('Components|Avatars',module).addParameters({jest:['Avatar']}).add('Image',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:14}},_react.default.createElement(_Header.default,{title:'Image Avatar',__source:{fileName:_jsxFileName,lineNumber:15}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',flexWrap:'wrap'},__source:{fileName:_jsxFileName,lineNumber:16}},_react.default.createElement(_.Avatar,{type:\"image\",image:_react.default.createElement(_reactNative.Image,{source:{uri:'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4'},__source:{fileName:_jsxFileName,lineNumber:20}}),size:16,__source:{fileName:_jsxFileName,lineNumber:17}}),_react.default.createElement(_.Avatar,{type:\"image\",image:_react.default.createElement(_reactNative.Image,{source:{uri:'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4'},__source:{fileName:_jsxFileName,lineNumber:32}}),size:24,__source:{fileName:_jsxFileName,lineNumber:29}}),_react.default.createElement(_.Avatar,{type:\"image\",image:_react.default.createElement(_reactNative.Image,{source:{uri:'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4'},__source:{fileName:_jsxFileName,lineNumber:44}}),size:38,onPress:function onPress(){return console.log('avatar');},ripple:true,__source:{fileName:_jsxFileName,lineNumber:41}}),_react.default.createElement(_.Avatar,{type:\"image\",image:_react.default.createElement(_reactNative.Image,{source:{uri:'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4'},__source:{fileName:_jsxFileName,lineNumber:58}}),size:56,__source:{fileName:_jsxFileName,lineNumber:55}}),_react.default.createElement(_.Avatar,{type:\"image\",image:_react.default.createElement(_reactNative.Image,{source:{uri:'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4'},__source:{fileName:_jsxFileName,lineNumber:70}}),size:80,__source:{fileName:_jsxFileName,lineNumber:67}}),_react.default.createElement(_.Avatar,{type:\"image\",image:_react.default.createElement(_reactNative.Image,{source:{uri:'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4'},__source:{fileName:_jsxFileName,lineNumber:82}}),size:70,__source:{fileName:_jsxFileName,lineNumber:79}})));}).add('Icon',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:95}},_react.default.createElement(_Header.default,{title:'Icon Avatar',__source:{fileName:_jsxFileName,lineNumber:96}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',flexWrap:'wrap'},__source:{fileName:_jsxFileName,lineNumber:97}},_react.default.createElement(_.Avatar,{type:\"icon\",content:\"arrow-back\",contentColor:'#c2185b',color:'black',size:16,__source:{fileName:_jsxFileName,lineNumber:98}}),_react.default.createElement(_.Avatar,{type:\"icon\",content:\"alarm\",size:24,color:'#c2185b',__source:{fileName:_jsxFileName,lineNumber:105}}),_react.default.createElement(_.Avatar,{type:\"icon\",content:\"add\",contentColor:'#E91E63',size:48,color:'#8BC34A',__source:{fileName:_jsxFileName,lineNumber:106}}),_react.default.createElement(_.Avatar,{type:\"icon\",content:\"face\",contentColor:'white',size:64,color:'#42a5f5',__source:{fileName:_jsxFileName,lineNumber:113}})));}).add('Text',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:124}},_react.default.createElement(_Header.default,{title:'Text Avatar',__source:{fileName:_jsxFileName,lineNumber:125}}),_react.default.createElement(_.Avatar,{type:\"text\",content:\"CP\",contentColor:'white',size:64,color:'#42a5f5',__source:{fileName:_jsxFileName,lineNumber:127}}),_react.default.createElement(_.Avatar,{type:\"text\",content:\"MB\",size:48,color:'#c2185b',__source:{fileName:_jsxFileName,lineNumber:134}}),_react.default.createElement(_.Avatar,{type:\"text\",content:\"NP\",contentColor:'#c2185b',color:'#f4511e',__source:{fileName:_jsxFileName,lineNumber:135}}));});exports.default=_default;"
  },
  {
    "path": "dist/Components/Avatar/Avatar.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Avatar/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _Avatar.default;}});var _Avatar=_interopRequireDefault(require(\"./Avatar\"));"
  },
  {
    "path": "dist/Components/Backdrop/BackLayer/BackLayer.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _BackLayer=_interopRequireDefault(require(\"./BackLayer.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Backdrop/BackLayer/BackLayer.js\";var BackLayer=function(_Component){(0,_inherits2.default)(BackLayer,_Component);function BackLayer(props){var _this;(0,_classCallCheck2.default)(this,BackLayer);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(BackLayer).call(this,props));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"renderBackLayerConcealed\",function(){var _this$props=_this.props,backLayerConcealed=_this$props.backLayerConcealed,backRevealed=_this$props.backRevealed,animate=_this$props.animate;if(!backLayerConcealed||backRevealed){return null;}var md=backRevealed?0:1;var opacity=animate.interpolate({inputRange:[0,0.6,1],outputRange:[1,md,0]});return _react.default.createElement(_reactNative.Animated.View,{style:[_BackLayer.default.backLayer,{opacity:opacity}],useNativeDriver:true,__source:{fileName:_jsxFileName,lineNumber:32}},backLayerConcealed);});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"renderBackLayerRevealed\",function(){var _this$props2=_this.props,backLayerRevealed=_this$props2.backLayerRevealed,backRevealed=_this$props2.backRevealed,animate=_this$props2.animate;if(!backLayerRevealed||!backRevealed){return null;}var md=backRevealed?1:0;var opacity=animate.interpolate({inputRange:[0,0.6,1],outputRange:[0,md,1]});return _react.default.createElement(_reactNative.Animated.View,{style:[_BackLayer.default.backLayer,{opacity:opacity}],useNativeDriver:true,__source:{fileName:_jsxFileName,lineNumber:52}},_this.renderBackElements());});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"renderBackElements\",function(){var _this$props3=_this.props,backLayerRevealed=_this$props3.backLayerRevealed,internalAnimate=_this$props3.internalAnimate;var opacity=internalAnimate.interpolate({inputRange:[0,0.5,1],outputRange:[1,0,1]});return _react.default.createElement(_reactNative.Animated.View,{style:{flex:1,opacity:opacity},useNativeDriver:true,__source:{fileName:_jsxFileName,lineNumber:69}},backLayerRevealed);});return _this;}(0,_createClass2.default)(BackLayer,[{key:\"render\",value:function render(){return _react.default.createElement(_react.Fragment,{__source:{fileName:_jsxFileName,lineNumber:77}},this.renderBackLayerConcealed(),this.renderBackLayerRevealed());}}]);return BackLayer;}(_react.Component);(0,_defineProperty2.default)(BackLayer,\"propTypes\",{backLayerConcealed:_propTypes.default.node,backLayerRevealed:_propTypes.default.node,backRevealed:_propTypes.default.bool,animate:_propTypes.default.object,internalAnimate:_propTypes.default.object});var _default=(0,_withTheme.default)(BackLayer);exports.default=_default;"
  },
  {
    "path": "dist/Components/Backdrop/BackLayer/BackLayer.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({backLayer:{position:'absolute',top:0,bottom:0,width:'100%'}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Backdrop/Backdrop.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _Backdrop=_interopRequireDefault(require(\"./Backdrop.styles\"));var _HeaderButton=_interopRequireDefault(require(\"./HeaderButton/HeaderButton\"));var _FrontLayer=_interopRequireDefault(require(\"./FrontLayer/FrontLayer\"));var _BackLayer=_interopRequireDefault(require(\"./BackLayer/BackLayer\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Backdrop/Backdrop.js\";var Backdrop=function(_PureComponent){(0,_inherits2.default)(Backdrop,_PureComponent);function Backdrop(props){var _this;(0,_classCallCheck2.default)(this,Backdrop);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(Backdrop).call(this,props));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"animate\",new _reactNative.Animated.Value(0));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"internalAnimate\",new _reactNative.Animated.Value(0));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"internalOffsetAnimate\",new _reactNative.Animated.Value(0));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"isInternalAnimate\",false);var window=_reactNative.Dimensions.get('window');_this.state={window:window,backConcealed:true,backRevealed:false,iconName:'menu'};return _this;}(0,_createClass2.default)(Backdrop,[{key:\"toggleLayout\",value:function toggleLayout(){var _this2=this;var backConcealed=this.state.backConcealed;if(backConcealed){this.setState({backRevealed:true,iconName:'close'});}else{this.setState({backConcealed:true,iconName:'menu'});}this.isInternalAnimate=false;_reactNative.Animated.timing(this.animate,{toValue:backConcealed?1:0,duration:196,easing:_reactNative.Easing.ease,useNativeDriver:true}).start(function(){if(backConcealed){_this2.setState({backConcealed:false});}else{_this2.setState({backRevealed:false});}});}},{key:\"render\",value:function render(){var _this3=this;var _this$props=this.props,backLayerStyle=_this$props.backLayerStyle,headerButtonStyle=_this$props.headerButtonStyle,frontLayerStyle=_this$props.frontLayerStyle,children=_this$props.children,initialOffset=_this$props.initialOffset,offset=_this$props.offset,backLayerRevealed=_this$props.backLayerRevealed,backLayerConcealed=_this$props.backLayerConcealed,theme=_this$props.theme,subheader=_this$props.subheader,testID=_this$props.testID;var _this$state=this.state,backConcealed=_this$state.backConcealed,backRevealed=_this$state.backRevealed,window=_this$state.window,iconName=_this$state.iconName;return _react.default.createElement(_reactNative.SafeAreaView,{style:[_Backdrop.default.backLayerContainer,{backgroundColor:theme.primary.main},backLayerStyle],testID:testID,__source:{fileName:_jsxFileName,lineNumber:91}},_react.default.createElement(_BackLayer.default,{backLayerConcealed:backLayerConcealed,animate:this.animate,internalAnimate:this.internalAnimate,backConcealed:backConcealed,backLayerRevealed:backLayerRevealed,backRevealed:backRevealed,__source:{fileName:_jsxFileName,lineNumber:98}}),_react.default.createElement(_FrontLayer.default,{toggleLayout:function toggleLayout(){return _this3.toggleLayout();},animate:this.animate,frontLayerStyle:frontLayerStyle,initialOffset:initialOffset,window:window,offset:offset,backRevealed:backRevealed,backLayerRevealed:backLayerRevealed,internalOffsetAnimate:this.internalOffsetAnimate,isInternalAnimate:this.isInternalAnimate,subheader:subheader,__source:{fileName:_jsxFileName,lineNumber:106}},children),_react.default.createElement(_HeaderButton.default,{backConcealed:backConcealed,headerButtonStyle:headerButtonStyle,toggleLayout:function toggleLayout(){return _this3.toggleLayout();},iconName:iconName,__source:{fileName:_jsxFileName,lineNumber:120}}));}}]);return Backdrop;}(_react.PureComponent);(0,_defineProperty2.default)(Backdrop,\"propTypes\",{backLayerStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),frontLayerStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),headerButtonStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),backLayerConcealed:_propTypes.default.node,offset:_propTypes.default.number,initialOffset:_propTypes.default.number,children:_propTypes.default.node,backLayerRevealed:_propTypes.default.node,theme:_propTypes.default.object,subheader:_propTypes.default.string,testID:_propTypes.default.string});(0,_defineProperty2.default)(Backdrop,\"defaultProps\",{initialOffset:56,buttonRippleColor:'rgba(255,255,255,0.3)'});var _default=(0,_withTheme.default)(Backdrop);exports.default=_default;"
  },
  {
    "path": "dist/Components/Backdrop/Backdrop.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../..\");var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Backdrop/Backdrop.stories.js\";var _default=(0,_storiesOf.storiesOf)('Components|Backdrop',module).addParameters({jest:['Backdrop']}).add('Simple',function(){return _react.default.createElement(_Container.default,{style:{flex:1,padding:0},__source:{fileName:_jsxFileName,lineNumber:19}},_react.default.createElement(_reactNative.View,{style:{flex:1,width:'100%'},__source:{fileName:_jsxFileName,lineNumber:20}},_react.default.createElement(_.Backdrop,{backLayerConcealed:_react.default.createElement(_reactNative.View,{style:styles.backdropHeader,__source:{fileName:_jsxFileName,lineNumber:27}},_react.default.createElement(_reactNative.Text,{style:styles.backdropHeaderTitle,__source:{fileName:_jsxFileName,lineNumber:28}},\"App\")),backLayerRevealed:_react.default.createElement(_reactNative.View,{style:{flex:1,width:'100%'},__source:{fileName:_jsxFileName,lineNumber:32}},_react.default.createElement(_reactNative.View,{style:styles.backdropHeader,__source:{fileName:_jsxFileName,lineNumber:33}},_react.default.createElement(_reactNative.Text,{style:styles.backdropHeaderTitle,__source:{fileName:_jsxFileName,lineNumber:34}},\"Navigation\")),_react.default.createElement(_.List,{style:{width:'100%',backgroundColor:'transparent'},__source:{fileName:_jsxFileName,lineNumber:37}},_react.default.createElement(_.ListItem,{text:'Home',textStyle:{color:'white'},selected:true,style:{backgroundColor:'transparent'},icon:_react.default.createElement(_.Icon,{name:'home',size:24,color:'white',__source:{fileName:_jsxFileName,lineNumber:47}}),__source:{fileName:_jsxFileName,lineNumber:42}}),_react.default.createElement(_.ListItem,{text:'Music',textStyle:{color:'white'},style:{backgroundColor:'transparent'},icon:_react.default.createElement(_.Icon,{name:'music-note',size:24,color:'white',__source:{fileName:_jsxFileName,lineNumber:53}}),__source:{fileName:_jsxFileName,lineNumber:49}}),_react.default.createElement(_.ListItem,{text:'Favorites',textStyle:{color:'white'},style:{backgroundColor:'transparent'},icon:_react.default.createElement(_.Icon,{name:'favorite',size:24,color:'white',__source:{fileName:_jsxFileName,lineNumber:59}}),__source:{fileName:_jsxFileName,lineNumber:55}}),_react.default.createElement(_.ListItem,{text:'Settings',textStyle:{color:'white'},style:{backgroundColor:'transparent'},icon:_react.default.createElement(_.Icon,{name:'settings',size:24,color:'white',__source:{fileName:_jsxFileName,lineNumber:65}}),__source:{fileName:_jsxFileName,lineNumber:61}}))),offset:260,__source:{fileName:_jsxFileName,lineNumber:25}},_react.default.createElement(_reactNative.View,{style:styles.container,__source:{fileName:_jsxFileName,lineNumber:71}},_react.default.createElement(_.Heading,{text:'Albums',style:{alignSelf:'flex-start',marginLeft:20,fontSize:20},__source:{fileName:_jsxFileName,lineNumber:72}}),_react.default.createElement(_.ListItem,{text:'Back in Black',secondaryText:'AC/DC',media:_react.default.createElement(_.Avatar,{type:\"icon\",content:\"album\",contentColor:'#ececec',color:'#a3a3a3',size:40,__source:{fileName:_jsxFileName,lineNumber:84}}),actionItem:_react.default.createElement(_.IconButton,{name:\"favorite\",size:24,color:\"#6e6e6e\",__source:{fileName:_jsxFileName,lineNumber:93}}),__source:{fileName:_jsxFileName,lineNumber:80}}),_react.default.createElement(_.ListItem,{text:'Hotel California',secondaryText:'Eagles',media:_react.default.createElement(_.Avatar,{type:\"icon\",content:\"album\",contentColor:'#ececec',color:'#a3a3a3',size:40,__source:{fileName:_jsxFileName,lineNumber:100}}),actionItem:_react.default.createElement(_.IconButton,{name:\"favorite\",size:24,color:\"#6e6e6e\",__source:{fileName:_jsxFileName,lineNumber:109}}),__source:{fileName:_jsxFileName,lineNumber:96}}),_react.default.createElement(_.ListItem,{text:'Dark Side of the Moon',secondaryText:'Pink Floyd ',media:_react.default.createElement(_.Avatar,{type:\"icon\",content:\"album\",contentColor:'#ececec',color:'#a3a3a3',size:40,__source:{fileName:_jsxFileName,lineNumber:116}}),actionItem:_react.default.createElement(_.IconButton,{name:\"favorite\",size:24,color:\"#6e6e6e\",__source:{fileName:_jsxFileName,lineNumber:125}}),__source:{fileName:_jsxFileName,lineNumber:112}}),_react.default.createElement(_.ListItem,{text:'Led Zeppelin IV',secondaryText:'Led Zeppelin',media:_react.default.createElement(_.Avatar,{type:\"icon\",content:\"album\",contentColor:'#ececec',color:'#a3a3a3',size:40,__source:{fileName:_jsxFileName,lineNumber:132}}),actionItem:_react.default.createElement(_.IconButton,{name:\"favorite\",size:24,color:\"#6e6e6e\",__source:{fileName:_jsxFileName,lineNumber:141}}),__source:{fileName:_jsxFileName,lineNumber:128}})))));}).add('Subheader',function(){return _react.default.createElement(_Container.default,{style:{flex:1,padding:0},__source:{fileName:_jsxFileName,lineNumber:150}},_react.default.createElement(_reactNative.View,{style:{flex:1,width:'100%'},__source:{fileName:_jsxFileName,lineNumber:151}},_react.default.createElement(_.Backdrop,{subheader:'Music',backLayerConcealed:_react.default.createElement(_reactNative.View,{style:styles.backdropHeader,__source:{fileName:_jsxFileName,lineNumber:159}},_react.default.createElement(_reactNative.Text,{style:styles.backdropHeaderTitle,__source:{fileName:_jsxFileName,lineNumber:160}},\"App\")),backLayerRevealed:_react.default.createElement(_reactNative.View,{style:{flex:1,width:'100%'},__source:{fileName:_jsxFileName,lineNumber:164}},_react.default.createElement(_reactNative.View,{style:styles.backdropHeader,__source:{fileName:_jsxFileName,lineNumber:165}},_react.default.createElement(_reactNative.Text,{style:styles.backdropHeaderTitle,__source:{fileName:_jsxFileName,lineNumber:166}},\"Navigation\")),_react.default.createElement(_.List,{style:{width:'100%',backgroundColor:'transparent'},__source:{fileName:_jsxFileName,lineNumber:169}},_react.default.createElement(_.ListItem,{text:'Home',textStyle:{color:'white'},selected:true,style:{backgroundColor:'transparent'},icon:_react.default.createElement(_.Icon,{name:'home',size:24,color:'white',__source:{fileName:_jsxFileName,lineNumber:179}}),__source:{fileName:_jsxFileName,lineNumber:174}}),_react.default.createElement(_.ListItem,{text:'Music',textStyle:{color:'white'},style:{backgroundColor:'transparent'},icon:_react.default.createElement(_.Icon,{name:'music-note',size:24,color:'white',__source:{fileName:_jsxFileName,lineNumber:185}}),__source:{fileName:_jsxFileName,lineNumber:181}}),_react.default.createElement(_.ListItem,{text:'Favorites',textStyle:{color:'white'},style:{backgroundColor:'transparent'},icon:_react.default.createElement(_.Icon,{name:'favorite',size:24,color:'white',__source:{fileName:_jsxFileName,lineNumber:191}}),__source:{fileName:_jsxFileName,lineNumber:187}}),_react.default.createElement(_.ListItem,{text:'Settings',textStyle:{color:'white'},style:{backgroundColor:'transparent'},icon:_react.default.createElement(_.Icon,{name:'settings',size:24,color:'white',__source:{fileName:_jsxFileName,lineNumber:197}}),__source:{fileName:_jsxFileName,lineNumber:193}}))),offset:260,__source:{fileName:_jsxFileName,lineNumber:156}},_react.default.createElement(_reactNative.View,{style:styles.container,__source:{fileName:_jsxFileName,lineNumber:203}},_react.default.createElement(_.Heading,{text:'Albums',style:{alignSelf:'flex-start',marginLeft:20,fontSize:20},__source:{fileName:_jsxFileName,lineNumber:204}}),_react.default.createElement(_.ListItem,{text:'Back in Black',secondaryText:'AC/DC',media:_react.default.createElement(_.Avatar,{type:\"icon\",content:\"album\",contentColor:'#ececec',color:'#a3a3a3',size:40,__source:{fileName:_jsxFileName,lineNumber:216}}),actionItem:_react.default.createElement(_.IconButton,{name:\"favorite\",size:24,color:\"#6e6e6e\",__source:{fileName:_jsxFileName,lineNumber:225}}),__source:{fileName:_jsxFileName,lineNumber:212}}),_react.default.createElement(_.ListItem,{text:'Hotel California',secondaryText:'Eagles',media:_react.default.createElement(_.Avatar,{type:\"icon\",content:\"album\",contentColor:'#ececec',color:'#a3a3a3',size:40,__source:{fileName:_jsxFileName,lineNumber:232}}),actionItem:_react.default.createElement(_.IconButton,{name:\"favorite\",size:24,color:\"#6e6e6e\",__source:{fileName:_jsxFileName,lineNumber:241}}),__source:{fileName:_jsxFileName,lineNumber:228}}),_react.default.createElement(_.ListItem,{text:'Dark Side of the Moon',secondaryText:'Pink Floyd ',media:_react.default.createElement(_.Avatar,{type:\"icon\",content:\"album\",contentColor:'#ececec',color:'#a3a3a3',size:40,__source:{fileName:_jsxFileName,lineNumber:248}}),actionItem:_react.default.createElement(_.IconButton,{name:\"favorite\",size:24,color:\"#6e6e6e\",__source:{fileName:_jsxFileName,lineNumber:257}}),__source:{fileName:_jsxFileName,lineNumber:244}}),_react.default.createElement(_.ListItem,{text:'Led Zeppelin IV',secondaryText:'Led Zeppelin',media:_react.default.createElement(_.Avatar,{type:\"icon\",content:\"album\",contentColor:'#ececec',color:'#a3a3a3',size:40,__source:{fileName:_jsxFileName,lineNumber:264}}),actionItem:_react.default.createElement(_.IconButton,{name:\"favorite\",size:24,color:\"#6e6e6e\",__source:{fileName:_jsxFileName,lineNumber:273}}),__source:{fileName:_jsxFileName,lineNumber:260}})))));});exports.default=_default;var styles=_reactNative.StyleSheet.create({container:{flex:1,paddingTop:30,alignItems:'center'},contentText:{color:'black',alignSelf:'center'},backdropHeader:{height:56,flexDirection:'row',alignItems:'center'},backdropHeaderTitle:{fontSize:18,color:'white',fontWeight:'500',marginLeft:72}});"
  },
  {
    "path": "dist/Components/Backdrop/Backdrop.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({backLayerContainer:{flex:1}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Backdrop/FrontLayer/FrontLayer.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _FrontLayer=_interopRequireDefault(require(\"./FrontLayer.styles\"));var _FrontLayerScrim=_interopRequireDefault(require(\"../FrontLayerScrim/FrontLayerScrim\"));var _=require(\"../../..\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Backdrop/FrontLayer/FrontLayer.js\";var IOS=_reactNative.Platform.OS==='ios';var FrontLayer=function(_PureComponent){(0,_inherits2.default)(FrontLayer,_PureComponent);function FrontLayer(props){var _this;(0,_classCallCheck2.default)(this,FrontLayer);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(FrontLayer).call(this,props));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"getFrontLayerTranslateY\",function(){var _this$props=_this.props,animate=_this$props.animate,initialOffset=_this$props.initialOffset;var offset=_this.getOffset();return animate.interpolate({inputRange:[0,1],outputRange:[initialOffset,offset]});});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"getOffset\",function(){var ignoreElement=arguments.length>0&&arguments[0]!==undefined?arguments[0]:false;var _this$props2=_this.props,backLayerRevealed=_this$props2.backLayerRevealed,offset=_this$props2.offset,window=_this$props2.window;if(!ignoreElement&&backLayerRevealed&&offset){return offset;}if(offset)return offset;var y=_this.getY();return window.height-y;});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"getY\",function(){var initialOffset=_this.props.initialOffset;var y=IOS?20:24;return y+initialOffset;});return _this;}(0,_createClass2.default)(FrontLayer,[{key:\"render\",value:function render(){var _this$props3=this.props,children=_this$props3.children,_toggleLayout=_this$props3.toggleLayout,animate=_this$props3.animate,frontLayerStyle=_this$props3.frontLayerStyle,backRevealed=_this$props3.backRevealed,subheader=_this$props3.subheader;var translateY=this.getFrontLayerTranslateY();return _react.default.createElement(_reactNative.Animated.View,{useNativeDriver:true,style:[_FrontLayer.default.frontLayerContainer,frontLayerStyle,{transform:[{translateY:translateY}]}],__source:{fileName:_jsxFileName,lineNumber:74}},_react.default.createElement(_.Subtitle,{text:subheader,style:_FrontLayer.default.subheader,__source:{fileName:_jsxFileName,lineNumber:81}}),children,_react.default.createElement(_FrontLayerScrim.default,{toggleLayout:function toggleLayout(){return _toggleLayout();},animate:animate,backRevealed:backRevealed,__source:{fileName:_jsxFileName,lineNumber:83}}));}}]);return FrontLayer;}(_react.PureComponent);(0,_defineProperty2.default)(FrontLayer,\"propTypes\",{offset:_propTypes.default.number,initialOffset:_propTypes.default.number,children:_propTypes.default.node,backLayerRevealed:_propTypes.default.object,frontLayerStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),theme:_propTypes.default.object,toggleLayout:_propTypes.default.func,animate:_propTypes.default.object,backRevealed:_propTypes.default.bool,isInternalAnimate:_propTypes.default.bool,internalOffsetAnimate:_propTypes.default.object,window:_propTypes.default.object,subheader:_propTypes.default.string});var _default=(0,_withTheme.default)(FrontLayer);exports.default=_default;"
  },
  {
    "path": "dist/Components/Backdrop/FrontLayer/FrontLayer.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({frontLayerContainer:{flex:1,backgroundColor:'white',borderTopLeftRadius:16,borderTopRightRadius:16},subheader:{fontSize:16,color:'rgba(0,0,0,.8)',marginLeft:20,marginTop:16}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Backdrop/FrontLayerScrim/FrontLayerScrim.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _=require(\"../../../\");var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _FrontLayerScrim=_interopRequireDefault(require(\"./FrontLayerScrim.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Backdrop/FrontLayerScrim/FrontLayerScrim.js\";var FrontLayerScrim=function(_Component){(0,_inherits2.default)(FrontLayerScrim,_Component);function FrontLayerScrim(props){(0,_classCallCheck2.default)(this,FrontLayerScrim);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(FrontLayerScrim).call(this,props));}(0,_createClass2.default)(FrontLayerScrim,[{key:\"render\",value:function render(){var _this$props=this.props,backRevealed=_this$props.backRevealed,toggleLayout=_this$props.toggleLayout,animate=_this$props.animate;if(!backRevealed)return null;return _react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:function onPress(){return toggleLayout();},__source:{fileName:_jsxFileName,lineNumber:24}},_react.default.createElement(_reactNative.Animated.View,{style:[_FrontLayerScrim.default.scrimLayer,{opacity:animate}],useNativeDriver:true,__source:{fileName:_jsxFileName,lineNumber:25}},_react.default.createElement(_.Icon,{name:\"expand-less\",size:24,color:\"rgba(0,0,0,0.56)\",style:_FrontLayerScrim.default.scrimLayerIcon,__source:{fileName:_jsxFileName,lineNumber:28}})));}}]);return FrontLayerScrim;}(_react.Component);(0,_defineProperty2.default)(FrontLayerScrim,\"propTypes\",{backRevealed:_propTypes.default.bool,toggleLayout:_propTypes.default.func,animate:_propTypes.default.object});var _default=(0,_withTheme.default)(FrontLayerScrim);exports.default=_default;"
  },
  {
    "path": "dist/Components/Backdrop/FrontLayerScrim/FrontLayerScrim.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({scrimLayer:{position:'absolute',top:0,right:0,bottom:0,left:0,backgroundColor:'rgba(255,255,255,0.8)',borderTopLeftRadius:16,borderTopRightRadius:16},scrimLayerIcon:{position:'absolute',top:12,right:16}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Backdrop/HeaderButton/HeaderButton.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _=require(\"../../../\");var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _HeaderButton=_interopRequireDefault(require(\"./HeaderButton.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Backdrop/HeaderButton/HeaderButton.js\";var HeaderButton=function(_Component){(0,_inherits2.default)(HeaderButton,_Component);function HeaderButton(props){var _this;(0,_classCallCheck2.default)(this,HeaderButton);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(HeaderButton).call(this,props));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"spinValue\",new _reactNative.Animated.Value(0));return _this;}(0,_createClass2.default)(HeaderButton,[{key:\"_handleSpin\",value:function _handleSpin(){var _this2=this;var _this$props=this.props,backConcealed=_this$props.backConcealed,toggleLayout=_this$props.toggleLayout;toggleLayout();_reactNative.Animated.timing(this.spinValue,{toValue:0.5,duration:94,easing:_reactNative.Easing.linear,useNativeDriver:true}).start(function(){_reactNative.Animated.timing(_this2.spinValue,{toValue:backConcealed?1:0,duration:94,easing:_reactNative.Easing.linear,useNativeDriver:true}).start();});}},{key:\"render\",value:function render(){var _this3=this;var _this$props2=this.props,headerButtonStyle=_this$props2.headerButtonStyle,iconName=_this$props2.iconName;var spin=this.spinValue.interpolate({inputRange:[0,1],outputRange:['180deg','0deg']});var style=[_HeaderButton.default.container,headerButtonStyle,{transform:[{rotate:spin}]}];return _react.default.createElement(_reactNative.Animated.View,{style:style,useNativeDriver:true,__source:{fileName:_jsxFileName,lineNumber:53}},_react.default.createElement(_.Ripple,{rippleContainerBorderRadius:100,onPress:function onPress(){return _this3._handleSpin();},style:_HeaderButton.default.ripple,__source:{fileName:_jsxFileName,lineNumber:54}},_react.default.createElement(_.Icon,{name:iconName,size:24,color:\"white\",style:_HeaderButton.default.icon,__source:{fileName:_jsxFileName,lineNumber:58}})));}}]);return HeaderButton;}(_react.Component);(0,_defineProperty2.default)(HeaderButton,\"propTypes\",{headerButtonStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),toggleLayout:_propTypes.default.func,backConcealed:_propTypes.default.bool,iconName:_propTypes.default.string});var _default=(0,_withTheme.default)(HeaderButton);exports.default=_default;"
  },
  {
    "path": "dist/Components/Backdrop/HeaderButton/HeaderButton.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({container:{height:56,width:56,justifyContent:'center',alignItems:'center',position:'absolute'},ripple:{height:32,width:32,justifyContent:'center'},icon:{alignSelf:'center'}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Backdrop/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _Backdrop.default;}});var _Backdrop=_interopRequireDefault(require(\"./Backdrop\"));"
  },
  {
    "path": "dist/Components/Backdrop/utils.js",
    "content": ""
  },
  {
    "path": "dist/Components/Badge/Badge.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _objectWithoutProperties2=_interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutProperties\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _Ripple=_interopRequireDefault(require(\"../Ripple/Ripple\"));var _Badge=_interopRequireDefault(require(\"./Badge.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Badge/Badge.js\";var Badge=function(_Component){(0,_inherits2.default)(Badge,_Component);function Badge(props){var _this;(0,_classCallCheck2.default)(this,Badge);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(Badge).call(this,props));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{childrenWidth:0,childrenHeight:0,scale:new _reactNative.Animated.Value(0)});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"onChildrenLayout\",function(e){var _e$nativeEvent$layout=e.nativeEvent.layout,width=_e$nativeEvent$layout.width,height=_e$nativeEvent$layout.height;_this.setState({childrenWidth:width,childrenHeight:height});});return _this;}(0,_createClass2.default)(Badge,[{key:\"componentDidMount\",value:function componentDidMount(){var visible=this.props.visible;if(visible){this._animateBadge();}}},{key:\"componentDidUpdate\",value:function componentDidUpdate(prevProps){var visible=this.props.visible;if(visible!=prevProps.visible){this._animateBadge();}}},{key:\"getFontSize\",value:function getFontSize(content,maxed){var size=this.props.size;var scaleFactor=0.5;if(content&&String(content).length>3&&!maxed){scaleFactor=0.3;}return size*scaleFactor;}},{key:\"getBadgeWidth\",value:function getBadgeWidth(content){var size=this.props.size;var isLong=String(content).length>3;var scaleFactor=isLong?1.75:1.5;return scaleFactor*size;}},{key:\"_animateBadge\",value:function _animateBadge(){var visible=this.props.visible;var scale=this.state.scale;var scaleValue=visible?1:0;_reactNative.Animated.spring(scale,{toValue:scaleValue,speed:7,useNativeDriver:true}).start();}},{key:\"_renderBadge\",value:function _renderBadge(){var _this$props=this.props,size=_this$props.size,textColor=_this$props.textColor,color=_this$props.color,style=_this$props.style,theme=_this$props.theme,children=_this$props.children,content=_this$props.content,position=_this$props.position,right=_this$props.right,left=_this$props.left,top=_this$props.top,_this$props$maxValue=_this$props.maxValue,maxValue=_this$props$maxValue===void 0?0:_this$props$maxValue,rest=(0,_objectWithoutProperties2.default)(_this$props,[\"size\",\"textColor\",\"color\",\"style\",\"theme\",\"children\",\"content\",\"position\",\"right\",\"left\",\"top\",\"maxValue\"]);var positionStyle={right:children?0:'auto'};if(position==='left'){positionStyle={left:children?0:'auto'};}if(right)positionStyle.right=right;if(left)positionStyle.left=left;var maxedContent=parseInt(content,10);var maxed=!isNaN(maxedContent)&&maxValue&&maxedContent>maxValue;maxedContent=maxed?maxValue+\"+\":content;return _react.default.createElement(_reactNative.Animated.View,(0,_extends2.default)({useNativeDriver:true,style:[{height:size,width:maxed?this.getBadgeWidth(maxedContent):size,borderRadius:size,backgroundColor:color?color:theme.primary.main,alignItems:'center',justifyContent:'center',position:children?'absolute':'relative',top:top?top:0,transform:[{scale:this.state.scale}]},positionStyle,style],numberOfLines:1},rest,{__source:{fileName:_jsxFileName,lineNumber:137}}),_react.default.createElement(_reactNative.Text,{style:[_Badge.default.content,{fontSize:this.getFontSize(maxedContent,maxed),color:textColor?textColor:'white'}],__source:{fileName:_jsxFileName,lineNumber:157}},maxedContent));}},{key:\"render\",value:function render(){var _this$props2=this.props,children=_this$props2.children,containerStyle=_this$props2.containerStyle,onPress=_this$props2.onPress,testID=_this$props2.testID;var _this$state=this.state,childrenHeight=_this$state.childrenHeight,childrenWidth=_this$state.childrenWidth;return _react.default.createElement(_reactNative.View,{style:[{position:'relative',alignSelf:'flex-start',alignItems:'flex-start',height:children?childrenHeight:'auto',width:children?childrenWidth:'auto',maxHeight:children?childrenHeight:'auto',maxWidth:children?childrenWidth:'auto',minHeight:children?childrenHeight:'auto',minWidth:children?childrenWidth:'auto'},containerStyle],testID:testID,__source:{fileName:_jsxFileName,lineNumber:176}},_react.default.createElement(_reactNative.View,{onLayout:this.onChildrenLayout,__source:{fileName:_jsxFileName,lineNumber:192}},children),onPress?_react.default.createElement(_Ripple.default,{onPress:true,__source:{fileName:_jsxFileName,lineNumber:194}},this._renderBadge()):this._renderBadge());}}]);return Badge;}(_react.Component);(0,_defineProperty2.default)(Badge,\"propTypes\",{color:_propTypes.default.string,textColor:_propTypes.default.string,content:_propTypes.default.oneOfType([_propTypes.default.string,_propTypes.default.number]),maxValue:_propTypes.default.number,children:_propTypes.default.node,size:_propTypes.default.number,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),position:_propTypes.default.string,onPress:_propTypes.default.func,theme:_propTypes.default.object,containerStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),right:_propTypes.default.oneOfType([_propTypes.default.number,_propTypes.default.string]),left:_propTypes.default.oneOfType([_propTypes.default.number,_propTypes.default.string]),top:_propTypes.default.oneOfType([_propTypes.default.number,_propTypes.default.string]),visible:_propTypes.default.bool,testID:_propTypes.default.string});(0,_defineProperty2.default)(Badge,\"defaultProps\",{position:'right',size:16,right:0,left:'auto',visible:true});var _default=(0,_withTheme.default)(Badge);exports.default=_default;"
  },
  {
    "path": "dist/Components/Badge/Badge.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../..\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _storybookState=require(\"@sambego/storybook-state\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Badge/Badge.stories.js\";var store=new _storybookState.Store({visible:true});var _default=(0,_storiesOf.storiesOf)('Components|Badge',module).addParameters({jest:['Badge']}).add('Standalone',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:16}},_react.default.createElement(_Header.default,{title:'Standalone',__source:{fileName:_jsxFileName,lineNumber:17}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',marginBottom:40},__source:{fileName:_jsxFileName,lineNumber:19}},_react.default.createElement(_.Badge,{size:12,content:24,__source:{fileName:_jsxFileName,lineNumber:25}}),_react.default.createElement(_.Badge,{size:24,content:99,color:'#E91E63',__source:{fileName:_jsxFileName,lineNumber:26}}),_react.default.createElement(_.Badge,{size:36,content:2,color:'#9C27B0',__source:{fileName:_jsxFileName,lineNumber:27}}),_react.default.createElement(_.Badge,{size:48,content:102,color:'#009688',__source:{fileName:_jsxFileName,lineNumber:28}}),_react.default.createElement(_.Badge,{size:60,content:35,color:'#3F51B5',__source:{fileName:_jsxFileName,lineNumber:29}})),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center'},__source:{fileName:_jsxFileName,lineNumber:32}},_react.default.createElement(_.Badge,{size:12,content:24,color:'black',textColor:'#E91E63',__source:{fileName:_jsxFileName,lineNumber:33}}),_react.default.createElement(_.Badge,{size:24,content:99,color:'black',textColor:'#E91E63',__source:{fileName:_jsxFileName,lineNumber:34}}),_react.default.createElement(_.Badge,{size:36,content:2,color:'black',textColor:'#9C27B0',__source:{fileName:_jsxFileName,lineNumber:35}}),_react.default.createElement(_.Badge,{size:48,content:102,color:'black',t:true,textColor:'#009688',__source:{fileName:_jsxFileName,lineNumber:36}}),_react.default.createElement(_.Badge,{size:60,content:35,color:'black',textColor:'#3F51B5',__source:{fileName:_jsxFileName,lineNumber:43}})));}).add('With Max Value',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:48}},_react.default.createElement(_Header.default,{title:'Standalone',__source:{fileName:_jsxFileName,lineNumber:49}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',marginBottom:40},__source:{fileName:_jsxFileName,lineNumber:51}},_react.default.createElement(_.Badge,{size:36,content:'MB',maxValue:99,__source:{fileName:_jsxFileName,lineNumber:57}}),_react.default.createElement(_.Badge,{size:36,content:99,__source:{fileName:_jsxFileName,lineNumber:58}}),_react.default.createElement(_.Badge,{size:36,content:100,maxValue:99,__source:{fileName:_jsxFileName,lineNumber:59}}),_react.default.createElement(_.Badge,{size:36,content:1000,maxValue:999,__source:{fileName:_jsxFileName,lineNumber:60}})));}).add('On Icons',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:65}},_react.default.createElement(_Header.default,{title:'On Icons',__source:{fileName:_jsxFileName,lineNumber:66}}),_react.default.createElement(_reactNative.View,{style:{flex:1,flexDirection:'row',alignItems:'center',marginBottom:80},__source:{fileName:_jsxFileName,lineNumber:68}},_react.default.createElement(_.Badge,{size:14,content:4,__source:{fileName:_jsxFileName,lineNumber:75}},_react.default.createElement(_.Icon,{name:\"favorite\",size:24,__source:{fileName:_jsxFileName,lineNumber:76}})),_react.default.createElement(_.Badge,{size:16,content:77,color:'red',__source:{fileName:_jsxFileName,lineNumber:78}},_react.default.createElement(_.IconButton,{name:\"mail\",size:32,__source:{fileName:_jsxFileName,lineNumber:79}})),_react.default.createElement(_.Badge,{size:20,content:22,color:'#8BC34A',__source:{fileName:_jsxFileName,lineNumber:81}},_react.default.createElement(_.IconButton,{name:\"album\",size:46,__source:{fileName:_jsxFileName,lineNumber:82}})),_react.default.createElement(_.Badge,{size:25,content:99,color:'#03A9F4',__source:{fileName:_jsxFileName,lineNumber:84}},_react.default.createElement(_.IconButton,{name:\"bookmark\",size:64,color:'#E91E63',__source:{fileName:_jsxFileName,lineNumber:85}}))),_react.default.createElement(_reactNative.View,{style:{flex:1,flexDirection:'row',alignItems:'center'},__source:{fileName:_jsxFileName,lineNumber:89}},_react.default.createElement(_.Badge,{size:14,content:7,position:'left',textColor:'pink',__source:{fileName:_jsxFileName,lineNumber:90}},_react.default.createElement(_.IconButton,{name:\"info\",size:24,__source:{fileName:_jsxFileName,lineNumber:91}})),_react.default.createElement(_.Badge,{size:18,content:1023,position:'left',__source:{fileName:_jsxFileName,lineNumber:93}},_react.default.createElement(_.IconButton,{name:\"message\",size:32,color:'#8BC34A',__source:{fileName:_jsxFileName,lineNumber:94}})),_react.default.createElement(_.Badge,{size:24,content:123,position:'left',color:'black',__source:{fileName:_jsxFileName,lineNumber:96}},_react.default.createElement(_.IconButton,{name:\"error\",size:48,color:'#F44336',__source:{fileName:_jsxFileName,lineNumber:97}})),_react.default.createElement(_.Badge,{size:24,content:23,position:'left',color:'#FFC107',__source:{fileName:_jsxFileName,lineNumber:99}},_react.default.createElement(_.IconButton,{name:\"favorite\",size:64,color:'#9C27B0',__source:{fileName:_jsxFileName,lineNumber:100}}))));}).add('Dot',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:106}},_react.default.createElement(_Header.default,{title:'Dots',__source:{fileName:_jsxFileName,lineNumber:107}}),_react.default.createElement(_reactNative.View,{style:{flex:1,flexDirection:'row',alignItems:'center',marginBottom:80},__source:{fileName:_jsxFileName,lineNumber:109}},_react.default.createElement(_.Badge,{size:7,__source:{fileName:_jsxFileName,lineNumber:116}},_react.default.createElement(_.Icon,{name:\"favorite\",size:24,__source:{fileName:_jsxFileName,lineNumber:117}})),_react.default.createElement(_.Badge,{size:8,color:'red',__source:{fileName:_jsxFileName,lineNumber:119}},_react.default.createElement(_.IconButton,{name:\"mail\",size:32,__source:{fileName:_jsxFileName,lineNumber:120}})),_react.default.createElement(_.Badge,{size:10,color:'#8BC34A',__source:{fileName:_jsxFileName,lineNumber:122}},_react.default.createElement(_.IconButton,{name:\"album\",size:46,__source:{fileName:_jsxFileName,lineNumber:123}})),_react.default.createElement(_.Badge,{size:12,color:'#03A9F4',__source:{fileName:_jsxFileName,lineNumber:125}},_react.default.createElement(_.IconButton,{name:\"bookmark\",size:64,color:'#E91E63',__source:{fileName:_jsxFileName,lineNumber:126}}))),_react.default.createElement(_reactNative.View,{style:{flex:1,flexDirection:'row',alignItems:'center'},__source:{fileName:_jsxFileName,lineNumber:130}},_react.default.createElement(_.Badge,{size:7,position:'left',textColor:'pink',__source:{fileName:_jsxFileName,lineNumber:131}},_react.default.createElement(_.IconButton,{name:\"info\",size:24,__source:{fileName:_jsxFileName,lineNumber:132}})),_react.default.createElement(_.Badge,{size:8,position:'left',__source:{fileName:_jsxFileName,lineNumber:134}},_react.default.createElement(_.IconButton,{name:\"message\",size:32,color:'#8BC34A',__source:{fileName:_jsxFileName,lineNumber:135}})),_react.default.createElement(_.Badge,{size:9,position:'left',color:'black',__source:{fileName:_jsxFileName,lineNumber:137}},_react.default.createElement(_.IconButton,{name:\"error\",size:48,color:'#F44336',__source:{fileName:_jsxFileName,lineNumber:138}})),_react.default.createElement(_.Badge,{size:10,position:'left',color:'#FFC107',__source:{fileName:_jsxFileName,lineNumber:140}},_react.default.createElement(_.IconButton,{name:\"favorite\",size:64,color:'#9C27B0',__source:{fileName:_jsxFileName,lineNumber:141}}))));}).add('Animated',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:147}},_react.default.createElement(_Header.default,{title:'On Icons',__source:{fileName:_jsxFileName,lineNumber:148}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:149}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:151}},_react.default.createElement(_reactNative.View,{style:{flex:1,flexDirection:'row',alignItems:'center',marginBottom:80},__source:{fileName:_jsxFileName,lineNumber:152}},_react.default.createElement(_.Badge,{size:14,content:4,visible:state.visible,__source:{fileName:_jsxFileName,lineNumber:159}},_react.default.createElement(_.Icon,{name:\"favorite\",size:24,__source:{fileName:_jsxFileName,lineNumber:160}})),_react.default.createElement(_.Badge,{size:16,content:77,color:'red',visible:state.visible,__source:{fileName:_jsxFileName,lineNumber:162}},_react.default.createElement(_.IconButton,{name:\"mail\",size:32,__source:{fileName:_jsxFileName,lineNumber:167}})),_react.default.createElement(_.Badge,{size:8,position:'left',visible:state.visible,__source:{fileName:_jsxFileName,lineNumber:169}},_react.default.createElement(_.IconButton,{name:\"message\",size:32,color:'#8BC34A',__source:{fileName:_jsxFileName,lineNumber:170}})),_react.default.createElement(_.Badge,{size:24,content:99,color:'black',textColor:'#E91E63',visible:state.visible,__source:{fileName:_jsxFileName,lineNumber:172}})),_react.default.createElement(_.Button,{text:'Toggle visibility',onPress:function onPress(){return store.set({visible:!state.visible});},__source:{fileName:_jsxFileName,lineNumber:180}}));}));}).add('custom',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:190}},_react.default.createElement(_Header.default,{title:'Custom',__source:{fileName:_jsxFileName,lineNumber:191}}),_react.default.createElement(_reactNative.View,{style:{flex:1,flexDirection:'row',alignItems:'center',marginBottom:80},__source:{fileName:_jsxFileName,lineNumber:193}},_react.default.createElement(_.Badge,{size:14,content:4,left:10,style:{borderRadius:3},__source:{fileName:_jsxFileName,lineNumber:200}},_react.default.createElement(_.Icon,{name:\"favorite\",size:24,__source:{fileName:_jsxFileName,lineNumber:201}})),_react.default.createElement(_.Badge,{size:14,color:'red',style:{borderRadius:3,height:10},__source:{fileName:_jsxFileName,lineNumber:203}},_react.default.createElement(_.IconButton,{name:\"mail\",size:32,__source:{fileName:_jsxFileName,lineNumber:204}})),_react.default.createElement(_.Badge,{size:20,content:22,color:'#8BC34A',style:{borderRadius:2,transform:[{rotate:'40deg'}]},__source:{fileName:_jsxFileName,lineNumber:206}},_react.default.createElement(_.IconButton,{name:\"album\",size:46,__source:{fileName:_jsxFileName,lineNumber:211}})),_react.default.createElement(_.Badge,{size:25,content:'99+',color:'#03A9F4',style:{borderRadius:10,width:40},__source:{fileName:_jsxFileName,lineNumber:213}},_react.default.createElement(_.IconButton,{name:\"bookmark\",size:64,color:'#E91E63',__source:{fileName:_jsxFileName,lineNumber:218}}))));});exports.default=_default;"
  },
  {
    "path": "dist/Components/Badge/Badge.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({content:{alignSelf:'center',alignItems:'center',justifyContent:'center'}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Badge/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _Badge.default;}});var _Badge=_interopRequireDefault(require(\"./Badge\"));"
  },
  {
    "path": "dist/Components/Banner/Banner.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf3=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _shadow=_interopRequireDefault(require(\"../../Utils/Shadow/shadow.js\"));var _Button=_interopRequireDefault(require(\"../Button/Button\"));var _=require(\"../../\");var _Banner=_interopRequireDefault(require(\"./Banner.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Banner/Banner.js\";function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}var Banner=function(_Component){(0,_inherits2.default)(Banner,_Component);function Banner(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,Banner);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(Banner)).call.apply(_getPrototypeOf2,[this].concat(args)));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{isWideScreen:false,width:0,maxHeight:0,height:new _reactNative.Animated.Value(10),shouldHide:false});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"_handleLayout\",function(){var width=_reactNative.Dimensions.get('window').width;if(width==_this.state.width)return;_this.setState({isWideScreen:width>1024,width:width});});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"_onLayout\",function(event){_this.setState({maxHeight:event.nativeEvent.layout.height},function(){if(_this.props.visible)_this.animateBanner(true);});});return _this;}(0,_createClass2.default)(Banner,[{key:\"componentDidUpdate\",value:function componentDidUpdate(prevProps,prevState){var visible=this.props.visible;var shouldHide=this.state.shouldHide;if(!prevProps.visible&&visible){this.setState({shouldHide:false});this.animateBanner(true);}else if(prevProps.visible&&!visible||!prevState.shouldHide&&shouldHide){this.animateBanner(false);}}},{key:\"componentDidMount\",value:function componentDidMount(){if(this.props.visible){this.animateBanner(true);}this._handleLayout();_reactNative.Dimensions.addEventListener('change',this._handleLayout);}},{key:\"componentWillUnmount\",value:function componentWillUnmount(){_reactNative.Dimensions.removeEventListener('change',this._handleLayout);}},{key:\"animateBanner\",value:function animateBanner(show){var maxHeight=this.state.maxHeight;var newHeight=show?maxHeight:0;_reactNative.Animated.parallel([_reactNative.Animated.spring(this.state.height,{toValue:newHeight})]).start();}},{key:\"_renderActionItems\",value:function _renderActionItems(){var _this2=this;var actionItems=this.props.actionItems;if(!actionItems)return null;var platformStyles=this.getPlatformStyles();return _react.default.createElement(_reactNative.View,{style:[_Banner.default.buttons,platformStyles.actions],__source:{fileName:_jsxFileName,lineNumber:87}},actionItems.map(function(item){if(item.name&&item.name.length>0){return _react.default.createElement(_Button.default,{key:item.name,text:item.name,compact:true,type:\"text\",onPress:function onPress(){item.onPress&&item.onPress();_this2.setState({shouldHide:true});},style:[_Banner.default.button],__source:{fileName:_jsxFileName,lineNumber:91}});}else{return null;}}));}},{key:\"_renderContent\",value:function _renderContent(){var _this$props=this.props,media=_this$props.media,message=_this$props.message;var platformStyles=this.getPlatformStyles();return _react.default.createElement(_reactNative.View,{style:[_Banner.default.content,platformStyles.content],__source:{fileName:_jsxFileName,lineNumber:116}},media?_react.default.createElement(_reactNative.View,{style:platformStyles.image,__source:{fileName:_jsxFileName,lineNumber:117}},media):null,_react.default.createElement(_.BodyText,{type:2,style:{lineHeight:20,maxWidth:460,flexShrink:1},__source:{fileName:_jsxFileName,lineNumber:118}},message));}},{key:\"_renderBody\",value:function _renderBody(){var getPlatformStyles=this.getPlatformStyles();return _react.default.createElement(_reactNative.View,{style:[_Banner.default.body,getPlatformStyles.body],__source:{fileName:_jsxFileName,lineNumber:134}},this._renderContent(),this._renderActionItems());}},{key:\"getPlatformStyles\",value:function getPlatformStyles(){var _this$props2=this.props,mobileLayout=_this$props2.mobileLayout,media=_this$props2.media,singleLine=_this$props2.singleLine;var _this$state=this.state,isWideScreen=_this$state.isWideScreen,width=_this$state.width;var isWeb=_reactNative.Platform.OS=='web';var styles={body:{alignItems:singleLine?'center':'flex-start',justifyContent:singleLine?'space-between':'space-between',marginTop:singleLine?8:24,marginLeft:16,flexDirection:singleLine?'row':'column'},content:{marginBottom:8,marginRight:width<400?8:0},actions:{justifyContent:singleLine?'center':'flex-end',alignItems:singleLine?'center':'flex-end',alignSelf:singleLine?'center':'flex-end',marginRight:8},image:{marginRight:16}};if(isWeb&&isWideScreen&&!mobileLayout){styles={body:{alignItems:singleLine?'center':'flex-start',justifyContent:singleLine?'space-between':'space-between',marginTop:singleLine?8:16,marginLeft:media?16:24,flexDirection:'row'},content:{marginBottom:singleLine?8:16},actions:{justifyContent:singleLine?'center':'flex-end',alignItems:singleLine?'center':'flex-end',alignSelf:singleLine?'center':'flex-end'},image:{marginRight:24}};}return styles;}},{key:\"render\",value:function render(){var _this$props3=this.props,style=_this$props3.style,position=_this$props3.position,visible=_this$props3.visible,testID=_this$props3.testID;var shouldHide=this.state.shouldHide;var appliedShadow=visible&&!shouldHide?1:0;return _react.default.createElement(_reactNative.Animated.View,{useNativeDriver:true,style:[_Banner.default.container,_objectSpread({position:position?position:'relative',height:this.state.height},(0,_shadow.default)(appliedShadow)),style],testID:testID,__source:{fileName:_jsxFileName,lineNumber:211}},_react.default.createElement(_reactNative.View,{onLayout:this._onLayout,__source:{fileName:_jsxFileName,lineNumber:223}},this._renderBody()));}}]);return Banner;}(_react.Component);(0,_defineProperty2.default)(Banner,\"propTypes\",{mobileLayout:_propTypes.default.bool,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),actionItems:_propTypes.default.array,singleLine:_propTypes.default.bool,media:_propTypes.default.node,visible:_propTypes.default.bool,message:_propTypes.default.string,position:_propTypes.default.string,testID:_propTypes.default.string});var _default=(0,_withTheme.default)(Banner);exports.default=_default;"
  },
  {
    "path": "dist/Components/Banner/Banner.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _=require(\"../../\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Banner/Banner.stories.js\";var pageWidth=_reactNative.Platform.OS=='web'?400:_reactNative.Dimensions.get('window').width;var _default=(0,_storiesOf.storiesOf)('Components|Banner',module).addParameters({jest:['Banner']}).add('Single line',function(){return _react.default.createElement(_Container.default,{scroll:true,__source:{fileName:_jsxFileName,lineNumber:15}},_react.default.createElement(_Header.default,{title:'Banner Single Line',__source:{fileName:_jsxFileName,lineNumber:16}}),_react.default.createElement(_.Banner,{actionItems:[{name:'Sign in',onPress:function onPress(){return console.log('sign in');}}],singleLine:true,message:'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',visible:true,style:{marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:18}}),_react.default.createElement(_.Banner,{actionItems:[{name:'Continue'}],singleLine:true,message:'New Action here',visible:true,style:{marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:27}}),_react.default.createElement(_.Banner,{actionItems:[{name:'Cancel'},{name:'Continue'}],singleLine:true,message:'Two Actions here',visible:true,__source:{fileName:_jsxFileName,lineNumber:34}}));}).add('Multi line',function(){return _react.default.createElement(_Container.default,{scroll:true,__source:{fileName:_jsxFileName,lineNumber:43}},_react.default.createElement(_Header.default,{title:'Banner Multi line',__source:{fileName:_jsxFileName,lineNumber:44}}),_react.default.createElement(_.Banner,{visible:true,actionItems:[{name:'Continue'},{name:'Sign in'}],message:'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',style:{marginBottom:40},__source:{fileName:_jsxFileName,lineNumber:45}}),_react.default.createElement(_.Banner,{visible:true,actionItems:[{name:'Continue'},{name:'Sign in'}],message:'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco',style:{marginBottom:40},__source:{fileName:_jsxFileName,lineNumber:53}}),_react.default.createElement(_.Banner,{visible:true,actionItems:[{name:'Continue'},{name:'Sign in'}],media:_react.default.createElement(_.Avatar,{type:\"icon\",content:\"notifications\",size:40,contentColor:'white',color:'#42a5f5',__source:{fileName:_jsxFileName,lineNumber:66}}),message:'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',style:{marginBottom:40},__source:{fileName:_jsxFileName,lineNumber:62}}),_react.default.createElement(_.Banner,{visible:true,actionItems:[{name:'Continue'},{name:'Sign in'}],media:_react.default.createElement(_.Avatar,{type:\"icon\",content:\"favorite\",size:40,contentColor:'white',color:'#E91E63',__source:{fileName:_jsxFileName,lineNumber:84}}),message:'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco',style:{marginBottom:40},__source:{fileName:_jsxFileName,lineNumber:80}}));}).add('With Appbar',function(){return _react.default.createElement(_Container.default,{scroll:true,style:{padding:0},__source:{fileName:_jsxFileName,lineNumber:100}},_react.default.createElement(_reactNative.View,{style:styles.container,__source:{fileName:_jsxFileName,lineNumber:101}},_react.default.createElement(_reactNative.View,{style:styles.body,__source:{fileName:_jsxFileName,lineNumber:102}},_react.default.createElement(_.Appbar,{barType:'normal',title:'Trivia App',navigation:'menu',actionItems:[{name:'search'},{name:'more-vert'}],__source:{fileName:_jsxFileName,lineNumber:103}}),_react.default.createElement(_.Banner,{visible:true,mobileLayout:true,actionItems:[{name:'Fix it'},{name:'Learn more'}],message:'There was a problem processsing a transaction on your card. ',__source:{fileName:_jsxFileName,lineNumber:109}}),_react.default.createElement(_reactNative.View,{style:{marginTop:20,alignItems:'center',paddingLeft:24,paddingRight:24},__source:{fileName:_jsxFileName,lineNumber:117}},_react.default.createElement(_.Heading,{type:4,style:{marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:124}},\"Trivia Page Content\"),_react.default.createElement(_.BodyText,{text:\"Cassowaries cannot fly due to lack of chest bone that supports muscles used for flying.\",__source:{fileName:_jsxFileName,lineNumber:127}})))));});exports.default=_default;var styles=_reactNative.StyleSheet.create({container:{zIndex:1,position:'relative'},body:{width:pageWidth,height:500}});"
  },
  {
    "path": "dist/Components/Banner/Banner.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({container:{overflow:'hidden',backgroundColor:'white'},content:{flexDirection:'row',flex:1},buttons:{flexDirection:'row',marginRight:8,marginBottom:8,flexShrink:1,minWidth:'auto'},button:{width:'auto',marginLeft:8}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Banner/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _Banner.default;}});var _Banner=_interopRequireDefault(require(\"./Banner\"));"
  },
  {
    "path": "dist/Components/BottomNavigation/BottomNavigation.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=exports.BottomNavContext=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _BottomNavigationItem=_interopRequireDefault(require(\"./BottomNavigationItem/BottomNavigationItem.js\"));var _BottomNavigation=_interopRequireDefault(require(\"./BottomNavigation.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/BottomNavigation/BottomNavigation.js\";var BottomNavContext=_react.default.createContext();exports.BottomNavContext=BottomNavContext;var BottomNavigation=function(_Component){(0,_inherits2.default)(BottomNavigation,_Component);function BottomNavigation(props){var _this;(0,_classCallCheck2.default)(this,BottomNavigation);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(BottomNavigation).call(this,props));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"componentDidMount\",function(){_reactNative.Dimensions.addEventListener('change',_this.handleOrientationChange);});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"getItemMaxWidth\",function(isLandscape,_ref){var height=_ref.height,width=_ref.width;var actionItems=_this.props.actionItems;return(isLandscape?height:width)/actionItems.length;});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"isOrientationLandscape\",function(_ref2){var width=_ref2.width,height=_ref2.height;return width>height;});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"handleOrientationChange\",function(_ref3){var window=_ref3.window;var isLandscape=_this.isOrientationLandscape(window);var itemMaxWidth=_this.getItemMaxWidth(isLandscape,window);_this.setState({isLandscape:isLandscape,itemMaxWidth:itemMaxWidth});});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"handleInternalChange\",function(value,backgroundColor){var handleChange=_this.props.handleChange;if(handleChange)handleChange(value);_this.setState({backgroundColor:backgroundColor});});var dimensions=_reactNative.Dimensions.get('window');var _isLandscape=_this.isOrientationLandscape(dimensions);var _itemMaxWidth=_this.getItemMaxWidth(_isLandscape,dimensions);_this.state={backgroundColor:'#2196f3',isLandscape:_isLandscape,itemMaxWidth:_itemMaxWidth};return _this;}(0,_createClass2.default)(BottomNavigation,[{key:\"componentWillUnmount\",value:function componentWillUnmount(){_reactNative.Dimensions.removeEventListener('change',this.handleOrientationChange);}},{key:\"_renderActionItems\",value:function _renderActionItems(){var _this2=this;var _this$props=this.props,backgroundColor=_this$props.backgroundColor,actionItems=_this$props.actionItems,showLabels=_this$props.showLabels,horizontalWhenLandscape=_this$props.horizontalWhenLandscape;var _this$state=this.state,isLandscape=_this$state.isLandscape,itemMaxWidth=_this$state.itemMaxWidth;var backgroundColorActual=backgroundColor?backgroundColor:'#2196f3';return _react.default.createElement(BottomNavContext.Provider,{value:{backgroundColor:backgroundColorActual},__source:{fileName:_jsxFileName,lineNumber:82}},actionItems.map(function(item,index){if(!item.props){return _react.default.createElement(_BottomNavigationItem.default,{key:item.label,icon:item.icon,label:item.label,showOneItem:_this2.props.showOneItem,onPress:item.onPress,handleChange:_this2.handleInternalChange,value:index||index===0?index:item.value,showLabel:showLabels,active:index===_this2.props.value,isLandscape:isLandscape,maxWidth:itemMaxWidth,horizontal:horizontalWhenLandscape,__source:{fileName:_jsxFileName,lineNumber:87}});}else{return _react.default.cloneElement(item,{key:item.label,handleChange:item.props.handleChange?item.props.handleChange:_this2.handleInternalChange,value:item.props.value?item.props.value:index,showLabel:_this2.props.showLabels,active:item.props.active?item.props.active:index===_this2.props.value,isLandscape:isLandscape,maxWidth:itemMaxWidth,horizontal:horizontalWhenLandscape});}}));}},{key:\"render\",value:function render(){var _this$props2=this.props,children=_this$props2.children,backgroundColor=_this$props2.backgroundColor,style=_this$props2.style,testID=_this$props2.testID;var backgroundColorActual=backgroundColor?backgroundColor:'#2196f3';return _react.default.createElement(_reactNative.View,{style:[_BottomNavigation.default.bottomNavigation,{backgroundColor:backgroundColorActual},style],testID:testID,__source:{fileName:_jsxFileName,lineNumber:129}},children?children:this._renderActionItems());}}]);return BottomNavigation;}(_react.Component);(0,_defineProperty2.default)(BottomNavigation,\"propTypes\",{backgroundColor:_propTypes.default.string,children:_propTypes.default.node,style:_propTypes.default.oneOfType([_propTypes.default.array,_propTypes.default.object]),actionItems:_propTypes.default.array,showOneItem:_propTypes.default.bool,showLabels:_propTypes.default.bool,handleChange:_propTypes.default.func,value:_propTypes.default.oneOfType([_propTypes.default.string,_propTypes.default.number]),horizontalWhenLandscape:_propTypes.default.bool,testID:_propTypes.default.string});(0,_defineProperty2.default)(BottomNavigation,\"defaultProps\",{showOneItem:false,showLabels:true});var _default=(0,_withTheme.default)(BottomNavigation);exports.default=_default;"
  },
  {
    "path": "dist/Components/BottomNavigation/BottomNavigation.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _=require(\"../../\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _storybookState=require(\"@sambego/storybook-state\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/BottomNavigation/BottomNavigation.stories.js\";var store=new _storybookState.Store({one:0,two:0,three:0,four:0,five:0,showOne:0});var _default=(0,_storiesOf.storiesOf)('Components|Bottom Navigation',module).addParameters({jest:['BottomNavigation']}).add('Label',function(){return _react.default.createElement(_Container.default,{scroll:true,__source:{fileName:_jsxFileName,lineNumber:20}},_react.default.createElement(_Header.default,{title:'Bottom Navigation',__source:{fileName:_jsxFileName,lineNumber:21}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:22}},function(state){return _react.default.createElement(_.BottomNavigation,{style:{maxWidth:672,width:'100%',marginBottom:40},value:state.one,handleChange:function handleChange(value){return store.set({one:value});},showAllLabels:true,actionItems:[{label:'Buy'},{label:'Sell'},{label:'Settings'}],__source:{fileName:_jsxFileName,lineNumber:24}});}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:37}},function(state){return _react.default.createElement(_.BottomNavigation,{style:{maxWidth:672,width:'100%',marginBottom:40},value:state.two,handleChange:function handleChange(value){return store.set({two:value});},showAllLabels:true,backgroundColor:'#E91E63',actionItems:[{label:'Home'},{label:'Favorite'},{label:'Info'},_react.default.createElement(_.BottomNavigationItem,{key:4,label:'Settings',__source:{fileName:_jsxFileName,lineNumber:49}})],__source:{fileName:_jsxFileName,lineNumber:39}});}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:55}},function(state){return _react.default.createElement(_.BottomNavigation,{style:{maxWidth:672,width:'100%',marginBottom:40},value:state.three,showAllLabels:true,handleChange:function handleChange(value){return store.set({three:value});},backgroundColor:'#9C27B0',horizontalWhenLandscape:true,actionItems:[{label:'Home'},{label:'Favorite'},{label:'Info'},{label:'Profile'},_react.default.createElement(_.BottomNavigationItem,{key:4,label:'Settings',__source:{fileName:_jsxFileName,lineNumber:69}})],__source:{fileName:_jsxFileName,lineNumber:57}});}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:74}},function(state){return _react.default.createElement(_.BottomNavigation,{style:{maxWidth:672,width:'100%'},backgroundColor:'black',value:state.four,handleChange:function handleChange(value){return store.set({four:value});},showAllLabels:true,actionItems:[_react.default.createElement(_.BottomNavigationItem,{key:1,label:'Home',__source:{fileName:_jsxFileName,lineNumber:83}}),_react.default.createElement(_.BottomNavigationItem,{key:2,label:'Favorite',__source:{fileName:_jsxFileName,lineNumber:84}}),_react.default.createElement(_.BottomNavigationItem,{key:3,label:'Info',__source:{fileName:_jsxFileName,lineNumber:85}}),_react.default.createElement(_.BottomNavigationItem,{key:4,label:'Settings',__source:{fileName:_jsxFileName,lineNumber:86}})],__source:{fileName:_jsxFileName,lineNumber:76}});}));}).add('Icons',function(){return _react.default.createElement(_Container.default,{scroll:true,__source:{fileName:_jsxFileName,lineNumber:94}},_react.default.createElement(_Header.default,{title:'Bottom Navigation',__source:{fileName:_jsxFileName,lineNumber:95}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:96}},function(state){return _react.default.createElement(_.BottomNavigation,{style:{maxWidth:672,width:'100%',marginBottom:40},value:state.two,handleChange:function handleChange(value){return store.set({two:value});},showLabels:true,backgroundColor:'#E91E63',actionItems:[{icon:'album'},{icon:'place'},_react.default.createElement(_.BottomNavigationItem,{key:4,icon:'assignment',__source:{fileName:_jsxFileName,lineNumber:107}})],__source:{fileName:_jsxFileName,lineNumber:98}});}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:112}},function(state){return _react.default.createElement(_.BottomNavigation,{style:{maxWidth:672,width:'100%',marginBottom:40},value:state.one,handleChange:function handleChange(value){return store.set({one:value});},actionItems:[{icon:'home'},{icon:'favorite'},{icon:'info'},_react.default.createElement(_.BottomNavigationItem,{key:4,icon:'settings',__source:{fileName:_jsxFileName,lineNumber:122}})],__source:{fileName:_jsxFileName,lineNumber:114}});}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:127}},function(state){return _react.default.createElement(_.BottomNavigation,{style:{maxWidth:672,width:'100%',marginBottom:40},value:state.three,handleChange:function handleChange(value){return store.set({three:value});},backgroundColor:'#009688',actionItems:[{icon:'home'},{icon:'attach-money'},{icon:'favorite'},{icon:'info'},_react.default.createElement(_.BottomNavigationItem,{key:4,icon:'settings',__source:{fileName:_jsxFileName,lineNumber:139}})],__source:{fileName:_jsxFileName,lineNumber:129}});}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:144}},function(state){return _react.default.createElement(_.BottomNavigation,{style:{maxWidth:672,width:'100%',marginBottom:40},value:state.four,handleChange:function handleChange(value){return store.set({four:value});},backgroundColor:'#009688',horizontalWhenLandscape:true,actionItems:[{icon:'home'},{icon:'attach-money'},{icon:'favorite'},{icon:'info'},_react.default.createElement(_.BottomNavigationItem,{key:4,icon:'settings',__source:{fileName:_jsxFileName,lineNumber:157}})],__source:{fileName:_jsxFileName,lineNumber:146}});}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:163}},function(state){return _react.default.createElement(_.BottomNavigation,{style:{maxWidth:672,width:'100%'},backgroundColor:'black',value:state.five,handleChange:function handleChange(value){return store.set({five:value});},actionItems:[_react.default.createElement(_.BottomNavigationItem,{key:1,icon:'home',__source:{fileName:_jsxFileName,lineNumber:171}}),_react.default.createElement(_.BottomNavigationItem,{key:2,icon:'favorite',badgeProps:{size:7,color:'red',right:1,top:2},__source:{fileName:_jsxFileName,lineNumber:172}}),_react.default.createElement(_.BottomNavigationItem,{key:3,icon:'info',__source:{fileName:_jsxFileName,lineNumber:182}}),_react.default.createElement(_.BottomNavigationItem,{key:4,icon:'settings',badgeProps:{content:72,size:14,color:'red'},__source:{fileName:_jsxFileName,lineNumber:183}})],__source:{fileName:_jsxFileName,lineNumber:165}});}));}).add('Icon + Label',function(){return _react.default.createElement(_Container.default,{scroll:true,__source:{fileName:_jsxFileName,lineNumber:200}},_react.default.createElement(_Header.default,{title:'Bottom Navigation',__source:{fileName:_jsxFileName,lineNumber:201}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:202}},function(state){return _react.default.createElement(_.BottomNavigation,{style:{maxWidth:672,width:'100%',marginBottom:40},value:state.two,showLabels:true,handleChange:function handleChange(value){return store.set({two:value});},backgroundColor:'#E91E63',actionItems:[{icon:'home',label:'Home'},{icon:'favorite',label:'Favorite'},{icon:'info',label:'Info'}],__source:{fileName:_jsxFileName,lineNumber:204}});}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:218}},function(state){return _react.default.createElement(_.BottomNavigation,{style:{maxWidth:672,width:'100%',marginBottom:40},value:state.showOne,showOneItem:true,handleChange:function handleChange(value){return store.set({showOne:value});},backgroundColor:'#E91E63',actionItems:[{icon:'home',label:'Home'},{icon:'favorite',label:'Favorite'},{icon:'info',label:'Info'}],__source:{fileName:_jsxFileName,lineNumber:220}});}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:234}},function(state){return _react.default.createElement(_.BottomNavigation,{style:{maxWidth:672,width:'100%',marginBottom:40},value:state.one,handleChange:function handleChange(value){return store.set({one:value});},showLabels:true,actionItems:[{icon:'home',label:'Home'},{icon:'favorite',label:'Favorite'},{icon:'info',label:'Info'},_react.default.createElement(_.BottomNavigationItem,{showLabel:true,key:4,icon:'settings',label:'Settings',__source:{fileName:_jsxFileName,lineNumber:245}})],__source:{fileName:_jsxFileName,lineNumber:236}});}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:255}},function(state){return _react.default.createElement(_.BottomNavigation,{style:{maxWidth:672,width:'100%',marginBottom:40},value:state.three,handleChange:function handleChange(value){return store.set({three:value});},backgroundColor:'#9C27B0',showOneItem:true,actionItems:[{icon:'home',label:'Home'},{icon:'attach-money',label:'Buy'},{icon:'favorite',label:'Favorite'},{icon:'info',label:'Info'},_react.default.createElement(_.BottomNavigationItem,{showOneItem:true,key:4,icon:'settings',label:'Settings',__source:{fileName:_jsxFileName,lineNumber:268}})],__source:{fileName:_jsxFileName,lineNumber:257}});}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:278}},function(state){return _react.default.createElement(_.BottomNavigation,{style:{maxWidth:672,width:'100%',marginBottom:40},value:state.four,handleChange:function handleChange(value){return store.set({four:value});},backgroundColor:'#9C27B0',horizontalWhenLandscape:true,actionItems:[{icon:'home',label:'Home'},{icon:'attach-money',label:'Buy'},{icon:'favorite',label:'Favorite'},{icon:'info',label:'Info'},_react.default.createElement(_.BottomNavigationItem,{showLabel:true,key:4,icon:'settings',label:'Settings',__source:{fileName:_jsxFileName,lineNumber:291}})],__source:{fileName:_jsxFileName,lineNumber:280}});}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:301}},function(state){return _react.default.createElement(_.BottomNavigation,{style:{maxWidth:672,width:'100%'},backgroundColor:'black',value:state.five,handleChange:function handleChange(value){return store.set({five:value});},actionItems:[_react.default.createElement(_.BottomNavigationItem,{key:1,icon:'home',label:'Home',__source:{fileName:_jsxFileName,lineNumber:309}}),_react.default.createElement(_.BottomNavigationItem,{key:2,icon:'favorite',label:'Favorite',badgeProps:{size:7,color:'red',right:1,top:2},__source:{fileName:_jsxFileName,lineNumber:310}}),_react.default.createElement(_.BottomNavigationItem,{key:3,icon:'info',label:'Info',__source:{fileName:_jsxFileName,lineNumber:321}}),_react.default.createElement(_.BottomNavigationItem,{key:4,icon:'settings',label:'Settings',badgeProps:{content:72,size:14,color:'red'},__source:{fileName:_jsxFileName,lineNumber:322}})],__source:{fileName:_jsxFileName,lineNumber:303}});}));}).add('Landscape',function(){return _react.default.createElement(_Container.default,{scroll:true,__source:{fileName:_jsxFileName,lineNumber:341}},_react.default.createElement(_Header.default,{title:'Bottom Navigation',__source:{fileName:_jsxFileName,lineNumber:342}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:344}},function(state){return _react.default.createElement(_.BottomNavigation,{style:{width:'100%',marginBottom:40},value:state.three,handleChange:function handleChange(value){return store.set({three:value});},backgroundColor:'#9C27B0',actionItems:[{icon:'home',label:'Home'},{icon:'attach-money',label:'Buy'},{icon:'favorite',label:'Favorite'},{icon:'info',label:'Info'},_react.default.createElement(_.BottomNavigationItem,{key:4,icon:'settings',label:'Settings',__source:{fileName:_jsxFileName,lineNumber:356}})],__source:{fileName:_jsxFileName,lineNumber:346}});}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:365}},function(state){return _react.default.createElement(_.BottomNavigation,{style:{width:'100%',marginBottom:40},value:state.four,handleChange:function handleChange(value){return store.set({four:value});},backgroundColor:'#9C27B0',horizontalWhenLandscape:true,actionItems:[{icon:'home',label:'Home'},{icon:'attach-money',label:'Buy'},{icon:'favorite',label:'Favorite'},{icon:'info',label:'Info'},_react.default.createElement(_.BottomNavigationItem,{key:4,icon:'settings',label:'Settings',__source:{fileName:_jsxFileName,lineNumber:378}})],__source:{fileName:_jsxFileName,lineNumber:367}});}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:387}},function(state){return _react.default.createElement(_.BottomNavigation,{style:{width:'100%'},backgroundColor:'black',value:state.five,handleChange:function handleChange(value){return store.set({five:value});},horizontalWhenLandscape:true,actionItems:[_react.default.createElement(_.BottomNavigationItem,{key:1,icon:'home',label:'Home',__source:{fileName:_jsxFileName,lineNumber:396}}),_react.default.createElement(_.BottomNavigationItem,{key:2,icon:'favorite',label:'Favorite',badgeProps:{size:7,color:'red',right:1,top:2},__source:{fileName:_jsxFileName,lineNumber:397}}),_react.default.createElement(_.BottomNavigationItem,{key:3,icon:'info',label:'Info',__source:{fileName:_jsxFileName,lineNumber:408}}),_react.default.createElement(_.BottomNavigationItem,{key:4,icon:'settings',label:'Settings',badgeProps:{content:72,size:14,color:'red'},__source:{fileName:_jsxFileName,lineNumber:409}})],__source:{fileName:_jsxFileName,lineNumber:389}});}));}).add('Custom',function(){return _react.default.createElement(_Container.default,{scroll:true,__source:{fileName:_jsxFileName,lineNumber:427}},_react.default.createElement(_Header.default,{title:'Bottom Navigation',__source:{fileName:_jsxFileName,lineNumber:428}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:429}},function(state){return _react.default.createElement(_.BottomNavigation,{style:{maxWidth:672,width:'100%',marginBottom:40,borderRadius:50},value:state.one,handleChange:function handleChange(value){return store.set({one:value});},showAllLabels:true,actionItems:[_react.default.createElement(_.BottomNavigationItem,{key:1,icon:'home',label:'Home',rippleProps:{rippleContainerBorderRadius:50},__source:{fileName:_jsxFileName,lineNumber:442}}),_react.default.createElement(_.BottomNavigationItem,{key:2,icon:'favorite',label:'Favorite',rippleProps:{rippleContainerBorderRadius:50},__source:{fileName:_jsxFileName,lineNumber:448}}),_react.default.createElement(_.BottomNavigationItem,{key:3,icon:'info',label:'Settings',rippleProps:{rippleContainerBorderRadius:50},__source:{fileName:_jsxFileName,lineNumber:454}}),_react.default.createElement(_.BottomNavigationItem,{key:4,icon:'settings',label:'Settings',rippleProps:{rippleContainerBorderRadius:50},__source:{fileName:_jsxFileName,lineNumber:460}})],__source:{fileName:_jsxFileName,lineNumber:431}});}));});exports.default=_default;"
  },
  {
    "path": "dist/Components/BottomNavigation/BottomNavigation.styles.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _reactNative=require(\"react-native\");var _shadow=_interopRequireDefault(require(\"../../Utils/Shadow/shadow\"));function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}var styles=_reactNative.StyleSheet.create({bottomNavigation:_objectSpread({height:56,flexDirection:'row',justifyContent:'center'},(0,_shadow.default)(8))});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/BottomNavigation/BottomNavigationItem/BottomNavigationItem.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf3=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _Icon=_interopRequireDefault(require(\"../../Icon/Icon\"));var _Ripple=_interopRequireDefault(require(\"../../Ripple/Ripple\"));var _Badge=_interopRequireDefault(require(\"../../Badge/Badge\"));var _BottomNavigation=require(\"../BottomNavigation\");var _BottomNavigationItem=_interopRequireDefault(require(\"./BottomNavigationItem.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/BottomNavigation/BottomNavigationItem/BottomNavigationItem.js\";var BottomNavigationItem=function(_Component){(0,_inherits2.default)(BottomNavigationItem,_Component);function BottomNavigationItem(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,BottomNavigationItem);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(BottomNavigationItem)).call.apply(_getPrototypeOf2,[this].concat(args)));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{scaleText:new _reactNative.Animated.Value(0)});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"onChange\",function(){var _this$props=_this.props,handleChange=_this$props.handleChange,onPress=_this$props.onPress,value=_this$props.value;if(handleChange)handleChange(value);if(onPress)onPress();});return _this;}(0,_createClass2.default)(BottomNavigationItem,[{key:\"componentDidMount\",value:function componentDidMount(){var _this$props2=this.props,showOneItem=_this$props2.showOneItem,showLabel=_this$props2.showLabel,active=_this$props2.active;if(showOneItem||active||showLabel){this._animateActive(true);}}},{key:\"componentDidUpdate\",value:function componentDidUpdate(prevProps){if(!prevProps.active&&this.props.active){this._animateActive(true);}else if(prevProps.active&&!this.props.active){this._animateActive(false);}}},{key:\"_animateActive\",value:function _animateActive(show){var scaleText=this.state.scaleText;var scale=show?12:0;if(this.props.showLabel||this.props.showOneItem){scale=show?12:10;}_reactNative.Animated.parallel([_reactNative.Animated.timing(scaleText,{toValue:scale,duration:150})]).start();}},{key:\"_renderText\",value:function _renderText(containerColor){var _this$props3=this.props,isLandscape=_this$props3.isLandscape,horizontal=_this$props3.horizontal,showOneItem=_this$props3.showOneItem,showLabel=_this$props3.showLabel,active=_this$props3.active,icon=_this$props3.icon;var isHorizontal=isLandscape&&horizontal;var showOneItemsWithoutDefault=!showOneItem;var showActiveLabel=showOneItem&&active;var color='white';if(containerColor=='white'||containerColor=='#fff')color='#DADADA';var label=this.props.label;var activeLabel=label;if(!showOneItemsWithoutDefault&&!showActiveLabel){activeLabel='';}return _react.default.createElement(_reactNative.Animated.Text,{style:{color:color,fontSize:this.state.scaleText,marginLeft:isHorizontal&&showLabel&&icon?12:0},__source:{fileName:_jsxFileName,lineNumber:96}},activeLabel);}},{key:\"_handleIconColor\",value:function _handleIconColor(containerColor){if(containerColor=='white'||containerColor=='#fff'){return'#DADADA';}else{return'white';}}},{key:\"_renderWrapper\",value:function _renderWrapper(context){var _this$props4=this.props,active=_this$props4.active,children=_this$props4.children,style=_this$props4.style,testID=_this$props4.testID,rippleProps=_this$props4.rippleProps,isLandscape=_this$props4.isLandscape,maxWidth=_this$props4.maxWidth,horizontal=_this$props4.horizontal,showOneItem=_this$props4.showOneItem;var actualMaxWidth=Math.min(maxWidth,192);var opacity=showOneItem?1:0.6;return _react.default.createElement(_Ripple.default,(0,_extends2.default)({style:[_BottomNavigationItem.default.bottomNavigationItem,{opacity:active?1:opacity},isLandscape&&!horizontal&&[_BottomNavigationItem.default.bottomNavigationItemLandscape,{maxWidth:actualMaxWidth}],isLandscape&&horizontal&&{flexDirection:'row',paddingHorizontal:12},style],onPress:this.onChange,testID:testID},rippleProps,{__source:{fileName:_jsxFileName,lineNumber:139}}),children?children:this._renderContent(context));}},{key:\"_renderContent\",value:function _renderContent(context){var _this$props5=this.props,label=_this$props5.label,badgeProps=_this$props5.badgeProps,icon=_this$props5.icon;var iconImplemented=this._renderIcon(context);if(badgeProps){iconImplemented=_react.default.createElement(_Badge.default,(0,_extends2.default)({containerStyle:{alignItems:'center',justifyContent:'center',alignSelf:'center',display:'flex'},style:[{right:badgeProps.right?badgeProps.right:-4,top:badgeProps.top?badgeProps.top:-4}]},badgeProps,{__source:{fileName:_jsxFileName,lineNumber:169}}),this._renderIcon(context));}return _react.default.createElement(_react.Fragment,{__source:{fileName:_jsxFileName,lineNumber:188}},icon?iconImplemented:null,label?this._renderText(context.backgroundColor):null);}},{key:\"_renderIcon\",value:function _renderIcon(context){var icon=this.props.icon;return _react.default.createElement(_Icon.default,{name:icon,size:24,color:this._handleIconColor(context.backgroundColor),__source:{fileName:_jsxFileName,lineNumber:198}});}},{key:\"render\",value:function render(){var _this2=this;return _react.default.createElement(_BottomNavigation.BottomNavContext.Consumer,{__source:{fileName:_jsxFileName,lineNumber:208}},function(context){return _this2._renderWrapper(context);});}}]);return BottomNavigationItem;}(_react.Component);(0,_defineProperty2.default)(BottomNavigationItem,\"propTypes\",{children:_propTypes.default.node,active:_propTypes.default.bool,icon:_propTypes.default.string,label:_propTypes.default.string,showOneItem:_propTypes.default.bool,onPress:_propTypes.default.func,handleChange:_propTypes.default.func,value:_propTypes.default.oneOfType([_propTypes.default.number,_propTypes.default.string]),showLabel:_propTypes.default.bool,style:_propTypes.default.oneOfType([_propTypes.default.array,_propTypes.default.object]),badgeProps:_propTypes.default.object,rippleProps:_propTypes.default.object,testID:_propTypes.default.string,isLandscape:_propTypes.default.bool,onItemLayout:_propTypes.default.func,maxWidth:_propTypes.default.number,horizontal:_propTypes.default.bool});(0,_defineProperty2.default)(BottomNavigationItem,\"defaultProps\",{showLabel:true});var _default=(0,_withTheme.default)(BottomNavigationItem);exports.default=_default;"
  },
  {
    "path": "dist/Components/BottomNavigation/BottomNavigationItem/BottomNavigationItem.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _storiesOf=require(\"../../../storybook/helpers/storiesOf\");var _=require(\"../../../\");var _Header=_interopRequireDefault(require(\"../../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../../storybook/components/Container\"));var _storybookState=require(\"@sambego/storybook-state\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/BottomNavigation/BottomNavigationItem/BottomNavigationItem.stories.js\";var store=new _storybookState.Store({one:0,two:0,three:0,four:0,five:0});var _default=(0,_storiesOf.storiesOf)('Components|Bottom Navigation/Bottom Navigation Item',module).addParameters({jest:['BottomNavigationItem']}).add('as objects',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:29}},_react.default.createElement(_Header.default,{title:'Bottom Navigation Item',__source:{fileName:_jsxFileName,lineNumber:30}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:31}},function(state){return _react.default.createElement(_.BottomNavigation,{style:{maxWidth:672,width:'100%',marginBottom:40},value:state.one,handleChange:function handleChange(value){return store.set({one:value});},showLabels:true,actionItems:[{label:'Buy'},{label:'Sell'},{label:'Settings'}],__source:{fileName:_jsxFileName,lineNumber:33}});}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:46}},function(state){return _react.default.createElement(_.BottomNavigation,{style:{maxWidth:672,width:'100%',marginBottom:40},value:state.two,handleChange:function handleChange(value){return store.set({two:value});},showLabels:true,backgroundColor:'#E91E63',actionItems:[{icon:'home'},{icon:'favorite'},{icon:'info'},{icon:'settings'}],__source:{fileName:_jsxFileName,lineNumber:48}});}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:64}},function(state){return _react.default.createElement(_.BottomNavigation,{style:{maxWidth:672,width:'100%',marginBottom:40},value:state.four,showLabels:true,handleChange:function handleChange(value){return store.set({four:value});},backgroundColor:'#9C27B0',actionItems:[{icon:'home',label:'Home'},{icon:'attach-money',label:'Buy'},{icon:'favorite',label:'Favorite'},{icon:'info',label:'Info'},{icon:'settings',label:'Settings'}],__source:{fileName:_jsxFileName,lineNumber:66}});}));}).add('as components',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:85}},_react.default.createElement(_Header.default,{title:'Bottom Navigation',__source:{fileName:_jsxFileName,lineNumber:86}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:87}},function(state){return _react.default.createElement(_.BottomNavigation,{style:{maxWidth:672,width:'100%',marginBottom:40},value:state.one,handleChange:function handleChange(value){return store.set({one:value});},showLabels:true,actionItems:[_react.default.createElement(_.BottomNavigationItem,{key:1,label:'Album',__source:{fileName:_jsxFileName,lineNumber:95}}),_react.default.createElement(_.BottomNavigationItem,{key:2,label:'Place',__source:{fileName:_jsxFileName,lineNumber:96}}),_react.default.createElement(_.BottomNavigationItem,{key:3,label:'News',__source:{fileName:_jsxFileName,lineNumber:97}})],__source:{fileName:_jsxFileName,lineNumber:89}});}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:102}},function(state){return _react.default.createElement(_.BottomNavigation,{style:{maxWidth:672,width:'100%',marginBottom:40},value:state.two,handleChange:function handleChange(value){return store.set({two:value});},showLabels:true,backgroundColor:'#E91E63',actionItems:[_react.default.createElement(_.BottomNavigationItem,{key:1,icon:'home',__source:{fileName:_jsxFileName,lineNumber:111}}),_react.default.createElement(_.BottomNavigationItem,{key:2,icon:'album',__source:{fileName:_jsxFileName,lineNumber:112}}),_react.default.createElement(_.BottomNavigationItem,{key:3,icon:'place',__source:{fileName:_jsxFileName,lineNumber:113}}),_react.default.createElement(_.BottomNavigationItem,{key:4,icon:'assignment',__source:{fileName:_jsxFileName,lineNumber:114}})],__source:{fileName:_jsxFileName,lineNumber:104}});}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:119}},function(state){return _react.default.createElement(_.BottomNavigation,{style:{maxWidth:672,width:'100%',marginBottom:40},value:state.three,handleChange:function handleChange(value){return store.set({three:value});},backgroundColor:'#009688',actionItems:[_react.default.createElement(_.BottomNavigationItem,{key:1,icon:'home',label:'Home',__source:{fileName:_jsxFileName,lineNumber:127}}),_react.default.createElement(_.BottomNavigationItem,{key:2,icon:'album',label:'Music',__source:{fileName:_jsxFileName,lineNumber:128}}),_react.default.createElement(_.BottomNavigationItem,{key:3,icon:'place',label:'Place',__source:{fileName:_jsxFileName,lineNumber:129}}),_react.default.createElement(_.BottomNavigationItem,{key:4,icon:'assignment',label:'News',__source:{fileName:_jsxFileName,lineNumber:130}}),_react.default.createElement(_.BottomNavigationItem,{key:4,icon:'settings',label:'Settings',__source:{fileName:_jsxFileName,lineNumber:135}})],__source:{fileName:_jsxFileName,lineNumber:121}});}));}).add('with badge',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:148}},_react.default.createElement(_Header.default,{title:'Bottom Navigation',__source:{fileName:_jsxFileName,lineNumber:149}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:150}},function(state){return _react.default.createElement(_.BottomNavigation,{style:{maxWidth:672,width:'100%',marginBottom:40},value:state.one,handleChange:function handleChange(value){return store.set({one:value});},showLabels:true,actionItems:[_react.default.createElement(_.BottomNavigationItem,{key:1,label:'Album',__source:{fileName:_jsxFileName,lineNumber:158}}),_react.default.createElement(_.BottomNavigationItem,{key:2,label:'Place',__source:{fileName:_jsxFileName,lineNumber:159}}),_react.default.createElement(_.BottomNavigationItem,{key:3,label:'News',__source:{fileName:_jsxFileName,lineNumber:160}})],__source:{fileName:_jsxFileName,lineNumber:152}});}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:165}},function(state){return _react.default.createElement(_.BottomNavigation,{style:{maxWidth:672,width:'100%',marginBottom:40},value:state.two,handleChange:function handleChange(value){return store.set({two:value});},showLabels:true,backgroundColor:'#E91E63',actionItems:[_react.default.createElement(_.BottomNavigationItem,{key:1,icon:'home',__source:{fileName:_jsxFileName,lineNumber:174}}),_react.default.createElement(_.BottomNavigationItem,{key:2,icon:'album',badgeProps:{content:72,size:14,color:'blue'},__source:{fileName:_jsxFileName,lineNumber:175}}),_react.default.createElement(_.BottomNavigationItem,{key:3,icon:'place',__source:{fileName:_jsxFileName,lineNumber:184}}),_react.default.createElement(_.BottomNavigationItem,{key:4,icon:'assignment',badgeProps:{size:7,color:'blue',right:1,top:2},__source:{fileName:_jsxFileName,lineNumber:185}})],__source:{fileName:_jsxFileName,lineNumber:167}});}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:199}},function(state){return _react.default.createElement(_.BottomNavigation,{style:{maxWidth:672,width:'100%',marginBottom:40},value:state.three,handleChange:function handleChange(value){return store.set({three:value});},backgroundColor:'#009688',actionItems:[_react.default.createElement(_.BottomNavigationItem,{key:1,icon:'home',label:'Home',__source:{fileName:_jsxFileName,lineNumber:207}}),_react.default.createElement(_.BottomNavigationItem,{key:2,icon:'album',label:'Music',__source:{fileName:_jsxFileName,lineNumber:208}}),_react.default.createElement(_.BottomNavigationItem,{key:3,icon:'place',label:'Place',badgeProps:{content:2,size:14,color:'red'},__source:{fileName:_jsxFileName,lineNumber:209}}),_react.default.createElement(_.BottomNavigationItem,{key:4,icon:'assignment',label:'News',badgeProps:{content:99,size:14,color:'red'},__source:{fileName:_jsxFileName,lineNumber:219}}),_react.default.createElement(_.BottomNavigationItem,{key:4,icon:'settings',label:'Settings',badgeProps:{size:10,color:'red'},__source:{fileName:_jsxFileName,lineNumber:229}})],__source:{fileName:_jsxFileName,lineNumber:201}});}));}).add('custom',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:245}},_react.default.createElement(_Header.default,{title:'Bottom Navigation',__source:{fileName:_jsxFileName,lineNumber:246}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:247}},function(state){return _react.default.createElement(_.BottomNavigation,{style:{maxWidth:672,width:'100%',marginBottom:40},value:state.one,handleChange:function handleChange(value){return store.set({one:value});},showLabels:true,actionItems:[_react.default.createElement(_.BottomNavigationItem,{key:1,icon:'home',label:'Home',style:{backgroundColor:'#3F51B5'},__source:{fileName:_jsxFileName,lineNumber:255}}),_react.default.createElement(_.BottomNavigationItem,{key:2,icon:'favorite',label:'Favorite',style:{backgroundColor:'#009688'},__source:{fileName:_jsxFileName,lineNumber:261}}),_react.default.createElement(_.BottomNavigationItem,{key:3,icon:'info',label:'Info',style:{backgroundColor:'#2196F3'},__source:{fileName:_jsxFileName,lineNumber:267}}),_react.default.createElement(_.BottomNavigationItem,{key:4,icon:'settings',label:'Settings',style:{backgroundColor:'#F44336'},__source:{fileName:_jsxFileName,lineNumber:273}})],__source:{fileName:_jsxFileName,lineNumber:249}});}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:283}},function(state){return _react.default.createElement(_.BottomNavigation,{style:{maxWidth:672,width:'100%',height:42,borderTopRightRadius:6,borderTopLeftRadius:6},value:state.two,handleChange:function handleChange(value){return store.set({two:value});},backgroundColor:'black',actionItems:[_react.default.createElement(_.BottomNavigationItem,{key:1,style:{height:42},__source:{fileName:_jsxFileName,lineNumber:297}},_react.default.createElement(_.Icon,{name:\"home\",size:30,color:'white',__source:{fileName:_jsxFileName,lineNumber:298}})),_react.default.createElement(_.BottomNavigationItem,{key:2,style:{height:42},__source:{fileName:_jsxFileName,lineNumber:300}},_react.default.createElement(_.Icon,{name:\"favorite\",size:30,color:'white',__source:{fileName:_jsxFileName,lineNumber:301}})),_react.default.createElement(_.BottomNavigationItem,{key:3,style:{height:42},__source:{fileName:_jsxFileName,lineNumber:303}},_react.default.createElement(_.Icon,{name:\"info\",size:30,color:'white',__source:{fileName:_jsxFileName,lineNumber:304}})),_react.default.createElement(_.BottomNavigationItem,{key:4,style:{height:42,flexDirection:'row'},__source:{fileName:_jsxFileName,lineNumber:307}},_react.default.createElement(_.Avatar,{type:\"image\",image:_react.default.createElement(_reactNative.Image,{source:{uri:'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4'},__source:{fileName:_jsxFileName,lineNumber:313}}),size:30,__source:{fileName:_jsxFileName,lineNumber:310}}),_react.default.createElement(_.Icon,{name:\"expand-more\",size:20,color:'white',style:{alignSelf:'flex-end',marginBottom:4},__source:{fileName:_jsxFileName,lineNumber:322}}))],__source:{fileName:_jsxFileName,lineNumber:285}});}));});exports.default=_default;"
  },
  {
    "path": "dist/Components/BottomNavigation/BottomNavigationItem/BottomNavigationItem.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({bottomNavigationItem:{maxWidth:192,minWidth:56,height:56,paddingTop:8,paddingBottom:12,flexDirection:'column',justifyContent:'center',alignItems:'center',flex:1,position:'relative'}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/BottomNavigation/BottomNavigationItem/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _BottomNavigationItem.default;}});var _BottomNavigationItem=_interopRequireDefault(require(\"./BottomNavigationItem\"));"
  },
  {
    "path": "dist/Components/BottomNavigation/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _BottomNavigation.default;}});Object.defineProperty(exports,\"BottomNavigationItem\",{enumerable:true,get:function get(){return _BottomNavigationItem.default;}});var _BottomNavigation=_interopRequireDefault(require(\"./BottomNavigation\"));var _BottomNavigationItem=_interopRequireDefault(require(\"./BottomNavigationItem\"));"
  },
  {
    "path": "dist/Components/Button/Button.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _objectWithoutProperties2=_interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutProperties\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _TextButton=_interopRequireDefault(require(\"./TextButton/TextButton.js\"));var _OutlinedButton=_interopRequireDefault(require(\"./OutlinedButton/OutlinedButton.js\"));var _ContainedButton=_interopRequireDefault(require(\"./ContainedButton/ContainedButton.js\"));var _FlatButton=_interopRequireDefault(require(\"./FlatButton/FlatButton.js\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Button/Button.js\";var Button=function(_Component){(0,_inherits2.default)(Button,_Component);function Button(){(0,_classCallCheck2.default)(this,Button);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(Button).apply(this,arguments));}(0,_createClass2.default)(Button,[{key:\"render\",value:function render(){var _this$props=this.props,type=_this$props.type,rest=(0,_objectWithoutProperties2.default)(_this$props,[\"type\"]);if(type=='outlined'){return _react.default.createElement(_OutlinedButton.default,(0,_extends2.default)({},rest,{__source:{fileName:_jsxFileName,lineNumber:18}}));}else if(type=='contained'){return _react.default.createElement(_ContainedButton.default,(0,_extends2.default)({},rest,{__source:{fileName:_jsxFileName,lineNumber:20}}));}else if(type==='flat'){return _react.default.createElement(_FlatButton.default,(0,_extends2.default)({},rest,{__source:{fileName:_jsxFileName,lineNumber:22}}));}else{return _react.default.createElement(_TextButton.default,(0,_extends2.default)({},rest,{__source:{fileName:_jsxFileName,lineNumber:24}}));}}}]);return Button;}(_react.Component);(0,_defineProperty2.default)(Button,\"propTypes\",{type:_propTypes.default.string});var _default=(0,_withTheme.default)(Button);exports.default=_default;"
  },
  {
    "path": "dist/Components/Button/Button.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _=require(\"../../\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Button/Button.stories.js\";var _default=(0,_storiesOf.storiesOf)('Components|Buttons',module).addParameters({jest:['Button']}).add('Custom',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:13}},_react.default.createElement(_Header.default,{title:'Custom Button',__source:{fileName:_jsxFileName,lineNumber:14}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap'},__source:{fileName:_jsxFileName,lineNumber:15}},_react.default.createElement(_.Button,{style:{height:100,width:100,flexDirection:'column',marginRight:24},type:'outlined',borderSize:4,radius:10,__source:{fileName:_jsxFileName,lineNumber:22}},_react.default.createElement(_.Icon,{name:\"cloud-upload\",size:34,__source:{fileName:_jsxFileName,lineNumber:32}}),_react.default.createElement(_reactNative.Text,{style:{fontWeight:'600',textAlign:'center'},__source:{fileName:_jsxFileName,lineNumber:33}},\"Upload files\"))));});exports.default=_default;"
  },
  {
    "path": "dist/Components/Button/Button.styles.js",
    "content": ""
  },
  {
    "path": "dist/Components/Button/ButtonBase/ButtonBase.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _objectWithoutProperties2=_interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutProperties\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _Ripple=_interopRequireDefault(require(\"../../Ripple/Ripple\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Button/ButtonBase/ButtonBase.js\";var ButtonBase=function(_Component){(0,_inherits2.default)(ButtonBase,_Component);function ButtonBase(){(0,_classCallCheck2.default)(this,ButtonBase);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(ButtonBase).apply(this,arguments));}(0,_createClass2.default)(ButtonBase,[{key:\"_renderText\",value:function _renderText(){var _this$props=this.props,text=_this$props.text,textStyle=_this$props.textStyle,typeTextColor=_this$props.typeTextColor,theme=_this$props.theme,hideLabel=_this$props.hideLabel,useInputCasing=_this$props.useInputCasing;var modifiedText=text||' ';return _react.default.createElement(_reactNative.Text,{numberOfLines:1,style:[theme.buttonText,{color:hideLabel?'transparent':typeTextColor,fontSize:theme.buttonText.fontSize,letterSpacing:theme.buttonText.letterSpacing},textStyle],__source:{fileName:_jsxFileName,lineNumber:64}},useInputCasing?modifiedText:modifiedText.toUpperCase());}},{key:\"_renderLoader\",value:function _renderLoader(){var _this$props2=this.props,loading=_this$props2.loading,typeTextColor=_this$props2.typeTextColor,hideLabel=_this$props2.hideLabel;if(!loading)return null;return _react.default.createElement(_reactNative.ActivityIndicator,{size:\"small\",color:typeTextColor,style:{width:18,flexDirection:'row',alignItems:'center',alignSelf:'center',justifyContent:'center',marginRight:hideLabel?0:8},__source:{fileName:_jsxFileName,lineNumber:84}});}},{key:\"_renderIcon\",value:function _renderIcon(){var _this$props3=this.props,icon=_this$props3.icon,iconPosition=_this$props3.iconPosition,iconSize=_this$props3.iconSize,typeTextColor=_this$props3.typeTextColor,loading=_this$props3.loading;if(loading){return this._renderLoader();}if(icon){return _react.default.cloneElement(icon,{style:{marginRight:iconPosition=='left'?12:0,marginLeft:iconPosition=='right'?12:0},size:iconSize||18,color:typeTextColor?typeTextColor:'white'});}return null;}},{key:\"getDensityHeight\",value:function getDensityHeight(){var _this$props4=this.props,theme=_this$props4.theme,density=_this$props4.density;var densityHeight=theme.button.height;if(density<=-1){densityHeight=Math.max(24,densityHeight+4*density);}return densityHeight;}},{key:\"render\",value:function render(){var _this$props5=this.props,disabled=_this$props5.disabled,disableRipple=_this$props5.disableRipple,loading=_this$props5.loading,children=_this$props5.children,onPress=_this$props5.onPress,theme=_this$props5.theme,typeButtonStyles=_this$props5.typeButtonStyles,fullWidth=_this$props5.fullWidth,typeRippleColor=_this$props5.typeRippleColor,style=_this$props5.style,onPressIn=_this$props5.onPressIn,onPressOut=_this$props5.onPressOut,hideLabel=_this$props5.hideLabel,radius=_this$props5.radius,icon=_this$props5.icon,iconPosition=_this$props5.iconPosition,testID=_this$props5.testID,props=(0,_objectWithoutProperties2.default)(_this$props5,[\"disabled\",\"disableRipple\",\"loading\",\"children\",\"onPress\",\"theme\",\"typeButtonStyles\",\"fullWidth\",\"typeRippleColor\",\"style\",\"onPressIn\",\"onPressOut\",\"hideLabel\",\"radius\",\"icon\",\"iconPosition\",\"testID\"]);var densityHeight=this.getDensityHeight();return _react.default.createElement(_Ripple.default,(0,_extends2.default)({onPress:onPress,disabled:disabled||disableRipple||loading,rippleColor:typeRippleColor,rippleContainerBorderRadius:radius?radius:theme.button.borderRadius,style:[theme.button,{alignItems:'center',justifyContent:'center',flexDirection:hideLabel?'column':'row',padding:hideLabel?18:0,width:fullWidth?'100%':'auto',minWidth:64,height:densityHeight,minHeight:densityHeight,paddingLeft:iconPosition==='left'&&icon?12:16,paddingRight:iconPosition==='right'&&icon?12:16,borderRadius:radius?radius:theme.button.borderRadius},typeButtonStyles,style],testID:testID},props,{onPressIn:onPressIn,onPressOut:onPressOut,__source:{fileName:_jsxFileName,lineNumber:151}}),iconPosition==='left'?this._renderIcon():null,children?children:this._renderText(),iconPosition==='right'?this._renderIcon():null);}}]);return ButtonBase;}(_react.Component);(0,_defineProperty2.default)(ButtonBase,\"propTypes\",{theme:_propTypes.default.object,style:_propTypes.default.oneOfType([_propTypes.default.array,_propTypes.default.object]),children:_propTypes.default.node,type:_propTypes.default.string,onPress:_propTypes.default.func,loading:_propTypes.default.bool,loader:_propTypes.default.node,hideLabel:_propTypes.default.bool,color:_propTypes.default.string,radius:_propTypes.default.number,fullWidth:_propTypes.default.bool,density:_propTypes.default.number,icon:_propTypes.default.node,iconPosition:_propTypes.default.string,iconSize:_propTypes.default.number,disabled:_propTypes.default.bool,disableRipple:_propTypes.default.bool,text:_propTypes.default.string,textStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),useInputCasing:_propTypes.default.bool,typeTextColor:_propTypes.default.string,typeButtonStyles:_propTypes.default.oneOfType([_propTypes.default.array,_propTypes.default.object]),typeRippleColor:_propTypes.default.string,onPressIn:_propTypes.default.func,onPressOut:_propTypes.default.func,testID:_propTypes.default.string});(0,_defineProperty2.default)(ButtonBase,\"defaultProps\",{iconPosition:'left',density:0,useInputCasing:false});var _default=(0,_withTheme.default)(ButtonBase);exports.default=_default;"
  },
  {
    "path": "dist/Components/Button/ContainedButton/ContainedButton.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _objectWithoutProperties2=_interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutProperties\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf3=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _reactNative=require(\"react-native\");var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _ButtonBase=_interopRequireDefault(require(\"../ButtonBase/ButtonBase\"));var _=require(\"../../../\");var _color=_interopRequireDefault(require(\"color\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Button/ContainedButton/ContainedButton.js\";function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}var ContainedButton=function(_Component){(0,_inherits2.default)(ContainedButton,_Component);function ContainedButton(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,ContainedButton);for(var _len=arguments.length,_args=new Array(_len),_key=0;_key<_len;_key++){_args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(ContainedButton)).call.apply(_getPrototypeOf2,[this].concat(_args)));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{stateBackgroundColor:null,elevation:new _reactNative.Animated.Value(8),animatedShadowRadius:new _reactNative.Animated.Value(4.65),animatedShadowOpacity:new _reactNative.Animated.Value(0.27),animatedShadowHeight:new _reactNative.Animated.Value(2),animatedShadowWidth:new _reactNative.Animated.Value(-1.5)});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"handleOnPressIn\",function(){var onPressIn=_this.props.onPressIn;_this.animateShadow(true);for(var _len2=arguments.length,args=new Array(_len2),_key2=0;_key2<_len2;_key2++){args[_key2]=arguments[_key2];}if(onPressIn)onPressIn(args);});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"handleOnPressOut\",function(){var onPressOut=_this.props.onPressOut;_this.animateShadow(false);for(var _len3=arguments.length,args=new Array(_len3),_key3=0;_key3<_len3;_key3++){args[_key3]=arguments[_key3];}if(onPressOut)onPressOut(args);});return _this;}(0,_createClass2.default)(ContainedButton,[{key:\"animateShadow\",value:function animateShadow(active){var animationDuration=active?200:50;if(_reactNative.Platform.OS==='android'){var elevation=active?8:2;_reactNative.Animated.timing(this.state.elevation,{useNativeDriver:true,toValue:elevation,duration:animationDuration});}else{var _this$state=this.state,animatedShadowRadius=_this$state.animatedShadowRadius,animatedShadowOpacity=_this$state.animatedShadowOpacity,animatedShadowHeight=_this$state.animatedShadowHeight,animatedShadowWidth=_this$state.animatedShadowWidth;var shadowRadius=active?6.65:4.65;var shadowShadowOpacity=active?0.27:0.35;var shadowHeight=active?4:2;var shadowWidth=active?-1.5:-0.5;_reactNative.Animated.parallel([_reactNative.Animated.timing(animatedShadowRadius,{toValue:shadowRadius,duration:animationDuration,useNativeDriver:true}),_reactNative.Animated.timing(animatedShadowOpacity,{toValue:shadowShadowOpacity,duration:animationDuration,useNativeDriver:true}),_reactNative.Animated.timing(animatedShadowHeight,{toValue:shadowHeight,duration:animationDuration}),_reactNative.Animated.timing(animatedShadowWidth,{toValue:shadowWidth,duration:animationDuration})]).start();}}},{key:\"getShadowStyle\",value:function getShadowStyle(){var theme=this.props.theme;var _this$state2=this.state,animatedShadowRadius=_this$state2.animatedShadowRadius,animatedShadowOpacity=_this$state2.animatedShadowOpacity,animatedShadowHeight=_this$state2.animatedShadowHeight,animatedShadowWidth=_this$state2.animatedShadowWidth,elevation=_this$state2.elevation;var style={shadowColor:'#000',shadowOffset:{width:animatedShadowWidth,height:animatedShadowHeight},shadowOpacity:animatedShadowOpacity,shadowRadius:animatedShadowRadius,elevation:elevation,backgroundColor:'transparent',borderRadius:theme.button.borderRadius};return style;}},{key:\"getButtonStyles\",value:function getButtonStyles(){var theme=this.props.theme;var buttonStyles=_objectSpread({},theme.containedButton,{backgroundColor:this.getBackgroundColor()});return buttonStyles;}},{key:\"getBackgroundColor\",value:function getBackgroundColor(){var _this$props=this.props,userColor=_this$props.color,disabled=_this$props.disabled,theme=_this$props.theme;var stateBackgroundColor=this.state.stateBackgroundColor;var backgroundColor=userColor?userColor:theme.primary.main;backgroundColor=disabled?'rgba(0, 0, 0, 0.12)':backgroundColor;return stateBackgroundColor?stateBackgroundColor:backgroundColor;}},{key:\"getRippleColor\",value:function getRippleColor(){var rippleColor=this.props.rippleColor;var bgColor=this.getBackgroundColor();var implementedRippleColor=this.getOverlayColor(bgColor,0.12,0.32);return rippleColor?rippleColor:implementedRippleColor;}},{key:\"getTextColor\",value:function getTextColor(){var _this$props2=this.props,textColor=_this$props2.textColor,disabled=_this$props2.disabled;var implementedTextColor=disabled?'rgba(0, 0, 0, 0.26)':'white';if(textColor)implementedTextColor=textColor;return implementedTextColor;}},{key:\"getOverlayColor\",value:function getOverlayColor(normalColor,lightOverlay,darkOverlay){var modifiedColor;if((0,_color.default)(normalColor).isDark()){modifiedColor=(0,_color.default)(normalColor).lighten(darkOverlay).rgb().string();}else{modifiedColor=(0,_color.default)(normalColor).darken(lightOverlay).rgb().string();}return modifiedColor;}},{key:\"handleHover\",value:function handleHover(toggle){var bgColor=this.getBackgroundColor();var implementedColor=toggle?this.getOverlayColor(bgColor,0.08,0.08):null;this.setState({stateBackgroundColor:implementedColor});}},{key:\"render\",value:function render(){var _this2=this;var _this$props3=this.props,disabled=_this$props3.disabled,radius=_this$props3.radius,theme=_this$props3.theme,containerStyle=_this$props3.containerStyle,fullWidth=_this$props3.fullWidth,props=(0,_objectWithoutProperties2.default)(_this$props3,[\"disabled\",\"radius\",\"theme\",\"containerStyle\",\"fullWidth\"]);return _react.default.createElement(_.Hoverable,{onHoverIn:function onHoverIn(){return _this2.handleHover(true);},onHoverOut:function onHoverOut(){return _this2.handleHover(false);},style:[containerStyle],__source:{fileName:_jsxFileName,lineNumber:194}},function(){return _react.default.createElement(_reactNative.Animated.View,{style:[disabled?{}:_this2.getShadowStyle(),{alignSelf:fullWidth?'auto':'flex-start',borderRadius:radius?radius:theme.button.borderRadius},containerStyle],__source:{fileName:_jsxFileName,lineNumber:199}},_react.default.createElement(_ButtonBase.default,(0,_extends2.default)({typeRippleColor:_this2.getRippleColor(),typeTextColor:_this2.getTextColor(),typeButtonStyles:_this2.getButtonStyles(),onPressIn:_this2.handleOnPressIn,onPressOut:_this2.handleOnPressOut,disabled:disabled,radius:radius,theme:theme,fullWidth:fullWidth},props,{__source:{fileName:_jsxFileName,lineNumber:208}})));});}}]);return ContainedButton;}(_react.Component);(0,_defineProperty2.default)(ContainedButton,\"propTypes\",{disabled:_propTypes.default.bool,color:_propTypes.default.string,textColor:_propTypes.default.string,rippleColor:_propTypes.default.string,theme:_propTypes.default.object,onPressIn:_propTypes.default.func,onPressOut:_propTypes.default.func,containerStyle:_propTypes.default.oneOfType([_propTypes.default.array,_propTypes.default.object]),radius:_propTypes.default.number,fullWidth:_propTypes.default.bool});var _default=(0,_withTheme.default)(ContainedButton);exports.default=_default;"
  },
  {
    "path": "dist/Components/Button/ContainedButton/ContainedButton.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _storiesOf=require(\"../../../storybook/helpers/storiesOf\");var _=require(\"../../..\");var _Header=_interopRequireDefault(require(\"../../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../../storybook/components/Container\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Button/ContainedButton/ContainedButton.stories.js\";var _default=(0,_storiesOf.storiesOf)('Components|Buttons/Contained Button',module).addParameters({jest:['Button']}).add('Simple',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:12}},_react.default.createElement(_Header.default,{title:'Simple Contained Button',__source:{fileName:_jsxFileName,lineNumber:13}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:15}},_react.default.createElement(_.Button,{text:'Text',type:\"contained\",__source:{fileName:_jsxFileName,lineNumber:23}}),_react.default.createElement(_.Button,{text:'Button',color:'#E91E63',type:\"contained\",__source:{fileName:_jsxFileName,lineNumber:24}}),_react.default.createElement(_.Button,{text:'Buy',color:'#FF5722',type:\"contained\",__source:{fileName:_jsxFileName,lineNumber:25}}),_react.default.createElement(_.Button,{text:'Click Here',color:'#673AB7',type:\"contained\",__source:{fileName:_jsxFileName,lineNumber:26}}),_react.default.createElement(_.Button,{text:'Do not click',color:'#009688',type:\"contained\",__source:{fileName:_jsxFileName,lineNumber:27}})));}).add('with left icon',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:32}},_react.default.createElement(_Header.default,{title:'Left Icon Contained Button',__source:{fileName:_jsxFileName,lineNumber:33}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:35}},_react.default.createElement(_.Button,{text:'Home',icon:_react.default.createElement(_.Icon,{name:\"home\",__source:{fileName:_jsxFileName,lineNumber:43}}),type:\"contained\",__source:{fileName:_jsxFileName,lineNumber:43}}),_react.default.createElement(_.Button,{text:'Favorite',color:'#E91E63',borderSize:2,type:\"contained\",icon:_react.default.createElement(_.Icon,{name:\"favorite\",__source:{fileName:_jsxFileName,lineNumber:49}}),__source:{fileName:_jsxFileName,lineNumber:44}}),_react.default.createElement(_.Button,{text:'Settings',icon:_react.default.createElement(_.Icon,{name:\"settings\",__source:{fileName:_jsxFileName,lineNumber:53}}),color:'#FF5722',radius:20,type:\"contained\",__source:{fileName:_jsxFileName,lineNumber:51}}),_react.default.createElement(_.Button,{text:'Buy',color:'#673AB7',density:-2,icon:_react.default.createElement(_.Icon,{name:\"attach-money\",__source:{fileName:_jsxFileName,lineNumber:62}}),type:\"contained\",__source:{fileName:_jsxFileName,lineNumber:58}}),_react.default.createElement(_.Button,{text:'Archive',color:'#009688',icon:_react.default.createElement(_.Icon,{name:\"archive\",__source:{fileName:_jsxFileName,lineNumber:68}}),type:\"contained\",__source:{fileName:_jsxFileName,lineNumber:65}})));}).add('with right icon',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:75}},_react.default.createElement(_Header.default,{title:'Right Icon Contained Button',__source:{fileName:_jsxFileName,lineNumber:76}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:78}},_react.default.createElement(_.Button,{text:'Home',icon:_react.default.createElement(_.Icon,{name:\"home\",__source:{fileName:_jsxFileName,lineNumber:88}}),type:\"contained\",iconPosition:'right',__source:{fileName:_jsxFileName,lineNumber:86}}),_react.default.createElement(_.Button,{text:'Favorite',color:'#E91E63',borderSize:2,type:\"contained\",icon:_react.default.createElement(_.Icon,{name:\"favorite\",__source:{fileName:_jsxFileName,lineNumber:97}}),iconPosition:'right',__source:{fileName:_jsxFileName,lineNumber:92}}),_react.default.createElement(_.Button,{text:'Settings',icon:_react.default.createElement(_.Icon,{name:\"settings\",__source:{fileName:_jsxFileName,lineNumber:102}}),color:'#FF5722',radius:20,type:\"contained\",iconPosition:'right',__source:{fileName:_jsxFileName,lineNumber:100}}),_react.default.createElement(_.Button,{text:'Buy',color:'#673AB7',density:-2,icon:_react.default.createElement(_.Icon,{name:\"attach-money\",__source:{fileName:_jsxFileName,lineNumber:112}}),type:\"contained\",iconPosition:'right',__source:{fileName:_jsxFileName,lineNumber:108}}),_react.default.createElement(_.Button,{text:'Archive',color:'#009688',icon:_react.default.createElement(_.Icon,{name:\"archive\",__source:{fileName:_jsxFileName,lineNumber:119}}),type:\"contained\",iconPosition:'right',__source:{fileName:_jsxFileName,lineNumber:116}})));}).add('radius',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:127}},_react.default.createElement(_Header.default,{title:'Radius Contained Button',__source:{fileName:_jsxFileName,lineNumber:128}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:130}},_react.default.createElement(_.Button,{text:'Home',radius:20,type:\"contained\",__source:{fileName:_jsxFileName,lineNumber:138}}),_react.default.createElement(_.Button,{text:'Favorite',color:'#E91E63',borderSize:2,radius:40,icon:_react.default.createElement(_.Icon,{name:\"favorite\",__source:{fileName:_jsxFileName,lineNumber:144}}),type:\"contained\",__source:{fileName:_jsxFileName,lineNumber:139}}),_react.default.createElement(_.Button,{text:'Settings',color:'#FF5722',radius:60,type:\"contained\",__source:{fileName:_jsxFileName,lineNumber:147}}),_react.default.createElement(_.Button,{text:'Buy',tcolor:'#673AB7',density:-2,radius:0,icon:_react.default.createElement(_.Icon,{name:\"attach-money\",__source:{fileName:_jsxFileName,lineNumber:158}}),type:\"contained\",__source:{fileName:_jsxFileName,lineNumber:153}}),_react.default.createElement(_.Button,{text:'Archive',color:'#009688',radius:0,icon:_react.default.createElement(_.Icon,{name:\"archive\",__source:{fileName:_jsxFileName,lineNumber:165}}),type:\"contained\",__source:{fileName:_jsxFileName,lineNumber:161}})));}).add('density',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:172}},_react.default.createElement(_Header.default,{title:'Density Contained Button',__source:{fileName:_jsxFileName,lineNumber:173}}),_react.default.createElement(_.BodyText,{text:'Density -1: 32px',style:{marginBottom:15},__source:{fileName:_jsxFileName,lineNumber:175}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:30},__source:{fileName:_jsxFileName,lineNumber:176}},_react.default.createElement(_.Button,{text:'Home',density:-1,type:\"contained\",__source:{fileName:_jsxFileName,lineNumber:184}}),_react.default.createElement(_.Button,{text:'Favorite',color:'#E91E63',borderSize:2,density:-1,type:\"contained\",icon:_react.default.createElement(_.Icon,{name:\"favorite\",__source:{fileName:_jsxFileName,lineNumber:191}}),__source:{fileName:_jsxFileName,lineNumber:185}}),_react.default.createElement(_.Button,{text:'Settings',color:'#FF5722',density:-1,radius:60,type:\"contained\",__source:{fileName:_jsxFileName,lineNumber:193}}),_react.default.createElement(_.Button,{text:'Buy',tcolor:'#673AB7',density:-1,radius:0,type:\"contained\",icon:_react.default.createElement(_.Icon,{name:\"attach-money\",__source:{fileName:_jsxFileName,lineNumber:206}}),__source:{fileName:_jsxFileName,lineNumber:200}}),_react.default.createElement(_.Button,{text:'Archive',color:'#009688',density:-1,icon:_react.default.createElement(_.Icon,{name:\"archive\",__source:{fileName:_jsxFileName,lineNumber:212}}),type:\"contained\",__source:{fileName:_jsxFileName,lineNumber:208}})),_react.default.createElement(_.BodyText,{text:'Density -2: 28px',style:{marginBottom:15},__source:{fileName:_jsxFileName,lineNumber:217}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:30},__source:{fileName:_jsxFileName,lineNumber:218}},_react.default.createElement(_.Button,{text:'Home',density:-2,type:\"contained\",__source:{fileName:_jsxFileName,lineNumber:226}}),_react.default.createElement(_.Button,{text:'Favorite',color:'#E91E63',borderSize:2,density:-2,type:\"contained\",icon:_react.default.createElement(_.Icon,{name:\"favorite\",__source:{fileName:_jsxFileName,lineNumber:233}}),__source:{fileName:_jsxFileName,lineNumber:227}}),_react.default.createElement(_.Button,{text:'Settings',color:'#FF5722',density:-2,radius:60,type:\"contained\",__source:{fileName:_jsxFileName,lineNumber:235}}),_react.default.createElement(_.Button,{text:'Buy',tcolor:'#673AB7',density:-2,radius:0,type:\"contained\",icon:_react.default.createElement(_.Icon,{name:\"attach-money\",__source:{fileName:_jsxFileName,lineNumber:248}}),__source:{fileName:_jsxFileName,lineNumber:242}}),_react.default.createElement(_.Button,{text:'Archive',color:'#009688',density:-2,icon:_react.default.createElement(_.Icon,{name:\"archive\",__source:{fileName:_jsxFileName,lineNumber:254}}),type:\"contained\",__source:{fileName:_jsxFileName,lineNumber:250}})),_react.default.createElement(_.BodyText,{text:'Density -3: 24px',style:{marginBottom:15},__source:{fileName:_jsxFileName,lineNumber:259}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:30},__source:{fileName:_jsxFileName,lineNumber:260}},_react.default.createElement(_.Button,{text:'Home',density:-3,type:\"contained\",__source:{fileName:_jsxFileName,lineNumber:268}}),_react.default.createElement(_.Button,{text:'Favorite',color:'#E91E63',borderSize:2,density:-3,type:\"contained\",icon:_react.default.createElement(_.Icon,{name:\"favorite\",__source:{fileName:_jsxFileName,lineNumber:275}}),__source:{fileName:_jsxFileName,lineNumber:269}}),_react.default.createElement(_.Button,{text:'Settings',color:'#FF5722',density:-3,radius:60,type:\"contained\",__source:{fileName:_jsxFileName,lineNumber:277}}),_react.default.createElement(_.Button,{text:'Buy',tcolor:'#673AB7',density:-3,radius:0,type:\"contained\",icon:_react.default.createElement(_.Icon,{name:\"attach-money\",__source:{fileName:_jsxFileName,lineNumber:290}}),__source:{fileName:_jsxFileName,lineNumber:284}}),_react.default.createElement(_.Button,{text:'Archive',color:'#009688',density:-3,icon:_react.default.createElement(_.Icon,{name:\"archive\",__source:{fileName:_jsxFileName,lineNumber:296}}),type:\"contained\",__source:{fileName:_jsxFileName,lineNumber:292}})));}).add('loading',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:303}},_react.default.createElement(_Header.default,{title:'Loading Contained Button',__source:{fileName:_jsxFileName,lineNumber:304}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:306}},_react.default.createElement(_.Button,{text:'Home',loading:true,hideLabel:true,type:\"contained\",__source:{fileName:_jsxFileName,lineNumber:314}}),_react.default.createElement(_.Button,{text:'Favorite',color:'#E91E63',borderSize:2,loading:true,hideLabel:true,type:\"contained\",icon:_react.default.createElement(_.Icon,{name:\"favorite\",__source:{fileName:_jsxFileName,lineNumber:322}}),__source:{fileName:_jsxFileName,lineNumber:315}}),_react.default.createElement(_.Button,{text:'Settings',color:'#FF5722',loading:true,hideLabel:true,radius:60,type:\"contained\",__source:{fileName:_jsxFileName,lineNumber:324}}),_react.default.createElement(_.Button,{text:'Buy',tcolor:'#673AB7',density:-2,radius:0,loading:true,hideLabel:true,type:\"contained\",__source:{fileName:_jsxFileName,lineNumber:332}}),_react.default.createElement(_.Button,{text:'Archive',color:'#009688',loading:true,hideLabel:true,type:\"contained\",icon:_react.default.createElement(_.Icon,{name:\"archive\",__source:{fileName:_jsxFileName,lineNumber:347}}),__source:{fileName:_jsxFileName,lineNumber:341}})));}).add('disabled',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:353}},_react.default.createElement(_Header.default,{title:'Disabled Contained Button',__source:{fileName:_jsxFileName,lineNumber:354}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:356}},_react.default.createElement(_.Button,{text:'Home',disabled:true,type:\"contained\",__source:{fileName:_jsxFileName,lineNumber:364}}),_react.default.createElement(_.Button,{color:'#E91E63',borderSize:2,loading:true,disabled:true,type:\"contained\",__source:{fileName:_jsxFileName,lineNumber:365}}),_react.default.createElement(_.Button,{text:'Settings',color:'#FF5722',type:\"contained\",disabled:true,radius:60,__source:{fileName:_jsxFileName,lineNumber:372}}),_react.default.createElement(_.Button,{text:'Buy',tcolor:'#673AB7',density:-2,radius:0,disabled:true,type:\"contained\",icon:_react.default.createElement(_.Icon,{name:\"attach-money\",__source:{fileName:_jsxFileName,lineNumber:386}}),__source:{fileName:_jsxFileName,lineNumber:379}}),_react.default.createElement(_.Button,{text:'Archive',color:'#009688',disabled:true,type:\"contained\",icon:_react.default.createElement(_.Icon,{name:\"archive\",__source:{fileName:_jsxFileName,lineNumber:393}}),__source:{fileName:_jsxFileName,lineNumber:388}})));}).add('full width',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:399}},_react.default.createElement(_Header.default,{title:'Full Width Contained Button',__source:{fileName:_jsxFileName,lineNumber:400}}),_react.default.createElement(_.Button,{fullWidth:true,text:'Contained',type:\"contained\",containerStyle:{marginBottom:8},__source:{fileName:_jsxFileName,lineNumber:401}}),_react.default.createElement(_.Button,{fullWidth:true,text:'Radius',color:'#009688',type:\"contained\",containerStyle:{marginBottom:8},radius:40,__source:{fileName:_jsxFileName,lineNumber:408}}),_react.default.createElement(_.Button,{fullWidth:true,text:'Icon',color:'#E91E63',type:\"contained\",containerStyle:{marginBottom:8},icon:_react.default.createElement(_.Icon,{name:\"favorite\",__source:{fileName:_jsxFileName,lineNumber:422}}),__source:{fileName:_jsxFileName,lineNumber:416}}),_react.default.createElement(_.Button,{fullWidth:true,color:'#FF5722',type:\"contained\",loading:true,containerStyle:{marginBottom:8},__source:{fileName:_jsxFileName,lineNumber:424}}),_react.default.createElement(_.Button,{fullWidth:true,text:'Disabled',color:'#673AB7',type:\"contained\",containerStyle:{marginBottom:8},disabled:true,__source:{fileName:_jsxFileName,lineNumber:431}}));});exports.default=_default;"
  },
  {
    "path": "dist/Components/Button/FlatButton/FlatButton.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _objectWithoutProperties2=_interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutProperties\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf3=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _ButtonBase=_interopRequireDefault(require(\"../ButtonBase/ButtonBase\"));var _=require(\"../../../\");var _color=_interopRequireDefault(require(\"color\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Button/FlatButton/FlatButton.js\";function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}var FlatButton=function(_Component){(0,_inherits2.default)(FlatButton,_Component);function FlatButton(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,FlatButton);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(FlatButton)).call.apply(_getPrototypeOf2,[this].concat(args)));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{stateBackgroundColor:null});return _this;}(0,_createClass2.default)(FlatButton,[{key:\"getButtonStyles\",value:function getButtonStyles(){var theme=this.props.theme;var buttonStyles=_objectSpread({},theme.containedButton,{backgroundColor:this.getBackgroundColor()});return buttonStyles;}},{key:\"getBackgroundColor\",value:function getBackgroundColor(){var _this$props=this.props,userColor=_this$props.color,disabled=_this$props.disabled,theme=_this$props.theme;var stateBackgroundColor=this.state.stateBackgroundColor;var backgroundColor=userColor?userColor:theme.primary.main;backgroundColor=disabled?'rgba(0, 0, 0, 0.12)':backgroundColor;return stateBackgroundColor?stateBackgroundColor:backgroundColor;}},{key:\"getRippleColor\",value:function getRippleColor(){var rippleColor=this.props.rippleColor;var bgColor=this.getBackgroundColor();var implementedRippleColor=this.getOverlayColor(bgColor,0.12,0.32);return rippleColor?rippleColor:implementedRippleColor;}},{key:\"getTextColor\",value:function getTextColor(){var _this$props2=this.props,textColor=_this$props2.textColor,disabled=_this$props2.disabled;var implementedTextColor=disabled?'rgba(0, 0, 0, 0.26)':'white';if(textColor)implementedTextColor=textColor;return implementedTextColor;}},{key:\"getOverlayColor\",value:function getOverlayColor(bgColor,lightOverlay,darkOverlay){var modifiedColor;if((0,_color.default)(bgColor).isDark()){modifiedColor=(0,_color.default)(bgColor).lighten(darkOverlay).rgb().string();}else{modifiedColor=(0,_color.default)(bgColor).darken(lightOverlay).rgb().string();}return modifiedColor;}},{key:\"handleHover\",value:function handleHover(toggle){var bgColor=this.getBackgroundColor();var implementedColor=toggle?this.getOverlayColor(bgColor,0.08,0.08):null;this.setState({stateBackgroundColor:implementedColor});}},{key:\"render\",value:function render(){var _this2=this;var _this$props3=this.props,containerStyle=_this$props3.containerStyle,props=(0,_objectWithoutProperties2.default)(_this$props3,[\"containerStyle\"]);return _react.default.createElement(_.Hoverable,{onHoverIn:function onHoverIn(){return _this2.handleHover(true);},onHoverOut:function onHoverOut(){return _this2.handleHover(false);},style:containerStyle,__source:{fileName:_jsxFileName,lineNumber:95}},function(){return _react.default.createElement(_ButtonBase.default,(0,_extends2.default)({typeRippleColor:_this2.getRippleColor(),typeTextColor:_this2.getTextColor(),typeButtonStyles:_this2.getButtonStyles()},props,{__source:{fileName:_jsxFileName,lineNumber:100}}));});}}]);return FlatButton;}(_react.Component);(0,_defineProperty2.default)(FlatButton,\"propTypes\",{disabled:_propTypes.default.bool,color:_propTypes.default.string,textColor:_propTypes.default.string,rippleColor:_propTypes.default.string,theme:_propTypes.default.object,onPressIn:_propTypes.default.func,onPressOut:_propTypes.default.func,containerStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array])});var _default=(0,_withTheme.default)(FlatButton);exports.default=_default;"
  },
  {
    "path": "dist/Components/Button/FlatButton/FlatButton.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _storiesOf=require(\"../../../storybook/helpers/storiesOf\");var _=require(\"../../..\");var _Header=_interopRequireDefault(require(\"../../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../../storybook/components/Container\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Button/FlatButton/FlatButton.stories.js\";var _default=(0,_storiesOf.storiesOf)('Components|Buttons/Flat Button',module).addParameters({jest:['Button']}).add('Simple',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:12}},_react.default.createElement(_Header.default,{title:'Simple Flat Button',__source:{fileName:_jsxFileName,lineNumber:13}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:15}},_react.default.createElement(_.Button,{text:'Text',type:\"flat\",__source:{fileName:_jsxFileName,lineNumber:23}}),_react.default.createElement(_.Button,{text:'Button',color:'#E91E63',type:\"flat\",__source:{fileName:_jsxFileName,lineNumber:24}}),_react.default.createElement(_.Button,{text:'Buy',color:'#FF5722',type:\"flat\",__source:{fileName:_jsxFileName,lineNumber:25}}),_react.default.createElement(_.Button,{text:'Click Here',color:'#673AB7',type:\"flat\",__source:{fileName:_jsxFileName,lineNumber:26}}),_react.default.createElement(_.Button,{text:'Do not click',color:'#009688',type:\"flat\",__source:{fileName:_jsxFileName,lineNumber:27}})));}).add('with left icon',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:32}},_react.default.createElement(_Header.default,{title:'Left Icon Flat Button',__source:{fileName:_jsxFileName,lineNumber:33}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:35}},_react.default.createElement(_.Button,{text:'Home',icon:_react.default.createElement(_.Icon,{name:\"home\",__source:{fileName:_jsxFileName,lineNumber:43}}),type:\"flat\",__source:{fileName:_jsxFileName,lineNumber:43}}),_react.default.createElement(_.Button,{text:'Favorite',color:'#E91E63',borderSize:2,type:\"flat\",icon:_react.default.createElement(_.Icon,{name:\"favorite\",__source:{fileName:_jsxFileName,lineNumber:49}}),__source:{fileName:_jsxFileName,lineNumber:44}}),_react.default.createElement(_.Button,{text:'Settings',icon:_react.default.createElement(_.Icon,{name:\"settings\",__source:{fileName:_jsxFileName,lineNumber:53}}),color:'#FF5722',radius:20,type:\"flat\",__source:{fileName:_jsxFileName,lineNumber:51}}),_react.default.createElement(_.Button,{text:'Buy',color:'#673AB7',density:-2,icon:_react.default.createElement(_.Icon,{name:\"attach-money\",__source:{fileName:_jsxFileName,lineNumber:62}}),type:\"flat\",__source:{fileName:_jsxFileName,lineNumber:58}}),_react.default.createElement(_.Button,{text:'Archive',color:'#009688',icon:_react.default.createElement(_.Icon,{name:\"archive\",__source:{fileName:_jsxFileName,lineNumber:68}}),type:\"flat\",__source:{fileName:_jsxFileName,lineNumber:65}})));}).add('with right icon',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:75}},_react.default.createElement(_Header.default,{title:'Right Icon Flat Button',__source:{fileName:_jsxFileName,lineNumber:76}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:78}},_react.default.createElement(_.Button,{text:'Home',icon:_react.default.createElement(_.Icon,{name:\"home\",__source:{fileName:_jsxFileName,lineNumber:88}}),type:\"flat\",iconPosition:'right',__source:{fileName:_jsxFileName,lineNumber:86}}),_react.default.createElement(_.Button,{text:'Favorite',color:'#E91E63',borderSize:2,type:\"flat\",icon:_react.default.createElement(_.Icon,{name:\"favorite\",__source:{fileName:_jsxFileName,lineNumber:97}}),iconPosition:'right',__source:{fileName:_jsxFileName,lineNumber:92}}),_react.default.createElement(_.Button,{text:'Settings',icon:_react.default.createElement(_.Icon,{name:\"settings\",__source:{fileName:_jsxFileName,lineNumber:102}}),color:'#FF5722',radius:20,type:\"flat\",iconPosition:'right',__source:{fileName:_jsxFileName,lineNumber:100}}),_react.default.createElement(_.Button,{text:'Buy',color:'#673AB7',dense:true,icon:_react.default.createElement(_.Icon,{name:\"attach-money\",__source:{fileName:_jsxFileName,lineNumber:112}}),type:\"flat\",iconPosition:'right',__source:{fileName:_jsxFileName,lineNumber:108}}),_react.default.createElement(_.Button,{text:'Archive',color:'#009688',icon:_react.default.createElement(_.Icon,{name:\"archive\",__source:{fileName:_jsxFileName,lineNumber:119}}),type:\"flat\",iconPosition:'right',__source:{fileName:_jsxFileName,lineNumber:116}})));}).add('radius',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:127}},_react.default.createElement(_Header.default,{title:'Radius Flat Button',__source:{fileName:_jsxFileName,lineNumber:128}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:130}},_react.default.createElement(_.Button,{text:'Home',radius:20,type:\"flat\",__source:{fileName:_jsxFileName,lineNumber:138}}),_react.default.createElement(_.Button,{text:'Favorite',color:'#E91E63',borderSize:2,radius:40,icon:_react.default.createElement(_.Icon,{name:\"favorite\",__source:{fileName:_jsxFileName,lineNumber:144}}),type:\"flat\",__source:{fileName:_jsxFileName,lineNumber:139}}),_react.default.createElement(_.Button,{text:'Settings',color:'#FF5722',radius:60,type:\"flat\",__source:{fileName:_jsxFileName,lineNumber:147}}),_react.default.createElement(_.Button,{text:'Buy',tcolor:'#673AB7',density:-2,radius:0,icon:_react.default.createElement(_.Icon,{name:\"attach-money\",__source:{fileName:_jsxFileName,lineNumber:153}}),type:\"flat\",__source:{fileName:_jsxFileName,lineNumber:148}}),_react.default.createElement(_.Button,{text:'Archive',color:'#009688',radius:0,icon:_react.default.createElement(_.Icon,{name:\"archive\",__source:{fileName:_jsxFileName,lineNumber:160}}),type:\"flat\",__source:{fileName:_jsxFileName,lineNumber:156}})));}).add('density',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:167}},_react.default.createElement(_Header.default,{title:'Dense Flat Button',__source:{fileName:_jsxFileName,lineNumber:168}}),_react.default.createElement(_.BodyText,{text:'Density -1: 32px',style:{marginBottom:15},__source:{fileName:_jsxFileName,lineNumber:170}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:30},__source:{fileName:_jsxFileName,lineNumber:171}},_react.default.createElement(_.Button,{text:'Home',density:-1,type:\"flat\",__source:{fileName:_jsxFileName,lineNumber:179}}),_react.default.createElement(_.Button,{text:'Favorite',color:'#E91E63',borderSize:2,density:-1,type:\"flat\",icon:_react.default.createElement(_.Icon,{name:\"favorite\",__source:{fileName:_jsxFileName,lineNumber:186}}),__source:{fileName:_jsxFileName,lineNumber:180}}),_react.default.createElement(_.Button,{text:'Settings',color:'#FF5722',density:-1,radius:60,type:\"flat\",__source:{fileName:_jsxFileName,lineNumber:188}}),_react.default.createElement(_.Button,{text:'Buy',tcolor:'#673AB7',density:-1,radius:0,type:\"flat\",icon:_react.default.createElement(_.Icon,{name:\"attach-money\",__source:{fileName:_jsxFileName,lineNumber:201}}),__source:{fileName:_jsxFileName,lineNumber:195}}),_react.default.createElement(_.Button,{text:'Archive',color:'#009688',density:-1,icon:_react.default.createElement(_.Icon,{name:\"archive\",__source:{fileName:_jsxFileName,lineNumber:207}}),type:\"flat\",__source:{fileName:_jsxFileName,lineNumber:203}})),_react.default.createElement(_.BodyText,{text:'Density -2: 28px',style:{marginBottom:15},__source:{fileName:_jsxFileName,lineNumber:212}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:30},__source:{fileName:_jsxFileName,lineNumber:213}},_react.default.createElement(_.Button,{text:'Home',density:-2,type:\"flat\",__source:{fileName:_jsxFileName,lineNumber:221}}),_react.default.createElement(_.Button,{text:'Favorite',color:'#E91E63',borderSize:2,density:-2,type:\"flat\",icon:_react.default.createElement(_.Icon,{name:\"favorite\",__source:{fileName:_jsxFileName,lineNumber:228}}),__source:{fileName:_jsxFileName,lineNumber:222}}),_react.default.createElement(_.Button,{text:'Settings',color:'#FF5722',density:-2,radius:60,type:\"flat\",__source:{fileName:_jsxFileName,lineNumber:230}}),_react.default.createElement(_.Button,{text:'Buy',tcolor:'#673AB7',density:-2,radius:0,type:\"flat\",icon:_react.default.createElement(_.Icon,{name:\"attach-money\",__source:{fileName:_jsxFileName,lineNumber:243}}),__source:{fileName:_jsxFileName,lineNumber:237}}),_react.default.createElement(_.Button,{text:'Archive',color:'#009688',density:-2,icon:_react.default.createElement(_.Icon,{name:\"archive\",__source:{fileName:_jsxFileName,lineNumber:249}}),type:\"flat\",__source:{fileName:_jsxFileName,lineNumber:245}})),_react.default.createElement(_.BodyText,{text:'Density -3: 24px',style:{marginBottom:15},__source:{fileName:_jsxFileName,lineNumber:254}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:30},__source:{fileName:_jsxFileName,lineNumber:255}},_react.default.createElement(_.Button,{text:'Home',density:-3,type:\"flat\",__source:{fileName:_jsxFileName,lineNumber:263}}),_react.default.createElement(_.Button,{text:'Favorite',color:'#E91E63',borderSize:2,density:-3,type:\"flat\",icon:_react.default.createElement(_.Icon,{name:\"favorite\",__source:{fileName:_jsxFileName,lineNumber:270}}),__source:{fileName:_jsxFileName,lineNumber:264}}),_react.default.createElement(_.Button,{text:'Settings',color:'#FF5722',density:-3,radius:60,type:\"flat\",__source:{fileName:_jsxFileName,lineNumber:272}}),_react.default.createElement(_.Button,{text:'Buy',tcolor:'#673AB7',density:-3,radius:0,type:\"flat\",icon:_react.default.createElement(_.Icon,{name:\"attach-money\",__source:{fileName:_jsxFileName,lineNumber:285}}),__source:{fileName:_jsxFileName,lineNumber:279}}),_react.default.createElement(_.Button,{text:'Archive',color:'#009688',density:-3,icon:_react.default.createElement(_.Icon,{name:\"archive\",__source:{fileName:_jsxFileName,lineNumber:291}}),type:\"flat\",__source:{fileName:_jsxFileName,lineNumber:287}})));}).add('loading',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:298}},_react.default.createElement(_Header.default,{title:'Loading Flat Button',__source:{fileName:_jsxFileName,lineNumber:299}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:301}},_react.default.createElement(_.Button,{text:'Home',loading:true,hideLabel:true,type:\"flat\",__source:{fileName:_jsxFileName,lineNumber:309}}),_react.default.createElement(_.Button,{text:'Favorite',color:'#E91E63',borderSize:2,loading:true,hideLabel:true,type:\"flat\",icon:_react.default.createElement(_.Icon,{name:\"favorite\",__source:{fileName:_jsxFileName,lineNumber:317}}),__source:{fileName:_jsxFileName,lineNumber:310}}),_react.default.createElement(_.Button,{text:'Settings',color:'#FF5722',loading:true,hideLabel:true,radius:60,type:\"flat\",__source:{fileName:_jsxFileName,lineNumber:319}}),_react.default.createElement(_.Button,{text:'Buy',tcolor:'#673AB7',density:-2,radius:0,loading:true,hideLabel:true,type:\"flat\",icon:_react.default.createElement(_.Icon,{name:\"attach-money\",__source:{fileName:_jsxFileName,lineNumber:335}}),__source:{fileName:_jsxFileName,lineNumber:327}}),_react.default.createElement(_.Button,{text:'Archive',color:'#009688',loading:true,hideLabel:true,type:\"flat\",icon:_react.default.createElement(_.Icon,{name:\"archive\",__source:{fileName:_jsxFileName,lineNumber:343}}),__source:{fileName:_jsxFileName,lineNumber:337}})));}).add('disabled',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:349}},_react.default.createElement(_Header.default,{title:'Disabled Flat Button',__source:{fileName:_jsxFileName,lineNumber:350}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:352}},_react.default.createElement(_.Button,{text:'Home',icon:_react.default.createElement(_.Icon,{name:\"home\",__source:{fileName:_jsxFileName,lineNumber:362}}),disabled:true,type:\"flat\",__source:{fileName:_jsxFileName,lineNumber:360}}),_react.default.createElement(_.Button,{color:'#E91E63',borderSize:2,loading:true,disabled:true,type:\"flat\",__source:{fileName:_jsxFileName,lineNumber:366}}),_react.default.createElement(_.Button,{text:'Settings',color:'#FF5722',type:\"flat\",disabled:true,radius:60,__source:{fileName:_jsxFileName,lineNumber:367}}),_react.default.createElement(_.Button,{text:'Buy',tcolor:'#673AB7',density:-2,radius:0,disabled:true,type:\"flat\",icon:_react.default.createElement(_.Icon,{name:\"attach-money\",__source:{fileName:_jsxFileName,lineNumber:381}}),__source:{fileName:_jsxFileName,lineNumber:374}}),_react.default.createElement(_.Button,{text:'Archive',color:'#009688',disabled:true,type:\"flat\",icon:_react.default.createElement(_.Icon,{name:\"archive\",__source:{fileName:_jsxFileName,lineNumber:388}}),__source:{fileName:_jsxFileName,lineNumber:383}})));}).add('full width',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:394}},_react.default.createElement(_Header.default,{title:'Full Width Flat Button',__source:{fileName:_jsxFileName,lineNumber:395}}),_react.default.createElement(_.Button,{fullWidth:true,text:'Flat',type:\"flat\",style:{marginBottom:8},__source:{fileName:_jsxFileName,lineNumber:396}}),_react.default.createElement(_.Button,{fullWidth:true,text:'Radius',color:'#009688',type:\"flat\",style:{marginBottom:8},radius:40,__source:{fileName:_jsxFileName,lineNumber:398}}),_react.default.createElement(_.Button,{fullWidth:true,text:'Icon',color:'#E91E63',type:\"flat\",style:{marginBottom:8},icon:_react.default.createElement(_.Icon,{name:\"favorite\",__source:{fileName:_jsxFileName,lineNumber:412}}),__source:{fileName:_jsxFileName,lineNumber:406}}),_react.default.createElement(_.Button,{fullWidth:true,color:'#FF5722',type:\"flat\",loading:true,style:{marginBottom:8},__source:{fileName:_jsxFileName,lineNumber:414}}),_react.default.createElement(_.Button,{fullWidth:true,text:'Disabled',color:'#673AB7',type:\"flat\",style:{marginBottom:8},disabled:true,__source:{fileName:_jsxFileName,lineNumber:421}}));});exports.default=_default;"
  },
  {
    "path": "dist/Components/Button/OutlinedButton/OutlinedButton.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _objectWithoutProperties2=_interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutProperties\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf3=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _ButtonBase=_interopRequireDefault(require(\"../ButtonBase/ButtonBase\"));var _color=_interopRequireDefault(require(\"color\"));var _=require(\"../../../\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Button/OutlinedButton/OutlinedButton.js\";var OutlinedButton=function(_Component){(0,_inherits2.default)(OutlinedButton,_Component);function OutlinedButton(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,OutlinedButton);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(OutlinedButton)).call.apply(_getPrototypeOf2,[this].concat(args)));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{stateBackgroundColor:null});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"getBackgroundColor\",function(){var _this$props=_this.props,userColor=_this$props.color,disabled=_this$props.disabled;var stateBackgroundColor=_this.state.stateBackgroundColor;var backgroundColor=userColor?userColor:'transparent';backgroundColor=stateBackgroundColor?stateBackgroundColor:backgroundColor;return disabled?'transparent':backgroundColor;});return _this;}(0,_createClass2.default)(OutlinedButton,[{key:\"getButtonStyles\",value:function getButtonStyles(){var _this$props2=this.props,theme=_this$props2.theme,textColor=_this$props2.textColor,disabled=_this$props2.disabled,borderSize=_this$props2.borderSize;var borderColor=textColor?textColor:theme.primary.main;var buttonStyles=[theme.outlinedButton,{backgroundColor:this.getBackgroundColor(),borderColor:disabled?'rgba(0, 0, 0, 0.26)':borderColor,borderWidth:borderSize?borderSize:theme.outlinedButton.borderWidth}];return buttonStyles;}},{key:\"getRippleColor\",value:function getRippleColor(){var _this$props3=this.props,textColor=_this$props3.textColor,theme=_this$props3.theme,rippleColor=_this$props3.rippleColor;var implementedRippleColor=textColor?textColor:theme.primary.main;implementedRippleColor=(0,_color.default)(implementedRippleColor).alpha(0.12).rgb().string();return rippleColor?rippleColor:implementedRippleColor;}},{key:\"getTextColor\",value:function getTextColor(){var _this$props4=this.props,textColor=_this$props4.textColor,disabled=_this$props4.disabled,theme=_this$props4.theme;var implementedTextColor=textColor?textColor:theme.primary.main;return disabled?'rgba(0, 0, 0, 0.26)':implementedTextColor;}},{key:\"handleHover\",value:function handleHover(toggle){var implementedColor=toggle?(0,_color.default)(this.getTextColor()).alpha(0.08).rgb().string():null;this.setState({stateBackgroundColor:implementedColor});}},{key:\"render\",value:function render(){var _this2=this;var _this$props5=this.props,containerStyle=_this$props5.containerStyle,props=(0,_objectWithoutProperties2.default)(_this$props5,[\"containerStyle\"]);return _react.default.createElement(_.Hoverable,{onHoverIn:function onHoverIn(){return _this2.handleHover(true);},onHoverOut:function onHoverOut(){return _this2.handleHover(false);},style:containerStyle,__source:{fileName:_jsxFileName,lineNumber:88}},function(){return _react.default.createElement(_ButtonBase.default,(0,_extends2.default)({typeRippleColor:_this2.getRippleColor(),typeTextColor:_this2.getTextColor(),typeButtonStyles:_this2.getButtonStyles()},props,{__source:{fileName:_jsxFileName,lineNumber:93}}));});}}]);return OutlinedButton;}(_react.Component);(0,_defineProperty2.default)(OutlinedButton,\"propTypes\",{disabled:_propTypes.default.bool,color:_propTypes.default.string,textColor:_propTypes.default.string,rippleColor:_propTypes.default.string,theme:_propTypes.default.object,borderSize:_propTypes.default.number,containerStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array])});var _default=(0,_withTheme.default)(OutlinedButton);exports.default=_default;"
  },
  {
    "path": "dist/Components/Button/OutlinedButton/OutlinedButton.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _storiesOf=require(\"../../../storybook/helpers/storiesOf\");var _=require(\"../../..\");var _Header=_interopRequireDefault(require(\"../../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../../storybook/components/Container\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Button/OutlinedButton/OutlinedButton.stories.js\";var _default=(0,_storiesOf.storiesOf)('Components|Buttons/Outlined Button',module).addParameters({jest:['Button']}).add('Simple',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:12}},_react.default.createElement(_Header.default,{title:'Simple Outlined Button',__source:{fileName:_jsxFileName,lineNumber:13}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:15}},_react.default.createElement(_.Button,{text:'Text',type:\"outlined\",__source:{fileName:_jsxFileName,lineNumber:23}}),_react.default.createElement(_.Button,{text:'Button',textColor:'#E91E63',type:\"outlined\",__source:{fileName:_jsxFileName,lineNumber:24}}),_react.default.createElement(_.Button,{text:'Buy',textColor:'#FF5722',type:\"outlined\",__source:{fileName:_jsxFileName,lineNumber:25}}),_react.default.createElement(_.Button,{text:'Click Here',textColor:'#673AB7',type:\"outlined\",__source:{fileName:_jsxFileName,lineNumber:26}}),_react.default.createElement(_.Button,{text:'Do not click',textColor:'#009688',type:\"outlined\",__source:{fileName:_jsxFileName,lineNumber:27}})));}).add('with left icon',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:32}},_react.default.createElement(_Header.default,{title:'Left Icon Outlined Button',__source:{fileName:_jsxFileName,lineNumber:33}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:35}},_react.default.createElement(_.Button,{text:'Home',icon:_react.default.createElement(_.Icon,{name:\"home\",__source:{fileName:_jsxFileName,lineNumber:43}}),type:\"outlined\",__source:{fileName:_jsxFileName,lineNumber:43}}),_react.default.createElement(_.Button,{text:'Favorite',textColor:'#E91E63',borderSize:2,type:\"outlined\",icon:_react.default.createElement(_.Icon,{name:\"favorite\",__source:{fileName:_jsxFileName,lineNumber:49}}),__source:{fileName:_jsxFileName,lineNumber:44}}),_react.default.createElement(_.Button,{text:'Settings',icon:_react.default.createElement(_.Icon,{name:\"settings\",__source:{fileName:_jsxFileName,lineNumber:53}}),textColor:'#FF5722',radius:20,type:\"outlined\",__source:{fileName:_jsxFileName,lineNumber:51}}),_react.default.createElement(_.Button,{text:'Buy',textColor:'#673AB7',density:-2,icon:_react.default.createElement(_.Icon,{name:\"attach-money\",__source:{fileName:_jsxFileName,lineNumber:62}}),type:\"outlined\",__source:{fileName:_jsxFileName,lineNumber:58}}),_react.default.createElement(_.Button,{text:'Archive',textColor:'#009688',icon:_react.default.createElement(_.Icon,{name:\"archive\",__source:{fileName:_jsxFileName,lineNumber:68}}),type:\"outlined\",__source:{fileName:_jsxFileName,lineNumber:65}})));}).add('with right icon',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:75}},_react.default.createElement(_Header.default,{title:'Right Icon Outlined Button',__source:{fileName:_jsxFileName,lineNumber:76}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:78}},_react.default.createElement(_.Button,{text:'Home',icon:_react.default.createElement(_.Icon,{name:\"home\",__source:{fileName:_jsxFileName,lineNumber:88}}),type:\"outlined\",iconPosition:'right',__source:{fileName:_jsxFileName,lineNumber:86}}),_react.default.createElement(_.Button,{text:'Favorite',textColor:'#E91E63',borderSize:2,type:\"outlined\",icon:_react.default.createElement(_.Icon,{name:\"favorite\",__source:{fileName:_jsxFileName,lineNumber:97}}),iconPosition:'right',__source:{fileName:_jsxFileName,lineNumber:92}}),_react.default.createElement(_.Button,{text:'Settings',icon:_react.default.createElement(_.Icon,{name:\"settings\",__source:{fileName:_jsxFileName,lineNumber:102}}),textColor:'#FF5722',radius:20,type:\"outlined\",iconPosition:'right',__source:{fileName:_jsxFileName,lineNumber:100}}),_react.default.createElement(_.Button,{text:'Buy',textColor:'#673AB7',density:-2,icon:_react.default.createElement(_.Icon,{name:\"attach-money\",__source:{fileName:_jsxFileName,lineNumber:112}}),type:\"outlined\",iconPosition:'right',__source:{fileName:_jsxFileName,lineNumber:108}}),_react.default.createElement(_.Button,{text:'Archive',textColor:'#009688',icon:_react.default.createElement(_.Icon,{name:\"archive\",__source:{fileName:_jsxFileName,lineNumber:119}}),type:\"outlined\",iconPosition:'right',__source:{fileName:_jsxFileName,lineNumber:116}})));}).add('radius',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:127}},_react.default.createElement(_Header.default,{title:'Radius Outlined Button',__source:{fileName:_jsxFileName,lineNumber:128}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:130}},_react.default.createElement(_.Button,{text:'Home',radius:20,type:\"outlined\",__source:{fileName:_jsxFileName,lineNumber:138}}),_react.default.createElement(_.Button,{text:'Favorite',textColor:'#E91E63',borderSize:2,radius:40,icon:_react.default.createElement(_.Icon,{name:\"favorite\",__source:{fileName:_jsxFileName,lineNumber:144}}),type:\"outlined\",__source:{fileName:_jsxFileName,lineNumber:139}}),_react.default.createElement(_.Button,{text:'Settings',textColor:'#FF5722',radius:60,type:\"outlined\",__source:{fileName:_jsxFileName,lineNumber:147}}),_react.default.createElement(_.Button,{text:'Buy',ttextColor:'#673AB7',density:-2,radius:0,icon:_react.default.createElement(_.Icon,{name:\"attach-money\",__source:{fileName:_jsxFileName,lineNumber:158}}),type:\"outlined\",__source:{fileName:_jsxFileName,lineNumber:153}}),_react.default.createElement(_.Button,{text:'Archive',textColor:'#009688',radius:0,icon:_react.default.createElement(_.Icon,{name:\"archive\",__source:{fileName:_jsxFileName,lineNumber:165}}),type:\"outlined\",__source:{fileName:_jsxFileName,lineNumber:161}})));}).add('density',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:172}},_react.default.createElement(_Header.default,{title:'Density Outlined Button',__source:{fileName:_jsxFileName,lineNumber:173}}),_react.default.createElement(_.BodyText,{text:'Density -1: 32px',style:{marginBottom:15},__source:{fileName:_jsxFileName,lineNumber:175}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:30},__source:{fileName:_jsxFileName,lineNumber:176}},_react.default.createElement(_.Button,{text:'Home',density:-1,type:\"outlined\",__source:{fileName:_jsxFileName,lineNumber:184}}),_react.default.createElement(_.Button,{text:'Favorite',textColor:'#E91E63',borderSize:2,density:-1,type:\"outlined\",icon:_react.default.createElement(_.Icon,{name:\"favorite\",__source:{fileName:_jsxFileName,lineNumber:191}}),__source:{fileName:_jsxFileName,lineNumber:185}}),_react.default.createElement(_.Button,{text:'Settings',textColor:'#FF5722',density:-1,radius:60,type:\"outlined\",__source:{fileName:_jsxFileName,lineNumber:193}}),_react.default.createElement(_.Button,{text:'Buy',ttextColor:'#673AB7',density:-1,radius:0,type:\"outlined\",icon:_react.default.createElement(_.Icon,{name:\"attach-money\",__source:{fileName:_jsxFileName,lineNumber:206}}),__source:{fileName:_jsxFileName,lineNumber:200}}),_react.default.createElement(_.Button,{text:'Archive',textColor:'#009688',density:-1,icon:_react.default.createElement(_.Icon,{name:\"archive\",__source:{fileName:_jsxFileName,lineNumber:212}}),type:\"outlined\",__source:{fileName:_jsxFileName,lineNumber:208}})),_react.default.createElement(_.BodyText,{text:'Density -2: 28px',style:{marginBottom:15},__source:{fileName:_jsxFileName,lineNumber:217}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:30},__source:{fileName:_jsxFileName,lineNumber:218}},_react.default.createElement(_.Button,{text:'Home',density:-2,type:\"outlined\",__source:{fileName:_jsxFileName,lineNumber:226}}),_react.default.createElement(_.Button,{text:'Favorite',textColor:'#E91E63',borderSize:2,density:-2,type:\"outlined\",icon:_react.default.createElement(_.Icon,{name:\"favorite\",__source:{fileName:_jsxFileName,lineNumber:233}}),__source:{fileName:_jsxFileName,lineNumber:227}}),_react.default.createElement(_.Button,{text:'Settings',textColor:'#FF5722',density:-2,radius:60,type:\"outlined\",__source:{fileName:_jsxFileName,lineNumber:235}}),_react.default.createElement(_.Button,{text:'Buy',ttextColor:'#673AB7',density:-2,radius:0,type:\"outlined\",icon:_react.default.createElement(_.Icon,{name:\"attach-money\",__source:{fileName:_jsxFileName,lineNumber:248}}),__source:{fileName:_jsxFileName,lineNumber:242}}),_react.default.createElement(_.Button,{text:'Archive',textColor:'#009688',density:-2,icon:_react.default.createElement(_.Icon,{name:\"archive\",__source:{fileName:_jsxFileName,lineNumber:254}}),type:\"outlined\",__source:{fileName:_jsxFileName,lineNumber:250}})),_react.default.createElement(_.BodyText,{text:'Density -3: 24px',style:{marginBottom:15},__source:{fileName:_jsxFileName,lineNumber:259}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:30},__source:{fileName:_jsxFileName,lineNumber:260}},_react.default.createElement(_.Button,{text:'Home',density:-3,type:\"outlined\",__source:{fileName:_jsxFileName,lineNumber:268}}),_react.default.createElement(_.Button,{text:'Favorite',textColor:'#E91E63',borderSize:2,density:-3,type:\"outlined\",icon:_react.default.createElement(_.Icon,{name:\"favorite\",__source:{fileName:_jsxFileName,lineNumber:275}}),__source:{fileName:_jsxFileName,lineNumber:269}}),_react.default.createElement(_.Button,{text:'Settings',textColor:'#FF5722',density:-3,radius:60,type:\"outlined\",__source:{fileName:_jsxFileName,lineNumber:277}}),_react.default.createElement(_.Button,{text:'Buy',ttextColor:'#673AB7',density:-3,radius:0,type:\"outlined\",icon:_react.default.createElement(_.Icon,{name:\"attach-money\",__source:{fileName:_jsxFileName,lineNumber:290}}),__source:{fileName:_jsxFileName,lineNumber:284}}),_react.default.createElement(_.Button,{text:'Archive',textColor:'#009688',density:-3,icon:_react.default.createElement(_.Icon,{name:\"archive\",__source:{fileName:_jsxFileName,lineNumber:296}}),type:\"outlined\",__source:{fileName:_jsxFileName,lineNumber:292}})));}).add('loading',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:303}},_react.default.createElement(_Header.default,{title:'Loading Outlined Button',__source:{fileName:_jsxFileName,lineNumber:304}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:306}},_react.default.createElement(_.Button,{text:'Home',loading:true,hideLabel:true,type:\"outlined\",__source:{fileName:_jsxFileName,lineNumber:314}}),_react.default.createElement(_.Button,{textColor:'#E91E63',borderSize:2,loading:true,hideLabel:true,text:'Favorite',type:\"outlined\",__source:{fileName:_jsxFileName,lineNumber:315}}),_react.default.createElement(_.Button,{text:'Settings',textColor:'#FF5722',loading:true,hideLabel:true,radius:60,type:\"outlined\",__source:{fileName:_jsxFileName,lineNumber:323}}),_react.default.createElement(_.Button,{text:'Buy',ttextColor:'#673AB7',density:-2,radius:0,loading:true,hideLabel:true,type:\"outlined\",__source:{fileName:_jsxFileName,lineNumber:331}}),_react.default.createElement(_.Button,{text:'Archive',textColor:'#009688',loading:true,hideLabel:true,type:\"outlined\",__source:{fileName:_jsxFileName,lineNumber:340}})));}).add('disabled',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:351}},_react.default.createElement(_Header.default,{title:'Disabled Outlined Button',__source:{fileName:_jsxFileName,lineNumber:352}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:354}},_react.default.createElement(_.Button,{text:'Home',disabled:true,type:\"outlined\",__source:{fileName:_jsxFileName,lineNumber:362}}),_react.default.createElement(_.Button,{textColor:'#E91E63',borderSize:2,loading:true,disabled:true,type:\"outlined\",__source:{fileName:_jsxFileName,lineNumber:363}}),_react.default.createElement(_.Button,{text:'Settings',textColor:'#FF5722',type:\"outlined\",disabled:true,radius:60,__source:{fileName:_jsxFileName,lineNumber:370}}),_react.default.createElement(_.Button,{text:'Buy',ttextColor:'#673AB7',density:-2,radius:0,disabled:true,type:\"outlined\",icon:_react.default.createElement(_.Icon,{name:\"attach-money\",__source:{fileName:_jsxFileName,lineNumber:384}}),__source:{fileName:_jsxFileName,lineNumber:377}}),_react.default.createElement(_.Button,{text:'Archive',textColor:'#009688',disabled:true,type:\"outlined\",icon:_react.default.createElement(_.Icon,{name:\"archive\",__source:{fileName:_jsxFileName,lineNumber:391}}),__source:{fileName:_jsxFileName,lineNumber:386}})));}).add('full width',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:397}},_react.default.createElement(_Header.default,{title:'Full Width Outlined Button',__source:{fileName:_jsxFileName,lineNumber:398}}),_react.default.createElement(_.Button,{fullWidth:true,text:'Outlined',type:\"outlined\",style:{marginBottom:8},__source:{fileName:_jsxFileName,lineNumber:399}}),_react.default.createElement(_.Button,{fullWidth:true,text:'Radius',textColor:'#009688',type:\"outlined\",style:{marginBottom:8},radius:40,__source:{fileName:_jsxFileName,lineNumber:406}}),_react.default.createElement(_.Button,{fullWidth:true,text:'Icon',textColor:'#E91E63',type:\"outlined\",style:{marginBottom:8},icon:_react.default.createElement(_.Icon,{name:\"favorite\",__source:{fileName:_jsxFileName,lineNumber:420}}),__source:{fileName:_jsxFileName,lineNumber:414}}),_react.default.createElement(_.Button,{fullWidth:true,textColor:'#FF5722',type:\"outlined\",loading:true,style:{marginBottom:8},__source:{fileName:_jsxFileName,lineNumber:422}}),_react.default.createElement(_.Button,{fullWidth:true,text:'Disabled',textColor:'#673AB7',type:\"outlined\",style:{marginBottom:8},disabled:true,__source:{fileName:_jsxFileName,lineNumber:429}}));});exports.default=_default;"
  },
  {
    "path": "dist/Components/Button/TextButton/TextButton.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _objectWithoutProperties2=_interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutProperties\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf3=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _ButtonBase=_interopRequireDefault(require(\"../ButtonBase/ButtonBase\"));var _color=_interopRequireDefault(require(\"color\"));var _=require(\"../../../\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Button/TextButton/TextButton.js\";var TextButton=function(_Component){(0,_inherits2.default)(TextButton,_Component);function TextButton(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,TextButton);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(TextButton)).call.apply(_getPrototypeOf2,[this].concat(args)));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{stateBackgroundColor:null});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"getBackgroundColor\",function(){var _this$props=_this.props,userColor=_this$props.color,disabled=_this$props.disabled;var stateBackgroundColor=_this.state.stateBackgroundColor;var backgroundColor=userColor?userColor:'transparent';backgroundColor=stateBackgroundColor?stateBackgroundColor:backgroundColor;return disabled?'transparent':backgroundColor;});return _this;}(0,_createClass2.default)(TextButton,[{key:\"getButtonStyles\",value:function getButtonStyles(){var theme=this.props.theme;var buttonStyles=[theme.textButton,{backgroundColor:this.getBackgroundColor()}];return buttonStyles;}},{key:\"getRippleColor\",value:function getRippleColor(){var _this$props2=this.props,textColor=_this$props2.textColor,theme=_this$props2.theme,rippleColor=_this$props2.rippleColor;var implementedRippleColor=textColor?textColor:theme.primary.main;implementedRippleColor=(0,_color.default)(implementedRippleColor).alpha(0.12).rgb().string();return rippleColor?rippleColor:implementedRippleColor;}},{key:\"getTextColor\",value:function getTextColor(){var _this$props3=this.props,textColor=_this$props3.textColor,disabled=_this$props3.disabled,theme=_this$props3.theme;var implementedTextColor=textColor?textColor:theme.primary.main;return disabled?'rgba(0, 0, 0, 0.26)':implementedTextColor;}},{key:\"handleHover\",value:function handleHover(toggle){var implementedColor=toggle?(0,_color.default)(this.getTextColor()).alpha(0.08).rgb().string():null;this.setState({stateBackgroundColor:implementedColor});}},{key:\"render\",value:function render(){var _this2=this;var _this$props4=this.props,containerStyle=_this$props4.containerStyle,props=(0,_objectWithoutProperties2.default)(_this$props4,[\"containerStyle\"]);return _react.default.createElement(_.Hoverable,{onHoverIn:function onHoverIn(){return _this2.handleHover(true);},onHoverOut:function onHoverOut(){return _this2.handleHover(false);},style:containerStyle,__source:{fileName:_jsxFileName,lineNumber:82}},function(){return _react.default.createElement(_ButtonBase.default,(0,_extends2.default)({typeRippleColor:_this2.getRippleColor(),typeTextColor:_this2.getTextColor(),typeButtonStyles:_this2.getButtonStyles()},props,{__source:{fileName:_jsxFileName,lineNumber:87}}));});}}]);return TextButton;}(_react.Component);(0,_defineProperty2.default)(TextButton,\"propTypes\",{disabled:_propTypes.default.bool,color:_propTypes.default.string,textColor:_propTypes.default.string,rippleColor:_propTypes.default.string,theme:_propTypes.default.object,containerStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array])});var _default=(0,_withTheme.default)(TextButton);exports.default=_default;"
  },
  {
    "path": "dist/Components/Button/TextButton/TextButton.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _storiesOf=require(\"../../../storybook/helpers/storiesOf\");var _=require(\"../../..\");var _Header=_interopRequireDefault(require(\"../../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../../storybook/components/Container\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Button/TextButton/TextButton.stories.js\";var _default=(0,_storiesOf.storiesOf)('Components|Buttons/Text Button',module).addParameters({jest:['Button']}).add('simple',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:12}},_react.default.createElement(_Header.default,{title:'Simple Text Button',__source:{fileName:_jsxFileName,lineNumber:13}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:15}},_react.default.createElement(_.Button,{text:'Text',__source:{fileName:_jsxFileName,lineNumber:23}}),_react.default.createElement(_.Button,{text:'Button',textColor:'#E91E63',__source:{fileName:_jsxFileName,lineNumber:24}}),_react.default.createElement(_.Button,{text:'Buy',textColor:'#FF5722',__source:{fileName:_jsxFileName,lineNumber:25}}),_react.default.createElement(_.Button,{text:'Click Here',textColor:'#673AB7',__source:{fileName:_jsxFileName,lineNumber:26}}),_react.default.createElement(_.Button,{text:'Do not click',textColor:'#009688',__source:{fileName:_jsxFileName,lineNumber:27}})));}).add('with left icon',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:32}},_react.default.createElement(_Header.default,{title:'Left Icon Text Button',__source:{fileName:_jsxFileName,lineNumber:33}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:35}},_react.default.createElement(_.Button,{text:'Home',icon:_react.default.createElement(_.Icon,{name:\"home\",__source:{fileName:_jsxFileName,lineNumber:43}}),__source:{fileName:_jsxFileName,lineNumber:43}}),_react.default.createElement(_.Button,{text:'Favorite',textColor:'#E91E63',borderSize:2,icon:_react.default.createElement(_.Icon,{name:\"favorite\",__source:{fileName:_jsxFileName,lineNumber:48}}),__source:{fileName:_jsxFileName,lineNumber:44}}),_react.default.createElement(_.Button,{text:'Settings',icon:_react.default.createElement(_.Icon,{name:\"settings\",__source:{fileName:_jsxFileName,lineNumber:52}}),textColor:'#FF5722',radius:20,__source:{fileName:_jsxFileName,lineNumber:50}}),_react.default.createElement(_.Button,{text:'Buy',ttextColor:'#673AB7',density:-2,icon:_react.default.createElement(_.Icon,{name:\"attach-money\",__source:{fileName:_jsxFileName,lineNumber:60}}),__source:{fileName:_jsxFileName,lineNumber:56}}),_react.default.createElement(_.Button,{text:'Archive',textColor:'#009688',icon:_react.default.createElement(_.Icon,{name:\"archive\",__source:{fileName:_jsxFileName,lineNumber:65}}),__source:{fileName:_jsxFileName,lineNumber:62}})));}).add('with right icon',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:71}},_react.default.createElement(_Header.default,{title:'Right Icon Text Button',__source:{fileName:_jsxFileName,lineNumber:72}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:74}},_react.default.createElement(_.Button,{text:'Home',icon:_react.default.createElement(_.Icon,{name:\"home\",__source:{fileName:_jsxFileName,lineNumber:84}}),iconPosition:'right',__source:{fileName:_jsxFileName,lineNumber:82}}),_react.default.createElement(_.Button,{text:'Favorite',textColor:'#E91E63',borderSize:2,icon:_react.default.createElement(_.Icon,{name:\"favorite\",__source:{fileName:_jsxFileName,lineNumber:91}}),iconPosition:'right',__source:{fileName:_jsxFileName,lineNumber:87}}),_react.default.createElement(_.Button,{text:'Settings',icon:_react.default.createElement(_.Icon,{name:\"settings\",__source:{fileName:_jsxFileName,lineNumber:96}}),textColor:'#FF5722',radius:20,iconPosition:'right',__source:{fileName:_jsxFileName,lineNumber:94}}),_react.default.createElement(_.Button,{text:'Buy',ttextColor:'#673AB7',density:-2,icon:_react.default.createElement(_.Icon,{name:\"attach-money\",__source:{fileName:_jsxFileName,lineNumber:105}}),iconPosition:'right',__source:{fileName:_jsxFileName,lineNumber:101}}),_react.default.createElement(_.Button,{text:'Archive',textColor:'#009688',icon:_react.default.createElement(_.Icon,{name:\"archive\",__source:{fileName:_jsxFileName,lineNumber:111}}),iconPosition:'right',__source:{fileName:_jsxFileName,lineNumber:108}})));}).add('radius',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:118}},_react.default.createElement(_Header.default,{title:'Radius Text Button',__source:{fileName:_jsxFileName,lineNumber:119}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:121}},_react.default.createElement(_.Button,{text:'Home',radius:20,__source:{fileName:_jsxFileName,lineNumber:129}}),_react.default.createElement(_.Button,{text:'Favorite',textColor:'#E91E63',borderSize:2,radius:40,icon:_react.default.createElement(_.Icon,{name:\"favorite\",__source:{fileName:_jsxFileName,lineNumber:135}}),__source:{fileName:_jsxFileName,lineNumber:130}}),_react.default.createElement(_.Button,{text:'Settings',textColor:'#FF5722',radius:60,__source:{fileName:_jsxFileName,lineNumber:137}}),_react.default.createElement(_.Button,{text:'Buy',ttextColor:'#673AB7',density:-2,radius:0,icon:_react.default.createElement(_.Icon,{name:\"attach-money\",__source:{fileName:_jsxFileName,lineNumber:143}}),__source:{fileName:_jsxFileName,lineNumber:138}}),_react.default.createElement(_.Button,{text:'Archive',textColor:'#009688',radius:0,icon:_react.default.createElement(_.Icon,{name:\"archive\",__source:{fileName:_jsxFileName,lineNumber:149}}),__source:{fileName:_jsxFileName,lineNumber:145}})));}).add('density',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:155}},_react.default.createElement(_Header.default,{title:'Density Text Button',__source:{fileName:_jsxFileName,lineNumber:156}}),_react.default.createElement(_.BodyText,{text:'Density -1: 32px',style:{marginBottom:15},__source:{fileName:_jsxFileName,lineNumber:158}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:30},__source:{fileName:_jsxFileName,lineNumber:159}},_react.default.createElement(_.Button,{text:'Home',density:-1,__source:{fileName:_jsxFileName,lineNumber:167}}),_react.default.createElement(_.Button,{text:'Favorite',textColor:'#E91E63',borderSize:2,density:-1,icon:_react.default.createElement(_.Icon,{name:\"favorite\",__source:{fileName:_jsxFileName,lineNumber:173}}),__source:{fileName:_jsxFileName,lineNumber:168}}),_react.default.createElement(_.Button,{text:'Settings',textColor:'#FF5722',density:-1,radius:60,__source:{fileName:_jsxFileName,lineNumber:175}}),_react.default.createElement(_.Button,{text:'Buy',ttextColor:'#673AB7',density:-1,radius:0,icon:_react.default.createElement(_.Icon,{name:\"attach-money\",__source:{fileName:_jsxFileName,lineNumber:186}}),__source:{fileName:_jsxFileName,lineNumber:181}}),_react.default.createElement(_.Button,{text:'Archive',textColor:'#009688',density:-1,icon:_react.default.createElement(_.Icon,{name:\"archive\",__source:{fileName:_jsxFileName,lineNumber:192}}),__source:{fileName:_jsxFileName,lineNumber:188}})),_react.default.createElement(_.BodyText,{text:'Density -2: 28px',style:{marginBottom:15},__source:{fileName:_jsxFileName,lineNumber:196}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:30},__source:{fileName:_jsxFileName,lineNumber:197}},_react.default.createElement(_.Button,{text:'Home',density:-2,__source:{fileName:_jsxFileName,lineNumber:205}}),_react.default.createElement(_.Button,{text:'Favorite',textColor:'#E91E63',borderSize:2,density:-2,icon:_react.default.createElement(_.Icon,{name:\"favorite\",__source:{fileName:_jsxFileName,lineNumber:211}}),__source:{fileName:_jsxFileName,lineNumber:206}}),_react.default.createElement(_.Button,{text:'Settings',textColor:'#FF5722',density:-2,radius:60,__source:{fileName:_jsxFileName,lineNumber:213}}),_react.default.createElement(_.Button,{text:'Buy',ttextColor:'#673AB7',density:-2,radius:0,icon:_react.default.createElement(_.Icon,{name:\"attach-money\",__source:{fileName:_jsxFileName,lineNumber:224}}),__source:{fileName:_jsxFileName,lineNumber:219}}),_react.default.createElement(_.Button,{text:'Archive',textColor:'#009688',density:-2,icon:_react.default.createElement(_.Icon,{name:\"archive\",__source:{fileName:_jsxFileName,lineNumber:230}}),__source:{fileName:_jsxFileName,lineNumber:226}})),_react.default.createElement(_.BodyText,{text:'Density -3: 24px',style:{marginBottom:15},__source:{fileName:_jsxFileName,lineNumber:234}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:30},__source:{fileName:_jsxFileName,lineNumber:235}},_react.default.createElement(_.Button,{text:'Home',density:-3,__source:{fileName:_jsxFileName,lineNumber:243}}),_react.default.createElement(_.Button,{text:'Favorite',textColor:'#E91E63',borderSize:2,density:-3,icon:_react.default.createElement(_.Icon,{name:\"favorite\",__source:{fileName:_jsxFileName,lineNumber:249}}),__source:{fileName:_jsxFileName,lineNumber:244}}),_react.default.createElement(_.Button,{text:'Settings',textColor:'#FF5722',density:-3,radius:60,__source:{fileName:_jsxFileName,lineNumber:251}}),_react.default.createElement(_.Button,{text:'Buy',ttextColor:'#673AB7',density:-3,radius:0,icon:_react.default.createElement(_.Icon,{name:\"attach-money\",__source:{fileName:_jsxFileName,lineNumber:262}}),__source:{fileName:_jsxFileName,lineNumber:257}}),_react.default.createElement(_.Button,{text:'Archive',textColor:'#009688',density:-3,icon:_react.default.createElement(_.Icon,{name:\"archive\",__source:{fileName:_jsxFileName,lineNumber:268}}),__source:{fileName:_jsxFileName,lineNumber:264}})));}).add('loading',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:274}},_react.default.createElement(_Header.default,{title:'Loading Text Button',__source:{fileName:_jsxFileName,lineNumber:275}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:277}},_react.default.createElement(_.Button,{text:'Home',loading:true,hideLabel:true,__source:{fileName:_jsxFileName,lineNumber:285}}),_react.default.createElement(_.Button,{text:'Favorite',textColor:'#E91E63',borderSize:2,loading:true,hideLabel:true,icon:_react.default.createElement(_.Icon,{name:\"favorite\",__source:{fileName:_jsxFileName,lineNumber:292}}),__source:{fileName:_jsxFileName,lineNumber:286}}),_react.default.createElement(_.Button,{text:'Settings',textColor:'#FF5722',loading:true,hideLabel:true,radius:60,__source:{fileName:_jsxFileName,lineNumber:294}}),_react.default.createElement(_.Button,{text:'Buy',ttextColor:'#673AB7',density:-2,radius:0,loading:true,hideLabel:true,icon:_react.default.createElement(_.Icon,{name:\"attach-money\",__source:{fileName:_jsxFileName,lineNumber:308}}),__source:{fileName:_jsxFileName,lineNumber:301}}),_react.default.createElement(_.Button,{text:'Archive',textColor:'#009688',loading:true,hideLabel:true,icon:_react.default.createElement(_.Icon,{name:\"archive\",__source:{fileName:_jsxFileName,lineNumber:315}}),__source:{fileName:_jsxFileName,lineNumber:310}})));}).add('disabled',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:321}},_react.default.createElement(_Header.default,{title:'Disabled Text Button',__source:{fileName:_jsxFileName,lineNumber:322}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:324}},_react.default.createElement(_.Button,{text:'Home',disabled:true,__source:{fileName:_jsxFileName,lineNumber:332}}),_react.default.createElement(_.Button,{textColor:'#E91E63',borderSize:2,loading:true,disabled:true,__source:{fileName:_jsxFileName,lineNumber:333}}),_react.default.createElement(_.Button,{text:'Settings',textColor:'#FF5722',disabled:true,radius:60,__source:{fileName:_jsxFileName,lineNumber:334}}),_react.default.createElement(_.Button,{text:'Buy',ttextColor:'#673AB7',density:-2,radius:0,disabled:true,icon:_react.default.createElement(_.Icon,{name:\"attach-money\",__source:{fileName:_jsxFileName,lineNumber:341}}),__source:{fileName:_jsxFileName,lineNumber:335}}),_react.default.createElement(_.Button,{text:'Archive',textColor:'#009688',disabled:true,icon:_react.default.createElement(_.Icon,{name:\"archive\",__source:{fileName:_jsxFileName,lineNumber:347}}),__source:{fileName:_jsxFileName,lineNumber:343}})));}).add('full width',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:353}},_react.default.createElement(_Header.default,{title:'Full Width Text Button',__source:{fileName:_jsxFileName,lineNumber:354}}),_react.default.createElement(_.Button,{fullWidth:true,text:'Text',style:{marginBottom:8},__source:{fileName:_jsxFileName,lineNumber:355}}),_react.default.createElement(_.Button,{fullWidth:true,text:'Radius',textColor:'#009688',style:{marginBottom:8},radius:40,__source:{fileName:_jsxFileName,lineNumber:356}}),_react.default.createElement(_.Button,{fullWidth:true,text:'Icon',icon:_react.default.createElement(_.Icon,{name:\"favorite\",__source:{fileName:_jsxFileName,lineNumber:366}}),textColor:'#E91E63',style:{marginBottom:8},__source:{fileName:_jsxFileName,lineNumber:363}}),_react.default.createElement(_.Button,{fullWidth:true,textColor:'#FF5722',loading:true,style:{marginBottom:8},__source:{fileName:_jsxFileName,lineNumber:370}}),_react.default.createElement(_.Button,{fullWidth:true,text:'Disabled',textColor:'#673AB7',disabled:true,style:{marginBottom:8},__source:{fileName:_jsxFileName,lineNumber:376}}));});exports.default=_default;"
  },
  {
    "path": "dist/Components/Button/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _Button.default;}});var _Button=_interopRequireDefault(require(\"./Button\"));"
  },
  {
    "path": "dist/Components/Card/Card.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _reactNative=require(\"react-native\");var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _=require(\"../..\");var _Ripple=_interopRequireDefault(require(\"../Ripple/Ripple\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Card/Card.js\";var Card=function(_Component){(0,_inherits2.default)(Card,_Component);function Card(){(0,_classCallCheck2.default)(this,Card);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(Card).apply(this,arguments));}(0,_createClass2.default)(Card,[{key:\"_renderRipple\",value:function _renderRipple(){var _this$props=this.props,children=_this$props.children,onPress=_this$props.onPress,rippleProps=_this$props.rippleProps;return _react.default.createElement(_Ripple.default,(0,_extends2.default)({Press:onPress},rippleProps,{__source:{fileName:_jsxFileName,lineNumber:28}}),children);}},{key:\"render\",value:function render(){var _this$props2=this.props,style=_this$props2.style,outlined=_this$props2.outlined,radius=_this$props2.radius,onPress=_this$props2.onPress,shadow=_this$props2.shadow,children=_this$props2.children,testID=_this$props2.testID;return _react.default.createElement(_.Paper,{shadow:shadow,radius:radius,style:[style,{borderWidth:outlined?_reactNative.StyleSheet.hairlineWidth:0,borderBottomColor:'rgba(0,0,0,.4)',maxWidth:500}],testID:testID,__source:{fileName:_jsxFileName,lineNumber:46}},onPress?this._renderRipple():children);}}]);return Card;}(_react.Component);(0,_defineProperty2.default)(Card,\"propTypes\",{children:_propTypes.default.node,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),outlined:_propTypes.default.bool,shadow:_propTypes.default.number,radius:_propTypes.default.number,onPress:_propTypes.default.func,rippleProps:_propTypes.default.object,testID:_propTypes.default.string});(0,_defineProperty2.default)(Card,\"defaultProps\",{radius:4,shadow:1});var _default=(0,_withTheme.default)(Card);exports.default=_default;"
  },
  {
    "path": "dist/Components/Card/Card.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _reactNative=require(\"react-native\");var _=require(\"../../\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Card/Card.stories.js\";var _default=(0,_storiesOf.storiesOf)('Components|Card',module).addParameters({jest:['Card']}).add('simple',function(){return _react.default.createElement(_Container.default,{scroll:true,__source:{fileName:_jsxFileName,lineNumber:24}},_react.default.createElement(_Header.default,{title:'Simple Card',__source:{fileName:_jsxFileName,lineNumber:25}}),_react.default.createElement(_reactNative.View,{style:{borderColor:'red',borderWidth:2,flex:1,alignItems:'center',justifyContent:'space-around',height:400},__source:{fileName:_jsxFileName,lineNumber:26}},_react.default.createElement(_.Card,{onPress:function onPress(){},__source:{fileName:_jsxFileName,lineNumber:35}},_react.default.createElement(_reactNative.Text,{__source:{fileName:_jsxFileName,lineNumber:36}},\"Hello\"))),_react.default.createElement(_.Card,{style:{flex:1,marginBottom:20,padding:16,maxWidth:400},__source:{fileName:_jsxFileName,lineNumber:39}},_react.default.createElement(_reactNative.Text,{style:{fontSize:14,textAlign:'center',marginBottom:8},__source:{fileName:_jsxFileName,lineNumber:40}},\"This is a simple card with a button\"),_react.default.createElement(_.Button,{type:'flat',text:\"Card button\",__source:{fileName:_jsxFileName,lineNumber:43}})),_react.default.createElement(_.Card,{style:{flex:1,marginBottom:20,padding:16,maxWidth:400},shadow:5,__source:{fileName:_jsxFileName,lineNumber:46}},_react.default.createElement(_reactNative.Text,{style:{fontSize:14,textAlign:'center',marginBottom:8},__source:{fileName:_jsxFileName,lineNumber:49}},\"This one has more shadow\"),_react.default.createElement(_.Button,{type:'flat',text:\"Card button\",style:{marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:52}}),_react.default.createElement(_.Button,{type:'flat',color:'#E91E63',text:\"Card button\",__source:{fileName:_jsxFileName,lineNumber:53}})),_react.default.createElement(_.Card,{style:{flex:1,marginBottom:20,padding:16,maxWidth:400},shadow:8,__source:{fileName:_jsxFileName,lineNumber:56}},_react.default.createElement(_reactNative.Text,{style:{fontSize:14,textAlign:'center',marginBottom:8},__source:{fileName:_jsxFileName,lineNumber:59}},\"This one has more shadow\"),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',justifyContent:'space-between',marginTop:20},__source:{fileName:_jsxFileName,lineNumber:62}},_react.default.createElement(_.Button,{type:'flat',text:\"Card button\",__source:{fileName:_jsxFileName,lineNumber:68}}),_react.default.createElement(_.Button,{type:'flat',color:'#E91E63',text:\"Card button\",__source:{fileName:_jsxFileName,lineNumber:69}}))),_react.default.createElement(_.Card,{style:{flex:1,marginBottom:20,padding:16,maxWidth:400},radius:20,shadow:5,__source:{fileName:_jsxFileName,lineNumber:72}},_react.default.createElement(_reactNative.Text,{style:{fontSize:14,textAlign:'center',marginBottom:8},__source:{fileName:_jsxFileName,lineNumber:76}},\"This one has more radius\"),_react.default.createElement(_.Button,{type:'flat',text:\"Card button\",__source:{fileName:_jsxFileName,lineNumber:79}})),_react.default.createElement(_.Card,{style:{flex:1,marginBottom:20,padding:16,maxWidth:400,maxHeight:400},radius:200,shadow:5,__source:{fileName:_jsxFileName,lineNumber:81}},_react.default.createElement(_reactNative.Text,{style:{fontSize:14,textAlign:'center',marginBottom:8},__source:{fileName:_jsxFileName,lineNumber:91}},\"This one has more radius\"),_react.default.createElement(_.Button,{type:'flat',text:\"Card button\",__source:{fileName:_jsxFileName,lineNumber:94}})),_react.default.createElement(_.Card,{style:{flex:1,marginBottom:20,padding:16},__source:{fileName:_jsxFileName,lineNumber:96}},_react.default.createElement(_reactNative.Text,{style:{fontSize:14,textAlign:'center',marginBottom:8},__source:{fileName:_jsxFileName,lineNumber:97}},\"This is one takes up the full width\"),_react.default.createElement(_.Button,{type:'flat',text:\"Card button\",__source:{fileName:_jsxFileName,lineNumber:100}})));}).add('full card',function(){return _react.default.createElement(_Container.default,{scroll:true,__source:{fileName:_jsxFileName,lineNumber:105}},_react.default.createElement(_Header.default,{title:'Full Card',__source:{fileName:_jsxFileName,lineNumber:106}}),_react.default.createElement(_.Card,{style:{maxWidth:400,width:'100%',marginBottom:50},__source:{fileName:_jsxFileName,lineNumber:108}},_react.default.createElement(_.CardHeader,{thumbnail:_react.default.createElement(_.Avatar,{type:\"image\",image:_react.default.createElement(_reactNative.Image,{source:{uri:'https://images.pexels.com/photos/2906664/pexels-photo-2906664.png?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'},__source:{fileName:_jsxFileName,lineNumber:114}}),size:48,__source:{fileName:_jsxFileName,lineNumber:111}}),title:'Title',subtitle:'Metadata',action:_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center'},__source:{fileName:_jsxFileName,lineNumber:127}},_react.default.createElement(_.IconButton,{name:\"favorite-border\",size:24,color:'rgba(0,0,0,.47)',__source:{fileName:_jsxFileName,lineNumber:132}}),_react.default.createElement(_.IconButton,{style:{marginLeft:12},name:\"share\",size:24,color:'rgba(0,0,0,.47)',__source:{fileName:_jsxFileName,lineNumber:137}}),_react.default.createElement(_.IconButton,{style:{marginLeft:12},name:\"more-vert\",size:24,color:'rgba(0,0,0,.47)',__source:{fileName:_jsxFileName,lineNumber:143}})),__source:{fileName:_jsxFileName,lineNumber:109}}),_react.default.createElement(_.CardMedia,{image:_react.default.createElement(_reactNative.Image,{style:{flex:1,width:'100%'},source:{uri:'https://images.pexels.com/photos/994605/pexels-photo-994605.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'},resizeMode:\"cover\",__source:{fileName:_jsxFileName,lineNumber:154}}),__source:{fileName:_jsxFileName,lineNumber:152}}),_react.default.createElement(_.CardContent,{__source:{fileName:_jsxFileName,lineNumber:164}},_react.default.createElement(_reactNative.Text,{style:{fontSize:18,fontWeight:'500',marginBottom:8},__source:{fileName:_jsxFileName,lineNumber:165}},\"Title\"),_react.default.createElement(_reactNative.Text,{style:{fontSize:14,marginBottom:16},__source:{fileName:_jsxFileName,lineNumber:173}},\"Metadata\"),_react.default.createElement(_reactNative.Text,{style:{fontSize:16},__source:{fileName:_jsxFileName,lineNumber:174}},\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce neque felis, eleifend in dolor eu, pellentesque finibus erat. Vestibulum eleifend sapien et felis pulvinar cursus.\")),_react.default.createElement(_.CardActions,{rightActionItems:[{name:'favorite-border'},{name:'share'},{name:'more-vert'}],__source:{fileName:_jsxFileName,lineNumber:180}})),_react.default.createElement(_.Card,{style:{maxWidth:400,width:'100%',marginBottom:50},__source:{fileName:_jsxFileName,lineNumber:189}},_react.default.createElement(_.CardHeader,{thumbnail:_react.default.createElement(_.Avatar,{type:\"image\",image:_react.default.createElement(_reactNative.Image,{source:{uri:'https://www.hbo.com/content/dam/hbodata/series/game-of-thrones/character/s5/john-snow-1920.jpg/_jcr_content/renditions/cq5dam.web.1200.675.jpeg'},__source:{fileName:_jsxFileName,lineNumber:195}}),size:40,__source:{fileName:_jsxFileName,lineNumber:192}}),title:'Jon Snow',subtitle:'Knows Nothing, KingofDaNorth',action:_react.default.createElement(_.IconButton,{name:\"more-vert\",size:24,__source:{fileName:_jsxFileName,lineNumber:207}}),__source:{fileName:_jsxFileName,lineNumber:190}}),_react.default.createElement(_.CardMedia,{image:_react.default.createElement(_reactNative.Image,{style:{flex:1,width:'100%'},source:{uri:'https://i.redd.it/zj9vfr7uuljz.png'},resizeMode:\"cover\",__source:{fileName:_jsxFileName,lineNumber:211}}),__source:{fileName:_jsxFileName,lineNumber:209}}),_react.default.createElement(_.CardContent,{__source:{fileName:_jsxFileName,lineNumber:218}},_react.default.createElement(_reactNative.Text,{style:{fontSize:18,fontWeight:'500',marginBottom:8},__source:{fileName:_jsxFileName,lineNumber:219}},\"Prince of Dragonstone\"),_react.default.createElement(_reactNative.Text,{style:{fontSize:14,marginBottom:16},__source:{fileName:_jsxFileName,lineNumber:227}},\"You've got the North in you\"),_react.default.createElement(_reactNative.Text,{style:{fontSize:16},__source:{fileName:_jsxFileName,lineNumber:230}},\"Ran out of bleach for beard, but Daenerys says it looks cool.\")),_react.default.createElement(_.CardActions,{rightActionItems:[{name:'thumb-up'},{name:'share'}],__source:{fileName:_jsxFileName,lineNumber:234}})),_react.default.createElement(_.Card,{style:{maxWidth:400,width:'100%',marginBottom:50},__source:{fileName:_jsxFileName,lineNumber:239}},_react.default.createElement(_.CardMedia,{image:_react.default.createElement(_reactNative.Image,{style:{flex:1,width:'100%'},source:{uri:'https://images.pexels.com/photos/1451360/pexels-photo-1451360.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'},resizeMode:\"cover\",__source:{fileName:_jsxFileName,lineNumber:242}}),__source:{fileName:_jsxFileName,lineNumber:240}}),_react.default.createElement(_.CardContent,{__source:{fileName:_jsxFileName,lineNumber:252}},_react.default.createElement(_reactNative.View,{style:{flexDirection:'row'},__source:{fileName:_jsxFileName,lineNumber:253}},_react.default.createElement(_.Avatar,{type:\"image\",image:_react.default.createElement(_reactNative.Image,{source:{uri:'https://upload.wikimedia.org/wikipedia/en/thumb/7/74/Anakin-Jedi.jpg/220px-Anakin-Jedi.jpg'},__source:{fileName:_jsxFileName,lineNumber:257}}),size:40,__source:{fileName:_jsxFileName,lineNumber:254}}),_react.default.createElement(_reactNative.Text,{style:{color:'rgba(0,0,0,.6)',fontSize:14,marginLeft:16},__source:{fileName:_jsxFileName,lineNumber:266}},\"I don't like sand. It's coarse and rough and irritating and it gets everywhere.\")))));}).add('clickable',function(){return _react.default.createElement(_Container.default,{scroll:true,__source:{fileName:_jsxFileName,lineNumber:277}},_react.default.createElement(_Header.default,{title:'Clickable Card',__source:{fileName:_jsxFileName,lineNumber:278}}),_react.default.createElement(_reactNative.ScrollView,{horizontal:true,scrollEnabled:true,__source:{fileName:_jsxFileName,lineNumber:279}},_react.default.createElement(_reactNative.View,{style:{flexDirection:'row'},__source:{fileName:_jsxFileName,lineNumber:280}},_react.default.createElement(_.Card,{style:{maxWidth:150,width:'100%',marginBottom:50,marginRight:4},shadow:4,onPress:function onPress(){return console.log('clicked dog');},__source:{fileName:_jsxFileName,lineNumber:281}},_react.default.createElement(_.CardMedia,{image:_react.default.createElement(_reactNative.Image,{style:{flex:1,width:'100%'},source:{uri:'https://images.pexels.com/photos/86405/penguin-funny-blue-water-86405.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'},resizeMode:\"cover\",__source:{fileName:_jsxFileName,lineNumber:292}}),__source:{fileName:_jsxFileName,lineNumber:290}}),_react.default.createElement(_.CardContent,{__source:{fileName:_jsxFileName,lineNumber:302}},_react.default.createElement(_reactNative.Text,{style:{color:'rgba(0,0,0,.6)',fontSize:16,fontWeight:'600',marginBottom:6},__source:{fileName:_jsxFileName,lineNumber:303}},\"Penguin\"))),_react.default.createElement(_.Card,{style:{maxWidth:150,width:'100%',marginBottom:50,marginRight:4},shadow:4,onPress:function onPress(){return console.log('clicked dog');},__source:{fileName:_jsxFileName,lineNumber:314}},_react.default.createElement(_.CardMedia,{image:_react.default.createElement(_reactNative.Image,{style:{flex:1,width:'100%'},source:{uri:'https://images.pexels.com/photos/460823/pexels-photo-460823.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'},resizeMode:\"cover\",__source:{fileName:_jsxFileName,lineNumber:325}}),__source:{fileName:_jsxFileName,lineNumber:323}}),_react.default.createElement(_.CardContent,{__source:{fileName:_jsxFileName,lineNumber:335}},_react.default.createElement(_reactNative.Text,{style:{color:'rgba(0,0,0,.6)',fontSize:16,fontWeight:'600',marginBottom:6},__source:{fileName:_jsxFileName,lineNumber:336}},\"Pup\"))),_react.default.createElement(_.Card,{style:{maxWidth:150,width:'100%',marginBottom:50},shadow:4,onPress:function onPress(){return console.log('clicked dog');},__source:{fileName:_jsxFileName,lineNumber:347}},_react.default.createElement(_.CardMedia,{image:_react.default.createElement(_reactNative.Image,{style:{flex:1,width:'100%'},source:{uri:'https://images.pexels.com/photos/1661535/pexels-photo-1661535.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'},resizeMode:\"cover\",__source:{fileName:_jsxFileName,lineNumber:353}}),__source:{fileName:_jsxFileName,lineNumber:351}}),_react.default.createElement(_.CardContent,{__source:{fileName:_jsxFileName,lineNumber:363}},_react.default.createElement(_reactNative.Text,{style:{color:'rgba(0,0,0,.6)',fontSize:16,fontWeight:'600',marginBottom:6},__source:{fileName:_jsxFileName,lineNumber:364}},\"Panda\"))))),_react.default.createElement(_.Card,{style:{maxWidth:300,width:'100%',marginBottom:50},shadow:4,onPress:function onPress(){return console.log('clicked dog');},__source:{fileName:_jsxFileName,lineNumber:378}},_react.default.createElement(_.CardMedia,{image:_react.default.createElement(_reactNative.Image,{style:{flex:1,width:'100%'},source:{uri:'https://images.pexels.com/photos/1124002/pexels-photo-1124002.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'},resizeMode:\"cover\",__source:{fileName:_jsxFileName,lineNumber:384}}),__source:{fileName:_jsxFileName,lineNumber:382}}),_react.default.createElement(_.CardContent,{__source:{fileName:_jsxFileName,lineNumber:394}},_react.default.createElement(_reactNative.Text,{style:{color:'rgba(0,0,0,.6)',fontSize:16,fontWeight:'600',marginBottom:6},__source:{fileName:_jsxFileName,lineNumber:395}},\"Dog\"),_react.default.createElement(_reactNative.Text,{style:{color:'rgba(0,0,0,.6)',fontSize:14},__source:{fileName:_jsxFileName,lineNumber:404}},\"The domestic dog is a member of the genus Canis (canines), which forms part of the wolf-like canids, and is the most widely abundant terrestrial carnivore.\"))),_react.default.createElement(_.Card,{style:{maxWidth:400,width:'100%',marginBottom:50},__source:{fileName:_jsxFileName,lineNumber:412}},_react.default.createElement(_.Ripple,{onPress:function onPress(){return console.log('pressed action');},__source:{fileName:_jsxFileName,lineNumber:413}},_react.default.createElement(_.CardMedia,{image:_react.default.createElement(_reactNative.Image,{style:{flex:1,width:'100%'},source:{uri:'https://images.pexels.com/photos/39571/gorilla-silverback-animal-silvery-grey-39571.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'},resizeMode:\"cover\",__source:{fileName:_jsxFileName,lineNumber:416}}),__source:{fileName:_jsxFileName,lineNumber:414}}),_react.default.createElement(_.CardContent,{__source:{fileName:_jsxFileName,lineNumber:426}},_react.default.createElement(_reactNative.Text,{style:{color:'rgba(0,0,0,.6)',fontSize:16,fontWeight:'600',marginBottom:6},__source:{fileName:_jsxFileName,lineNumber:427}},\"Gorilla\"),_react.default.createElement(_reactNative.Text,{style:{color:'rgba(0,0,0,.6)',fontSize:14},__source:{fileName:_jsxFileName,lineNumber:436}},\"Gorillas are ground-dwelling, predominantly herbivorous apes that inhabit the forests of central Sub-Saharan Africa.\"))),_react.default.createElement(_.CardActions,{leftActionItems:[{name:'share'},{name:'learn more'}],__source:{fileName:_jsxFileName,lineNumber:442}})));}).add('CardActions',function(){return _react.default.createElement(_Container.default,{scroll:true,__source:{fileName:_jsxFileName,lineNumber:449}},_react.default.createElement(_Header.default,{title:'Card Actions',__source:{fileName:_jsxFileName,lineNumber:450}}),_react.default.createElement(_.Card,{style:{maxWidth:400,width:'100%'},__source:{fileName:_jsxFileName,lineNumber:452}},_react.default.createElement(_.CardMedia,{image:_react.default.createElement(_reactNative.Image,{style:{flex:1,width:'100%'},source:{uri:'https://images.pexels.com/photos/1938123/pexels-photo-1938123.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'},resizeMode:\"cover\",__source:{fileName:_jsxFileName,lineNumber:455}}),__source:{fileName:_jsxFileName,lineNumber:453}}),_react.default.createElement(_.CardContent,{__source:{fileName:_jsxFileName,lineNumber:465}},_react.default.createElement(_reactNative.Text,{style:{color:'rgba(0,0,0,.6)',fontSize:14},__source:{fileName:_jsxFileName,lineNumber:466}},\"Fact: dogs make everything better\")),_react.default.createElement(_.CardActions,{leftActionItems:[{name:'share'},{name:'learn more'}],rightActionItems:[{name:'favorite'},{name:'share'}],__source:{fileName:_jsxFileName,lineNumber:470}})));}).add('CardContent',function(){return _react.default.createElement(_Container.default,{scroll:true,__source:{fileName:_jsxFileName,lineNumber:478}},_react.default.createElement(_Header.default,{title:'Card Content',__source:{fileName:_jsxFileName,lineNumber:479}}),_react.default.createElement(_.Card,{style:{maxWidth:400,width:'100%'},__source:{fileName:_jsxFileName,lineNumber:480}},_react.default.createElement(_.CardMedia,{image:_react.default.createElement(_reactNative.Image,{style:{flex:1,width:'100%'},source:{uri:'https://images.pexels.com/photos/1124002/pexels-photo-1124002.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'},resizeMode:\"cover\",__source:{fileName:_jsxFileName,lineNumber:483}}),__source:{fileName:_jsxFileName,lineNumber:481}}),_react.default.createElement(_.CardContent,{__source:{fileName:_jsxFileName,lineNumber:493}},_react.default.createElement(_reactNative.Text,{style:{color:'rgba(0,0,0,.6)',fontSize:16,fontWeight:'600',marginBottom:10},__source:{fileName:_jsxFileName,lineNumber:494}},\"Reasons dogs are the best:\"),_react.default.createElement(_reactNative.View,{style:{marginLeft:8},__source:{fileName:_jsxFileName,lineNumber:503}},_react.default.createElement(_reactNative.Text,{style:{color:'rgba(0,0,0,.6)',fontSize:14},__source:{fileName:_jsxFileName,lineNumber:504}},\"- Man's best friend\"),_react.default.createElement(_reactNative.Text,{style:{color:'rgba(0,0,0,.6)',fontSize:14},__source:{fileName:_jsxFileName,lineNumber:507}},\"- Some have jobs\"),_react.default.createElement(_reactNative.Text,{style:{color:'rgba(0,0,0,.6)',fontSize:14},__source:{fileName:_jsxFileName,lineNumber:510}},\"- See image\"))),_react.default.createElement(_.CardActions,{rightActionItems:[_react.default.createElement(_.Badge,{key:2,content:99,__source:{fileName:_jsxFileName,lineNumber:517}},_react.default.createElement(_.IconButton,{name:\"favorite\",color:'#F44336',size:24,__source:{fileName:_jsxFileName,lineNumber:518}})),{name:'share'}],__source:{fileName:_jsxFileName,lineNumber:515}})),_react.default.createElement(_.Card,{style:{maxWidth:500,width:500,boxSizing:'borderbox',marginTop:40},__source:{fileName:_jsxFileName,lineNumber:525}},_react.default.createElement(_.CardContent,{__source:{fileName:_jsxFileName,lineNumber:532}},_react.default.createElement(_reactNative.View,{style:{flexDirection:'row'},__source:{fileName:_jsxFileName,lineNumber:533}},_react.default.createElement(_reactNative.View,{style:{flex:1,padding:8},__source:{fileName:_jsxFileName,lineNumber:534}},_react.default.createElement(_reactNative.Text,{style:{color:'rgba(0,0,0,.6)',fontSize:16,fontWeight:'600'},__source:{fileName:_jsxFileName,lineNumber:535}},\"Jon\"),_react.default.createElement(_reactNative.Text,{style:{color:'rgba(0,0,0,1)',fontSize:20,fontWeight:'600',marginBottom:10},__source:{fileName:_jsxFileName,lineNumber:543}},\"Stewart\"),_react.default.createElement(_reactNative.Text,{style:{color:'rgba(0,0,0,.6)',fontSize:14,flexWrap:'wrap'},__source:{fileName:_jsxFileName,lineNumber:552}},\"American comedian, writer, producer, director, activist, political commentator, actor, and television host.\")),_react.default.createElement(_reactNative.View,{style:{flex:1,overflow:'hidden'},__source:{fileName:_jsxFileName,lineNumber:562}},_react.default.createElement(_reactNative.Image,{style:{width:250,height:200},source:{uri:'https://www.biography.com/.image/t_share/MTE5NTU2MzE2NDkyNjI5NTE1/jon-stewart-16242282-1-402.jpg'},__source:{fileName:_jsxFileName,lineNumber:563}}))))));}).add('CardHeader',function(){return _react.default.createElement(_Container.default,{scroll:true,__source:{fileName:_jsxFileName,lineNumber:578}},_react.default.createElement(_Header.default,{title:'Card Media',__source:{fileName:_jsxFileName,lineNumber:579}}),_react.default.createElement(_.Card,{style:{maxWidth:400,width:'100%'},__source:{fileName:_jsxFileName,lineNumber:580}},_react.default.createElement(_.CardHeader,{thumbnail:_react.default.createElement(_.Avatar,{type:\"image\",image:_react.default.createElement(_reactNative.Image,{source:{uri:'http://assets1.ignimgs.com/2014/04/07/marioignpng-e324a5_1280w.png'},__source:{fileName:_jsxFileName,lineNumber:586}}),size:40,__source:{fileName:_jsxFileName,lineNumber:583}}),title:'Mario',subtitle:'Hero. Plumber. Brother.',action:_react.default.createElement(_.IconButton,{name:\"more-vert\",size:24,color:'rgba(0,0,0,.54)',__source:{fileName:_jsxFileName,lineNumber:599}}),__source:{fileName:_jsxFileName,lineNumber:581}}),_react.default.createElement(_.CardMedia,{image:_react.default.createElement(_reactNative.Image,{style:{flex:1,width:'100%'},source:{uri:'https://i.redd.it/tr8wgp1ysulz.png'},resizeMode:\"cover\",__source:{fileName:_jsxFileName,lineNumber:604}}),__source:{fileName:_jsxFileName,lineNumber:602}}),_react.default.createElement(_.CardContent,{__source:{fileName:_jsxFileName,lineNumber:611}},_react.default.createElement(_reactNative.Text,{__source:{fileName:_jsxFileName,lineNumber:612}},\"Movember is over.\")),_react.default.createElement(_.CardActions,{rightActionItems:[{name:'reply'},{name:'thumb-up'},{name:'share'}],__source:{fileName:_jsxFileName,lineNumber:614}})),_react.default.createElement(_.Card,{style:{maxWidth:400,width:'100%',marginTop:60},radius:1,shadow:4,__source:{fileName:_jsxFileName,lineNumber:622}},_react.default.createElement(_.CardHeader,{subtitle:'Mario - 25 mins ago',style:{alignItems:'center',borderBottom:'none',paddingBottom:0},action:_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center'},__source:{fileName:_jsxFileName,lineNumber:634}},_react.default.createElement(_.IconButton,{name:\"star\",size:24,color:'rgba(0,0,0,.47)',__source:{fileName:_jsxFileName,lineNumber:639}}),_react.default.createElement(_.IconButton,{name:\"delete\",size:24,color:'rgba(0,0,0,.47)',__source:{fileName:_jsxFileName,lineNumber:640}}),_react.default.createElement(_.IconButton,{name:\"more-vert\",size:24,color:'rgba(0,0,0,.47)',__source:{fileName:_jsxFileName,lineNumber:641}}),_react.default.createElement(_.Avatar,{type:\"image\",image:_react.default.createElement(_reactNative.Image,{source:{uri:'http://assets1.ignimgs.com/2014/04/07/marioignpng-e324a5_1280w.png'},__source:{fileName:_jsxFileName,lineNumber:649}}),size:40,__source:{fileName:_jsxFileName,lineNumber:646}})),__source:{fileName:_jsxFileName,lineNumber:626}},_react.default.createElement(_reactNative.Text,{__source:{fileName:_jsxFileName,lineNumber:660}},\"Mario - 25 mins ago\")),_react.default.createElement(_.CardContent,{style:{paddingTop:4,paddingBottom:16},__source:{fileName:_jsxFileName,lineNumber:663}},_react.default.createElement(_reactNative.Text,{style:{color:'rgba(0,0,0,1)',fontSize:16,marginBottom:4},__source:{fileName:_jsxFileName,lineNumber:664}},\"Where is the Princess?\"),_react.default.createElement(_reactNative.Text,{style:{color:'rgba(0,0,0,.6)',fontSize:14},__source:{fileName:_jsxFileName,lineNumber:668}},\"I've defeated Bowser in 6 castles and still no Prin...\"))));}).add('CardMedia',function(){return _react.default.createElement(_Container.default,{scroll:true,__source:{fileName:_jsxFileName,lineNumber:676}},_react.default.createElement(_Header.default,{title:'Card Media',__source:{fileName:_jsxFileName,lineNumber:677}}),_react.default.createElement(_.Card,{style:{maxWidth:400,width:'100%'},__source:{fileName:_jsxFileName,lineNumber:679}},_react.default.createElement(_.CardMedia,{title:'Top ten books',subtitle:'by Cody',image:_react.default.createElement(_reactNative.Image,{style:{flex:1,width:'100%'},source:{uri:'https://images.pexels.com/photos/34620/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'},resizeMode:\"cover\",__source:{fileName:_jsxFileName,lineNumber:684}}),__source:{fileName:_jsxFileName,lineNumber:680}}),_react.default.createElement(_.CardContent,{__source:{fileName:_jsxFileName,lineNumber:694}},_react.default.createElement(_reactNative.Text,{style:{color:'rgba(0,0,0,.6)',fontSize:14},__source:{fileName:_jsxFileName,lineNumber:695}},\"Books ranked with arbitrary bias, inconsistent logic, and strong opinions.\")),_react.default.createElement(_.CardActions,{leftActionItems:[{name:'Read'}],rightActionItems:[{name:'favorite'},{name:'share'}],__source:{fileName:_jsxFileName,lineNumber:700}})),_react.default.createElement(_.Card,{style:{maxWidth:400,width:'100%',marginTop:40},__source:{fileName:_jsxFileName,lineNumber:706}},_react.default.createElement(_.CardMedia,{title:'Flights now 30% off',image:_react.default.createElement(_reactNative.Image,{style:{flex:1,width:'100%'},source:{uri:'https://images.pexels.com/photos/59519/pexels-photo-59519.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'},resizeMode:\"cover\",__source:{fileName:_jsxFileName,lineNumber:710}}),__source:{fileName:_jsxFileName,lineNumber:707}}),_react.default.createElement(_.CardActions,{rightActionItems:[_react.default.createElement(_.Button,{key:1,text:'Learn More',__source:{fileName:_jsxFileName,lineNumber:723}}),_react.default.createElement(_.Button,{key:2,text:'Buy Now',type:\"contained\",__source:{fileName:_jsxFileName,lineNumber:724}})],__source:{fileName:_jsxFileName,lineNumber:721}})));});exports.default=_default;"
  },
  {
    "path": "dist/Components/Card/Card.styles.js",
    "content": ""
  },
  {
    "path": "dist/Components/Card/CardActions/CardActions.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _reactNative=require(\"react-native\");var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _Button=_interopRequireDefault(require(\"../../Button/Button\"));var _IconButton=_interopRequireDefault(require(\"../../IconButton/IconButton\"));var _CardActions=_interopRequireDefault(require(\"./CardActions.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Card/CardActions/CardActions.js\";var CardActions=function(_Component){(0,_inherits2.default)(CardActions,_Component);function CardActions(){(0,_classCallCheck2.default)(this,CardActions);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(CardActions).apply(this,arguments));}(0,_createClass2.default)(CardActions,[{key:\"_leftActionItems\",value:function _leftActionItems(){var leftActionItems=this.props.leftActionItems;return leftActionItems.map(function(item){if(item.name){return _react.default.createElement(_Button.default,{key:item.name,onPress:item.onPress,text:item.name,__source:{fileName:_jsxFileName,lineNumber:22}});}else{return item;}});}},{key:\"_rightActionItems\",value:function _rightActionItems(){var rightActionItems=this.props.rightActionItems;return rightActionItems.map(function(item){if(item.name){return _react.default.createElement(_IconButton.default,{key:item.name,onPress:item.onPress,name:item.name,size:item.size?item.size:24,color:item.color?item.color:'rgba(0,0,0,.54)',style:{marginLeft:16},__source:{fileName:_jsxFileName,lineNumber:34}});}else{return item;}});}},{key:\"render\",value:function render(){var _this$props=this.props,style=_this$props.style,leftActionItems=_this$props.leftActionItems,rightActionItems=_this$props.rightActionItems;return _react.default.createElement(_reactNative.View,{style:[_CardActions.default.container,style],__source:{fileName:_jsxFileName,lineNumber:52}},_react.default.createElement(_reactNative.View,{style:_CardActions.default.actions,__source:{fileName:_jsxFileName,lineNumber:53}},leftActionItems&&this._leftActionItems()),_react.default.createElement(_reactNative.View,{style:_CardActions.default.moreActions,__source:{fileName:_jsxFileName,lineNumber:56}},rightActionItems&&this._rightActionItems()));}}]);return CardActions;}(_react.Component);(0,_defineProperty2.default)(CardActions,\"propTypes\",{children:_propTypes.default.node,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),leftActionItems:_propTypes.default.array,rightActionItems:_propTypes.default.array});var _default=(0,_withTheme.default)(CardActions);exports.default=_default;"
  },
  {
    "path": "dist/Components/Card/CardActions/CardActions.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({container:{padding:24,paddingTop:16,flexDirection:'row',justifyContent:'space-between',alignItems:'center',flexWrap:'wrap'},actions:{flexDirection:'row',alignItems:'center'},moreActions:{flexDirection:'row',alignItems:'center'}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Card/CardActions/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _CardActions.default;}});var _CardActions=_interopRequireDefault(require(\"./CardActions\"));"
  },
  {
    "path": "dist/Components/Card/CardContent/CardContent.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _reactNative=require(\"react-native\");var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _Ripple=_interopRequireDefault(require(\"../../Ripple/Ripple\"));var _CardContent=_interopRequireDefault(require(\"./CardContent.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Card/CardContent/CardContent.js\";var CardContent=function(_Component){(0,_inherits2.default)(CardContent,_Component);function CardContent(){(0,_classCallCheck2.default)(this,CardContent);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(CardContent).apply(this,arguments));}(0,_createClass2.default)(CardContent,[{key:\"render\",value:function render(){var _this$props=this.props,children=_this$props.children,style=_this$props.style,onPress=_this$props.onPress,rippleProps=_this$props.rippleProps;if(onPress){return _react.default.createElement(_Ripple.default,(0,_extends2.default)({style:[{padding:40},style],onPress:onPress},rippleProps,{__source:{fileName:_jsxFileName,lineNumber:20}}),children);}return _react.default.createElement(_reactNative.View,{style:[_CardContent.default.contentContainer,style],__source:{fileName:_jsxFileName,lineNumber:29}},children);}}]);return CardContent;}(_react.Component);(0,_defineProperty2.default)(CardContent,\"propTypes\",{children:_propTypes.default.node,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),rippleProps:_propTypes.default.object,onPress:_propTypes.default.func});var _default=(0,_withTheme.default)(CardContent);exports.default=_default;"
  },
  {
    "path": "dist/Components/Card/CardContent/CardContent.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({contentContainer:{padding:24,fontSize:16,color:'#000000',lineHeight:24,letterSpacing:0.44}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Card/CardContent/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _CardContent.default;}});var _CardContent=_interopRequireDefault(require(\"./CardContent\"));"
  },
  {
    "path": "dist/Components/Card/CardHeader/CardHeader.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _reactNative=require(\"react-native\");var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _CardHeader=_interopRequireDefault(require(\"./CardHeader.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Card/CardHeader/CardHeader.js\";var CardHeader=function(_Component){(0,_inherits2.default)(CardHeader,_Component);function CardHeader(){(0,_classCallCheck2.default)(this,CardHeader);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(CardHeader).apply(this,arguments));}(0,_createClass2.default)(CardHeader,[{key:\"_renderAction\",value:function _renderAction(){var action=this.props.action;if(!action)return null;return _react.default.createElement(_reactNative.View,{style:_CardHeader.default.actions,__source:{fileName:_jsxFileName,lineNumber:22}},action);}},{key:\"_renderText\",value:function _renderText(){return _react.default.createElement(_reactNative.View,{style:_CardHeader.default.textContainer,__source:{fileName:_jsxFileName,lineNumber:27}},this._renderTitle(),this._renderSubtitle());}},{key:\"_renderTitle\",value:function _renderTitle(){var _this$props=this.props,title=_this$props.title,titleStyles=_this$props.titleStyles;if(!title)return null;return _react.default.createElement(_reactNative.Text,{style:[_CardHeader.default.title,titleStyles],__source:{fileName:_jsxFileName,lineNumber:37}},title);}},{key:\"_renderSubtitle\",value:function _renderSubtitle(){var _this$props2=this.props,subtitle=_this$props2.subtitle,subtitleStyles=_this$props2.subtitleStyles;if(!subtitle)return null;return _react.default.createElement(_reactNative.Text,{style:[_CardHeader.default.subtitle,subtitleStyles],__source:{fileName:_jsxFileName,lineNumber:43}},subtitle);}},{key:\"render\",value:function render(){var _this$props3=this.props,thumbnail=_this$props3.thumbnail,children=_this$props3.children,style=_this$props3.style;return _react.default.createElement(_reactNative.View,{style:[_CardHeader.default.container,style],__source:{fileName:_jsxFileName,lineNumber:49}},_react.default.createElement(_reactNative.View,{style:_CardHeader.default.left,__source:{fileName:_jsxFileName,lineNumber:50}},thumbnail?thumbnail:null,children?children:this._renderText()),this._renderAction());}}]);return CardHeader;}(_react.Component);(0,_defineProperty2.default)(CardHeader,\"propTypes\",{children:_propTypes.default.node,thumbnail:_propTypes.default.node,action:_propTypes.default.node,title:_propTypes.default.string,titleStyles:_propTypes.default.object,subtitle:_propTypes.default.string,subtitleStyles:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array])});var _default=(0,_withTheme.default)(CardHeader);exports.default=_default;"
  },
  {
    "path": "dist/Components/Card/CardHeader/CardHeader.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({container:{padding:24,borderBottomWidth:_reactNative.StyleSheet.hairlineWidth,borderBottomColor:'rgba(0,0,0,.2)',flexDirection:'row',justifyContent:'space-between'},actions:{flexDirection:'row',justifyContent:'space-between',alignItems:'center'},left:{flexDirection:'row',flexShrink:1},textContainer:{marginLeft:16,flexWrap:'wrap',flexShrink:1},title:{fontSize:20,fontWeight:'500',lineHeight:24,letterSpacing:0.15,color:'#000000',flexWrap:'wrap',marginBottom:7},subtitle:{fontSize:14,lineHeight:16,letterSpacing:0.25,color:'#212121',flexWrap:'wrap'}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Card/CardHeader/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _CardHeader.default;}});var _CardHeader=_interopRequireDefault(require(\"./CardHeader\"));"
  },
  {
    "path": "dist/Components/Card/CardMedia/CardMedia.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _reactNative=require(\"react-native\");var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _CardMedia=_interopRequireDefault(require(\"./CardMedia.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Card/CardMedia/CardMedia.js\";var CardMedia=function(_Component){(0,_inherits2.default)(CardMedia,_Component);function CardMedia(){(0,_classCallCheck2.default)(this,CardMedia);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(CardMedia).apply(this,arguments));}(0,_createClass2.default)(CardMedia,[{key:\"_renderText\",value:function _renderText(){return _react.default.createElement(_reactNative.View,{style:_CardMedia.default.textContainer,__source:{fileName:_jsxFileName,lineNumber:25}},this._renderTitle(),this._renderSubtitle());}},{key:\"_renderTitle\",value:function _renderTitle(){var _this$props=this.props,title=_this$props.title,titleStyles=_this$props.titleStyles;if(!title)return null;return _react.default.createElement(_reactNative.Text,{style:[_CardMedia.default.title,titleStyles],__source:{fileName:_jsxFileName,lineNumber:35}},title);}},{key:\"_renderSubtitle\",value:function _renderSubtitle(){var _this$props2=this.props,subtitle=_this$props2.subtitle,subtitleStyles=_this$props2.subtitleStyles;if(!subtitle)return null;return _react.default.createElement(_reactNative.Text,{style:[_CardMedia.default.subtitle,subtitleStyles],__source:{fileName:_jsxFileName,lineNumber:41}},subtitle);}},{key:\"render\",value:function render(){var _this$props3=this.props,image=_this$props3.image,style=_this$props3.style,height=_this$props3.height;return _react.default.createElement(_reactNative.View,{style:[_CardMedia.default.container,{height:height},style],__source:{fileName:_jsxFileName,lineNumber:47}},image,this._renderText());}}]);return CardMedia;}(_react.Component);(0,_defineProperty2.default)(CardMedia,\"propTypes\",{children:_propTypes.default.node,image:_propTypes.default.node,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),title:_propTypes.default.string,titleStyles:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),subtitle:_propTypes.default.string,subtitleStyles:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),height:_propTypes.default.number});(0,_defineProperty2.default)(CardMedia,\"defaultProps\",{height:155});var _default=(0,_withTheme.default)(CardMedia);exports.default=_default;"
  },
  {
    "path": "dist/Components/Card/CardMedia/CardMedia.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({container:{width:'100%',overflow:'hidden',justifyContent:'center',alignItems:'center',position:'relative'},textContainer:{position:'absolute',left:24,bottom:24},title:{fontSize:20,fontWeight:'500',lineHeight:24,color:'#FFFFFF',letterSpacing:0.15,marginBottom:7},subtitle:{fontSize:14,lineHeight:16,color:'#FFFFFF',letterSpacing:0.25}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Card/CardMedia/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _CardMedia.default;}});var _CardMedia=_interopRequireDefault(require(\"./CardMedia\"));"
  },
  {
    "path": "dist/Components/Card/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _Card.default;}});Object.defineProperty(exports,\"CardActions\",{enumerable:true,get:function get(){return _CardActions.default;}});Object.defineProperty(exports,\"CardContent\",{enumerable:true,get:function get(){return _CardContent.default;}});Object.defineProperty(exports,\"CardHeader\",{enumerable:true,get:function get(){return _CardHeader.default;}});Object.defineProperty(exports,\"CardMedia\",{enumerable:true,get:function get(){return _CardMedia.default;}});var _Card=_interopRequireDefault(require(\"./Card\"));var _CardActions=_interopRequireDefault(require(\"./CardActions\"));var _CardContent=_interopRequireDefault(require(\"./CardContent\"));var _CardHeader=_interopRequireDefault(require(\"./CardHeader\"));var _CardMedia=_interopRequireDefault(require(\"./CardMedia\"));"
  },
  {
    "path": "dist/Components/Checkbox/Checkbox.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _reactNative=require(\"react-native\");var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _Icon=_interopRequireDefault(require(\"../Icon/Icon\"));var _Ripple=_interopRequireDefault(require(\"../Ripple/Ripple\"));var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _Checkbox=_interopRequireDefault(require(\"./Checkbox.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Checkbox/Checkbox.js\";var Checkbox=function(_Component){(0,_inherits2.default)(Checkbox,_Component);function Checkbox(){(0,_classCallCheck2.default)(this,Checkbox);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(Checkbox).apply(this,arguments));}(0,_createClass2.default)(Checkbox,[{key:\"_getRippleColor\",value:function _getRippleColor(){var _this$props=this.props,rippleColor=_this$props.rippleColor,rippleMatchesCheckbox=_this$props.rippleMatchesCheckbox,error=_this$props.error,theme=_this$props.theme;var checkboxColor=this._getCheckBoxColor();var rippleColorApplied=rippleColor;if(rippleMatchesCheckbox)rippleColorApplied=checkboxColor;if(error)rippleColorApplied=theme.error.main;return rippleColorApplied;}},{key:\"_getCheckBoxColor\",value:function _getCheckBoxColor(){var _this$props2=this.props,disabled=_this$props2.disabled,checkboxColor=_this$props2.checkboxColor,theme=_this$props2.theme,error=_this$props2.error;var checkboxColorApplied=checkboxColor?checkboxColor:theme.primary.main;if(error)checkboxColorApplied=theme.error.main;if(disabled)checkboxColorApplied='rgba(0,0,0,.5)';return checkboxColorApplied;}},{key:\"_renderLabel\",value:function _renderLabel(){var _this$props3=this.props,label=_this$props3.label,labelStyle=_this$props3.labelStyle,onPress=_this$props3.onPress;if(!label)return null;return _react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:onPress,__source:{fileName:_jsxFileName,lineNumber:78}},_react.default.createElement(_reactNative.View,{style:_Checkbox.default.labelContainer,__source:{fileName:_jsxFileName,lineNumber:79}},_react.default.createElement(_reactNative.Text,{style:[_Checkbox.default.label,labelStyle],__source:{fileName:_jsxFileName,lineNumber:80}},label)));}},{key:\"_renderIconContainer\",value:function _renderIconContainer(){var _this$props4=this.props,disabled=_this$props4.disabled,onPress=_this$props4.onPress,checkboxStyle=_this$props4.checkboxStyle,size=_this$props4.size;var rippleColor=this._getRippleColor();var rippleSize=1.5*size;return _react.default.createElement(_Ripple.default,{onPress:onPress,disabled:disabled,style:[_Checkbox.default.checkBoxRipple,checkboxStyle,{width:rippleSize,height:rippleSize,padding:rippleSize/6}],rippleCentered:true,rippleColor:rippleColor,rippleContainerBorderRadius:rippleSize/2,__source:{fileName:_jsxFileName,lineNumber:93}},this._renderIcon());}},{key:\"_renderIcon\",value:function _renderIcon(){var _this$props5=this.props,icon=_this$props5.icon,size=_this$props5.size,checkedIcon=_this$props5.checkedIcon,unCheckedColor=_this$props5.unCheckedColor,indeterminate=_this$props5.indeterminate,checked=_this$props5.checked,ios=_this$props5.ios,theme=_this$props5.theme,error=_this$props5.error;var checkboxColor=this._getCheckBoxColor();if(icon&&icon.props&&icon.props.name&&!checked){return _react.default.cloneElement(icon,{size:icon.props.size?icon.props.size:size,color:checkboxColor});}else if(checkedIcon&&checkedIcon.props&&checkedIcon.props.name&&checked){return _react.default.cloneElement(checkedIcon,{size:icon.props.size?icon.props.size:size,color:checkboxColor});}var iconName=indeterminate?'indeterminate-check-box':checkedIcon;var opacity=1;if(ios&&!indeterminate&&checked)iconName='done';if(!checked)iconName=icon;if(!checked&&ios)opacity=0;var unCheckedColorApplied=unCheckedColor;if(error)unCheckedColorApplied=theme.error.main;return _react.default.createElement(_Icon.default,{name:iconName,size:size,color:checked?checkboxColor:unCheckedColorApplied,style:{opacity:opacity},__source:{fileName:_jsxFileName,lineNumber:155}});}},{key:\"render\",value:function render(){var _this$props6=this.props,style=_this$props6.style,labelPos=_this$props6.labelPos,testID=_this$props6.testID;return _react.default.createElement(_reactNative.View,{style:[_Checkbox.default.container,style],testID:testID,__source:{fileName:_jsxFileName,lineNumber:168}},labelPos==='left'?this._renderLabel():null,this._renderIconContainer(),labelPos==='right'?this._renderLabel():null);}}]);return Checkbox;}(_react.Component);(0,_defineProperty2.default)(Checkbox,\"propTypes\",{checked:_propTypes.default.bool,disabled:_propTypes.default.bool,onPress:_propTypes.default.func,rippleColor:_propTypes.default.string,checkboxColor:_propTypes.default.string,unCheckedColor:_propTypes.default.string,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),checkboxStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),theme:_propTypes.default.object,rippleMatchesCheckbox:_propTypes.default.bool,indeterminate:_propTypes.default.bool,label:_propTypes.default.string,labelStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),labelPos:_propTypes.default.string,icon:_propTypes.default.oneOfType([_propTypes.default.node,_propTypes.default.string]),size:_propTypes.default.number,checkedIcon:_propTypes.default.oneOfType([_propTypes.default.node,_propTypes.default.string]),ios:_propTypes.default.bool,error:_propTypes.default.bool,testID:_propTypes.default.string});(0,_defineProperty2.default)(Checkbox,\"defaultProps\",{unCheckedColor:'rgba(0,0,0,.5)',rippleColor:'rgba(0,0,0,.8)',icon:'check-box-outline-blank',size:24,checkedIcon:'check-box',labelPos:'right'});var _default=(0,_withTheme.default)(Checkbox);exports.default=_default;"
  },
  {
    "path": "dist/Components/Checkbox/Checkbox.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _reactNative=require(\"react-native\");var _=require(\"../../\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _storybookState=require(\"@sambego/storybook-state\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Checkbox/Checkbox.stories.js\";var store=new _storybookState.Store({checkedOne:true,checkedTwo:true,checkedThree:true,checkedFour:true,checkedFive:true});var _default=(0,_storiesOf.storiesOf)('Components|Checkbox',module).addParameters({jest:['Checkbox']}).add('Simple',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:21}},_react.default.createElement(_Header.default,{title:'Simple',__source:{fileName:_jsxFileName,lineNumber:22}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:24}},function(state){return _react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',flexWrap:'wrap'},__source:{fileName:_jsxFileName,lineNumber:26}},_react.default.createElement(_.Checkbox,{checked:state.checkedOnePrime,onPress:function onPress(){return store.set({checkedOnePrime:!state.checkedOnePrime});},__source:{fileName:_jsxFileName,lineNumber:32}}),_react.default.createElement(_.Checkbox,{rippleMatchesCheckbox:true,checkboxColor:'#009688',checked:state.checkedTwoPrime,onPress:function onPress(){return store.set({checkedTwoPrime:!state.checkedTwoPrime});},__source:{fileName:_jsxFileName,lineNumber:38}}),_react.default.createElement(_.Checkbox,{rippleMatchesCheckbox:true,checkboxColor:'#E91E63',checked:state.checkedThreePrime,onPress:function onPress(){return store.set({checkedThreePrime:!state.checkedThreePrime});},__source:{fileName:_jsxFileName,lineNumber:46}}),_react.default.createElement(_.Checkbox,{indeterminate:true,checkboxColor:'#795548',checked:state.checkedFourPrime,onPress:function onPress(){return store.set({checkedFourPrime:!state.checkedFourPrime});},__source:{fileName:_jsxFileName,lineNumber:54}}),_react.default.createElement(_.Checkbox,{error:true,checked:state.checkedFivePrime,onPress:function onPress(){return store.set({checkedFivePrime:!state.checkedFivePrime});},__source:{fileName:_jsxFileName,lineNumber:62}}));}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:73}},function(state){return _react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',flexWrap:'wrap'},__source:{fileName:_jsxFileName,lineNumber:75}},_react.default.createElement(_.Checkbox,{checked:state.checkedOne,onPress:function onPress(){return store.set({checkedOne:!state.checkedOne});},__source:{fileName:_jsxFileName,lineNumber:81}}),_react.default.createElement(_.Checkbox,{rippleMatchesCheckbox:true,checkboxColor:'#009688',checked:state.checkedTwo,onPress:function onPress(){return store.set({checkedTwo:!state.checkedTwo});},__source:{fileName:_jsxFileName,lineNumber:85}}),_react.default.createElement(_.Checkbox,{rippleMatchesCheckbox:true,checkboxColor:'#E91E63',checked:state.checkedThree,onPress:function onPress(){return store.set({checkedThree:!state.checkedThree});},__source:{fileName:_jsxFileName,lineNumber:91}}),_react.default.createElement(_.Checkbox,{indeterminate:true,checkboxColor:'#795548',checked:state.checkedFour,onPress:function onPress(){return store.set({checkedFour:!state.checkedFour});},__source:{fileName:_jsxFileName,lineNumber:97}}),_react.default.createElement(_.Checkbox,{error:true,checked:state.checkedFive,onPress:function onPress(){return store.set({checkedFive:!state.checkedFive});},__source:{fileName:_jsxFileName,lineNumber:103}}));}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:112}},function(state){return _react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',flexWrap:'wrap'},__source:{fileName:_jsxFileName,lineNumber:114}},_react.default.createElement(_.Checkbox,{checked:state.checkedOnePrime,unCheckedColor:'#1e88e5',onPress:function onPress(){return store.set({checkedOnePrime:!state.checkedOnePrime});},__source:{fileName:_jsxFileName,lineNumber:120}}),_react.default.createElement(_.Checkbox,{rippleMatchesCheckbox:true,checkboxColor:'#009688',unCheckedColor:'#009688',checked:state.checkedTwoPrime,onPress:function onPress(){return store.set({checkedTwoPrime:!state.checkedTwoPrime});},__source:{fileName:_jsxFileName,lineNumber:127}}),_react.default.createElement(_.Checkbox,{rippleMatchesCheckbox:true,checkboxColor:'#E91E63',unCheckedColor:'#E91E63',checked:state.checkedThreePrime,onPress:function onPress(){return store.set({checkedThreePrime:!state.checkedThreePrime});},__source:{fileName:_jsxFileName,lineNumber:136}}),_react.default.createElement(_.Checkbox,{indeterminate:true,checkboxColor:'#795548',unCheckedColor:'#795548',checked:state.checkedFourPrime,onPress:function onPress(){return store.set({checkedFourPrime:!state.checkedFourPrime});},__source:{fileName:_jsxFileName,lineNumber:145}}),_react.default.createElement(_.Checkbox,{error:true,checked:state.checkedFivePrime,onPress:function onPress(){return store.set({checkedFivePrime:!state.checkedFivePrime});},__source:{fileName:_jsxFileName,lineNumber:154}}));}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:164}},function(state){return _react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',flexWrap:'wrap'},__source:{fileName:_jsxFileName,lineNumber:166}},_react.default.createElement(_.Checkbox,{disabled:true,checked:state.checkedOne,onPress:function onPress(){return store.set({checkedOne:!state.checkedOne});},__source:{fileName:_jsxFileName,lineNumber:172}}),_react.default.createElement(_.Checkbox,{disabled:true,rippleMatchesCheckbox:true,checkboxColor:'#009688',checked:state.checkedTwo,onPress:function onPress(){return store.set({checkedTwo:!state.checkedTwo});},__source:{fileName:_jsxFileName,lineNumber:177}}),_react.default.createElement(_.Checkbox,{disabled:true,rippleMatchesCheckbox:true,checkboxColor:'#E91E63',checked:state.checkedThree,onPress:function onPress(){return store.set({checkedThree:!state.checkedThree});},__source:{fileName:_jsxFileName,lineNumber:184}}),_react.default.createElement(_.Checkbox,{disabled:true,indeterminate:true,checkboxColor:'#795548',checked:state.checkedFour,onPress:function onPress(){return store.set({checkedFour:!state.checkedFour});},__source:{fileName:_jsxFileName,lineNumber:191}}),_react.default.createElement(_.Checkbox,{error:true,disabled:true,checked:state.checkedFive,onPress:function onPress(){return store.set({checkedFive:!state.checkedFive});},__source:{fileName:_jsxFileName,lineNumber:198}}));}));}).add('Icons',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:210}},_react.default.createElement(_Header.default,{title:'Icons',__source:{fileName:_jsxFileName,lineNumber:211}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:213}},function(state){return _react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',flexWrap:'wrap'},__source:{fileName:_jsxFileName,lineNumber:215}},_react.default.createElement(_.Checkbox,{checked:state.checkedOnePrime,icon:'favorite-border',checkedIcon:'favorite',checkboxColor:'#F44336',onPress:function onPress(){return store.set({checkedOnePrime:!state.checkedOnePrime});},__source:{fileName:_jsxFileName,lineNumber:221}}),_react.default.createElement(_.Checkbox,{rippleMatchesCheckbox:true,checkboxColor:'#009688',checked:state.checkedTwoPrime,icon:'add-circle-outline',checkedIcon:'add-circle',onPress:function onPress(){return store.set({checkedTwoPrime:!state.checkedTwoPrime});},__source:{fileName:_jsxFileName,lineNumber:230}}),_react.default.createElement(_.Checkbox,{rippleMatchesCheckbox:true,checkboxColor:'#E91E63',icon:'bookmark-border',checkedIcon:'bookmark',checked:state.checkedThreePrime,onPress:function onPress(){return store.set({checkedThreePrime:!state.checkedThreePrime});},__source:{fileName:_jsxFileName,lineNumber:240}}),_react.default.createElement(_.Checkbox,{icon:'folder-open',checkedIcon:'folder',checkboxColor:'#F44336',checked:state.checkedFourPrime,onPress:function onPress(){return store.set({checkedFourPrime:!state.checkedFourPrime});},__source:{fileName:_jsxFileName,lineNumber:250}}));}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:263}},function(state){return _react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',flexWrap:'wrap'},__source:{fileName:_jsxFileName,lineNumber:265}},_react.default.createElement(_.Checkbox,{checked:state.checkedOne,icon:'favorite-border',checkedIcon:'favorite',checkboxColor:'#F44336',onPress:function onPress(){return store.set({checkedOne:!state.checkedOne});},__source:{fileName:_jsxFileName,lineNumber:271}}),_react.default.createElement(_.Checkbox,{rippleMatchesCheckbox:true,checkboxColor:'#009688',checked:state.checkedTwo,icon:'add-circle-outline',checkedIcon:'add-circle',onPress:function onPress(){return store.set({checkedTwo:!state.checkedTwo});},__source:{fileName:_jsxFileName,lineNumber:278}}),_react.default.createElement(_.Checkbox,{rippleMatchesCheckbox:true,checkboxColor:'#E91E63',icon:'bookmark-border',checkedIcon:'bookmark',checked:state.checkedThree,onPress:function onPress(){return store.set({checkedThree:!state.checkedThree});},__source:{fileName:_jsxFileName,lineNumber:286}}),_react.default.createElement(_.Checkbox,{icon:'folder-open',checkedIcon:'folder',checkboxColor:'#F44336',checked:state.checkedFour,onPress:function onPress(){return store.set({checkedFour:!state.checkedFour});},__source:{fileName:_jsxFileName,lineNumber:294}}));}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:305}},function(state){return _react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',flexWrap:'wrap'},__source:{fileName:_jsxFileName,lineNumber:307}},_react.default.createElement(_.Checkbox,{checked:state.checkedOnePrime,icon:'favorite-border',checkedIcon:'favorite',checkboxColor:'#F44336',unCheckedColor:'#F44336',onPress:function onPress(){return store.set({checkedOnePrime:!state.checkedOnePrime});},__source:{fileName:_jsxFileName,lineNumber:313}}),_react.default.createElement(_.Checkbox,{rippleMatchesCheckbox:true,checkboxColor:'#009688',unCheckedColor:'#009688',checked:state.checkedTwoPrime,icon:'add-circle-outline',checkedIcon:'add-circle',onPress:function onPress(){return store.set({checkedTwoPrime:!state.checkedTwoPrime});},__source:{fileName:_jsxFileName,lineNumber:323}}),_react.default.createElement(_.Checkbox,{rippleMatchesCheckbox:true,checkboxColor:'#E91E63',unCheckedColor:'#E91E63',icon:'bookmark-border',checkedIcon:'bookmark',checked:state.checkedThreePrime,onPress:function onPress(){return store.set({checkedThreePrime:!state.checkedThreePrime});},__source:{fileName:_jsxFileName,lineNumber:334}}),_react.default.createElement(_.Checkbox,{checkboxColor:'#F44336',unCheckedColor:'#F44336',icon:'folder-open',checkedIcon:'folder',checked:state.checkedFourPrime,onPress:function onPress(){return store.set({checkedFourPrime:!state.checkedFourPrime});},__source:{fileName:_jsxFileName,lineNumber:345}}));}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:359}},function(state){return _react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',flexWrap:'wrap'},__source:{fileName:_jsxFileName,lineNumber:361}},_react.default.createElement(_.Checkbox,{disabled:true,checked:state.checkedOne,icon:'favorite-border',checkedIcon:'favorite',checkboxColor:'#F44336',onPress:function onPress(){return store.set({checkedOne:!state.checkedOne});},__source:{fileName:_jsxFileName,lineNumber:367}}),_react.default.createElement(_.Checkbox,{disabled:true,rippleMatchesCheckbox:true,checkboxColor:'#009688',checked:state.checkedTwo,icon:'add-circle-outline',checkedIcon:'add-circle',onPress:function onPress(){return store.set({checkedTwo:!state.checkedTwo});},__source:{fileName:_jsxFileName,lineNumber:375}}),_react.default.createElement(_.Checkbox,{disabled:true,rippleMatchesCheckbox:true,checkboxColor:'#E91E63',icon:'bookmark-border',checkedIcon:'bookmark',checked:state.checkedThree,onPress:function onPress(){return store.set({checkedThree:!state.checkedThree});},__source:{fileName:_jsxFileName,lineNumber:384}}),_react.default.createElement(_.Checkbox,{disabled:true,icon:'folder-open',checkedIcon:'folder',checkboxColor:'#F44336',checked:state.checkedFour,onPress:function onPress(){return store.set({checkedFour:!state.checkedFour});},__source:{fileName:_jsxFileName,lineNumber:393}}));}));}).add('Labels',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:407}},_react.default.createElement(_Header.default,{title:'Labels',__source:{fileName:_jsxFileName,lineNumber:408}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:410}},function(state){return _react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',flexWrap:'wrap'},__source:{fileName:_jsxFileName,lineNumber:412}},_react.default.createElement(_.Checkbox,{label:'Click me',checked:state.checkedOne,onPress:function onPress(){return store.set({checkedOne:!state.checkedOne});},__source:{fileName:_jsxFileName,lineNumber:418}}),_react.default.createElement(_.Checkbox,{rippleMatchesCheckbox:true,checkboxColor:'#009688',checked:state.checkedTwo,label:'Item 2',labelStyle:{fontSize:18,color:'#009688'},onPress:function onPress(){return store.set({checkedTwo:!state.checkedTwo});},__source:{fileName:_jsxFileName,lineNumber:423}}),_react.default.createElement(_.Checkbox,{rippleMatchesCheckbox:true,checkboxColor:'#E91E63',icon:'bookmark-border',checkedIcon:'bookmark',label:'Bookmark',labelStyle:{fontSize:14,color:'#E91E63'},checked:state.checkedThree,onPress:function onPress(){return store.set({checkedThree:!state.checkedThree});},__source:{fileName:_jsxFileName,lineNumber:431}}),_react.default.createElement(_.Checkbox,{rippleMatchesCheckbox:true,checkboxColor:'#3F51B5',label:'Click',labelStyle:{fontSize:14,color:'#3F51B5'},checked:state.checkedFour,onPress:function onPress(){return store.set({checkedFour:!state.checkedFour});},__source:{fileName:_jsxFileName,lineNumber:442}}));}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:453}},function(state){return _react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',flexWrap:'wrap',marginTop:40},__source:{fileName:_jsxFileName,lineNumber:455}},_react.default.createElement(_.Checkbox,{label:'Click me',checked:state.checkedOne,onPress:function onPress(){return store.set({checkedOne:!state.checkedOne});},labelPos:'left',__source:{fileName:_jsxFileName,lineNumber:462}}),_react.default.createElement(_.Checkbox,{rippleMatchesCheckbox:true,checkboxColor:'#009688',checked:state.checkedTwo,label:'Item 2',labelStyle:{fontSize:18,color:'#009688'},onPress:function onPress(){return store.set({checkedTwo:!state.checkedTwo});},labelPos:'left',__source:{fileName:_jsxFileName,lineNumber:468}}),_react.default.createElement(_.Checkbox,{rippleMatchesCheckbox:true,checkboxColor:'#E91E63',icon:'bookmark-border',checkedIcon:'bookmark',label:'Bookmark',labelStyle:{fontSize:14,color:'#E91E63'},checked:state.checkedThree,onPress:function onPress(){return store.set({checkedThree:!state.checkedThree});},labelPos:'left',__source:{fileName:_jsxFileName,lineNumber:477}}),_react.default.createElement(_.Checkbox,{rippleMatchesCheckbox:true,checkboxColor:'#3F51B5',label:'Click',labelStyle:{fontSize:14,color:'#3F51B5'},checked:state.checkedFour,onPress:function onPress(){return store.set({checkedFour:!state.checkedFour});},labelPos:'left',__source:{fileName:_jsxFileName,lineNumber:489}}));}));}).add('iOS',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:504}},_react.default.createElement(_Header.default,{title:'iOS',__source:{fileName:_jsxFileName,lineNumber:505}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:507}},function(state){return _react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',flexWrap:'wrap'},__source:{fileName:_jsxFileName,lineNumber:509}},_react.default.createElement(_.Checkbox,{ios:true,checked:state.checkedOne,onPress:function onPress(){return store.set({checkedOne:!state.checkedOne});},__source:{fileName:_jsxFileName,lineNumber:515}}),_react.default.createElement(_.Checkbox,{ios:true,rippleMatchesCheckbox:true,checkboxColor:'#009688',checked:state.checkedTwo,onPress:function onPress(){return store.set({checkedTwo:!state.checkedTwo});},__source:{fileName:_jsxFileName,lineNumber:520}}),_react.default.createElement(_.Checkbox,{ios:true,checkboxColor:'#E91E63',label:'Toggle',checked:state.checkedThree,onPress:function onPress(){return store.set({checkedThree:!state.checkedThree});},__source:{fileName:_jsxFileName,lineNumber:527}}),_react.default.createElement(_.Checkbox,{ios:true,disabled:true,rippleMatchesCheckbox:true,checkboxColor:'#009688',checked:state.checkedFour,label:'Disabled',onPress:function onPress(){return store.set({checkedFour:!state.checkedFour});},__source:{fileName:_jsxFileName,lineNumber:534}}),_react.default.createElement(_.Checkbox,{ios:true,error:true,rippleMatchesCheckbox:true,checkboxColor:'#009688',checked:state.checkedFive,label:'Error',onPress:function onPress(){return store.set({checkedFive:!state.checkedFive});},__source:{fileName:_jsxFileName,lineNumber:543}}));}));});exports.default=_default;"
  },
  {
    "path": "dist/Components/Checkbox/Checkbox.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({container:{flexDirection:'row',alignItems:'center'},checkBoxRipple:{borderRadius:100,flexDirection:'row',alignItems:'center',justifyContent:'center'},labelContainer:{flexShrink:1},label:{}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Checkbox/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _Checkbox.default;}});var _Checkbox=_interopRequireDefault(require(\"./Checkbox\"));"
  },
  {
    "path": "dist/Components/Chip/Chip.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _Paper=_interopRequireDefault(require(\"../Paper/Paper\"));var _Ripple=_interopRequireDefault(require(\"../Ripple/Ripple\"));var _Icon=_interopRequireDefault(require(\"../Icon/Icon\"));var _Chip=_interopRequireDefault(require(\"./Chip.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Chip/Chip.js\";var Chip=function(_Component){(0,_inherits2.default)(Chip,_Component);function Chip(){(0,_classCallCheck2.default)(this,Chip);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(Chip).apply(this,arguments));}(0,_createClass2.default)(Chip,[{key:\"_renderText\",value:function _renderText(){var _this$props=this.props,text=_this$props.text,textStyles=_this$props.textStyles,leftIcon=_this$props.leftIcon,rightIcon=_this$props.rightIcon,onDelete=_this$props.onDelete,color=_this$props.color,themeColor=_this$props.themeColor,chipStyle=_this$props.chipStyle,theme=_this$props.theme;var displayedColor=themeColor||color?'white':'rgba(0, 0, 0, 0.87)';if(chipStyle=='outlined'&&(themeColor||color))displayedColor=theme[themeColor||'primary'].main;return _react.default.createElement(_reactNative.Text,{numberOfLines:1,style:[_Chip.default.text,{color:displayedColor,marginLeft:leftIcon?8:12,marginRight:rightIcon||onDelete?8:12},textStyles],__source:{fileName:_jsxFileName,lineNumber:63}},text);}},{key:\"_renderIcon\",value:function _renderIcon(icon,position){var chipStyle=this.props.chipStyle;if(!icon)return null;var inner=_react.default.cloneElement(icon,{size:icon.props.size?icon.props.size:24});var marginRight=chipStyle=='outlined'?8:4;var marginLeft=chipStyle=='outlined'?8:4;if(position=='right')marginLeft=0;if(position=='left')marginRight=0;return _react.default.createElement(_reactNative.View,{style:{marginRight:marginRight,marginLeft:marginLeft},__source:{fileName:_jsxFileName,lineNumber:94}},inner);}},{key:\"_renderRightIcon\",value:function _renderRightIcon(){var _this$props2=this.props,rightIcon=_this$props2.rightIcon,onDelete=_this$props2.onDelete;if(onDelete)return this._renderDeleteIcon();return this._renderIcon(rightIcon,'right');}},{key:\"_renderDeleteIcon\",value:function _renderDeleteIcon(){var _this$props3=this.props,onDelete=_this$props3.onDelete,disabled=_this$props3.disabled,themeColor=_this$props3.themeColor,color=_this$props3.color,chipStyle=_this$props3.chipStyle,theme=_this$props3.theme;var iconColor=themeColor||color?'white':'#666666';if(chipStyle=='outlined')iconColor=themeColor?theme[themeColor].main:'#666666';return _react.default.createElement(_Ripple.default,{onPress:onDelete,disabled:disabled||!onDelete,rippleContainerBorderRadius:100,style:{marginRight:8},__source:{fileName:_jsxFileName,lineNumber:125}},_react.default.createElement(_Icon.default,{name:\"cancel\",size:18,color:iconColor,__source:{fileName:_jsxFileName,lineNumber:130}}));}},{key:\"render\",value:function render(){var _this$props4=this.props,chipStyle=_this$props4.chipStyle,disabled=_this$props4.disabled,onPress=_this$props4.onPress,style=_this$props4.style,color=_this$props4.color,themeColor=_this$props4.themeColor,children=_this$props4.children,visible=_this$props4.visible,leftIcon=_this$props4.leftIcon,theme=_this$props4.theme,radius=_this$props4.radius,testID=_this$props4.testID;var borderWidth=0;var displayBackgroundColor=themeColor?theme[themeColor].main:'#e0e0e0';var displayBorderColor=themeColor?theme[themeColor].main:'rgba(0, 0, 0, 0.23)';var rippleColor=themeColor?theme[themeColor].main:'rgba(0, 0, 0, .87)';if(chipStyle==='outlined'){borderWidth=_reactNative.StyleSheet.hairlineWidth;displayBackgroundColor='transparent';}if(color){if(chipStyle!='outlined')displayBackgroundColor=color;if(chipStyle=='outlined')displayBorderColor=color;rippleColor=color;}if(!visible)return null;return _react.default.createElement(_Paper.default,{style:[_Chip.default.container,{backgroundColor:displayBackgroundColor,borderColor:displayBorderColor,borderWidth:borderWidth,borderRadius:radius},style],testID:testID,shadow:0,__source:{fileName:_jsxFileName,lineNumber:175}},_react.default.createElement(_Ripple.default,{rippleContainerBorderRadius:radius,onPress:onPress,disabled:disabled||!onPress,style:[_Chip.default.ripple,{borderRadius:radius}],rippleColor:rippleColor,__source:{fileName:_jsxFileName,lineNumber:188}},_react.default.createElement(_reactNative.View,{style:_Chip.default.content,__source:{fileName:_jsxFileName,lineNumber:194}},this._renderIcon(leftIcon,'left'),children?children:this._renderText(),this._renderRightIcon())));}}]);return Chip;}(_react.Component);(0,_defineProperty2.default)(Chip,\"propTypes\",{children:_propTypes.default.node,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),theme:_propTypes.default.object,chipStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),color:_propTypes.default.string,themeColor:_propTypes.default.string,radius:_propTypes.default.number,onPress:_propTypes.default.func,onDelete:_propTypes.default.func,visible:_propTypes.default.bool,text:_propTypes.default.string,textStyles:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),leftIcon:_propTypes.default.node,rightIcon:_propTypes.default.node,selected:_propTypes.default.bool,disabled:_propTypes.default.bool,testID:_propTypes.default.oneOfType([_propTypes.default.string,_propTypes.default.func])});(0,_defineProperty2.default)(Chip,\"defaultProps\",{visible:true,canDelete:false,radius:16});var _default=(0,_withTheme.default)(Chip);exports.default=_default;"
  },
  {
    "path": "dist/Components/Chip/Chip.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../../\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _storybookState=require(\"@sambego/storybook-state\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Chip/Chip.stories.js\";var store=new _storybookState.Store({chipOne:true,chipTwo:true,chipThree:true,chipFour:true,chipFive:true,chipSix:true});var _default=(0,_storiesOf.storiesOf)('Components|Chip',module).addParameters({jest:['Chip']}).add('Filled',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:25}},_react.default.createElement(_Header.default,{title:'Filled',__source:{fileName:_jsxFileName,lineNumber:26}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:27}},function(state){return _react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap'},__source:{fileName:_jsxFileName,lineNumber:29}},_react.default.createElement(_.Chip,{text:'Chip',__source:{fileName:_jsxFileName,lineNumber:36}}),_react.default.createElement(_.Chip,{text:'Delete me',visible:state.chipTwo,onDelete:function onDelete(){return store.set({chipTwo:false});},__source:{fileName:_jsxFileName,lineNumber:37}}),_react.default.createElement(_.Chip,{text:'Alaska',color:'#009688',visible:state.chipThree,onDelete:function onDelete(){return store.set({chipThree:false});},leftIcon:_react.default.createElement(_.Icon,{name:\"place\",color:'white',__source:{fileName:_jsxFileName,lineNumber:47}}),__source:{fileName:_jsxFileName,lineNumber:42}}),_react.default.createElement(_.Chip,{text:'User',themeColor:'primary',onPress:function onPress(){return console.log('clicked four');},leftIcon:_react.default.createElement(_.Avatar,{type:\"image\",image:_react.default.createElement(_reactNative.Image,{source:{uri:'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4'},__source:{fileName:_jsxFileName,lineNumber:57}}),__source:{fileName:_jsxFileName,lineNumber:54}}),__source:{fileName:_jsxFileName,lineNumber:49}}),_react.default.createElement(_.Chip,{text:'Click me',themeColor:'primary',onPress:function onPress(){return console.log('clicked five');},__source:{fileName:_jsxFileName,lineNumber:67}}),_react.default.createElement(_.Chip,{text:'Biking',themeColor:'secondary',leftIcon:_react.default.createElement(_.Icon,{name:\"directions-bike\",color:'#009688',__source:{fileName:_jsxFileName,lineNumber:75}}),visible:state.chipSix,onDelete:function onDelete(){return store.set({chipSix:false});},__source:{fileName:_jsxFileName,lineNumber:72}}));}));}).add('Outlined',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:85}},_react.default.createElement(_Header.default,{title:'Outlined',__source:{fileName:_jsxFileName,lineNumber:86}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:87}},function(state){return _react.default.createElement(_reactNative.View,{style:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap'},__source:{fileName:_jsxFileName,lineNumber:89}},_react.default.createElement(_.Chip,{text:'Chip',chipStyle:'outlined',__source:{fileName:_jsxFileName,lineNumber:96}}),_react.default.createElement(_.Chip,{text:'Delete me',chipStyle:'outlined',visible:state.chipTwo,onDelete:function onDelete(){return store.set({chipTwo:false});},__source:{fileName:_jsxFileName,lineNumber:97}}),_react.default.createElement(_.Chip,{text:'Alaska',chipStyle:'outlined',color:'#009688',visible:state.chipThree,onDelete:function onDelete(){return store.set({chipThree:false});},leftIcon:_react.default.createElement(_.Icon,{name:\"place\",color:'#009688',__source:{fileName:_jsxFileName,lineNumber:109}}),__source:{fileName:_jsxFileName,lineNumber:103}}),_react.default.createElement(_.Chip,{text:'User',chipStyle:'outlined',themeColor:'primary',onPress:function onPress(){return console.log('clicked four');},leftIcon:_react.default.createElement(_.Avatar,{type:\"image\",image:_react.default.createElement(_reactNative.Image,{source:{uri:'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4'},__source:{fileName:_jsxFileName,lineNumber:120}}),__source:{fileName:_jsxFileName,lineNumber:117}}),__source:{fileName:_jsxFileName,lineNumber:111}}),_react.default.createElement(_.Chip,{text:'Click me',chipStyle:'outlined',themeColor:'primary',onPress:function onPress(){return console.log('clicked five');},__source:{fileName:_jsxFileName,lineNumber:130}}),_react.default.createElement(_.Chip,{text:'Biking',chipStyle:'outlined',themeColor:'secondary',leftIcon:_react.default.createElement(_.Icon,{name:\"directions-bike\",color:'#009688',__source:{fileName:_jsxFileName,lineNumber:140}}),visible:state.chipSix,onDelete:function onDelete(){return store.set({chipSix:false});},__source:{fileName:_jsxFileName,lineNumber:136}}));}));});exports.default=_default;"
  },
  {
    "path": "dist/Components/Chip/Chip.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({container:{borderStyle:'solid',flexGrow:0,height:32,alignSelf:'flex-start'},ripple:{height:'100%',flexDirection:'row'},content:{flexDirection:'row',alignItems:'center',flexGrow:0},text:{lineHeight:24,textAlignVertical:'center',alignSelf:'center',marginVertical:4,fontSize:14}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Chip/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _Chip.default;}});var _Chip=_interopRequireDefault(require(\"./Chip\"));"
  },
  {
    "path": "dist/Components/DataTable/DataTable.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _shadow=_interopRequireDefault(require(\"../../Utils/Shadow/shadow.js\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/DataTable/DataTable.js\";function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}var DataTable=function(_Component){(0,_inherits2.default)(DataTable,_Component);function DataTable(){(0,_classCallCheck2.default)(this,DataTable);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(DataTable).apply(this,arguments));}(0,_createClass2.default)(DataTable,[{key:\"render\",value:function render(){var _this$props=this.props,children=_this$props.children,style=_this$props.style,testID=_this$props.testID;return _react.default.createElement(_reactNative.ScrollView,{scrollEnabled:true,horizontal:true,contentContainerStyle:{minWidth:'100%'},__source:{fileName:_jsxFileName,lineNumber:17}},_react.default.createElement(_reactNative.View,{style:[_objectSpread({flex:1,borderRadius:4},(0,_shadow.default)(4)),style],testID:testID,__source:{fileName:_jsxFileName,lineNumber:21}},children));}}]);return DataTable;}(_react.Component);(0,_defineProperty2.default)(DataTable,\"propTypes\",{children:_propTypes.default.node,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),testID:_propTypes.default.string});var _default=(0,_withTheme.default)(DataTable);exports.default=_default;"
  },
  {
    "path": "dist/Components/DataTable/DataTable.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _=require(\"../../\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/DataTable/DataTable.stories.js\";var _default=(0,_storiesOf.storiesOf)('Components|Data Table',module).addParameters({jest:['DataTable']}).add('Simple',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:11}},_react.default.createElement(_Header.default,{title:'Simple DataTable',__source:{fileName:_jsxFileName,lineNumber:12}}),_react.default.createElement(_.DataTable,{__source:{fileName:_jsxFileName,lineNumber:14}},_react.default.createElement(_.DataTableRow,{__source:{fileName:_jsxFileName,lineNumber:15}},_react.default.createElement(_.DataTableCell,{text:'Desert',type:'header',borderRight:true,relativeWidth:2,__source:{fileName:_jsxFileName,lineNumber:16}}),_react.default.createElement(_.DataTableCell,{text:'Calories',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:22}}),_react.default.createElement(_.DataTableCell,{text:'Fat (g)',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:23}}),_react.default.createElement(_.DataTableCell,{text:'Carbs (g)',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:24}}),_react.default.createElement(_.DataTableCell,{text:'Protein (g)',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:25}})),_react.default.createElement(_.DataTableRow,{__source:{fileName:_jsxFileName,lineNumber:27}},_react.default.createElement(_.DataTableCell,{text:'Frozen yogurt',borderRight:true,relativeWidth:2,__source:{fileName:_jsxFileName,lineNumber:28}}),_react.default.createElement(_.DataTableCell,{text:'159',right:true,__source:{fileName:_jsxFileName,lineNumber:29}}),_react.default.createElement(_.DataTableCell,{text:'6.0',right:true,__source:{fileName:_jsxFileName,lineNumber:30}}),_react.default.createElement(_.DataTableCell,{text:'24',right:true,__source:{fileName:_jsxFileName,lineNumber:31}}),_react.default.createElement(_.DataTableCell,{text:'4',right:true,__source:{fileName:_jsxFileName,lineNumber:32}})),_react.default.createElement(_.DataTableRow,{__source:{fileName:_jsxFileName,lineNumber:34}},_react.default.createElement(_.DataTableCell,{text:'Ice Cream Sandwich',borderRight:true,relativeWidth:2,__source:{fileName:_jsxFileName,lineNumber:35}}),_react.default.createElement(_.DataTableCell,{text:'237',right:true,__source:{fileName:_jsxFileName,lineNumber:40}}),_react.default.createElement(_.DataTableCell,{text:'9.0',right:true,__source:{fileName:_jsxFileName,lineNumber:41}}),_react.default.createElement(_.DataTableCell,{text:'37',right:true,__source:{fileName:_jsxFileName,lineNumber:42}}),_react.default.createElement(_.DataTableCell,{text:'4.3',right:true,__source:{fileName:_jsxFileName,lineNumber:43}})),_react.default.createElement(_.DataTableRow,{__source:{fileName:_jsxFileName,lineNumber:45}},_react.default.createElement(_.DataTableCell,{text:'Eclair',borderRight:true,relativeWidth:2,__source:{fileName:_jsxFileName,lineNumber:46}}),_react.default.createElement(_.DataTableCell,{text:'262',right:true,__source:{fileName:_jsxFileName,lineNumber:47}}),_react.default.createElement(_.DataTableCell,{text:'16.0',right:true,__source:{fileName:_jsxFileName,lineNumber:48}}),_react.default.createElement(_.DataTableCell,{text:'24',right:true,__source:{fileName:_jsxFileName,lineNumber:49}}),_react.default.createElement(_.DataTableCell,{text:'6.0',right:true,__source:{fileName:_jsxFileName,lineNumber:50}}))));}).add('Custom',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:56}},_react.default.createElement(_Header.default,{title:'Custom DataTable',__source:{fileName:_jsxFileName,lineNumber:57}}),_react.default.createElement(_.DataTable,{style:{borderRadius:20,backgroundColor:'#3C3C46',color:'white'},__source:{fileName:_jsxFileName,lineNumber:59}},_react.default.createElement(_.DataTableRow,{__source:{fileName:_jsxFileName,lineNumber:65}},_react.default.createElement(_.DataTableCell,{text:'Desert',type:'header',borderRight:true,relativeWidth:2,textStyle:{color:'white',fontWeight:700,fontSize:18},__source:{fileName:_jsxFileName,lineNumber:66}}),_react.default.createElement(_.DataTableCell,{text:'Calories',type:'header',right:true,textStyle:{color:'white',fontWeight:700,fontSize:18},__source:{fileName:_jsxFileName,lineNumber:73}}),_react.default.createElement(_.DataTableCell,{text:'Fat (g)',type:'header',right:true,textStyle:{color:'white',fontWeight:700,fontSize:18},__source:{fileName:_jsxFileName,lineNumber:79}}),_react.default.createElement(_.DataTableCell,{text:'Carbs (g)',type:'header',right:true,textStyle:{color:'white',fontWeight:700,fontSize:18},__source:{fileName:_jsxFileName,lineNumber:85}}),_react.default.createElement(_.DataTableCell,{text:'Protein (g)',type:'header',textStyle:{color:'white',fontWeight:700,fontSize:18},right:true,__source:{fileName:_jsxFileName,lineNumber:91}})),_react.default.createElement(_.DataTableRow,{__source:{fileName:_jsxFileName,lineNumber:98}},_react.default.createElement(_.DataTableCell,{text:'Frozen yogurt',borderRight:true,relativeWidth:2,textStyle:{color:'#8BC34A'},__source:{fileName:_jsxFileName,lineNumber:99}}),_react.default.createElement(_.DataTableCell,{text:'159',right:true,textStyle:{color:'white'},__source:{fileName:_jsxFileName,lineNumber:105}}),_react.default.createElement(_.DataTableCell,{text:'6.0',right:true,textStyle:{color:'white'},__source:{fileName:_jsxFileName,lineNumber:106}}),_react.default.createElement(_.DataTableCell,{text:'24',right:true,textStyle:{color:'white'},__source:{fileName:_jsxFileName,lineNumber:107}}),_react.default.createElement(_.DataTableCell,{text:'4',right:true,textStyle:{color:'white'},__source:{fileName:_jsxFileName,lineNumber:108}})),_react.default.createElement(_.DataTableRow,{__source:{fileName:_jsxFileName,lineNumber:110}},_react.default.createElement(_.DataTableCell,{text:'Ice Cream Sandwich',borderRight:true,relativeWidth:2,textStyle:{color:'#8BC34A'},__source:{fileName:_jsxFileName,lineNumber:111}}),_react.default.createElement(_.DataTableCell,{text:'237',right:true,textStyle:{color:'white'},__source:{fileName:_jsxFileName,lineNumber:117}}),_react.default.createElement(_.DataTableCell,{text:'9.0',right:true,textStyle:{color:'white'},__source:{fileName:_jsxFileName,lineNumber:118}}),_react.default.createElement(_.DataTableCell,{text:'37',right:true,textStyle:{color:'white'},__source:{fileName:_jsxFileName,lineNumber:119}}),_react.default.createElement(_.DataTableCell,{text:'4.3',right:true,textStyle:{color:'white'},__source:{fileName:_jsxFileName,lineNumber:120}})),_react.default.createElement(_.DataTableRow,{__source:{fileName:_jsxFileName,lineNumber:122}},_react.default.createElement(_.DataTableCell,{text:'Eclair',borderRight:true,textStyle:{color:'#8BC34A'},relativeWidth:2,__source:{fileName:_jsxFileName,lineNumber:123}}),_react.default.createElement(_.DataTableCell,{text:'262',right:true,textStyle:{color:'white'},__source:{fileName:_jsxFileName,lineNumber:129}}),_react.default.createElement(_.DataTableCell,{text:'16.0',right:true,textStyle:{color:'white'},__source:{fileName:_jsxFileName,lineNumber:130}}),_react.default.createElement(_.DataTableCell,{text:'24',right:true,textStyle:{color:'white'},__source:{fileName:_jsxFileName,lineNumber:131}}),_react.default.createElement(_.DataTableCell,{text:'6.0',right:true,textStyle:{color:'white'},__source:{fileName:_jsxFileName,lineNumber:132}}))));});exports.default=_default;"
  },
  {
    "path": "dist/Components/DataTable/DataTable.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({container:{justifyContent:'flex-end',flexDirection:'row',alignItems:'center',padding:12,minWidth:'auto'},currentNumber:{fontSize:12,marginRight:44/2,color:'rgba(0,0,0,.6)'},rowsPerPage:{flexDirection:'row',alignItems:'center',marginRight:30},rowsPerPageText:{fontSize:12,marginRight:24,color:'rgba(0,0,0,.6)'},text:{fontSize:12,color:'rgba(0,0,0,.6)'}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/DataTable/DataTableCell/DataTableCell.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _reactNative=require(\"react-native\");var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _=require(\"../../../\");var _DataTableCell=_interopRequireDefault(require(\"./DataTableCell.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/DataTable/DataTableCell/DataTableCell.js\";var TableCell=function(_Component){(0,_inherits2.default)(TableCell,_Component);function TableCell(props){var _this;(0,_classCallCheck2.default)(this,TableCell);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(TableCell).call(this,props));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{roateIcon:new _reactNative.Animated.Value(0)});return _this;}(0,_createClass2.default)(TableCell,[{key:\"componentDidUpdate\",value:function componentDidUpdate(prevProps){var sortingIcon=this.props.sortingIcon;if(sortingIcon=='up'&&prevProps.sortingIcon=='down'){this.animateSortingIcon('up');}else if(sortingIcon=='down'&&prevProps.sortingIcon=='up'){this.animateSortingIcon('down');}}},{key:\"animateSortingIcon\",value:function animateSortingIcon(type){var value=type=='up'?1:0;_reactNative.Animated.timing(this.state.roateIcon,{toValue:value,duration:200,useNativeDriver:true}).start();}},{key:\"_renderSortingIcon\",value:function _renderSortingIcon(){return _react.default.createElement(_reactNative.Animated.View,{useNativeDriver:true,style:{transform:[{rotate:this.state.roateIcon.interpolate({inputRange:[0,1],outputRange:['0deg','180deg']})}]},__source:{fileName:_jsxFileName,lineNumber:61}},_react.default.createElement(_.Icon,{name:'arrow-downward',size:18,style:_DataTableCell.default.sortingIcon,__source:{fileName:_jsxFileName,lineNumber:73}}));}},{key:\"_renderText\",value:function _renderText(){var _this$props=this.props,text=_this$props.text,type=_this$props.type,sortingIcon=_this$props.sortingIcon,textStyle=_this$props.textStyle;var style=type=='header'?_DataTableCell.default.textHeader:_DataTableCell.default.text;var color=type=='header'?'rgba(0,0,0,.54)':'rgba(0,0,0,.87)';if(sortingIcon=='down'||sortingIcon=='up')color='black';return _react.default.createElement(_reactNative.Text,{style:[style,{color:color},textStyle],__source:{fileName:_jsxFileName,lineNumber:84}},text);}},{key:\"render\",value:function render(){var _this$props2=this.props,children=_this$props2.children,style=_this$props2.style,right=_this$props2.right,borderRight=_this$props2.borderRight,borderLeft=_this$props2.borderLeft,onPress=_this$props2.onPress,sortingIcon=_this$props2.sortingIcon,minWidth=_this$props2.minWidth,relativeWidth=_this$props2.relativeWidth;var minWidthImplemented=minWidth+minWidth*(relativeWidth-1);var platformStyles=_reactNative.Platform.OS=='web'?{}:{};return _react.default.createElement(_reactNative.TouchableWithoutFeedback,{disabled:!onPress,onPress:onPress,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:104}},_react.default.createElement(_reactNative.View,{style:[_DataTableCell.default.dataTableItem,{flex:1,justifyContent:right?'flex-end':'flex-start',borderRightWidth:borderRight?1:0,borderLeftWidth:borderLeft?1:0,minHeight:25,minWidth:minWidthImplemented,flexWrap:'wrap'},platformStyles,style],__source:{fileName:_jsxFileName,lineNumber:108}},sortingIcon?this._renderSortingIcon():null,children?children:this._renderText()));}}]);return TableCell;}(_react.Component);(0,_defineProperty2.default)(TableCell,\"propTypes\",{children:_propTypes.default.node,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),right:_propTypes.default.bool,borderRight:_propTypes.default.bool,borderLeft:_propTypes.default.bool,minWidth:_propTypes.default.number,text:_propTypes.default.string,onPress:_propTypes.default.func,type:_propTypes.default.string,sortingIcon:_propTypes.default.string,relativeWidth:_propTypes.default.number,textStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array])});(0,_defineProperty2.default)(TableCell,\"defaultProps\",{relativeWidth:1,minWidth:100});var _default=(0,_withTheme.default)(TableCell);exports.default=_default;"
  },
  {
    "path": "dist/Components/DataTable/DataTableCell/DataTableCell.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _=require(\"../../../\");var _Header=_interopRequireDefault(require(\"../../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../../storybook/components/Container\"));var _storiesOf=require(\"../../../storybook/helpers/storiesOf\");var _storybookState=require(\"@sambego/storybook-state\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/DataTable/DataTableCell/DataTableCell.stories.js\";var store=new _storybookState.Store({sortingIcon:'down'});var _default=(0,_storiesOf.storiesOf)('Components|Data Table/Cell',module).addParameters({jest:['DataTable']}).add('Simple',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:17}},_react.default.createElement(_Header.default,{title:'Simple DataTable Cell',__source:{fileName:_jsxFileName,lineNumber:18}}),_react.default.createElement(_.DataTable,{__source:{fileName:_jsxFileName,lineNumber:19}},_react.default.createElement(_.DataTableRow,{__source:{fileName:_jsxFileName,lineNumber:20}},_react.default.createElement(_.DataTableCell,{text:'Desert',type:'header',borderRight:true,relativeWidth:2,__source:{fileName:_jsxFileName,lineNumber:21}}),_react.default.createElement(_.DataTableCell,{text:'Calories',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:27}}),_react.default.createElement(_.DataTableCell,{text:'Fat (g)',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:28}}),_react.default.createElement(_.DataTableCell,{text:'Carbs (g)',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:29}}),_react.default.createElement(_.DataTableCell,{text:'Protein (g)',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:30}})),_react.default.createElement(_.DataTableRow,{__source:{fileName:_jsxFileName,lineNumber:32}},_react.default.createElement(_.DataTableCell,{text:'Frozen yogurt',borderRight:true,relativeWidth:2,__source:{fileName:_jsxFileName,lineNumber:33}}),_react.default.createElement(_.DataTableCell,{text:'159',right:true,__source:{fileName:_jsxFileName,lineNumber:34}}),_react.default.createElement(_.DataTableCell,{text:'6.0',right:true,__source:{fileName:_jsxFileName,lineNumber:35}}),_react.default.createElement(_.DataTableCell,{text:'24',right:true,__source:{fileName:_jsxFileName,lineNumber:36}}),_react.default.createElement(_.DataTableCell,{text:'4',right:true,__source:{fileName:_jsxFileName,lineNumber:37}})),_react.default.createElement(_.DataTableRow,{__source:{fileName:_jsxFileName,lineNumber:39}},_react.default.createElement(_.DataTableCell,{text:'Ice Cream Sandwich',borderRight:true,relativeWidth:2,__source:{fileName:_jsxFileName,lineNumber:40}}),_react.default.createElement(_.DataTableCell,{text:'237',right:true,__source:{fileName:_jsxFileName,lineNumber:45}}),_react.default.createElement(_.DataTableCell,{text:'9.0',right:true,__source:{fileName:_jsxFileName,lineNumber:46}}),_react.default.createElement(_.DataTableCell,{text:'37',right:true,__source:{fileName:_jsxFileName,lineNumber:47}}),_react.default.createElement(_.DataTableCell,{text:'4.3',right:true,__source:{fileName:_jsxFileName,lineNumber:48}})),_react.default.createElement(_.DataTableRow,{__source:{fileName:_jsxFileName,lineNumber:50}},_react.default.createElement(_.DataTableCell,{text:'Eclair',borderRight:true,relativeWidth:2,__source:{fileName:_jsxFileName,lineNumber:51}}),_react.default.createElement(_.DataTableCell,{text:'262',right:true,__source:{fileName:_jsxFileName,lineNumber:52}}),_react.default.createElement(_.DataTableCell,{text:'16.0',right:true,__source:{fileName:_jsxFileName,lineNumber:53}}),_react.default.createElement(_.DataTableCell,{text:'24',right:true,__source:{fileName:_jsxFileName,lineNumber:54}}),_react.default.createElement(_.DataTableCell,{text:'6.0',right:true,__source:{fileName:_jsxFileName,lineNumber:55}}))));}).add('Sorting Icon',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:61}},_react.default.createElement(_Header.default,{title:'Sortin Icon DataTable Cell',__source:{fileName:_jsxFileName,lineNumber:62}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:63}},function(state){return _react.default.createElement(_.DataTable,{__source:{fileName:_jsxFileName,lineNumber:65}},_react.default.createElement(_.DataTableRow,{__source:{fileName:_jsxFileName,lineNumber:66}},_react.default.createElement(_.DataTableCell,{text:'Desert',type:'header',borderRight:true,relativeWidth:2,__source:{fileName:_jsxFileName,lineNumber:67}}),_react.default.createElement(_.DataTableCell,{text:'Calories',type:'header',sortingIcon:state.sortingIcon,onPress:function onPress(){return store.set({sortingIcon:state.sortingIcon=='up'?'down':'up'});},right:true,__source:{fileName:_jsxFileName,lineNumber:73}}),_react.default.createElement(_.DataTableCell,{text:'Fat (g)',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:84}}),_react.default.createElement(_.DataTableCell,{text:'Carbs (g)',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:85}}),_react.default.createElement(_.DataTableCell,{text:'Protein (g)',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:86}})),_react.default.createElement(_.DataTableRow,{__source:{fileName:_jsxFileName,lineNumber:88}},_react.default.createElement(_.DataTableCell,{text:'Frozen yogurt',borderRight:true,relativeWidth:2,__source:{fileName:_jsxFileName,lineNumber:89}}),_react.default.createElement(_.DataTableCell,{text:'159',right:true,__source:{fileName:_jsxFileName,lineNumber:94}}),_react.default.createElement(_.DataTableCell,{text:'6.0',right:true,__source:{fileName:_jsxFileName,lineNumber:95}}),_react.default.createElement(_.DataTableCell,{text:'24',right:true,__source:{fileName:_jsxFileName,lineNumber:96}}),_react.default.createElement(_.DataTableCell,{text:'4',right:true,__source:{fileName:_jsxFileName,lineNumber:97}})),_react.default.createElement(_.DataTableRow,{__source:{fileName:_jsxFileName,lineNumber:99}},_react.default.createElement(_.DataTableCell,{text:'Ice Cream Sandwich',borderRight:true,relativeWidth:2,__source:{fileName:_jsxFileName,lineNumber:100}}),_react.default.createElement(_.DataTableCell,{text:'237',right:true,__source:{fileName:_jsxFileName,lineNumber:105}}),_react.default.createElement(_.DataTableCell,{text:'9.0',right:true,__source:{fileName:_jsxFileName,lineNumber:106}}),_react.default.createElement(_.DataTableCell,{text:'37',right:true,__source:{fileName:_jsxFileName,lineNumber:107}}),_react.default.createElement(_.DataTableCell,{text:'4.3',right:true,__source:{fileName:_jsxFileName,lineNumber:108}})),_react.default.createElement(_.DataTableRow,{__source:{fileName:_jsxFileName,lineNumber:110}},_react.default.createElement(_.DataTableCell,{text:'Eclair',borderRight:true,relativeWidth:2,__source:{fileName:_jsxFileName,lineNumber:111}}),_react.default.createElement(_.DataTableCell,{text:'262',right:true,__source:{fileName:_jsxFileName,lineNumber:112}}),_react.default.createElement(_.DataTableCell,{text:'16.0',right:true,__source:{fileName:_jsxFileName,lineNumber:113}}),_react.default.createElement(_.DataTableCell,{text:'24',right:true,__source:{fileName:_jsxFileName,lineNumber:114}}),_react.default.createElement(_.DataTableCell,{text:'6.0',right:true,__source:{fileName:_jsxFileName,lineNumber:115}})));}));});exports.default=_default;"
  },
  {
    "path": "dist/Components/DataTable/DataTableCell/DataTableCell.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({dataTableItem:{flexDirection:'row',alignItems:'center',borderColor:'rgb(224, 224, 224)',paddingHorizontal:16,paddingVertical:4},text:{fontSize:13,flexShrink:1,flex:1},textHeader:{height:24,lineHeight:24,fontSize:12,fontWeight:'500',alignItems:'center',flexShrink:1,flex:1},sortingIcon:{marginRight:4}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/DataTable/DataTableCell/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _DataTableCell.default;}});var _DataTableCell=_interopRequireDefault(require(\"./DataTableCell\"));"
  },
  {
    "path": "dist/Components/DataTable/DataTableHeader/DataTableHeader.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _reactNative=require(\"react-native\");var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _IconButton=_interopRequireDefault(require(\"../../IconButton/IconButton\"));var _DataTableHeader=_interopRequireDefault(require(\"./DataTableHeader.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/DataTable/DataTableHeader/DataTableHeader.js\";var DataTableHeader=function(_Component){(0,_inherits2.default)(DataTableHeader,_Component);function DataTableHeader(){(0,_classCallCheck2.default)(this,DataTableHeader);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(DataTableHeader).apply(this,arguments));}(0,_createClass2.default)(DataTableHeader,[{key:\"_renderTitle\",value:function _renderTitle(){var _this$props=this.props,title=_this$props.title,leftActions=_this$props.leftActions;if(!title)return null;return _react.default.createElement(_reactNative.Text,{style:[_DataTableHeader.default.title,{marginLeft:leftActions?12:0}],__source:{fileName:_jsxFileName,lineNumber:24}},title);}},{key:\"_renderActions\",value:function _renderActions(actionItems,position){if(!actionItems)return null;return _react.default.createElement(_reactNative.View,{style:_DataTableHeader.default.actions,__source:{fileName:_jsxFileName,lineNumber:32}},actionItems.map(function(item,index){if(item.name){return _react.default.createElement(_IconButton.default,{key:item.name,name:item.name,size:24,color:'rgba(33, 33, 33, 0.6)',style:{marginRight:index+1===actionItems.length||position==='left'?0:8,marginLeft:index+1===actionItems.length||position==='right'?0:8},onPress:item.onPress,__source:{fileName:_jsxFileName,lineNumber:36}});}else{return item;}}));}},{key:\"_renderContent\",value:function _renderContent(){var _this$props2=this.props,rightActions=_this$props2.rightActions,leftActions=_this$props2.leftActions;return _react.default.createElement(_reactNative.View,{style:[_DataTableHeader.default.content,{paddingRight:rightActions?12:16,paddingLeft:leftActions?12:16}],__source:{fileName:_jsxFileName,lineNumber:65}},_react.default.createElement(_reactNative.View,{style:_DataTableHeader.default.left,__source:{fileName:_jsxFileName,lineNumber:73}},this._renderActions(leftActions,'left'),this._renderTitle()),this._renderActions(rightActions,'right'));}},{key:\"render\",value:function render(){var _this$props3=this.props,children=_this$props3.children,style=_this$props3.style;return _react.default.createElement(_reactNative.View,{style:[_DataTableHeader.default.dataTableHeader,style],__source:{fileName:_jsxFileName,lineNumber:87}},children?children:this._renderContent());}}]);return DataTableHeader;}(_react.Component);(0,_defineProperty2.default)(DataTableHeader,\"propTypes\",{children:_propTypes.default.node,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),rightActions:_propTypes.default.array,leftActions:_propTypes.default.array,title:_propTypes.default.string});(0,_defineProperty2.default)(DataTableHeader,\"defaultProps\",{borderBottomColor:'rgb(224, 224, 224)'});var _default=(0,_withTheme.default)(DataTableHeader);exports.default=_default;"
  },
  {
    "path": "dist/Components/DataTable/DataTableHeader/DataTableHeader.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _=require(\"../../../\");var _Header=_interopRequireDefault(require(\"../../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../../storybook/components/Container\"));var _storiesOf=require(\"../../../storybook/helpers/storiesOf\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/DataTable/DataTableHeader/DataTableHeader.stories.js\";var _default=(0,_storiesOf.storiesOf)('Components|Data Table/Header',module).addParameters({jest:['DataTableHeader']}).add('Header',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:17}},_react.default.createElement(_Header.default,{title:'DataTable Header',__source:{fileName:_jsxFileName,lineNumber:18}}),_react.default.createElement(_.DataTable,{__source:{fileName:_jsxFileName,lineNumber:19}},_react.default.createElement(_.DataTableHeader,{title:'Nutrition',rightActions:[{name:'filter-list'},{name:'more-vert'}],__source:{fileName:_jsxFileName,lineNumber:20}}),_react.default.createElement(_.DataTableRow,{__source:{fileName:_jsxFileName,lineNumber:24}},_react.default.createElement(_.DataTableCell,{text:'Desert',type:'header',relativeWidth:2,__source:{fileName:_jsxFileName,lineNumber:25}}),_react.default.createElement(_.DataTableCell,{text:'Calories',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:26}}),_react.default.createElement(_.DataTableCell,{text:'Fat (g)',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:27}}),_react.default.createElement(_.DataTableCell,{text:'Carbs (g)',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:28}}),_react.default.createElement(_.DataTableCell,{text:'Protein (g)',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:29}})),_react.default.createElement(_.DataTableRow,{__source:{fileName:_jsxFileName,lineNumber:31}},_react.default.createElement(_.DataTableCell,{text:'Frozen yogurt',borderRight:true,relativeWidth:2,__source:{fileName:_jsxFileName,lineNumber:32}}),_react.default.createElement(_.DataTableCell,{text:'159',right:true,__source:{fileName:_jsxFileName,lineNumber:33}}),_react.default.createElement(_.DataTableCell,{text:'6.0',right:true,__source:{fileName:_jsxFileName,lineNumber:34}}),_react.default.createElement(_.DataTableCell,{text:'24',right:true,__source:{fileName:_jsxFileName,lineNumber:35}}),_react.default.createElement(_.DataTableCell,{text:'4',right:true,__source:{fileName:_jsxFileName,lineNumber:36}})),_react.default.createElement(_.DataTableRow,{__source:{fileName:_jsxFileName,lineNumber:38}},_react.default.createElement(_.DataTableCell,{text:'Ice Cream Sandwhich',borderRight:true,relativeWidth:2,__source:{fileName:_jsxFileName,lineNumber:39}}),_react.default.createElement(_.DataTableCell,{text:'237',right:true,__source:{fileName:_jsxFileName,lineNumber:44}}),_react.default.createElement(_.DataTableCell,{text:'9.0',right:true,__source:{fileName:_jsxFileName,lineNumber:45}}),_react.default.createElement(_.DataTableCell,{text:'37',right:true,__source:{fileName:_jsxFileName,lineNumber:46}}),_react.default.createElement(_.DataTableCell,{text:'4.3',right:true,__source:{fileName:_jsxFileName,lineNumber:47}})),_react.default.createElement(_.DataTableRow,{__source:{fileName:_jsxFileName,lineNumber:49}},_react.default.createElement(_.DataTableCell,{text:'Eclair',borderRight:true,relativeWidth:2,__source:{fileName:_jsxFileName,lineNumber:50}}),_react.default.createElement(_.DataTableCell,{text:'262',right:true,__source:{fileName:_jsxFileName,lineNumber:51}}),_react.default.createElement(_.DataTableCell,{text:'16.0',right:true,__source:{fileName:_jsxFileName,lineNumber:52}}),_react.default.createElement(_.DataTableCell,{text:'24',right:true,__source:{fileName:_jsxFileName,lineNumber:53}}),_react.default.createElement(_.DataTableCell,{text:'6.0',right:true,__source:{fileName:_jsxFileName,lineNumber:54}}))));});exports.default=_default;"
  },
  {
    "path": "dist/Components/DataTable/DataTableHeader/DataTableHeader.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({dataTableHeader:{height:64,width:'100%',flexDirection:'row',alignItems:'center',paddingVertical:20,minWidth:'auto'},content:{flexDirection:'row',alignItems:'center',justifyContent:'space-between',width:'100%'},left:{flexDirection:'row',alignItems:'center'},title:{fontSize:20,fontWeight:'500',lineHeight:24,letterSpacing:0.15},actions:{flexDirection:'row',alignItems:'center'}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/DataTable/DataTableHeader/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _DataTableHeader.default;}});var _DataTableHeader=_interopRequireDefault(require(\"./DataTableHeader\"));"
  },
  {
    "path": "dist/Components/DataTable/DataTablePagination/DataTablePagination.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf3=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _=require(\"../../../\");var _DataTablePagination=_interopRequireDefault(require(\"./DataTablePagination.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/DataTable/DataTablePagination/DataTablePagination.js\";var DataTablePagination=function(_Component){(0,_inherits2.default)(DataTablePagination,_Component);function DataTablePagination(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,DataTablePagination);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(DataTablePagination)).call.apply(_getPrototypeOf2,[this].concat(args)));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{visible:false});return _this;}(0,_createClass2.default)(DataTablePagination,[{key:\"_handleChangeRowsPerPage\",value:function _handleChangeRowsPerPage(item){var onChangeRowsPerPage=this.props.onChangeRowsPerPage;this.setState({visible:false});onChangeRowsPerPage(item);}},{key:\"_renderPossiblePagesPerRow\",value:function _renderPossiblePagesPerRow(){var _this2=this;var possibleNumberPerPage=this.props.possibleNumberPerPage;var rows=possibleNumberPerPage?possibleNumberPerPage:[2,5,10,15];return rows.map(function(item){return _react.default.createElement(_.MenuItem,{key:item,text:item,onPress:function onPress(){return _this2._handleChangeRowsPerPage(item);},__source:{fileName:_jsxFileName,lineNumber:36}});});}},{key:\"_renderRowsPerPage\",value:function _renderRowsPerPage(){var _this3=this;var perPage=this.props.perPage;var visible=this.state.visible;return _react.default.createElement(_reactNative.View,{style:_DataTablePagination.default.rowsPerPage,__source:{fileName:_jsxFileName,lineNumber:48}},_react.default.createElement(_reactNative.Text,{style:[_DataTablePagination.default.footerFont,_DataTablePagination.default.rowsPerPageText],numberOfLines:1,__source:{fileName:_jsxFileName,lineNumber:49}},'Rows Per Page:'),_react.default.createElement(_.Menu,{visible:visible,button:_react.default.createElement(_.Ripple,{onPress:function onPress(){return _this3.setState({visible:true});},style:_DataTablePagination.default.menuButton,__source:{fileName:_jsxFileName,lineNumber:57}},_react.default.createElement(_reactNative.Text,{style:_DataTablePagination.default.footerFont,__source:{fileName:_jsxFileName,lineNumber:60}},perPage),_react.default.createElement(_.Icon,{name:'arrow-drop-down',size:24,color:'rgba(33, 33, 33, 0.6)',__source:{fileName:_jsxFileName,lineNumber:61}})),__source:{fileName:_jsxFileName,lineNumber:54}},this._renderPossiblePagesPerRow()));}},{key:\"_renderCurrentPage\",value:function _renderCurrentPage(){var _this$props=this.props,page=_this$props.page,perPage=_this$props.perPage,numberOfRows=_this$props.numberOfRows;var startRange=numberOfRows===0?0:page*perPage+1;var endRange=Math.min(numberOfRows,(page+1)*perPage);return _react.default.createElement(_reactNative.Text,{style:[_DataTablePagination.default.footerFont,_DataTablePagination.default.currentNumber],__source:{fileName:_jsxFileName,lineNumber:80}},startRange+\"-\"+endRange+\" of \"+numberOfRows+\" \");}},{key:\"_renderNavigation\",value:function _renderNavigation(){var _this$props2=this.props,page=_this$props2.page,numberOfPages=_this$props2.numberOfPages,onChangePage=_this$props2.onChangePage;return _react.default.createElement(_react.Fragment,{__source:{fileName:_jsxFileName,lineNumber:91}},_react.default.createElement(_.IconButton,{name:'chevron-left',disabled:page===0,onPress:function onPress(){return onChangePage(page-1);},size:24,style:{marginRight:24},color:page===0?'rgba(33, 33, 33, 0.3)':'rgba(0, 0, 0, 0.54)',__source:{fileName:_jsxFileName,lineNumber:92}}),_react.default.createElement(_.IconButton,{name:'chevron-right',disabled:page===numberOfPages-1,onPress:function onPress(){return onChangePage(page+1);},size:24,color:page===numberOfPages-1?'rgba(33, 33, 33, 0.3)':'rgba(0, 0, 0, 0.54)',__source:{fileName:_jsxFileName,lineNumber:100}}));}},{key:\"render\",value:function render(){var style=this.props.style;return _react.default.createElement(_reactNative.View,{style:[_DataTablePagination.default.container,style],__source:{fileName:_jsxFileName,lineNumber:119}},this._renderRowsPerPage(),this._renderCurrentPage(),this._renderNavigation());}}]);return DataTablePagination;}(_react.Component);(0,_defineProperty2.default)(DataTablePagination,\"propTypes\",{children:_propTypes.default.node,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),onChangePage:_propTypes.default.func,numberOfPages:_propTypes.default.number,numberOfRows:_propTypes.default.number,page:_propTypes.default.number,perPage:_propTypes.default.number,possibleNumberPerPage:_propTypes.default.number,onChangeRowsPerPage:_propTypes.default.func});var _default=(0,_withTheme.default)(DataTablePagination);exports.default=_default;"
  },
  {
    "path": "dist/Components/DataTable/DataTablePagination/DataTablePagination.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _=require(\"../../..\");var _Header=_interopRequireDefault(require(\"../../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../../storybook/components/Container\"));var _storiesOf=require(\"../../../storybook/helpers/storiesOf\");var _storybookState=require(\"@sambego/storybook-state\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/DataTable/DataTablePagination/DataTablePagination.stories.js\";var store=new _storybookState.Store({page:0,perPage:2});var data=[{name:'Frozen Yogurt',calories:'159',fat:'6.0',carbs:'24',protein:'4'},{name:'Ice Cream Sandwhich',calories:'237',fat:'9.0',carbs:'37',protein:'4.3'},{name:'Blizzard',calories:'480',fat:'3.4',carbs:'80',protein:'1'},{name:'Frosty',calories:'200',fat:'2.0',carbs:'12',protein:'8'},{name:'DillyBar',calories:'120',fat:'15',carbs:'30',protein:'10'},{name:'PushPop',calories:'50',fat:'1',carbs:'2',protein:'2'}];var _default=(0,_storiesOf.storiesOf)('Components|Data Table/Pagination',module).addParameters({jest:['DataTable']}).add('Simple',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:68}},_react.default.createElement(_Header.default,{title:'DataTable Pagination',__source:{fileName:_jsxFileName,lineNumber:69}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:70}},function(state){return _react.default.createElement(_.DataTable,{__source:{fileName:_jsxFileName,lineNumber:72}},_react.default.createElement(_.DataTableRow,{__source:{fileName:_jsxFileName,lineNumber:73}},_react.default.createElement(_.DataTableCell,{text:'Desert',type:'header',borderRight:true,flex:2,__source:{fileName:_jsxFileName,lineNumber:74}}),_react.default.createElement(_.DataTableCell,{text:'Calories',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:80}}),_react.default.createElement(_.DataTableCell,{text:'Fat (g)',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:81}}),_react.default.createElement(_.DataTableCell,{text:'Carbs (g)',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:82}}),_react.default.createElement(_.DataTableCell,{text:'Protein (g)',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:83}})),data.slice(state.page*state.perPage,state.page*state.perPage+state.perPage).map(function(row){return _react.default.createElement(_.DataTableRow,{key:row.name,__source:{fileName:_jsxFileName,lineNumber:91}},_react.default.createElement(_.DataTableCell,{text:row.name,borderRight:true,flex:2,__source:{fileName:_jsxFileName,lineNumber:92}}),_react.default.createElement(_.DataTableCell,{text:row.calories,right:true,__source:{fileName:_jsxFileName,lineNumber:93}}),_react.default.createElement(_.DataTableCell,{text:row.fat,right:true,__source:{fileName:_jsxFileName,lineNumber:94}}),_react.default.createElement(_.DataTableCell,{text:row.carbs,right:true,__source:{fileName:_jsxFileName,lineNumber:95}}),_react.default.createElement(_.DataTableCell,{text:row.protein,right:true,__source:{fileName:_jsxFileName,lineNumber:96}}));}),_react.default.createElement(_.DataTablePagination,{page:state.page,numberOfPages:data.length/state.perPage,numberOfRows:data.length,perPage:state.perPage,onChangePage:function onChangePage(page){return store.set({page:page});},onChangeRowsPerPage:function onChangeRowsPerPage(perPage){return store.set({perPage:perPage});},__source:{fileName:_jsxFileName,lineNumber:100}}));}));});exports.default=_default;"
  },
  {
    "path": "dist/Components/DataTable/DataTablePagination/DataTablePagination.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({container:{justifyContent:'flex-end',flexDirection:'row',alignItems:'center',paddingVertical:20,paddingHorizontal:16,minWidth:'auto'},footerFont:{fontSize:12,lineHeight:14,letterSpacing:0.4,color:'rgba(0,0,0,1)'},currentNumber:{marginRight:24},rowsPerPage:{flexDirection:'row',alignItems:'center',marginRight:32},rowsPerPageText:{marginRight:8},menuButton:{flexDirection:'row',alignItems:'center',justifyContent:'space-around'}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/DataTable/DataTablePagination/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _DataTablePagination.default;}});var _DataTablePagination=_interopRequireDefault(require(\"./DataTablePagination\"));"
  },
  {
    "path": "dist/Components/DataTable/DataTableRow/DataTableRow.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _reactNative=require(\"react-native\");var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _=require(\"../../../\");var _DataTableRow=_interopRequireDefault(require(\"./DataTableRow.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/DataTable/DataTableRow/DataTableRow.js\";var DataTableRow=function(_Component){(0,_inherits2.default)(DataTableRow,_Component);function DataTableRow(props){var _this;(0,_classCallCheck2.default)(this,DataTableRow);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(DataTableRow).call(this,props));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{backgroundColor:'transparent'});return _this;}(0,_createClass2.default)(DataTableRow,[{key:\"_renderContent\",value:function _renderContent(){var _this$props=this.props,children=_this$props.children,style=_this$props.style,borderBottomColor=_this$props.borderBottomColor,onPress=_this$props.onPress,selected=_this$props.selected,onPressCheckbox=_this$props.onPressCheckbox,showCheckbox=_this$props.showCheckbox,hover=_this$props.hover,checkboxOffset=_this$props.checkboxOffset;var backgroundColor=this.state.backgroundColor;var color=hover?backgroundColor:'transparent';if(selected)color='rgba(0, 0, 0, 0.04)';return _react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:showCheckbox?onPressCheckbox:onPress,disabled:!onPressCheckbox&&!onPress,__source:{fileName:_jsxFileName,lineNumber:52}},_react.default.createElement(_reactNative.View,{style:[_DataTableRow.default.container,{borderBottomColor:borderBottomColor,backgroundColor:color},style],__source:{fileName:_jsxFileName,lineNumber:55}},showCheckbox?_react.default.createElement(_.Checkbox,{checked:selected,onPress:onPressCheckbox,size:24,style:{marginRight:12},__source:{fileName:_jsxFileName,lineNumber:65}}):null,checkboxOffset?_react.default.createElement(_reactNative.View,{style:_DataTableRow.default.checkboxOffset,__source:{fileName:_jsxFileName,lineNumber:72}}):null,children));}},{key:\"render\",value:function render(){var _this2=this;var hover=this.props.hover;if(hover){return _react.default.createElement(_.Hoverable,{onHoverIn:function onHoverIn(){return _this2.setState({backgroundColor:'rgba(0, 0, 0, 0.04)'});},onHoverOut:function onHoverOut(){return _this2.setState({backgroundColor:'transparent'});},__source:{fileName:_jsxFileName,lineNumber:84}},this._renderContent());}return this._renderContent();}}]);return DataTableRow;}(_react.Component);(0,_defineProperty2.default)(DataTableRow,\"propTypes\",{children:_propTypes.default.node,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),borderBottomColor:_propTypes.default.string,selected:_propTypes.default.bool,onPressCheckbox:_propTypes.default.func,showCheckbox:_propTypes.default.bool,checkboxOffset:_propTypes.default.bool,onPress:_propTypes.default.func,hover:_propTypes.default.bool,type:_propTypes.default.string});(0,_defineProperty2.default)(DataTableRow,\"defaultProps\",{borderBottomColor:'rgb(224, 224, 224)'});var _default=(0,_withTheme.default)(DataTableRow);exports.default=_default;"
  },
  {
    "path": "dist/Components/DataTable/DataTableRow/DataTableRow.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _=require(\"../../..\");var _Header=_interopRequireDefault(require(\"../../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../../storybook/components/Container\"));var _storiesOf=require(\"../../../storybook/helpers/storiesOf\");var _storybookState=require(\"@sambego/storybook-state\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/DataTable/DataTableRow/DataTableRow.stories.js\";var store=new _storybookState.Store({checkedOne:false,checkedTwo:false,checkedThree:false});var _default=(0,_storiesOf.storiesOf)('Components|Data Table/Row',module).addParameters({jest:['DataTableRow']}).add('simple',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:20}},_react.default.createElement(_Header.default,{title:'Simple DataTable Row',__source:{fileName:_jsxFileName,lineNumber:21}}),_react.default.createElement(_.DataTable,{__source:{fileName:_jsxFileName,lineNumber:22}},_react.default.createElement(_.DataTableRow,{__source:{fileName:_jsxFileName,lineNumber:23}},_react.default.createElement(_.DataTableCell,{text:'Desert',type:'header',borderRight:true,relativeWidth:2,__source:{fileName:_jsxFileName,lineNumber:24}}),_react.default.createElement(_.DataTableCell,{text:'Calories',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:30}}),_react.default.createElement(_.DataTableCell,{text:'Fat (g)',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:31}}),_react.default.createElement(_.DataTableCell,{text:'Carbs (g)',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:32}}),_react.default.createElement(_.DataTableCell,{text:'Protein (g)',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:33}})),_react.default.createElement(_.DataTableRow,{__source:{fileName:_jsxFileName,lineNumber:35}},_react.default.createElement(_.DataTableCell,{text:'Frozen yogurt',borderRight:true,relativeWidth:2,__source:{fileName:_jsxFileName,lineNumber:36}}),_react.default.createElement(_.DataTableCell,{text:'159',right:true,__source:{fileName:_jsxFileName,lineNumber:37}}),_react.default.createElement(_.DataTableCell,{text:'6.0',right:true,__source:{fileName:_jsxFileName,lineNumber:38}}),_react.default.createElement(_.DataTableCell,{text:'24',right:true,__source:{fileName:_jsxFileName,lineNumber:39}}),_react.default.createElement(_.DataTableCell,{text:'4',right:true,__source:{fileName:_jsxFileName,lineNumber:40}})),_react.default.createElement(_.DataTableRow,{__source:{fileName:_jsxFileName,lineNumber:42}},_react.default.createElement(_.DataTableCell,{text:'Ice Cream Sandwich',borderRight:true,relativeWidth:2,__source:{fileName:_jsxFileName,lineNumber:43}}),_react.default.createElement(_.DataTableCell,{text:'237',right:true,__source:{fileName:_jsxFileName,lineNumber:48}}),_react.default.createElement(_.DataTableCell,{text:'9.0',right:true,__source:{fileName:_jsxFileName,lineNumber:49}}),_react.default.createElement(_.DataTableCell,{text:'37',right:true,__source:{fileName:_jsxFileName,lineNumber:50}}),_react.default.createElement(_.DataTableCell,{text:'4.3',right:true,__source:{fileName:_jsxFileName,lineNumber:51}})),_react.default.createElement(_.DataTableRow,{__source:{fileName:_jsxFileName,lineNumber:53}},_react.default.createElement(_.DataTableCell,{text:'Eclair',borderRight:true,relativeWidth:2,__source:{fileName:_jsxFileName,lineNumber:54}}),_react.default.createElement(_.DataTableCell,{text:'262',right:true,__source:{fileName:_jsxFileName,lineNumber:55}}),_react.default.createElement(_.DataTableCell,{text:'16.0',right:true,__source:{fileName:_jsxFileName,lineNumber:56}}),_react.default.createElement(_.DataTableCell,{text:'24',right:true,__source:{fileName:_jsxFileName,lineNumber:57}}),_react.default.createElement(_.DataTableCell,{text:'6.0',right:true,__source:{fileName:_jsxFileName,lineNumber:58}}))));}).add('with checkbox',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:64}},_react.default.createElement(_Header.default,{title:'Checkbox DataTable Row',__source:{fileName:_jsxFileName,lineNumber:65}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:66}},function(state){return _react.default.createElement(_.DataTable,{__source:{fileName:_jsxFileName,lineNumber:68}},_react.default.createElement(_.DataTableRow,{checkboxOffset:true,type:'header',__source:{fileName:_jsxFileName,lineNumber:69}},_react.default.createElement(_.DataTableCell,{text:'Desert',type:'header',borderRight:true,relativeWidth:2,__source:{fileName:_jsxFileName,lineNumber:70}}),_react.default.createElement(_.DataTableCell,{text:'Calories',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:76}}),_react.default.createElement(_.DataTableCell,{text:'Fat (g)',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:77}}),_react.default.createElement(_.DataTableCell,{text:'Carbs (g)',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:78}}),_react.default.createElement(_.DataTableCell,{text:'Protein (g)',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:79}})),_react.default.createElement(_.DataTableRow,{showCheckbox:true,selected:state.checkedOne,onPressCheckbox:function onPressCheckbox(){return store.set({checkedOne:!state.checkedOne});},__source:{fileName:_jsxFileName,lineNumber:81}},_react.default.createElement(_.DataTableCell,{text:'Frozen yogurt',borderRight:true,relativeWidth:2,__source:{fileName:_jsxFileName,lineNumber:87}}),_react.default.createElement(_.DataTableCell,{text:'159',right:true,__source:{fileName:_jsxFileName,lineNumber:92}}),_react.default.createElement(_.DataTableCell,{text:'6.0',right:true,__source:{fileName:_jsxFileName,lineNumber:93}}),_react.default.createElement(_.DataTableCell,{text:'24',right:true,__source:{fileName:_jsxFileName,lineNumber:94}}),_react.default.createElement(_.DataTableCell,{text:'4',right:true,__source:{fileName:_jsxFileName,lineNumber:95}})),_react.default.createElement(_.DataTableRow,{showCheckbox:true,selected:state.checkedTwo,onPressCheckbox:function onPressCheckbox(){return store.set({checkedTwo:!state.checkedTwo});},__source:{fileName:_jsxFileName,lineNumber:97}},_react.default.createElement(_.DataTableCell,{text:'Ice Cream Sandwich',borderRight:true,relativeWidth:2,__source:{fileName:_jsxFileName,lineNumber:103}}),_react.default.createElement(_.DataTableCell,{text:'237',right:true,__source:{fileName:_jsxFileName,lineNumber:108}}),_react.default.createElement(_.DataTableCell,{text:'9.0',right:true,__source:{fileName:_jsxFileName,lineNumber:109}}),_react.default.createElement(_.DataTableCell,{text:'37',right:true,__source:{fileName:_jsxFileName,lineNumber:110}}),_react.default.createElement(_.DataTableCell,{text:'4.3',right:true,__source:{fileName:_jsxFileName,lineNumber:111}})),_react.default.createElement(_.DataTableRow,{showCheckbox:true,selected:state.checkedThree,onPressCheckbox:function onPressCheckbox(){return store.set({checkedThree:!state.checkedThree});},__source:{fileName:_jsxFileName,lineNumber:113}},_react.default.createElement(_.DataTableCell,{text:'Eclair',borderRight:true,relativeWidth:2,__source:{fileName:_jsxFileName,lineNumber:119}}),_react.default.createElement(_.DataTableCell,{text:'262',right:true,__source:{fileName:_jsxFileName,lineNumber:120}}),_react.default.createElement(_.DataTableCell,{text:'16.0',right:true,__source:{fileName:_jsxFileName,lineNumber:121}}),_react.default.createElement(_.DataTableCell,{text:'24',right:true,__source:{fileName:_jsxFileName,lineNumber:122}}),_react.default.createElement(_.DataTableCell,{text:'6.0',right:true,__source:{fileName:_jsxFileName,lineNumber:123}})));}));}).add('selected',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:131}},_react.default.createElement(_Header.default,{title:'Selected DataTable Row',__source:{fileName:_jsxFileName,lineNumber:132}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:133}},function(state){return _react.default.createElement(_.DataTable,{__source:{fileName:_jsxFileName,lineNumber:135}},_react.default.createElement(_.DataTableRow,{__source:{fileName:_jsxFileName,lineNumber:136}},_react.default.createElement(_.DataTableCell,{text:'Desert',type:'header',borderRight:true,relativeWidth:2,__source:{fileName:_jsxFileName,lineNumber:137}}),_react.default.createElement(_.DataTableCell,{text:'Calories',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:143}}),_react.default.createElement(_.DataTableCell,{text:'Fat (g)',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:144}}),_react.default.createElement(_.DataTableCell,{text:'Carbs (g)',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:145}}),_react.default.createElement(_.DataTableCell,{text:'Protein (g)',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:146}})),_react.default.createElement(_.DataTableRow,{selected:state.checkedOne,onPress:function onPress(){return store.set({checkedOne:!state.checkedOne});},__source:{fileName:_jsxFileName,lineNumber:148}},_react.default.createElement(_.DataTableCell,{text:'Frozen yogurt',borderRight:true,relativeWidth:2,__source:{fileName:_jsxFileName,lineNumber:151}}),_react.default.createElement(_.DataTableCell,{text:'159',right:true,__source:{fileName:_jsxFileName,lineNumber:156}}),_react.default.createElement(_.DataTableCell,{text:'6.0',right:true,__source:{fileName:_jsxFileName,lineNumber:157}}),_react.default.createElement(_.DataTableCell,{text:'24',right:true,__source:{fileName:_jsxFileName,lineNumber:158}}),_react.default.createElement(_.DataTableCell,{text:'4',right:true,__source:{fileName:_jsxFileName,lineNumber:159}})),_react.default.createElement(_.DataTableRow,{selected:state.checkedTwo,onPress:function onPress(){return store.set({checkedTwo:!state.checkedTwo});},__source:{fileName:_jsxFileName,lineNumber:161}},_react.default.createElement(_.DataTableCell,{text:'Ice Cream Sandwich',borderRight:true,relativeWidth:2,__source:{fileName:_jsxFileName,lineNumber:164}}),_react.default.createElement(_.DataTableCell,{text:'237',right:true,__source:{fileName:_jsxFileName,lineNumber:169}}),_react.default.createElement(_.DataTableCell,{text:'9.0',right:true,__source:{fileName:_jsxFileName,lineNumber:170}}),_react.default.createElement(_.DataTableCell,{text:'37',right:true,__source:{fileName:_jsxFileName,lineNumber:171}}),_react.default.createElement(_.DataTableCell,{text:'4.3',right:true,__source:{fileName:_jsxFileName,lineNumber:172}})),_react.default.createElement(_.DataTableRow,{selected:state.checkedThree,onPress:function onPress(){return store.set({checkedThree:!state.checkedThree});},__source:{fileName:_jsxFileName,lineNumber:174}},_react.default.createElement(_.DataTableCell,{text:'Eclair',borderRight:true,relativeWidth:2,__source:{fileName:_jsxFileName,lineNumber:177}}),_react.default.createElement(_.DataTableCell,{text:'262',right:true,__source:{fileName:_jsxFileName,lineNumber:178}}),_react.default.createElement(_.DataTableCell,{text:'16.0',right:true,__source:{fileName:_jsxFileName,lineNumber:179}}),_react.default.createElement(_.DataTableCell,{text:'24',right:true,__source:{fileName:_jsxFileName,lineNumber:180}}),_react.default.createElement(_.DataTableCell,{text:'6.0',right:true,__source:{fileName:_jsxFileName,lineNumber:181}})));}));}).add('hover',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:189}},_react.default.createElement(_Header.default,{title:'Hover DataTable Row',__source:{fileName:_jsxFileName,lineNumber:190}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:191}},function(state){return _react.default.createElement(_.DataTable,{__source:{fileName:_jsxFileName,lineNumber:193}},_react.default.createElement(_.DataTableRow,{checkboxOffset:true,__source:{fileName:_jsxFileName,lineNumber:194}},_react.default.createElement(_.DataTableCell,{text:'Desert',type:'header',borderRight:true,relativeWidth:2,__source:{fileName:_jsxFileName,lineNumber:195}}),_react.default.createElement(_.DataTableCell,{text:'Calories',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:201}}),_react.default.createElement(_.DataTableCell,{text:'Fat (g)',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:202}}),_react.default.createElement(_.DataTableCell,{text:'Carbs (g)',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:203}}),_react.default.createElement(_.DataTableCell,{text:'Protein (g)',type:'header',right:true,__source:{fileName:_jsxFileName,lineNumber:204}})),_react.default.createElement(_.DataTableRow,{hover:true,showCheckbox:true,selected:state.checkedOne,onPressCheckbox:function onPressCheckbox(){return store.set({checkedOne:!state.checkedOne});},__source:{fileName:_jsxFileName,lineNumber:206}},_react.default.createElement(_.DataTableCell,{text:'Frozen yogurt',borderRight:true,relativeWidth:2,__source:{fileName:_jsxFileName,lineNumber:213}}),_react.default.createElement(_.DataTableCell,{text:'159',right:true,__source:{fileName:_jsxFileName,lineNumber:218}}),_react.default.createElement(_.DataTableCell,{text:'6.0',right:true,__source:{fileName:_jsxFileName,lineNumber:219}}),_react.default.createElement(_.DataTableCell,{text:'24',right:true,__source:{fileName:_jsxFileName,lineNumber:220}}),_react.default.createElement(_.DataTableCell,{text:'4',right:true,__source:{fileName:_jsxFileName,lineNumber:221}})),_react.default.createElement(_.DataTableRow,{hover:true,showCheckbox:true,selected:state.checkedTwo,onPressCheckbox:function onPressCheckbox(){return store.set({checkedTwo:!state.checkedTwo});},__source:{fileName:_jsxFileName,lineNumber:223}},_react.default.createElement(_.DataTableCell,{text:'Ice Cream Sandwich',borderRight:true,relativeWidth:2,__source:{fileName:_jsxFileName,lineNumber:230}}),_react.default.createElement(_.DataTableCell,{text:'237',right:true,__source:{fileName:_jsxFileName,lineNumber:235}}),_react.default.createElement(_.DataTableCell,{text:'9.0',right:true,__source:{fileName:_jsxFileName,lineNumber:236}}),_react.default.createElement(_.DataTableCell,{text:'37',right:true,__source:{fileName:_jsxFileName,lineNumber:237}}),_react.default.createElement(_.DataTableCell,{text:'4.3',right:true,__source:{fileName:_jsxFileName,lineNumber:238}})),_react.default.createElement(_.DataTableRow,{hover:true,showCheckbox:true,selected:state.checkedThree,onPressCheckbox:function onPressCheckbox(){return store.set({checkedThree:!state.checkedThree});},__source:{fileName:_jsxFileName,lineNumber:240}},_react.default.createElement(_.DataTableCell,{text:'Eclair',borderRight:true,relativeWidth:2,__source:{fileName:_jsxFileName,lineNumber:247}}),_react.default.createElement(_.DataTableCell,{text:'262',right:true,__source:{fileName:_jsxFileName,lineNumber:248}}),_react.default.createElement(_.DataTableCell,{text:'16.0',right:true,__source:{fileName:_jsxFileName,lineNumber:249}}),_react.default.createElement(_.DataTableCell,{text:'24',right:true,__source:{fileName:_jsxFileName,lineNumber:250}}),_react.default.createElement(_.DataTableCell,{text:'6.0',right:true,__source:{fileName:_jsxFileName,lineNumber:251}})));}));});exports.default=_default;"
  },
  {
    "path": "dist/Components/DataTable/DataTableRow/DataTableRow.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({container:{borderStyle:'solid',borderBottomWidth:_reactNative.StyleSheet.hairlineWidth,minHeight:48,flexDirection:'row',alignItems:'stretch',minWidth:'auto'},checkboxOffset:{width:36,marginRight:12}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/DataTable/DataTableRow/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _DataTableRow.default;}});var _DataTableRow=_interopRequireDefault(require(\"./DataTableRow\"));"
  },
  {
    "path": "dist/Components/DataTable/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _DataTable.default;}});Object.defineProperty(exports,\"DataTableHeader\",{enumerable:true,get:function get(){return _DataTableHeader.default;}});Object.defineProperty(exports,\"DataTableCell\",{enumerable:true,get:function get(){return _DataTableCell.default;}});Object.defineProperty(exports,\"DataTablePagination\",{enumerable:true,get:function get(){return _DataTablePagination.default;}});Object.defineProperty(exports,\"DataTableRow\",{enumerable:true,get:function get(){return _DataTableRow.default;}});var _DataTable=_interopRequireDefault(require(\"./DataTable\"));var _DataTableHeader=_interopRequireDefault(require(\"./DataTableHeader\"));var _DataTableCell=_interopRequireDefault(require(\"./DataTableCell\"));var _DataTablePagination=_interopRequireDefault(require(\"./DataTablePagination\"));var _DataTableRow=_interopRequireDefault(require(\"./DataTableRow\"));"
  },
  {
    "path": "dist/Components/Dialog/Dialog.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _reactNative=require(\"react-native\");var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _Modal=_interopRequireDefault(require(\"../Modal/Modal\"));var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _Dialog=_interopRequireDefault(require(\"./Dialog.styles\"));var _Button=_interopRequireDefault(require(\"../Button/Button.js\"));var _BodyText=_interopRequireDefault(require(\"../Typography/BodyText/BodyText.js\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Dialog/Dialog.js\";var Dialog=function(_Component){(0,_inherits2.default)(Dialog,_Component);function Dialog(){(0,_classCallCheck2.default)(this,Dialog);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(Dialog).apply(this,arguments));}(0,_createClass2.default)(Dialog,[{key:\"_renderActionItems\",value:function _renderActionItems(){var _this$props=this.props,actionItems=_this$props.actionItems,actionItemsContainerStyle=_this$props.actionItemsContainerStyle;return _react.default.createElement(_reactNative.View,{style:[_Dialog.default.actionItems,actionItemsContainerStyle],__source:{fileName:_jsxFileName,lineNumber:39}},actionItems.map(function(item,index){if(_react.default.isValidElement(item))return item;return _react.default.createElement(_Button.default,(0,_extends2.default)({key:index,density:-1},item,{__source:{fileName:_jsxFileName,lineNumber:42}}));}));}},{key:\"_renderContent\",value:function _renderContent(){var _this$props2=this.props,style=_this$props2.style,title=_this$props2.title,titleStyle=_this$props2.titleStyle,supportingText=_this$props2.supportingText,supportingTextStyle=_this$props2.supportingTextStyle,children=_this$props2.children,actionItems=_this$props2.actionItems,contentStyle=_this$props2.contentStyle;return _react.default.createElement(_reactNative.View,{style:[_Dialog.default.container,style],__source:{fileName:_jsxFileName,lineNumber:60}},_react.default.createElement(_reactNative.View,{style:[_Dialog.default.contentContainer,contentStyle],__source:{fileName:_jsxFileName,lineNumber:61}},title?_react.default.createElement(_BodyText.default,{style:[_Dialog.default.title,titleStyle],__source:{fileName:_jsxFileName,lineNumber:63}},title):null,supportingText?_react.default.createElement(_BodyText.default,{style:[_Dialog.default.supportingText,supportingTextStyle],__source:{fileName:_jsxFileName,lineNumber:66}},supportingText):null,children,actionItems?this._renderActionItems():null));}},{key:\"render\",value:function render(){var _this$props3=this.props,visible=_this$props3.visible,onRequestClose=_this$props3.onRequestClose,onShow=_this$props3.onShow,onTouchOutside=_this$props3.onTouchOutside,testID=_this$props3.testID;return _react.default.createElement(_Modal.default,{visible:visible,onRequestClose:onRequestClose,onShow:onShow,onTouchOutside:onTouchOutside,testID:testID,__source:{fileName:_jsxFileName,lineNumber:87}},this._renderContent());}}]);return Dialog;}(_react.Component);(0,_defineProperty2.default)(Dialog,\"propTypes\",{style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),children:_propTypes.default.node,visible:_propTypes.default.bool,onRequestClose:_propTypes.default.func,onShow:_propTypes.default.func,onTouchOutside:_propTypes.default.func,actionItems:_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.node,_propTypes.default.object])),actionItemsContainerStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),title:_propTypes.default.string,titleStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),supportingText:_propTypes.default.string,supportingTextStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),contentStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),testID:_propTypes.default.string});var _default=(0,_withTheme.default)(Dialog);exports.default=_default;"
  },
  {
    "path": "dist/Components/Dialog/Dialog.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../../\");var _storybookState=require(\"@sambego/storybook-state\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Dialog/Dialog.stories.js\";var store=new _storybookState.Store({visible:false,checkedOne:false,checkedTwo:false,checkedThree:false,checkedFour:false,checkedFive:false});var _default=(0,_storiesOf.storiesOf)('Components|Dialog',module).addParameters({jest:['Dialog']}).add('Alert',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:30}},_react.default.createElement(_Header.default,{title:'Alert Dialog',__source:{fileName:_jsxFileName,lineNumber:31}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:33}},function(state){return _react.default.createElement(_reactNative.View,{style:{flexDirection:'row'},__source:{fileName:_jsxFileName,lineNumber:35}},_react.default.createElement(_.Button,{textColor:'#6E2CFA',text:'Open',onPress:function onPress(){return store.set({visible:!state.visible});},__source:{fileName:_jsxFileName,lineNumber:36}}),_react.default.createElement(_.Dialog,{visible:state.visible,onTouchOutside:function onTouchOutside(){return store.set({visible:false});},supportingText:'Discard draft?',style:{width:280},actionItems:[{textColor:'#6E2CFA',text:'Cancel',onPress:function onPress(){return store.set({visible:false});}},{color:'#6E2CFA',text:'Discard',type:'contained',onPress:function onPress(){return store.set({visible:false});}}],__source:{fileName:_jsxFileName,lineNumber:41}}));}));}).add('Confirmation',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:66}},_react.default.createElement(_Header.default,{title:'Confirmation Dialog',__source:{fileName:_jsxFileName,lineNumber:67}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:69}},function(state){return _react.default.createElement(_reactNative.View,{style:{flexDirection:'row'},__source:{fileName:_jsxFileName,lineNumber:71}},_react.default.createElement(_.Button,{textColor:'#6E2CFA',text:'Open',onPress:function onPress(){return store.set({visible:!state.visible});},__source:{fileName:_jsxFileName,lineNumber:72}}),_react.default.createElement(_.Dialog,{visible:state.visible,onTouchOutside:function onTouchOutside(){return store.set({visible:false});},title:'Use Googles location service?',supportingText:'Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.',actionItems:[{textColor:'#6E2CFA',text:'Cancel',onPress:function onPress(){return store.set({visible:false});}},{textColor:'#6E2CFA',text:'OK',onPress:function onPress(){return store.set({visible:false});}}],__source:{fileName:_jsxFileName,lineNumber:77}}));}));}).add('Simple',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:103}},_react.default.createElement(_Header.default,{title:'Simple Dialog',__source:{fileName:_jsxFileName,lineNumber:104}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:106}},function(state){return _react.default.createElement(_reactNative.View,{style:{flexDirection:'row'},__source:{fileName:_jsxFileName,lineNumber:108}},_react.default.createElement(_.Button,{textColor:'#6E2CFA',text:'Open',onPress:function onPress(){return store.set({visible:!state.visible});},__source:{fileName:_jsxFileName,lineNumber:109}}),_react.default.createElement(_.Dialog,{visible:state.visible,onTouchOutside:function onTouchOutside(){return store.set({visible:false});},title:'Set up backup account',style:{paddingRight:24},__source:{fileName:_jsxFileName,lineNumber:114}},_react.default.createElement(_.Ripple,{style:{flexDirection:'row',alignItems:'center',padding:10},__source:{fileName:_jsxFileName,lineNumber:119}},_react.default.createElement(_.Avatar,{type:\"image\",image:_react.default.createElement(_reactNative.Image,{source:{uri:'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4'},__source:{fileName:_jsxFileName,lineNumber:128}}),size:40,__source:{fileName:_jsxFileName,lineNumber:125}}),_react.default.createElement(_.BodyText,{style:{fontSize:14,fontWeight:'400',color:'rgba(0, 0, 0, 0.54)',marginLeft:20},__source:{fileName:_jsxFileName,lineNumber:137}},\"user1@gmail.com\")),_react.default.createElement(_.Ripple,{style:{flexDirection:'row',alignItems:'center',padding:10},__source:{fileName:_jsxFileName,lineNumber:148}},_react.default.createElement(_.Avatar,{type:\"image\",image:_react.default.createElement(_reactNative.Image,{source:{uri:'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4'},__source:{fileName:_jsxFileName,lineNumber:157}}),size:40,__source:{fileName:_jsxFileName,lineNumber:154}}),_react.default.createElement(_.BodyText,{style:{fontSize:14,fontWeight:'400',color:'rgba(0, 0, 0, 0.54)',marginLeft:20},__source:{fileName:_jsxFileName,lineNumber:166}},\"user2@gmail.com\")),_react.default.createElement(_.Ripple,{style:{flexDirection:'row',alignItems:'center',padding:10,paddingBottom:24},__source:{fileName:_jsxFileName,lineNumber:177}},_react.default.createElement(_.Avatar,{type:\"icon\",content:\"add\",color:\"#ccc\",contentColor:'white',size:40,__source:{fileName:_jsxFileName,lineNumber:184}}),_react.default.createElement(_.BodyText,{style:{fontSize:14,fontWeight:'400',color:'rgba(0, 0, 0, 0.54)',marginLeft:20},__source:{fileName:_jsxFileName,lineNumber:191}},\"Add account\"))));}));}).add('Scrolling',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:208}},_react.default.createElement(_Header.default,{title:'Scrolling Dialog',__source:{fileName:_jsxFileName,lineNumber:209}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:211}},function(state){return _react.default.createElement(_reactNative.View,{style:{flexDirection:'row'},__source:{fileName:_jsxFileName,lineNumber:213}},_react.default.createElement(_.Button,{textColor:'#6E2CFA',text:'Open',onPress:function onPress(){return store.set({visible:!state.visible});},__source:{fileName:_jsxFileName,lineNumber:214}}),_react.default.createElement(_.Dialog,{visible:state.visible,onTouchOutside:function onTouchOutside(){return store.set({visible:false});},title:'Get this party started?',titleStyle:{marginLeft:24},contentStyle:{paddingLeft:0,paddingBottom:0,height:360},actionItems:[{textColor:'#6E2CFA',text:'Second',onPress:function onPress(){return store.set({visible:false});}},{textColor:'#6E2CFA',text:'First',onPress:function onPress(){return store.set({visible:false});}}],__source:{fileName:_jsxFileName,lineNumber:219}},_react.default.createElement(_reactNative.View,{style:{borderBottomColor:'rgba(0, 0, 0, 0.08)',borderBottomWidth:1},__source:{fileName:_jsxFileName,lineNumber:237}}),_react.default.createElement(_reactNative.ScrollView,{scrollEnabled:true,contentContainerStyle:{padding:16},__source:{fileName:_jsxFileName,lineNumber:243}},_react.default.createElement(_reactNative.View,{style:{flex:1,flexDirection:'row',alignItems:'center'},__source:{fileName:_jsxFileName,lineNumber:244}},_react.default.createElement(_.Icon,{name:\"insert-chart\",size:24,color:'rgba(0, 0, 0, 0.54)',__source:{fileName:_jsxFileName,lineNumber:250}}),_react.default.createElement(_.BodyText,{text:\"option 1\",style:{marginLeft:32,width:100},__source:{fileName:_jsxFileName,lineNumber:255}}),_react.default.createElement(_.Checkbox,{rippleMatchesCheckbox:true,checkboxColor:'rgba(0, 0, 0, 0.54)',checked:state.checkedOne,style:{paddingVertical:16},label:'01',labelStyle:{marginLeft:130},labelPos:'left',onPress:function onPress(){return store.set({checkedOne:!state.checkedOne});},__source:{fileName:_jsxFileName,lineNumber:259}})),_react.default.createElement(_reactNative.View,{style:{flex:1,flexDirection:'row',alignItems:'center'},__source:{fileName:_jsxFileName,lineNumber:271}},_react.default.createElement(_.Icon,{name:\"insert-chart\",size:24,color:'rgba(0, 0, 0, 0.54)',__source:{fileName:_jsxFileName,lineNumber:277}}),_react.default.createElement(_.BodyText,{text:\"option 2\",style:{marginLeft:32,width:100},__source:{fileName:_jsxFileName,lineNumber:282}}),_react.default.createElement(_.Checkbox,{rippleMatchesCheckbox:true,checkboxColor:'rgba(0, 0, 0, 0.54)',checked:state.checkedTwo,style:{paddingVertical:16},label:'02',labelStyle:{marginLeft:130},labelPos:'left',onPress:function onPress(){return store.set({checkedTwo:!state.checkedTwo});},__source:{fileName:_jsxFileName,lineNumber:286}})),_react.default.createElement(_reactNative.View,{style:{flex:1,flexDirection:'row',alignItems:'center'},__source:{fileName:_jsxFileName,lineNumber:298}},_react.default.createElement(_.Icon,{name:\"insert-chart\",size:24,color:'rgba(0, 0, 0, 0.54)',__source:{fileName:_jsxFileName,lineNumber:304}}),_react.default.createElement(_.BodyText,{text:\"option 3\",style:{marginLeft:32,width:100},__source:{fileName:_jsxFileName,lineNumber:309}}),_react.default.createElement(_.Checkbox,{rippleMatchesCheckbox:true,checkboxColor:'rgba(0, 0, 0, 0.54)',checked:state.checkedThree,style:{paddingVertical:16},label:'03',labelStyle:{marginLeft:130},labelPos:'left',onPress:function onPress(){return store.set({checkedThree:!state.checkedThree});},__source:{fileName:_jsxFileName,lineNumber:313}})),_react.default.createElement(_reactNative.View,{style:{flex:1,flexDirection:'row',alignItems:'center'},__source:{fileName:_jsxFileName,lineNumber:327}},_react.default.createElement(_.Icon,{name:\"insert-chart\",size:24,color:'rgba(0, 0, 0, 0.54)',__source:{fileName:_jsxFileName,lineNumber:333}}),_react.default.createElement(_.BodyText,{text:\"option 4\",style:{marginLeft:32,width:100},__source:{fileName:_jsxFileName,lineNumber:338}}),_react.default.createElement(_.Checkbox,{rippleMatchesCheckbox:true,checkboxColor:'rgba(0, 0, 0, 0.54)',checked:state.checkedFour,style:{paddingVertical:16,marginLeft:0},label:'04',labelStyle:{marginLeft:130,width:20},labelPos:'left',onPress:function onPress(){return store.set({checkedFour:!state.checkedFour});},__source:{fileName:_jsxFileName,lineNumber:342}})),_react.default.createElement(_reactNative.View,{style:{flex:1,flexDirection:'row',alignItems:'center'},__source:{fileName:_jsxFileName,lineNumber:356}},_react.default.createElement(_.Icon,{name:\"insert-chart\",size:24,color:'rgba(0, 0, 0, 0.54)',__source:{fileName:_jsxFileName,lineNumber:362}}),_react.default.createElement(_.BodyText,{text:\"option 5\",style:{marginLeft:32,width:100},__source:{fileName:_jsxFileName,lineNumber:367}}),_react.default.createElement(_.Checkbox,{rippleMatchesCheckbox:true,checkboxColor:'rgba(0, 0, 0, 0.54)',checked:state.checkedFive,style:{paddingVertical:16},label:'05',labelStyle:{marginLeft:130},labelPos:'left',onPress:function onPress(){return store.set({checkedFive:!state.checkedFive});},__source:{fileName:_jsxFileName,lineNumber:371}})))));}));});exports.default=_default;"
  },
  {
    "path": "dist/Components/Dialog/Dialog.styles.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _reactNative=require(\"react-native\");var _shadow=_interopRequireDefault(require(\"../../Utils/Shadow/shadow\"));function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}var styles=_reactNative.StyleSheet.create({container:_objectSpread({backgroundColor:'#ffffff',width:'100%',borderRadius:4,paddingTop:24,maxWidth:_reactNative.Platform.OS=='web'?560:'100%',maxHeight:_reactNative.Platform.OS=='web'?'calc(100vh - 20px)':'100%',overflow:'hidden'},(0,_shadow.default)(24)),contentContainer:{flex:_reactNative.Platform.OS=='web'?1:0,paddingLeft:24},title:{fontSize:20,lineHeight:24,fontWeight:'500',color:'#212121',letterSpacing:0.15,marginBottom:24,marginRight:24},supportingText:{fontSize:16,fontWeight:'400',color:'rgba(0, 0, 0, 0.6)',marginRight:24,letterSpacing:0.44,lineHeight:24},actionItems:{flexDirection:'row',justifyContent:'flex-end',paddingHorizontal:8,paddingBottom:8,marginTop:24}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Dialog/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _Dialog.default;}});var _Dialog=_interopRequireDefault(require(\"./Dialog\"));"
  },
  {
    "path": "dist/Components/Divider/Divider.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _objectWithoutProperties2=_interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutProperties\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _BodyText=_interopRequireDefault(require(\"../Typography/BodyText/BodyText.js\"));var _Divider=_interopRequireDefault(require(\"./Divider.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Divider/Divider.js\";var Divider=function(_Component){(0,_inherits2.default)(Divider,_Component);function Divider(){(0,_classCallCheck2.default)(this,Divider);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(Divider).apply(this,arguments));}(0,_createClass2.default)(Divider,[{key:\"_renderSubheader\",value:function _renderSubheader(){var _this$props=this.props,subheader=_this$props.subheader,marginVertical=_this$props.marginVertical,insetHeader=_this$props.insetHeader,testID=_this$props.testID;return _react.default.createElement(_reactNative.View,{style:{marginVertical:marginVertical?marginVertical:8},testID:testID,__source:{fileName:_jsxFileName,lineNumber:23}},this._renderDivider(),_react.default.createElement(_BodyText.default,{style:[_Divider.default.subheader,{marginLeft:insetHeader}],__source:{fileName:_jsxFileName,lineNumber:27}},subheader));}},{key:\"_renderDivider\",value:function _renderDivider(){var _this$props2=this.props,style=_this$props2.style,theme=_this$props2.theme,marginVertical=_this$props2.marginVertical,subheader=_this$props2.subheader,testID=_this$props2.testID,insetLeft=_this$props2.insetLeft,rest=(0,_objectWithoutProperties2.default)(_this$props2,[\"style\",\"theme\",\"marginVertical\",\"subheader\",\"testID\",\"insetLeft\"]);var marginVerticalImplemented=marginVertical?marginVertical:8;if(subheader)marginVerticalImplemented=0;var width=insetLeft>0?\"calc(100% - \"+insetLeft+\"px)\":'100%';var marginLeft=insetLeft>0?insetLeft:0;return _react.default.createElement(_reactNative.View,(0,_extends2.default)({style:[theme.divider,{height:_reactNative.Platform.OS=='web'?1:_reactNative.StyleSheet.hairlineWidth,marginVertical:marginVerticalImplemented,width:width,marginLeft:marginLeft},style],testID:testID},rest,{__source:{fileName:_jsxFileName,lineNumber:50}}));}},{key:\"render\",value:function render(){var subheader=this.props.subheader;return subheader?this._renderSubheader():this._renderDivider();}}]);return Divider;}(_react.Component);(0,_defineProperty2.default)(Divider,\"propTypes\",{style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),theme:_propTypes.default.object,marginVertical:_propTypes.default.number,subheader:_propTypes.default.string,insetHeader:_propTypes.default.number,insetLeft:_propTypes.default.number,testID:_propTypes.default.string});var _default=(0,_withTheme.default)(Divider);exports.default=_default;"
  },
  {
    "path": "dist/Components/Divider/Divider.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _=require(\"../../\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Divider/Divider.stories.js\";var _default=(0,_storiesOf.storiesOf)('Components|Divider',module).addParameters({jest:['Divider']}).add('Simple',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:11}},_react.default.createElement(_Header.default,{title:'Divider',__source:{fileName:_jsxFileName,lineNumber:12}}),_react.default.createElement(_.Divider,{__source:{fileName:_jsxFileName,lineNumber:14}}),_react.default.createElement(_.Divider,{__source:{fileName:_jsxFileName,lineNumber:15}}),_react.default.createElement(_.Divider,{marginVertical:24,__source:{fileName:_jsxFileName,lineNumber:16}}));}).add('subheader',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:20}},_react.default.createElement(_Header.default,{title:'Divider',__source:{fileName:_jsxFileName,lineNumber:21}}),_react.default.createElement(_.Divider,{subheader:'Subheader',__source:{fileName:_jsxFileName,lineNumber:23}}),_react.default.createElement(_.Divider,{subheader:'Title',insetHeader:8,__source:{fileName:_jsxFileName,lineNumber:24}}),_react.default.createElement(_.Divider,{subheader:'Section',insetHeader:16,marginVertical:24,__source:{fileName:_jsxFileName,lineNumber:25}}));}).add('insetLeft',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:30}},_react.default.createElement(_Header.default,{title:'Inset Left',__source:{fileName:_jsxFileName,lineNumber:31}}),_react.default.createElement(_.List,{subheader:'Favorites',style:{width:300},__source:{fileName:_jsxFileName,lineNumber:33}},_react.default.createElement(_.ListItem,{text:'Janet Perkins',media:_react.default.createElement(_.Avatar,{type:\"icon\",content:\"person\",contentColor:'#ececec',color:'#a3a3a3',size:40,__source:{fileName:_jsxFileName,lineNumber:37}}),__source:{fileName:_jsxFileName,lineNumber:34}}),_react.default.createElement(_.ListItem,{text:'Mary Perkins',media:_react.default.createElement(_.Avatar,{type:\"icon\",content:\"person\",contentColor:'#ececec',color:'#a3a3a3',size:40,__source:{fileName:_jsxFileName,lineNumber:50}}),__source:{fileName:_jsxFileName,lineNumber:47}}),_react.default.createElement(_.Divider,{insetLeft:20,__source:{fileName:_jsxFileName,lineNumber:59}}),_react.default.createElement(_.ListItem,{text:'Peter Carlsson',media:_react.default.createElement(_.Avatar,{type:\"icon\",content:\"person\",contentColor:'#ececec',color:'#a3a3a3',size:40,__source:{fileName:_jsxFileName,lineNumber:63}}),__source:{fileName:_jsxFileName,lineNumber:60}}),_react.default.createElement(_.ListItem,{text:'Trevor Hansen',media:_react.default.createElement(_.Avatar,{type:\"icon\",content:\"person\",contentColor:'#ececec',color:'#a3a3a3',size:40,__source:{fileName:_jsxFileName,lineNumber:75}}),__source:{fileName:_jsxFileName,lineNumber:72}}),_react.default.createElement(_.Divider,{insetLeft:20,__source:{fileName:_jsxFileName,lineNumber:84}}),_react.default.createElement(_.ListItem,{text:'Person McPerson',media:_react.default.createElement(_.Avatar,{type:\"icon\",content:\"person\",contentColor:'#ececec',color:'#a3a3a3',size:40,__source:{fileName:_jsxFileName,lineNumber:88}}),__source:{fileName:_jsxFileName,lineNumber:85}}),_react.default.createElement(_.ListItem,{text:'Wendy',media:_react.default.createElement(_.Avatar,{type:\"icon\",content:\"person\",contentColor:'#ececec',color:'#a3a3a3',size:40,__source:{fileName:_jsxFileName,lineNumber:100}}),__source:{fileName:_jsxFileName,lineNumber:97}})));});exports.default=_default;"
  },
  {
    "path": "dist/Components/Divider/Divider.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({subheader:{marginTop:8,color:'rgba(0,0,0,.57)',fontSize:12}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Divider/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _Divider.default;}});var _Divider=_interopRequireDefault(require(\"./Divider\"));"
  },
  {
    "path": "dist/Components/Drawer/Drawer.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _Drawer=_interopRequireDefault(require(\"./Drawer.styles\"));var _shadow=_interopRequireDefault(require(\"../../Utils/Shadow/shadow.js\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Drawer/Drawer.js\";function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}var needsSafeAreaDefault=_reactNative.Platform.OS==='ios'&&parseInt(_reactNative.Platform.Version,10);var Drawer=function(_PureComponent){(0,_inherits2.default)(Drawer,_PureComponent);function Drawer(props){var _this;(0,_classCallCheck2.default)(this,Drawer);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(Drawer).call(this,props));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{screenWidth:_reactNative.Dimensions.get('window').width,screenHeight:_reactNative.Dimensions.get('window').height,drawerWidth:240,expanded:false,backdropFade:new _reactNative.Animated.Value(0),leftOffset:new _reactNative.Animated.Value(0),appbarHeight:0,appbarWidth:0});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"openDrawer\",function(){var _this$state=_this.state,drawerWidth=_this$state.drawerWidth,leftOffset=_this$state.leftOffset,backdropFade=_this$state.backdropFade;var _this$props=_this.props,animationTime=_this$props.animationTime,scrimOpacity=_this$props.scrimOpacity;_reactNative.Animated.parallel([_reactNative.Animated.timing(leftOffset,{toValue:drawerWidth,duration:animationTime,useNativeDriver:true}),_reactNative.Animated.timing(backdropFade,{toValue:scrimOpacity,duration:animationTime,useNativeDriver:true})]).start();});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"closeDrawer\",function(){var animationTime=_this.props.animationTime;var _this$state2=_this.state,backdropFade=_this$state2.backdropFade,leftOffset=_this$state2.leftOffset;_reactNative.Animated.parallel([_reactNative.Animated.timing(leftOffset,{toValue:0,duration:animationTime,useNativeDriver:true}),_reactNative.Animated.timing(backdropFade,{toValue:0,duration:animationTime,useNativeDriver:true})]).start();});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"_onAppbarLayout\",function(e){var _e$nativeEvent$layout=e.nativeEvent.layout,width=_e$nativeEvent$layout.width,height=_e$nativeEvent$layout.height;_this.setState({appbarWidth:width,appbarHeight:height});});return _this;}(0,_createClass2.default)(Drawer,[{key:\"componentDidMount\",value:function componentDidMount(){var _this$props2=this.props,pageWidth=_this$props2.pageWidth,pageHeight=_this$props2.pageHeight,widthPercentage=_this$props2.widthPercentage,width=_this$props2.width;var screenWidth=_reactNative.Platform.OS=='web'?'100%':_reactNative.Dimensions.get('window').width;var screenHeight=_reactNative.Dimensions.get('window').height;if(pageWidth)screenWidth=pageWidth;if(pageHeight)screenHeight=pageHeight;var drawerWidth=_reactNative.Platform.OS=='web'?this.state.drawerWidth:screenWidth*(widthPercentage||0.45);if(width)drawerWidth=width;this.setState({screenWidth:screenWidth,screenHeight:screenHeight,drawerWidth:drawerWidth});}},{key:\"componentDidUpdate\",value:function componentDidUpdate(){var open=this.props.open;if(open){this.openDrawer();}else{this.closeDrawer();}}},{key:\"_renderAppBar\",value:function _renderAppBar(){var appbar=this.props.appbar;return _react.default.createElement(_reactNative.View,{style:{zIndex:1200},onLayout:this._onAppbarLayout,__source:{fileName:_jsxFileName,lineNumber:162}},appbar);}},{key:\"_renderScrim\",value:function _renderScrim(){var _this$props3=this.props,open=_this$props3.open,scrim=_this$props3.scrim,scrimColor=_this$props3.scrimColor,type=_this$props3.type,scrimStyles=_this$props3.scrimStyles;var _this$state3=this.state,backdropFade=_this$state3.backdropFade,screenWidth=_this$state3.screenWidth,screenHeight=_this$state3.screenHeight,appbarHeight=_this$state3.appbarHeight;var scrimColorImplemented=type=='push'?'transparent':'black';if(scrimColor)scrimColorImplemented=scrimColor;return _react.default.createElement(_reactNative.Animated.View,{useNativeDriver:true,style:[_Drawer.default.container,{backgroundColor:scrim?scrimColorImplemented:'transparent',opacity:backdropFade,zIndex:open?10:0,width:screenWidth,height:screenHeight,top:appbarHeight,position:_reactNative.Platform.OS=='web'?'fixed':'absolute'},scrimStyles],__source:{fileName:_jsxFileName,lineNumber:180}},_react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:this.props.onClose,__source:{fileName:_jsxFileName,lineNumber:195}},_react.default.createElement(_reactNative.View,{style:[_Drawer.default.container,{width:screenWidth,height:screenHeight,backgroundColor:scrim?scrimColorImplemented:'transparent'}],__source:{fileName:_jsxFileName,lineNumber:196}})));}},{key:\"_renderAppContent\",value:function _renderAppContent(){var _this$props4=this.props,children=_this$props4.children,appbar=_this$props4.appbar,type=_this$props4.type,open=_this$props4.open,contentContainerStyle=_this$props4.contentContainerStyle;var _this$state4=this.state,leftOffset=_this$state4.leftOffset,drawerWidth=_this$state4.drawerWidth;var isPush=type=='push';var isPermanent=type=='permanent';if(isPush||isPermanent){return _react.default.createElement(_reactNative.View,{style:contentContainerStyle,__source:{fileName:_jsxFileName,lineNumber:220}},appbar?this._renderAppBar():null,_react.default.createElement(_reactNative.Animated.View,{useNativeDriver:true,style:{transform:[{translateX:leftOffset}],flex:1,width:open&&_reactNative.Platform.OS=='web'&&isPermanent?\"calc(100% - \"+drawerWidth+\"px)\":'100%'},__source:{fileName:_jsxFileName,lineNumber:222}},children));}return _react.default.createElement(_reactNative.View,{style:[{height:'100%'},contentContainerStyle],__source:{fileName:_jsxFileName,lineNumber:238}},appbar?this._renderAppBar():null,_react.default.createElement(_reactNative.View,{style:{height:'100%'},__source:{fileName:_jsxFileName,lineNumber:240}},children));}},{key:\"_renderDrawer\",value:function _renderDrawer(){var _this$props5=this.props,drawerContent=_this$props5.drawerContent,type=_this$props5.type,open=_this$props5.open,drawerStyle=_this$props5.drawerStyle,fullHeight=_this$props5.fullHeight,position=_this$props5.position,theme=_this$props5.theme;var _this$state5=this.state,drawerWidth=_this$state5.drawerWidth,screenHeight=_this$state5.screenHeight,leftOffset=_this$state5.leftOffset,appbarHeight=_this$state5.appbarHeight;var isPush=type=='push';var isPermanent=type=='permanent';var offsetDrawerShadow=isPermanent||open?0:5;var shadowImplemented=isPush||isPermanent?(0,_shadow.default)(0):(0,_shadow.default)(16);return _react.default.createElement(_react.Fragment,{__source:{fileName:_jsxFileName,lineNumber:264}},_react.default.createElement(_reactNative.Animated.View,{useNativeDriver:true,style:[theme.drawer,_objectSpread({position:position,width:drawerWidth,left:-drawerWidth-offsetDrawerShadow,top:appbarHeight,height:fullHeight?'100%':screenHeight,transform:[{translateX:leftOffset}]},shadowImplemented),drawerStyle],__source:{fileName:_jsxFileName,lineNumber:265}},drawerContent),isPermanent?null:this._renderScrim(),this._renderAppContent());}},{key:\"render\",value:function render(){var _this$props6=this.props,style=_this$props6.style,testID=_this$props6.testID,needsSafeArea=_this$props6.needsSafeArea;var screenWidth=this.state.screenWidth;if(needsSafeArea){return _react.default.createElement(_reactNative.SafeAreaView,{style:[_Drawer.default.safeAreaView,{position:'relative',width:screenWidth,overflow:'hidden'},style],__source:{fileName:_jsxFileName,lineNumber:295}},this._renderDrawer());}return _react.default.createElement(_reactNative.View,{style:[_Drawer.default.fullWidthContainer,{position:'relative',width:screenWidth,overflow:'hidden'},style],testID:testID,__source:{fileName:_jsxFileName,lineNumber:307}},this._renderDrawer());}}]);return Drawer;}(_react.PureComponent);(0,_defineProperty2.default)(Drawer,\"propTypes\",{open:_propTypes.default.bool,onClose:_propTypes.default.func,type:_propTypes.default.string,drawerContent:_propTypes.default.node,children:_propTypes.default.node,animationTime:_propTypes.default.number,pageHeight:_propTypes.default.number,pageWidth:_propTypes.default.number,widthPercentage:_propTypes.default.number,width:_propTypes.default.number,fullHeight:_propTypes.default.bool,position:_propTypes.default.string,needsSafeArea:_propTypes.default.bool,appbar:_propTypes.default.node,scrim:_propTypes.default.bool,scrimColor:_propTypes.default.string,scrimOpacity:_propTypes.default.number,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),contentContainerStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),drawerStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),scrimStyles:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),testID:_propTypes.default.string,theme:_propTypes.default.object});(0,_defineProperty2.default)(Drawer,\"defaultProps\",{open:false,animationTime:200,scrimOpacity:0.4,scrim:true,type:'modal',position:'absolute',needsSafeArea:needsSafeAreaDefault});var _default=(0,_withTheme.default)(Drawer);exports.default=_default;"
  },
  {
    "path": "dist/Components/Drawer/Drawer.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../../\");var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _storybookState=require(\"@sambego/storybook-state\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Drawer/Drawer.stories.js\";var store=new _storybookState.Store({isOpen:false,isOpenPermanent:true});var DrawerContent=function DrawerContent(){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:32}},_react.default.createElement(_.DrawerHeader,{title:'Jon Snow',subtitle:'Knows nothing',__source:{fileName:_jsxFileName,lineNumber:33}}),_react.default.createElement(_.DrawerSection,{bottomDivider:true,__source:{fileName:_jsxFileName,lineNumber:34}},_react.default.createElement(_.DrawerItem,{text:'Inbox',icon:'mail',active:true,__source:{fileName:_jsxFileName,lineNumber:35}}),_react.default.createElement(_.DrawerItem,{text:'Outbox',icon:'send',__source:{fileName:_jsxFileName,lineNumber:36}}),_react.default.createElement(_.DrawerItem,{text:'Favorites',icon:'favorite',__source:{fileName:_jsxFileName,lineNumber:37}})));};var PageContent=function PageContent(){return _react.default.createElement(_reactNative.View,{style:{marginTop:20,alignItems:'center'},__source:{fileName:_jsxFileName,lineNumber:45}},_react.default.createElement(_.Heading,{type:4,style:{marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:46}},\"This is a page\"),_react.default.createElement(_.BodyText,{text:\"Click the menu button to open the drawer\",__source:{fileName:_jsxFileName,lineNumber:49}}),_react.default.createElement(_.BodyText,{text:\"Click outside the drawer to close it\",__source:{fileName:_jsxFileName,lineNumber:50}}));};var AppbarContent=function AppbarContent(isOpen){return _react.default.createElement(_.Appbar,{barType:'normal',title:'Page Title',navigation:'menu',onNavigation:function onNavigation(){return store.set({isOpen:!isOpen.isOpen});},actionItems:[{name:'search'},{name:'more-vert'}],__source:{fileName:_jsxFileName,lineNumber:57}});};var pageWidth=_reactNative.Platform.OS=='web'?600:_reactNative.Dimensions.get('window').width;var _default=(0,_storiesOf.storiesOf)('Components|Drawer',module).addParameters({jest:['Drawer']}).add('Simple',function(){return _react.default.createElement(_Container.default,{scroll:true,style:{padding:0},__source:{fileName:_jsxFileName,lineNumber:72}},_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:73}},function(state){return _react.default.createElement(_reactNative.View,{style:styles.container,__source:{fileName:_jsxFileName,lineNumber:75}},_react.default.createElement(_.Drawer,{open:state.isOpen,pageWidth:pageWidth,pageHeight:500,drawerContent:_react.default.createElement(DrawerContent,{__source:{fileName:_jsxFileName,lineNumber:80}}),onClose:function onClose(){return store.set({isOpen:false});},animationTime:250,opacity:0.33,__source:{fileName:_jsxFileName,lineNumber:76}},_react.default.createElement(_reactNative.View,{style:styles.body,__source:{fileName:_jsxFileName,lineNumber:84}},_react.default.createElement(_.IconButton,{size:24,name:\"menu\",onPress:function onPress(){return store.set({isOpen:!state.isOpen});},__source:{fileName:_jsxFileName,lineNumber:85}}),_react.default.createElement(PageContent,{__source:{fileName:_jsxFileName,lineNumber:90}}))));}));}).add('Over Appbar',function(){return _react.default.createElement(_Container.default,{scroll:true,style:{padding:0},__source:{fileName:_jsxFileName,lineNumber:99}},_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:100}},function(state){return _react.default.createElement(_reactNative.View,{style:styles.container,__source:{fileName:_jsxFileName,lineNumber:102}},_react.default.createElement(_.Drawer,{open:state.isOpen,pageWidth:pageWidth,pageHeight:500,drawerContent:_react.default.createElement(DrawerContent,{__source:{fileName:_jsxFileName,lineNumber:107}}),onClose:function onClose(){return store.set({isOpen:false});},animationTime:250,__source:{fileName:_jsxFileName,lineNumber:103}},_react.default.createElement(_reactNative.View,{style:styles.body,__source:{fileName:_jsxFileName,lineNumber:110}},_react.default.createElement(AppbarContent,{isOpen:state.isOpen,__source:{fileName:_jsxFileName,lineNumber:111}}),_react.default.createElement(PageContent,{__source:{fileName:_jsxFileName,lineNumber:112}}))));}));}).add('Under Appbar',function(){return _react.default.createElement(_Container.default,{scroll:true,style:{padding:0},__source:{fileName:_jsxFileName,lineNumber:121}},_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:122}},function(state){return _react.default.createElement(_reactNative.View,{style:styles.container,__source:{fileName:_jsxFileName,lineNumber:124}},_react.default.createElement(_.Drawer,{open:state.isOpen,pageWidth:pageWidth,pageHeight:500,drawerContent:_react.default.createElement(DrawerContent,{__source:{fileName:_jsxFileName,lineNumber:129}}),onClose:function onClose(){return store.set({isOpen:false});},appbar:_react.default.createElement(AppbarContent,{isOpen:state.isOpen,__source:{fileName:_jsxFileName,lineNumber:131}}),__source:{fileName:_jsxFileName,lineNumber:125}},_react.default.createElement(_reactNative.View,{style:styles.body,__source:{fileName:_jsxFileName,lineNumber:132}},_react.default.createElement(PageContent,{__source:{fileName:_jsxFileName,lineNumber:133}}))));}));}).add('No Scrim',function(){return _react.default.createElement(_Container.default,{scroll:true,style:{padding:0},__source:{fileName:_jsxFileName,lineNumber:142}},_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:143}},function(state){return _react.default.createElement(_reactNative.View,{style:styles.container,__source:{fileName:_jsxFileName,lineNumber:145}},_react.default.createElement(_.Drawer,{open:state.isOpen,pageWidth:pageWidth,pageHeight:500,drawerContent:_react.default.createElement(DrawerContent,{__source:{fileName:_jsxFileName,lineNumber:150}}),onClose:function onClose(){return store.set({isOpen:false});},scrim:false,__source:{fileName:_jsxFileName,lineNumber:146}},_react.default.createElement(_reactNative.View,{style:styles.body,__source:{fileName:_jsxFileName,lineNumber:153}},_react.default.createElement(AppbarContent,{isOpen:state.isOpen,__source:{fileName:_jsxFileName,lineNumber:154}}),_react.default.createElement(PageContent,{__source:{fileName:_jsxFileName,lineNumber:155}}))));}));}).add('Custom Scrim',function(){return _react.default.createElement(_Container.default,{scroll:true,style:{padding:0},__source:{fileName:_jsxFileName,lineNumber:164}},_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:165}},function(state){return _react.default.createElement(_reactNative.View,{style:styles.container,__source:{fileName:_jsxFileName,lineNumber:167}},_react.default.createElement(_.Drawer,{open:state.isOpen,pageWidth:pageWidth,pageHeight:500,drawerContent:_react.default.createElement(DrawerContent,{__source:{fileName:_jsxFileName,lineNumber:172}}),onClose:function onClose(){return store.set({isOpen:false});},scrimColor:'#E91E63',scrimOpacity:0.2,__source:{fileName:_jsxFileName,lineNumber:168}},_react.default.createElement(_reactNative.View,{style:styles.body,__source:{fileName:_jsxFileName,lineNumber:176}},_react.default.createElement(AppbarContent,{isOpen:state.isOpen,__source:{fileName:_jsxFileName,lineNumber:177}}),_react.default.createElement(PageContent,{__source:{fileName:_jsxFileName,lineNumber:178}}))));}));}).add('Scroll inner',function(){return _react.default.createElement(_Container.default,{scroll:true,style:{padding:0},__source:{fileName:_jsxFileName,lineNumber:187}},_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:188}},function(state){return _react.default.createElement(_reactNative.View,{style:styles.container,__source:{fileName:_jsxFileName,lineNumber:190}},_react.default.createElement(_.Drawer,{open:state.isOpen,pageWidth:pageWidth,pageHeight:500,drawerContent:_react.default.createElement(_reactNative.ScrollView,{__source:{fileName:_jsxFileName,lineNumber:196}},_react.default.createElement(_.DrawerHeader,{title:'Jon Snow',subtitle:'Knows nothing',__source:{fileName:_jsxFileName,lineNumber:197}}),_react.default.createElement(_.DrawerSection,{bottomDivider:true,__source:{fileName:_jsxFileName,lineNumber:198}},_react.default.createElement(_.DrawerItem,{text:'Inbox',icon:'mail',active:true,__source:{fileName:_jsxFileName,lineNumber:199}}),_react.default.createElement(_.DrawerItem,{text:'Outbox',icon:'send',__source:{fileName:_jsxFileName,lineNumber:200}}),_react.default.createElement(_.DrawerItem,{text:'Favorites',icon:'favorite',__source:{fileName:_jsxFileName,lineNumber:201}})),_react.default.createElement(_.DrawerSection,{bottomDivider:true,__source:{fileName:_jsxFileName,lineNumber:203}},_react.default.createElement(_.DrawerItem,{text:'Inbox',icon:'mail',__source:{fileName:_jsxFileName,lineNumber:204}}),_react.default.createElement(_.DrawerItem,{text:'Outbox',icon:'send',__source:{fileName:_jsxFileName,lineNumber:205}}),_react.default.createElement(_.DrawerItem,{text:'Favorites',icon:'favorite',__source:{fileName:_jsxFileName,lineNumber:206}})),_react.default.createElement(_.DrawerSection,{bottomDivider:true,__source:{fileName:_jsxFileName,lineNumber:208}},_react.default.createElement(_.DrawerItem,{text:'Inbox',icon:'mail',__source:{fileName:_jsxFileName,lineNumber:209}}),_react.default.createElement(_.DrawerItem,{text:'Outbox',icon:'send',__source:{fileName:_jsxFileName,lineNumber:210}}),_react.default.createElement(_.DrawerItem,{text:'Favorites',icon:'favorite',__source:{fileName:_jsxFileName,lineNumber:211}})),_react.default.createElement(_.DrawerSection,{bottomDivider:true,__source:{fileName:_jsxFileName,lineNumber:213}},_react.default.createElement(_.DrawerItem,{text:'Inbox',icon:'mail',__source:{fileName:_jsxFileName,lineNumber:214}}),_react.default.createElement(_.DrawerItem,{text:'Outbox',icon:'send',__source:{fileName:_jsxFileName,lineNumber:215}}),_react.default.createElement(_.DrawerItem,{text:'Favorites',icon:'favorite',__source:{fileName:_jsxFileName,lineNumber:216}})),_react.default.createElement(_.DrawerSection,{bottomDivider:true,__source:{fileName:_jsxFileName,lineNumber:218}},_react.default.createElement(_.DrawerItem,{text:'Inbox',icon:'mail',__source:{fileName:_jsxFileName,lineNumber:219}}),_react.default.createElement(_.DrawerItem,{text:'Outbox',icon:'send',__source:{fileName:_jsxFileName,lineNumber:220}}),_react.default.createElement(_.DrawerItem,{text:'Favorites',icon:'favorite',__source:{fileName:_jsxFileName,lineNumber:221}}))),onClose:function onClose(){return store.set({isOpen:false});},scrimColor:'#E91E63',scrimOpacity:0.2,__source:{fileName:_jsxFileName,lineNumber:191}},_react.default.createElement(_reactNative.View,{style:styles.body,__source:{fileName:_jsxFileName,lineNumber:228}},_react.default.createElement(AppbarContent,{isOpen:state.isOpen,__source:{fileName:_jsxFileName,lineNumber:229}}),_react.default.createElement(PageContent,{__source:{fileName:_jsxFileName,lineNumber:230}}))));}));}).add('Push',function(){return _react.default.createElement(_Container.default,{scroll:true,style:{padding:0},__source:{fileName:_jsxFileName,lineNumber:239}},_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:240}},function(state){return _react.default.createElement(_reactNative.View,{style:styles.container,__source:{fileName:_jsxFileName,lineNumber:242}},_react.default.createElement(_.Drawer,{open:state.isOpen,pageWidth:pageWidth,pageHeight:500,drawerContent:_react.default.createElement(DrawerContent,{__source:{fileName:_jsxFileName,lineNumber:247}}),onClose:function onClose(){return store.set({isOpen:false});},type:'push',__source:{fileName:_jsxFileName,lineNumber:243}},_react.default.createElement(_reactNative.View,{style:styles.body,__source:{fileName:_jsxFileName,lineNumber:250}},_react.default.createElement(AppbarContent,{isOpen:state.isOpen,__source:{fileName:_jsxFileName,lineNumber:251}}),_react.default.createElement(PageContent,{__source:{fileName:_jsxFileName,lineNumber:252}}))));}));}).add('Push Under',function(){return _react.default.createElement(_Container.default,{scroll:true,style:{padding:0},__source:{fileName:_jsxFileName,lineNumber:261}},_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:262}},function(state){return _react.default.createElement(_reactNative.View,{style:styles.container,__source:{fileName:_jsxFileName,lineNumber:264}},_react.default.createElement(_.Drawer,{open:state.isOpen,pageWidth:pageWidth,pageHeight:500,drawerContent:_react.default.createElement(DrawerContent,{__source:{fileName:_jsxFileName,lineNumber:269}}),onClose:function onClose(){return store.set({isOpen:false});},type:'push',appbar:_react.default.createElement(AppbarContent,{isOpen:state.isOpen,__source:{fileName:_jsxFileName,lineNumber:272}}),__source:{fileName:_jsxFileName,lineNumber:265}},_react.default.createElement(_reactNative.View,{style:styles.body,__source:{fileName:_jsxFileName,lineNumber:273}},_react.default.createElement(PageContent,{__source:{fileName:_jsxFileName,lineNumber:274}}))));}));}).add('Permanent',function(){return _react.default.createElement(_Container.default,{scroll:true,style:{padding:0},__source:{fileName:_jsxFileName,lineNumber:283}},_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:284}},function(state){return _react.default.createElement(_reactNative.View,{style:[styles.container,{width:'auto'}],__source:{fileName:_jsxFileName,lineNumber:286}},_react.default.createElement(_.Drawer,{open:state.isOpenPermanent,pageWidth:_reactNative.Platform.OS=='web'?1000:_reactNative.Dimensions.get('window').width,pageHeight:500,drawerContent:_react.default.createElement(DrawerContent,{__source:{fileName:_jsxFileName,lineNumber:293}}),onClose:function onClose(){return store.set({isOpen:false});},type:'permanent',__source:{fileName:_jsxFileName,lineNumber:287}},_react.default.createElement(_reactNative.View,{style:{width:'100%'},__source:{fileName:_jsxFileName,lineNumber:296}},_react.default.createElement(_.Appbar,{barType:'normal',title:'Page Title',navigation:'menu',onNavigation:function onNavigation(){return store.set({isOpenPermanent:!state.isOpenPermanent});},actionItems:[{name:'search'},{name:'more-vert'}],__source:{fileName:_jsxFileName,lineNumber:300}}),_react.default.createElement(_reactNative.View,{style:styles.body,__source:{fileName:_jsxFileName,lineNumber:309}},_react.default.createElement(PageContent,{__source:{fileName:_jsxFileName,lineNumber:310}})))));}));}).add('Permanent Under',function(){return _react.default.createElement(_Container.default,{scroll:true,style:{padding:0},__source:{fileName:_jsxFileName,lineNumber:320}},_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:321}},function(state){return _react.default.createElement(_reactNative.View,{style:[styles.container,{width:'auto'}],__source:{fileName:_jsxFileName,lineNumber:323}},_react.default.createElement(_.Drawer,{open:state.isOpenPermanent,pageWidth:_reactNative.Platform.OS=='web'?1000:_reactNative.Dimensions.get('window').width,pageHeight:500,drawerContent:_react.default.createElement(DrawerContent,{__source:{fileName:_jsxFileName,lineNumber:330}}),onClose:function onClose(){return store.set({isOpen:false});},type:'permanent',appbar:_react.default.createElement(_.Appbar,{barType:'normal',title:'Page Title',navigation:'menu',onNavigation:function onNavigation(){return store.set({isOpenPermanent:!state.isOpenPermanent});},actionItems:[{name:'search'},{name:'more-vert'}],__source:{fileName:_jsxFileName,lineNumber:334}}),__source:{fileName:_jsxFileName,lineNumber:324}},_react.default.createElement(_reactNative.View,{style:{width:'100%'},__source:{fileName:_jsxFileName,lineNumber:344}},_react.default.createElement(_reactNative.View,{style:styles.body,__source:{fileName:_jsxFileName,lineNumber:348}},_react.default.createElement(PageContent,{__source:{fileName:_jsxFileName,lineNumber:349}})))));}));});exports.default=_default;var styles=_reactNative.StyleSheet.create({container:{zIndex:1,position:'relative'},body:{width:pageWidth,height:500}});"
  },
  {
    "path": "dist/Components/Drawer/Drawer.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({fullWidthContainer:{flex:1,backgroundColor:'white'},masafeAreaViewin:{position:'absolute',left:0,top:5,zIndex:0},container:{position:'absolute',left:0,zIndex:0},drawer:{position:'absolute',zIndex:100,borderRightWidth:1,borderRightColor:'rgba(0,0,0,.12)',borderStyle:'solid',backgroundColor:'white'}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Drawer/DrawerHeader/DrawerHeader.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Drawer/DrawerHeader/DrawerHeader.js\";var DrawerHeader=function(_Component){(0,_inherits2.default)(DrawerHeader,_Component);function DrawerHeader(){(0,_classCallCheck2.default)(this,DrawerHeader);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(DrawerHeader).apply(this,arguments));}(0,_createClass2.default)(DrawerHeader,[{key:\"_renderAvatar\",value:function _renderAvatar(){var _this$props=this.props,avatar=_this$props.avatar,theme=_this$props.theme;return _react.default.createElement(_reactNative.View,{style:theme.drawerHeaderAvatarContainer,__source:{fileName:_jsxFileName,lineNumber:19}},avatar);}},{key:\"render\",value:function render(){var _this$props2=this.props,avatar=_this$props2.avatar,title=_this$props2.title,subtitle=_this$props2.subtitle,style=_this$props2.style,theme=_this$props2.theme;return _react.default.createElement(_reactNative.View,{style:[theme.drawerHeader,style],__source:{fileName:_jsxFileName,lineNumber:26}},avatar?this._renderAvatar():null,_react.default.createElement(_reactNative.Text,{style:theme.drawerHeaderTitle,__source:{fileName:_jsxFileName,lineNumber:28}},title),_react.default.createElement(_reactNative.Text,{style:theme.drawerHeaderSubtitle,__source:{fileName:_jsxFileName,lineNumber:29}},subtitle));}}]);return DrawerHeader;}(_react.Component);(0,_defineProperty2.default)(DrawerHeader,\"propTypes\",{children:_propTypes.default.node,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),title:_propTypes.default.string,subtitle:_propTypes.default.string,avatar:_propTypes.default.node,theme:_propTypes.default.object});var _default=(0,_withTheme.default)(DrawerHeader);exports.default=_default;"
  },
  {
    "path": "dist/Components/Drawer/DrawerHeader/DrawerHeader.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../../..\");var _Header=_interopRequireDefault(require(\"../../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../../storybook/components/Container\"));var _storiesOf=require(\"../../../storybook/helpers/storiesOf\");var _storybookState=require(\"@sambego/storybook-state\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Drawer/DrawerHeader/DrawerHeader.stories.js\";var store=new _storybookState.Store({isOpen:true,isOpenPermanent:true});var DrawerContentAvatar=function DrawerContentAvatar(){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:27}},_react.default.createElement(_.DrawerHeader,{title:'Jon Snow',subtitle:'knowsnothing1234@thewall.com',avatar:_react.default.createElement(_.Avatar,{type:\"image\",image:_react.default.createElement(_reactNative.Image,{source:{uri:'https://www.hbo.com/content/dam/hbodata/series/game-of-thrones/character/s5/john-snow-1920.jpg/_jcr_content/renditions/cq5dam.web.1200.675.jpeg'},__source:{fileName:_jsxFileName,lineNumber:35}}),size:40,__source:{fileName:_jsxFileName,lineNumber:32}}),__source:{fileName:_jsxFileName,lineNumber:28}}),_react.default.createElement(_.DrawerSection,{bottomDivider:true,__source:{fileName:_jsxFileName,lineNumber:46}},_react.default.createElement(_.DrawerItem,{text:'Inbox',icon:'mail',active:true,__source:{fileName:_jsxFileName,lineNumber:47}}),_react.default.createElement(_.DrawerItem,{text:'Outbox',icon:'send',__source:{fileName:_jsxFileName,lineNumber:48}}),_react.default.createElement(_.DrawerItem,{text:'Favorites',icon:'favorite',__source:{fileName:_jsxFileName,lineNumber:49}})));};var DrawerContent=function DrawerContent(){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:57}},_react.default.createElement(_.DrawerHeader,{title:'Jon Snow',subtitle:'knowsnothing1234@thewall.com',__source:{fileName:_jsxFileName,lineNumber:58}}),_react.default.createElement(_.DrawerSection,{bottomDivider:true,__source:{fileName:_jsxFileName,lineNumber:62}},_react.default.createElement(_.DrawerItem,{text:'Inbox',icon:'mail',active:true,__source:{fileName:_jsxFileName,lineNumber:63}}),_react.default.createElement(_.DrawerItem,{text:'Outbox',icon:'send',__source:{fileName:_jsxFileName,lineNumber:64}}),_react.default.createElement(_.DrawerItem,{text:'Favorites',icon:'favorite',__source:{fileName:_jsxFileName,lineNumber:65}})));};var PageContent=function PageContent(){return _react.default.createElement(_reactNative.View,{style:{marginTop:20,alignItems:'center'},__source:{fileName:_jsxFileName,lineNumber:73}},_react.default.createElement(_.Heading,{type:4,style:{marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:74}},\"This is a page\"),_react.default.createElement(_.BodyText,{text:\"Click the menu button to open the drawer\",__source:{fileName:_jsxFileName,lineNumber:77}}),_react.default.createElement(_.BodyText,{text:\"Click outside the drawer to close it\",__source:{fileName:_jsxFileName,lineNumber:78}}));};var pageWidth=_reactNative.Platform.OS=='web'?600:_reactNative.Dimensions.get('window').width;var _default=(0,_storiesOf.storiesOf)('Components|Drawer/DrawerHeader',module).addParameters({jest:['Drawer']}).add('Simple',function(){return _react.default.createElement(_Container.default,{scroll:true,style:{padding:0},__source:{fileName:_jsxFileName,lineNumber:88}},_react.default.createElement(_Header.default,{title:'Drawer',__source:{fileName:_jsxFileName,lineNumber:89}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:90}},function(state){return _react.default.createElement(_reactNative.View,{style:styles.container,__source:{fileName:_jsxFileName,lineNumber:92}},_react.default.createElement(_.Drawer,{open:state.isOpen,pageWidth:pageWidth,pageHeight:500,drawerContent:_react.default.createElement(DrawerContent,{__source:{fileName:_jsxFileName,lineNumber:97}}),onClose:function onClose(){return store.set({isOpen:false});},animationTime:250,opacity:0.33,__source:{fileName:_jsxFileName,lineNumber:93}},_react.default.createElement(_reactNative.View,{style:styles.body,__source:{fileName:_jsxFileName,lineNumber:101}},_react.default.createElement(_.IconButton,{size:24,name:\"menu\",onPress:function onPress(){return store.set({isOpen:!state.isOpen});},__source:{fileName:_jsxFileName,lineNumber:102}}),_react.default.createElement(PageContent,{__source:{fileName:_jsxFileName,lineNumber:107}}))));}));}).add('with avatar',function(){return _react.default.createElement(_Container.default,{scroll:true,style:{padding:0},__source:{fileName:_jsxFileName,lineNumber:116}},_react.default.createElement(_Header.default,{title:'Drawer',__source:{fileName:_jsxFileName,lineNumber:117}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:118}},function(state){return _react.default.createElement(_reactNative.View,{style:styles.container,__source:{fileName:_jsxFileName,lineNumber:120}},_react.default.createElement(_.Drawer,{open:state.isOpen,pageWidth:pageWidth,pageHeight:500,drawerContent:_react.default.createElement(DrawerContentAvatar,{__source:{fileName:_jsxFileName,lineNumber:125}}),onClose:function onClose(){return store.set({isOpen:false});},animationTime:250,opacity:0.33,__source:{fileName:_jsxFileName,lineNumber:121}},_react.default.createElement(_reactNative.View,{style:styles.body,__source:{fileName:_jsxFileName,lineNumber:129}},_react.default.createElement(_.IconButton,{size:24,name:\"menu\",onPress:function onPress(){return store.set({isOpen:!state.isOpen});},__source:{fileName:_jsxFileName,lineNumber:130}}),_react.default.createElement(PageContent,{__source:{fileName:_jsxFileName,lineNumber:135}}))));}));});exports.default=_default;var styles=_reactNative.StyleSheet.create({container:{zIndex:1,position:'relative'},body:{backgroundColor:'#eee',width:pageWidth,height:500}});"
  },
  {
    "path": "dist/Components/Drawer/DrawerHeader/DrawerHeader.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({drawerHeader:{borderBottomWidth:_reactNative.StyleSheet.hairlineWidth,borderBottomColor:'rgba(0,0,0,.12)',paddingHorizontal:16,paddingVertical:18},avatarContainer:{marginBottom:20},title:{fontSize:20,fontWeight:'500',color:'rgba(0,0,0,.87)'},subtitle:{marginTop:4,fontSize:12,color:'rgba(0,0,0,.67)'}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Drawer/DrawerHeader/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _DrawerHeader.default;}});var _DrawerHeader=_interopRequireDefault(require(\"./DrawerHeader\"));"
  },
  {
    "path": "dist/Components/Drawer/DrawerItem/DrawerItem.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _Ripple=_interopRequireDefault(require(\"../../Ripple/Ripple\"));var _Icon=_interopRequireDefault(require(\"../../Icon/Icon\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Drawer/DrawerItem/DrawerItem.js\";var DrawerItem=function(_Component){(0,_inherits2.default)(DrawerItem,_Component);function DrawerItem(){(0,_classCallCheck2.default)(this,DrawerItem);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(DrawerItem).apply(this,arguments));}(0,_createClass2.default)(DrawerItem,[{key:\"render\",value:function render(){var _this$props=this.props,icon=_this$props.icon,text=_this$props.text,onPress=_this$props.onPress,active=_this$props.active,iconComponent=_this$props.iconComponent,theme=_this$props.theme;return _react.default.createElement(_Ripple.default,{style:[theme.drawerItem,{backgroundColor:active?theme.drawerItemActive.backgroundColor:theme.drawerItem.backgroundColor}],onPress:onPress,rippleContainerBorderRadius:4,__source:{fileName:_jsxFileName,lineNumber:24}},icon?_react.default.createElement(_Icon.default,{name:icon,size:theme.drawerItemIcon.size,color:active?theme.drawerItemActive.color:theme.drawerItemIcon.color,iconComponent:iconComponent,__source:{fileName:_jsxFileName,lineNumber:36}}):null,_react.default.createElement(_reactNative.Text,{style:[theme.drawerItemText,{marginLeft:icon?24:0,color:active?theme.drawerItemActive.color:theme.drawerItemText.color}],__source:{fileName:_jsxFileName,lineNumber:45}},text));}}]);return DrawerItem;}(_react.Component);(0,_defineProperty2.default)(DrawerItem,\"propTypes\",{children:_propTypes.default.node,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),text:_propTypes.default.string,icon:_propTypes.default.string,onPress:_propTypes.default.func,active:_propTypes.default.bool,iconComponent:_propTypes.default.func,theme:_propTypes.default.object});var _default=(0,_withTheme.default)(DrawerItem);exports.default=_default;"
  },
  {
    "path": "dist/Components/Drawer/DrawerItem/DrawerItem.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../../..\");var _Header=_interopRequireDefault(require(\"../../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../../storybook/components/Container\"));var _storiesOf=require(\"../../../storybook/helpers/storiesOf\");var _storybookState=require(\"@sambego/storybook-state\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Drawer/DrawerItem/DrawerItem.stories.js\";var store=new _storybookState.Store({isOpen:true,isOpenPermanent:true});var DrawerContent=function DrawerContent(){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:18}},_react.default.createElement(_.DrawerItem,{text:'Inbox',icon:'mail',active:true,__source:{fileName:_jsxFileName,lineNumber:19}}),_react.default.createElement(_.DrawerItem,{text:'Outbox',icon:'send',__source:{fileName:_jsxFileName,lineNumber:20}}),_react.default.createElement(_.DrawerItem,{text:'Favorites',icon:'favorite',__source:{fileName:_jsxFileName,lineNumber:21}}),_react.default.createElement(_.DrawerItem,{text:'Important',icon:'bookmark',__source:{fileName:_jsxFileName,lineNumber:22}}),_react.default.createElement(_.DrawerItem,{text:'Spam',icon:'error',__source:{fileName:_jsxFileName,lineNumber:23}}),_react.default.createElement(_.DrawerItem,{text:'Trash',icon:'delete',__source:{fileName:_jsxFileName,lineNumber:24}}));};var DrawerContentNoIcon=function DrawerContentNoIcon(){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:31}},_react.default.createElement(_.DrawerItem,{text:'Inbox',active:true,__source:{fileName:_jsxFileName,lineNumber:32}}),_react.default.createElement(_.DrawerItem,{text:'Outbox',__source:{fileName:_jsxFileName,lineNumber:33}}),_react.default.createElement(_.DrawerItem,{text:'Favorites',__source:{fileName:_jsxFileName,lineNumber:34}}),_react.default.createElement(_.DrawerItem,{text:'Important',__source:{fileName:_jsxFileName,lineNumber:35}}),_react.default.createElement(_.DrawerItem,{text:'Spam',__source:{fileName:_jsxFileName,lineNumber:36}}),_react.default.createElement(_.DrawerItem,{text:'Trash',__source:{fileName:_jsxFileName,lineNumber:37}}));};var PageContent=function PageContent(){return _react.default.createElement(_reactNative.View,{style:{marginTop:20,alignItems:'center'},__source:{fileName:_jsxFileName,lineNumber:44}},_react.default.createElement(_.Heading,{type:4,style:{marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:45}},\"This is a page\"),_react.default.createElement(_.BodyText,{text:\"Click the menu button to open the drawer\",__source:{fileName:_jsxFileName,lineNumber:48}}),_react.default.createElement(_.BodyText,{text:\"Click outside the drawer to close it\",__source:{fileName:_jsxFileName,lineNumber:49}}));};var pageWidth=_reactNative.Platform.OS=='web'?600:_reactNative.Dimensions.get('window').width;var _default=(0,_storiesOf.storiesOf)('Components|Drawer/DrawerItem',module).addParameters({jest:['Drawer']}).add('Simple',function(){return _react.default.createElement(_Container.default,{scroll:true,style:{padding:0},__source:{fileName:_jsxFileName,lineNumber:59}},_react.default.createElement(_Header.default,{title:'Drawer',__source:{fileName:_jsxFileName,lineNumber:60}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:61}},function(state){return _react.default.createElement(_reactNative.View,{style:styles.container,__source:{fileName:_jsxFileName,lineNumber:63}},_react.default.createElement(_.Drawer,{open:state.isOpen,pageWidth:pageWidth,pageHeight:500,drawerContent:_react.default.createElement(DrawerContent,{__source:{fileName:_jsxFileName,lineNumber:68}}),onClose:function onClose(){return store.set({isOpen:false});},animationTime:250,opacity:0.33,__source:{fileName:_jsxFileName,lineNumber:64}},_react.default.createElement(_reactNative.View,{style:styles.body,__source:{fileName:_jsxFileName,lineNumber:72}},_react.default.createElement(_.IconButton,{size:24,name:\"menu\",onPress:function onPress(){return store.set({isOpen:!state.isOpen});},__source:{fileName:_jsxFileName,lineNumber:73}}),_react.default.createElement(PageContent,{__source:{fileName:_jsxFileName,lineNumber:78}}))));}));}).add('no icon',function(){return _react.default.createElement(_Container.default,{scroll:true,style:{padding:0},__source:{fileName:_jsxFileName,lineNumber:87}},_react.default.createElement(_Header.default,{title:'Drawer',__source:{fileName:_jsxFileName,lineNumber:88}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:89}},function(state){return _react.default.createElement(_reactNative.View,{style:styles.container,__source:{fileName:_jsxFileName,lineNumber:91}},_react.default.createElement(_.Drawer,{open:state.isOpen,pageWidth:pageWidth,pageHeight:500,drawerContent:_react.default.createElement(DrawerContentNoIcon,{__source:{fileName:_jsxFileName,lineNumber:96}}),onClose:function onClose(){return store.set({isOpen:false});},animationTime:250,opacity:0.33,__source:{fileName:_jsxFileName,lineNumber:92}},_react.default.createElement(_reactNative.View,{style:styles.body,__source:{fileName:_jsxFileName,lineNumber:100}},_react.default.createElement(_.IconButton,{size:24,name:\"menu\",onPress:function onPress(){return store.set({isOpen:!state.isOpen});},__source:{fileName:_jsxFileName,lineNumber:101}}),_react.default.createElement(PageContent,{__source:{fileName:_jsxFileName,lineNumber:106}}))));}));});exports.default=_default;var styles=_reactNative.StyleSheet.create({container:{zIndex:1,position:'relative'},body:{backgroundColor:'#eee',width:pageWidth,height:500}});"
  },
  {
    "path": "dist/Components/Drawer/DrawerItem/DrawerItem.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({drawerItem:{flexDirection:'row',alignItems:'center',height:40,borderRadius:4,paddingHorizontal:8,zIndex:10},text:{fontSize:14,color:'rgba(0,0,0,.87)',fontWeight:'500',zIndex:10}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Drawer/DrawerItem/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _DrawerItem.default;}});var _DrawerItem=_interopRequireDefault(require(\"./DrawerItem\"));"
  },
  {
    "path": "dist/Components/Drawer/DrawerSection/DrawerSection.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _Divider=_interopRequireDefault(require(\"../../Divider/Divider\"));var _DrawerSection=_interopRequireDefault(require(\"./DrawerSection.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Drawer/DrawerSection/DrawerSection.js\";var DrawerSection=function(_Component){(0,_inherits2.default)(DrawerSection,_Component);function DrawerSection(){(0,_classCallCheck2.default)(this,DrawerSection);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(DrawerSection).apply(this,arguments));}(0,_createClass2.default)(DrawerSection,[{key:\"render\",value:function render(){var _this$props=this.props,children=_this$props.children,label=_this$props.label,topDivider=_this$props.topDivider,bottomDivider=_this$props.bottomDivider,fullWidth=_this$props.fullWidth,style=_this$props.style;return _react.default.createElement(_reactNative.View,{style:[style,{paddingHorizontal:fullWidth?0:8,paddingTop:label?8:0}],__source:{fileName:_jsxFileName,lineNumber:29}},topDivider?_react.default.createElement(_Divider.default,{__source:{fileName:_jsxFileName,lineNumber:34}}):null,label?_react.default.createElement(_reactNative.Text,{style:_DrawerSection.default.label,__source:{fileName:_jsxFileName,lineNumber:35}},label):null,_react.default.createElement(_reactNative.View,{style:_DrawerSection.default.content,__source:{fileName:_jsxFileName,lineNumber:36}},children),bottomDivider?_react.default.createElement(_Divider.default,{__source:{fileName:_jsxFileName,lineNumber:37}}):null);}}]);return DrawerSection;}(_react.Component);(0,_defineProperty2.default)(DrawerSection,\"propTypes\",{children:_propTypes.default.node,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),label:_propTypes.default.string,topDivider:_propTypes.default.bool,bottomDivider:_propTypes.default.bool,fullWidth:_propTypes.default.bool});var _default=(0,_withTheme.default)(DrawerSection);exports.default=_default;"
  },
  {
    "path": "dist/Components/Drawer/DrawerSection/DrawerSection.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../../..\");var _Header=_interopRequireDefault(require(\"../../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../../storybook/components/Container\"));var _storiesOf=require(\"../../../storybook/helpers/storiesOf\");var _storybookState=require(\"@sambego/storybook-state\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Drawer/DrawerSection/DrawerSection.stories.js\";var store=new _storybookState.Store({isOpen:true,isOpenPermanent:true});var DrawerContent=function DrawerContent(){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:25}},_react.default.createElement(_.DrawerSection,{bottomDivider:true,__source:{fileName:_jsxFileName,lineNumber:26}},_react.default.createElement(_.DrawerItem,{text:'Inbox',icon:'mail',active:true,__source:{fileName:_jsxFileName,lineNumber:27}}),_react.default.createElement(_.DrawerItem,{text:'Outbox',icon:'send',__source:{fileName:_jsxFileName,lineNumber:28}}),_react.default.createElement(_.DrawerItem,{text:'Favorites',icon:'favorite',__source:{fileName:_jsxFileName,lineNumber:29}})),_react.default.createElement(_.DrawerSection,{bottomDivider:true,__source:{fileName:_jsxFileName,lineNumber:31}},_react.default.createElement(_.DrawerItem,{text:'Important',icon:'mail',__source:{fileName:_jsxFileName,lineNumber:32}}),_react.default.createElement(_.DrawerItem,{text:'Spam',icon:'send',__source:{fileName:_jsxFileName,lineNumber:33}}),_react.default.createElement(_.DrawerItem,{text:'Trash',icon:'favorite',__source:{fileName:_jsxFileName,lineNumber:34}})));};var DrawerContentLabel=function DrawerContentLabel(){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:42}},_react.default.createElement(_.DrawerSection,{bottomDivider:true,label:'Main',__source:{fileName:_jsxFileName,lineNumber:43}},_react.default.createElement(_.DrawerItem,{text:'Inbox',icon:'mail',active:true,__source:{fileName:_jsxFileName,lineNumber:44}}),_react.default.createElement(_.DrawerItem,{text:'Outbox',icon:'send',__source:{fileName:_jsxFileName,lineNumber:45}}),_react.default.createElement(_.DrawerItem,{text:'Favorites',icon:'favorite',__source:{fileName:_jsxFileName,lineNumber:46}})),_react.default.createElement(_.DrawerSection,{bottomDivider:true,label:'Secondary',__source:{fileName:_jsxFileName,lineNumber:48}},_react.default.createElement(_.DrawerItem,{text:'Important',icon:'mail',__source:{fileName:_jsxFileName,lineNumber:49}}),_react.default.createElement(_.DrawerItem,{text:'Spam',icon:'send',__source:{fileName:_jsxFileName,lineNumber:50}}),_react.default.createElement(_.DrawerItem,{text:'Trash',icon:'favorite',__source:{fileName:_jsxFileName,lineNumber:51}})));};var PageContent=function PageContent(){return _react.default.createElement(_reactNative.View,{style:{marginTop:20,alignItems:'center'},__source:{fileName:_jsxFileName,lineNumber:59}},_react.default.createElement(_.Heading,{type:4,style:{marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:60}},\"This is a page\"),_react.default.createElement(_.BodyText,{text:\"Click the menu button to open the drawer\",__source:{fileName:_jsxFileName,lineNumber:63}}),_react.default.createElement(_.BodyText,{text:\"Click outside the drawer to close it\",__source:{fileName:_jsxFileName,lineNumber:64}}));};var pageWidth=_reactNative.Platform.OS=='web'?600:_reactNative.Dimensions.get('window').width;var _default=(0,_storiesOf.storiesOf)('Components|Drawer/DrawerSection',module).addParameters({jest:['Drawer']}).add('Simple',function(){return _react.default.createElement(_Container.default,{scroll:true,style:{padding:0},__source:{fileName:_jsxFileName,lineNumber:74}},_react.default.createElement(_Header.default,{title:'Drawer',__source:{fileName:_jsxFileName,lineNumber:75}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:76}},function(state){return _react.default.createElement(_reactNative.View,{style:styles.container,__source:{fileName:_jsxFileName,lineNumber:78}},_react.default.createElement(_.Drawer,{open:state.isOpen,pageWidth:pageWidth,pageHeight:500,drawerContent:_react.default.createElement(DrawerContent,{__source:{fileName:_jsxFileName,lineNumber:83}}),onClose:function onClose(){return store.set({isOpen:false});},animationTime:250,opacity:0.33,__source:{fileName:_jsxFileName,lineNumber:79}},_react.default.createElement(_reactNative.View,{style:styles.body,__source:{fileName:_jsxFileName,lineNumber:87}},_react.default.createElement(_.IconButton,{size:24,name:\"menu\",onPress:function onPress(){return store.set({isOpen:!state.isOpen});},__source:{fileName:_jsxFileName,lineNumber:88}}),_react.default.createElement(PageContent,{__source:{fileName:_jsxFileName,lineNumber:93}}))));}));}).add('with label',function(){return _react.default.createElement(_Container.default,{scroll:true,style:{padding:0},__source:{fileName:_jsxFileName,lineNumber:102}},_react.default.createElement(_Header.default,{title:'Drawer',__source:{fileName:_jsxFileName,lineNumber:103}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:104}},function(state){return _react.default.createElement(_reactNative.View,{style:styles.container,__source:{fileName:_jsxFileName,lineNumber:106}},_react.default.createElement(_.Drawer,{open:state.isOpen,pageWidth:pageWidth,pageHeight:500,drawerContent:_react.default.createElement(DrawerContentLabel,{__source:{fileName:_jsxFileName,lineNumber:111}}),onClose:function onClose(){return store.set({isOpen:false});},animationTime:250,opacity:0.33,__source:{fileName:_jsxFileName,lineNumber:107}},_react.default.createElement(_reactNative.View,{style:styles.body,__source:{fileName:_jsxFileName,lineNumber:115}},_react.default.createElement(_.IconButton,{size:24,name:\"menu\",onPress:function onPress(){return store.set({isOpen:!state.isOpen});},__source:{fileName:_jsxFileName,lineNumber:116}}),_react.default.createElement(PageContent,{__source:{fileName:_jsxFileName,lineNumber:121}}))));}));});exports.default=_default;var styles=_reactNative.StyleSheet.create({container:{zIndex:1,position:'relative'},body:{backgroundColor:'#eee',width:pageWidth,height:500}});"
  },
  {
    "path": "dist/Components/Drawer/DrawerSection/DrawerSection.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({content:{paddingTop:8,paddingBottom:8},label:{marginBottom:8}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Drawer/DrawerSection/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _DrawerSection.default;}});var _DrawerSection=_interopRequireDefault(require(\"./DrawerSection\"));"
  },
  {
    "path": "dist/Components/Drawer/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _Drawer.default;}});Object.defineProperty(exports,\"DrawerHeader\",{enumerable:true,get:function get(){return _DrawerHeader.default;}});Object.defineProperty(exports,\"DrawerItem\",{enumerable:true,get:function get(){return _DrawerItem.default;}});Object.defineProperty(exports,\"DrawerSection\",{enumerable:true,get:function get(){return _DrawerSection.default;}});var _Drawer=_interopRequireDefault(require(\"./Drawer\"));var _DrawerHeader=_interopRequireDefault(require(\"./DrawerHeader\"));var _DrawerItem=_interopRequireDefault(require(\"./DrawerItem\"));var _DrawerSection=_interopRequireDefault(require(\"./DrawerSection\"));"
  },
  {
    "path": "dist/Components/DrawerBottom/DrawerBottom.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _objectWithoutProperties2=_interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutProperties\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _SheetBottom=_interopRequireDefault(require(\"../SheetBottom/SheetBottom\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/DrawerBottom/DrawerBottom.js\";var DrawerBottom=function(_Component){(0,_inherits2.default)(DrawerBottom,_Component);function DrawerBottom(){(0,_classCallCheck2.default)(this,DrawerBottom);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(DrawerBottom).apply(this,arguments));}(0,_createClass2.default)(DrawerBottom,[{key:\"render\",value:function render(){var _this$props=this.props,children=_this$props.children,rest=(0,_objectWithoutProperties2.default)(_this$props,[\"children\"]);return _react.default.createElement(_SheetBottom.default,(0,_extends2.default)({type:'modal'},rest,{__source:{fileName:_jsxFileName,lineNumber:15}}),children);}}]);return DrawerBottom;}(_react.Component);(0,_defineProperty2.default)(DrawerBottom,\"propTypes\",{children:_propTypes.default.node,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array])});var _default=(0,_withTheme.default)(DrawerBottom);exports.default=_default;"
  },
  {
    "path": "dist/Components/DrawerBottom/DrawerBottom.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../../\");var _storybookState=require(\"@sambego/storybook-state\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/DrawerBottom/DrawerBottom.stories.js\";var store=new _storybookState.Store({visible:false});var _default=(0,_storiesOf.storiesOf)('Components|DrawerBottom',module).addParameters({jest:['DrawerBottom']}).add('Simple',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:23}},_react.default.createElement(_Header.default,{title:'DrawerBottom',__source:{fileName:_jsxFileName,lineNumber:24}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:25}},function(state){return _react.default.createElement(_reactNative.View,{style:{flex:1,height:300},__source:{fileName:_jsxFileName,lineNumber:27}},_react.default.createElement(_.Button,{text:\"Open Drawer\",onPress:function onPress(){store.set({visible:true});},__source:{fileName:_jsxFileName,lineNumber:28}}),_react.default.createElement(_.DrawerBottom,{visible:state.visible,pageHeight:_reactNative.Platform.OS=='web'?400:null,onBackdropPress:function onBackdropPress(){return store.set({visible:false});},onSwipeDown:function onSwipeDown(){return store.set({visible:false});},__source:{fileName:_jsxFileName,lineNumber:34}},_react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:39}},_react.default.createElement(_.DrawerHeader,{title:'Jon Snow',subtitle:'Knows nothing',__source:{fileName:_jsxFileName,lineNumber:40}}),_react.default.createElement(_.DrawerSection,{bottomDivider:true,__source:{fileName:_jsxFileName,lineNumber:41}},_react.default.createElement(_.DrawerItem,{text:'Inbox',icon:'mail',active:true,__source:{fileName:_jsxFileName,lineNumber:42}}),_react.default.createElement(_.DrawerItem,{text:'Outbox',icon:'send',__source:{fileName:_jsxFileName,lineNumber:43}}),_react.default.createElement(_.DrawerItem,{text:'Favorites',icon:'favorite',__source:{fileName:_jsxFileName,lineNumber:44}})))));}));});exports.default=_default;"
  },
  {
    "path": "dist/Components/DrawerBottom/DrawerBottom.styles.js",
    "content": ""
  },
  {
    "path": "dist/Components/DrawerBottom/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _DrawerBottom.default;}});var _DrawerBottom=_interopRequireDefault(require(\"./DrawerBottom\"));"
  },
  {
    "path": "dist/Components/Fab/Fab.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=exports.Fab=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _objectWithoutProperties2=_interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutProperties\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _Icon=_interopRequireDefault(require(\"../Icon/Icon.js\"));var _Ripple=_interopRequireDefault(require(\"../Ripple/Ripple.js\"));var _BodyText=_interopRequireDefault(require(\"../Typography/BodyText/BodyText.js\"));var _shadow=_interopRequireDefault(require(\"../../Utils/Shadow/shadow.js\"));var _Fab=_interopRequireDefault(require(\"./Fab.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Fab/Fab.js\";var Fab=function(_Component){(0,_inherits2.default)(Fab,_Component);function Fab(props){var _this;(0,_classCallCheck2.default)(this,Fab);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(Fab).call(this,props));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{scale:new _reactNative.Animated.Value(0)});return _this;}(0,_createClass2.default)(Fab,[{key:\"componentDidMount\",value:function componentDidMount(){var _this$props=this.props,visible=_this$props.visible,animated=_this$props.animated;if(visible&&animated){this._animate();}else if(visible){this.setState({scale:new _reactNative.Animated.Value(1)});}}},{key:\"componentDidUpdate\",value:function componentDidUpdate(prevProps){var _this$props2=this.props,visible=_this$props2.visible,animated=_this$props2.animated;if(visible!=prevProps.visible&&animated){this._animate();}}},{key:\"_animate\",value:function _animate(){var visible=this.props.visible;var scale=this.state.scale;var scaleValue=visible?1:0;_reactNative.Animated.spring(scale,{toValue:scaleValue,speed:7,useNativeDriver:true}).start();}},{key:\"_renderContent\",value:function _renderContent(){var _this$props3=this.props,icon=_this$props3.icon,label=_this$props3.label;return _react.default.createElement(_react.Fragment,{__source:{fileName:_jsxFileName,lineNumber:80}},icon?this._renderIcon():null,label?this._renderLabel():null);}},{key:\"_renderLabel\",value:function _renderLabel(){var _this$props4=this.props,label=_this$props4.label,disabled=_this$props4.disabled;return _react.default.createElement(_BodyText.default,{text:label,style:{color:disabled?'rgba(0, 0, 0, 0.26)':'white',fontSize:14,marginLeft:8},__source:{fileName:_jsxFileName,lineNumber:91}});}},{key:\"_renderIcon\",value:function _renderIcon(){var _this$props5=this.props,disabled=_this$props5.disabled,icon=_this$props5.icon;var color=disabled?'rgba(0, 0, 0, 0.26)':'white';if(typeof icon=='string'||icon instanceof String||!icon){return _react.default.createElement(_Icon.default,{name:icon?icon:'add',size:24,color:color,__source:{fileName:_jsxFileName,lineNumber:108}});}else{return _react.default.cloneElement(icon,{size:icon.props.size?icon.props.size:24,color:icon.props.color?icon.props.color:color});}}},{key:\"render\",value:function render(){var _this$props6=this.props,style=_this$props6.style,backgroundColor=_this$props6.backgroundColor,onPress=_this$props6.onPress,disabled=_this$props6.disabled,rippleColor=_this$props6.rippleColor,shadow=_this$props6.shadow,mini=_this$props6.mini,theme=_this$props6.theme,children=_this$props6.children,label=_this$props6.label,testID=_this$props6.testID,containerStyle=_this$props6.containerStyle,props=(0,_objectWithoutProperties2.default)(_this$props6,[\"style\",\"backgroundColor\",\"onPress\",\"disabled\",\"rippleColor\",\"shadow\",\"mini\",\"theme\",\"children\",\"label\",\"testID\",\"containerStyle\"]);var scale=this.state.scale;var backgroundColorApplied=backgroundColor?backgroundColor:theme.primary.main;if(disabled)backgroundColorApplied='rgba(0, 0, 0, 0.12)';var size=mini?40:56;var width=size;if(label){size=48;width='auto';}return _react.default.createElement(_reactNative.Animated.View,{useNativeDriver:true,style:[{transform:[{scale:scale}],elevation:100,zIndex:100},containerStyle],testID:testID,__source:{fileName:_jsxFileName,lineNumber:149}},_react.default.createElement(_Ripple.default,(0,_extends2.default)({onPress:onPress,disabled:disabled,rippleColor:rippleColor?rippleColor:'rgba(0,0,0,.8)',rippleContainerBorderRadius:100,style:[_Fab.default.button,{minHeight:size,minWidth:width,height:size,width:width,paddingHorizontal:label?12:0,backgroundColor:backgroundColorApplied},(0,_shadow.default)(disabled?0:shadow||6),style]},props,{__source:{fileName:_jsxFileName,lineNumber:160}}),children?children:this._renderContent()));}}]);return Fab;}(_react.Component);exports.Fab=Fab;(0,_defineProperty2.default)(Fab,\"propTypes\",{style:_propTypes.default.oneOfType([_propTypes.default.array,_propTypes.default.object]),backgroundColor:_propTypes.default.string,onPress:_propTypes.default.func,disabled:_propTypes.default.bool,rippleColor:_propTypes.default.string,icon:_propTypes.default.oneOfType([_propTypes.default.string,_propTypes.default.node]),shadow:_propTypes.default.number,mini:_propTypes.default.bool,theme:_propTypes.default.object,children:_propTypes.default.node,visible:_propTypes.default.bool,initialScale:_propTypes.default.number,animated:_propTypes.default.bool,label:_propTypes.default.string,testID:_propTypes.default.string,containerStyle:_propTypes.default.oneOfType([_propTypes.default.array,_propTypes.default.object])});(0,_defineProperty2.default)(Fab,\"defaultProps\",{visible:true,icon:'add'});var _default=(0,_withTheme.default)(Fab);exports.default=_default;"
  },
  {
    "path": "dist/Components/Fab/Fab.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../../\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _storybookState=require(\"@sambego/storybook-state\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Fab/Fab.stories.js\";var store=new _storybookState.Store({visible:true});var _default=(0,_storiesOf.storiesOf)('Components|Fab',module).addParameters({jest:['Fab']}).add('simple',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:16}},_react.default.createElement(_Header.default,{title:'Fab',__source:{fileName:_jsxFileName,lineNumber:17}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',flexWrap:'wrap'},__source:{fileName:_jsxFileName,lineNumber:18}},_react.default.createElement(_.Fab,{icon:'add',__source:{fileName:_jsxFileName,lineNumber:19}}),_react.default.createElement(_.Fab,{backgroundColor:'#E91E63',icon:'archive',__source:{fileName:_jsxFileName,lineNumber:20}}),_react.default.createElement(_.Fab,{backgroundColor:'#F44336',icon:'delete',__source:{fileName:_jsxFileName,lineNumber:21}}),_react.default.createElement(_.Fab,{backgroundColor:'#009688',icon:'edit',__source:{fileName:_jsxFileName,lineNumber:22}}),_react.default.createElement(_.Fab,{backgroundColor:'black',icon:'attach-money',__source:{fileName:_jsxFileName,lineNumber:23}}),_react.default.createElement(_.Fab,{disabled:true,backgroundColor:'#009688',icon:'delete',__source:{fileName:_jsxFileName,lineNumber:24}})));}).add('animated',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:29}},_react.default.createElement(_Header.default,{title:'Fab',__source:{fileName:_jsxFileName,lineNumber:30}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:31}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:33}},_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',flexWrap:'wrap'},__source:{fileName:_jsxFileName,lineNumber:34}},_react.default.createElement(_.Fab,{animated:true,visible:state.visible,icon:'add',__source:{fileName:_jsxFileName,lineNumber:35}}),_react.default.createElement(_.Fab,{animated:true,visible:state.visible,backgroundColor:'#E91E63',icon:'archive',__source:{fileName:_jsxFileName,lineNumber:36}}),_react.default.createElement(_.Fab,{animated:true,visible:state.visible,backgroundColor:'#F44336',icon:'delete',__source:{fileName:_jsxFileName,lineNumber:42}}),_react.default.createElement(_.Fab,{animated:true,visible:state.visible,mini:true,backgroundColor:'#009688',icon:'edit',__source:{fileName:_jsxFileName,lineNumber:48}}),_react.default.createElement(_.Fab,{animated:true,visible:state.visible,mini:true,backgroundColor:'black',icon:'attach-money',__source:{fileName:_jsxFileName,lineNumber:55}}),_react.default.createElement(_.Fab,{animated:true,disabled:true,visible:state.visible,mini:true,backgroundColor:'#009688',icon:'delete',__source:{fileName:_jsxFileName,lineNumber:62}})),_react.default.createElement(_.Button,{text:'Toggle visibility',onPress:function onPress(){return store.set({visible:!state.visible});},__source:{fileName:_jsxFileName,lineNumber:71}}));}));}).add('mini',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:81}},_react.default.createElement(_Header.default,{title:'Fab',__source:{fileName:_jsxFileName,lineNumber:82}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',flexWrap:'wrap'},__source:{fileName:_jsxFileName,lineNumber:83}},_react.default.createElement(_.Fab,{mini:true,icon:'add',__source:{fileName:_jsxFileName,lineNumber:84}}),_react.default.createElement(_.Fab,{mini:true,backgroundColor:'#E91E63',icon:'archive',__source:{fileName:_jsxFileName,lineNumber:85}}),_react.default.createElement(_.Fab,{mini:true,backgroundColor:'#F44336',icon:'delete',__source:{fileName:_jsxFileName,lineNumber:86}}),_react.default.createElement(_.Fab,{mini:true,backgroundColor:'#009688',icon:'edit',__source:{fileName:_jsxFileName,lineNumber:87}}),_react.default.createElement(_.Fab,{mini:true,backgroundColor:'black',icon:'attach-money',__source:{fileName:_jsxFileName,lineNumber:88}}),_react.default.createElement(_.Fab,{mini:true,disabled:true,backgroundColor:'#009688',icon:'delete',__source:{fileName:_jsxFileName,lineNumber:89}})));}).add('extended',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:94}},_react.default.createElement(_Header.default,{title:'Fab',__source:{fileName:_jsxFileName,lineNumber:95}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',flexWrap:'wrap'},__source:{fileName:_jsxFileName,lineNumber:96}},_react.default.createElement(_.Fab,{icon:'add',label:'Add',__source:{fileName:_jsxFileName,lineNumber:97}}),_react.default.createElement(_.Fab,{backgroundColor:'#E91E63',icon:'archive',label:'Archive',__source:{fileName:_jsxFileName,lineNumber:98}}),_react.default.createElement(_.Fab,{backgroundColor:'#F44336',icon:'delete',label:'Delete',__source:{fileName:_jsxFileName,lineNumber:99}}),_react.default.createElement(_.Fab,{backgroundColor:'#009688',icon:'edit',label:'Edit',__source:{fileName:_jsxFileName,lineNumber:100}}),_react.default.createElement(_.Fab,{backgroundColor:'black',icon:'attach-money',label:'Buy',__source:{fileName:_jsxFileName,lineNumber:101}}),_react.default.createElement(_.Fab,{disabled:true,backgroundColor:'#009688',icon:'delete',label:'Disabled',__source:{fileName:_jsxFileName,lineNumber:102}})));});exports.default=_default;"
  },
  {
    "path": "dist/Components/Fab/Fab.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({button:{height:56,width:56,flexDirection:'row',alignItems:'center',alignSelf:'center',justifyContent:'center',borderRadius:100},icon:{width:16,flexDirection:'row',alignItems:'center',alignSelf:'center',justifyContent:'center',textAlign:'center'}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Fab/FabSpeedDial/FabSpeedDial.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _Fab=_interopRequireDefault(require(\"../Fab.js\"));var _FabSpeedDial=_interopRequireDefault(require(\"./FabSpeedDial.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Fab/FabSpeedDial/FabSpeedDial.js\";var FabSpeedDial=function(_Component){(0,_inherits2.default)(FabSpeedDial,_Component);function FabSpeedDial(props){var _this;(0,_classCallCheck2.default)(this,FabSpeedDial);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(FabSpeedDial).call(this,props));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{open:false,fabIcon:'add',actionAnimationsScale:[new _reactNative.Animated.Value(0),new _reactNative.Animated.Value(0),new _reactNative.Animated.Value(0),new _reactNative.Animated.Value(0),new _reactNative.Animated.Value(0),new _reactNative.Animated.Value(0)],actionAnimationsOpacity:[new _reactNative.Animated.Value(0),new _reactNative.Animated.Value(0),new _reactNative.Animated.Value(0),new _reactNative.Animated.Value(0),new _reactNative.Animated.Value(0),new _reactNative.Animated.Value(0)]});return _this;}(0,_createClass2.default)(FabSpeedDial,[{key:\"toggleSpeedDial\",value:function toggleSpeedDial(){this.setState({open:!this.state.open});}},{key:\"toggleFabIcon\",value:function toggleFabIcon(){var fab=this.props.fab;var open=this.state.open;var fabIcon;if(typeof fab!='string'){fabIcon=open?'clear':fab.props.icon;}else{fabIcon=open?'clear':fab;}this.setState({fabIcon:fabIcon});}},{key:\"animateActions\",value:function animateActions(){var onPress=this.props.onPress;var open=this.state.open;this.setState({open:!open});if(!open){this.openAnimation();}else{this.closeAnimation();}this.toggleFabIcon();if(onPress)onPress();}},{key:\"openAnimation\",value:function openAnimation(){var _this$state=this.state,actionAnimationsScale=_this$state.actionAnimationsScale,actionAnimationsOpacity=_this$state.actionAnimationsOpacity;_reactNative.Animated.parallel([_reactNative.Animated.stagger(50,actionAnimationsScale.map(function(animation){return _reactNative.Animated.timing(animation,{toValue:1,duration:150,useNativeDriver:true});}).reverse()),_reactNative.Animated.stagger(50,actionAnimationsOpacity.map(function(animation){return _reactNative.Animated.timing(animation,{toValue:1,duration:150,useNativeDriver:true});}).reverse())]).start();}},{key:\"closeAnimation\",value:function closeAnimation(){var _this$state2=this.state,actionAnimationsScale=_this$state2.actionAnimationsScale,actionAnimationsOpacity=_this$state2.actionAnimationsOpacity;_reactNative.Animated.parallel([_reactNative.Animated.stagger(50,actionAnimationsScale.map(function(animation){return _reactNative.Animated.timing(animation,{toValue:0,duration:150,useNativeDriver:true});})),_reactNative.Animated.stagger(50,actionAnimationsOpacity.map(function(animation){return _reactNative.Animated.timing(animation,{toValue:0,duration:150,useNativeDriver:true});}))]).start();}},{key:\"renderActions\",value:function renderActions(){var _this2=this;var actions=this.props.actions;return _react.default.createElement(_reactNative.View,{style:{marginBottom:24,alignItems:'flex-end'},__source:{fileName:_jsxFileName,lineNumber:143}},actions.map(function(item,index){return _react.default.createElement(_reactNative.Animated.View,{useNativeDriver:true,key:index,style:{marginTop:16,transform:[{scale:_this2.state.actionAnimationsScale[index]}],opacity:_this2.state.actionAnimationsOpacity[index]},__source:{fileName:_jsxFileName,lineNumber:150}},item);}));}},{key:\"_renderFab\",value:function _renderFab(){var _this3=this;var _this$props=this.props,fab=_this$props.fab,style=_this$props.style,fabProps=_this$props.fabProps;var _this$state3=this.state,fabIcon=_this$state3.fabIcon,open=_this$state3.open;if(typeof fab=='string'||fab instanceof String||!fab){return _react.default.createElement(_Fab.default,(0,_extends2.default)({icon:fabIcon,onPress:function onPress(){return _this3.animateActions();},style:style},fabProps,{__source:{fileName:_jsxFileName,lineNumber:172}}));}else{return _react.default.cloneElement(fab,{label:open?'':fab.props.label,icon:fabIcon,color:fab.props.color?fab.props.color:'white',onPress:function onPress(){return _this3.animateActions();}});}}},{key:\"render\",value:function render(){var _this$props2=this.props,containerStyle=_this$props2.containerStyle,testID=_this$props2.testID;return _react.default.createElement(_reactNative.View,{style:[_FabSpeedDial.default.container,containerStyle],testID:testID,__source:{fileName:_jsxFileName,lineNumber:192}},this.renderActions(),this._renderFab());}}]);return FabSpeedDial;}(_react.Component);(0,_defineProperty2.default)(FabSpeedDial,\"propTypes\",{containerStyle:_propTypes.default.oneOfType([_propTypes.default.array,_propTypes.default.object]),style:_propTypes.default.oneOfType([_propTypes.default.array,_propTypes.default.object]),onPress:_propTypes.default.func,actions:_propTypes.default.array,fab:_propTypes.default.oneOfType([_propTypes.default.string,_propTypes.default.node]),testID:_propTypes.default.string,fabProps:_propTypes.default.object});(0,_defineProperty2.default)(FabSpeedDial,\"defaultProps\",{fab:'add'});var _default=(0,_withTheme.default)(FabSpeedDial);exports.default=_default;"
  },
  {
    "path": "dist/Components/Fab/FabSpeedDial/FabSpeedDial.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../../../\");var _Header=_interopRequireDefault(require(\"../../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../../storybook/components/Container\"));var _storiesOf=require(\"../../../storybook/helpers/storiesOf\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Fab/FabSpeedDial/FabSpeedDial.stories.js\";var actions=[_react.default.createElement(_.Fab,{key:1,backgroundColor:'#E91E63',icon:'archive',__source:{fileName:_jsxFileName,lineNumber:10}}),_react.default.createElement(_.Fab,{key:2,backgroundColor:'#F44336',icon:'delete',__source:{fileName:_jsxFileName,lineNumber:11}}),_react.default.createElement(_.Fab,{key:3,backgroundColor:'#009688',icon:'edit',__source:{fileName:_jsxFileName,lineNumber:12}}),_react.default.createElement(_.Fab,{key:4,backgroundColor:'black',icon:'attach-money',__source:{fileName:_jsxFileName,lineNumber:13}})];var actionsExtended=[_react.default.createElement(_.Fab,{key:4,label:\"Buy\",backgroundColor:'black',icon:'attach-money',__source:{fileName:_jsxFileName,lineNumber:17}}),_react.default.createElement(_.Fab,{key:3,label:\"Edit\",backgroundColor:'#009688',icon:'edit',__source:{fileName:_jsxFileName,lineNumber:18}}),_react.default.createElement(_.Fab,{key:2,label:\"Delete\",backgroundColor:'#F44336',icon:'delete',__source:{fileName:_jsxFileName,lineNumber:20}}),_react.default.createElement(_.Fab,{key:1,label:\"Archive\",backgroundColor:'#E91E63',icon:'archive',__source:{fileName:_jsxFileName,lineNumber:21}})];var _default=(0,_storiesOf.storiesOf)('Components|Fab/FabSpeedDial',module).addParameters({jest:['FabSpeedDial']}).add('simple',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:27}},_react.default.createElement(_Header.default,{title:'Fab SpeedDial',__source:{fileName:_jsxFileName,lineNumber:28}}),_react.default.createElement(_reactNative.View,{style:{flex:1,position:'relative',paddingTop:350},__source:{fileName:_jsxFileName,lineNumber:30}},_react.default.createElement(_.FabSpeedDial,{actions:actions,__source:{fileName:_jsxFileName,lineNumber:31}})));}).add('extended',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:36}},_react.default.createElement(_Header.default,{title:'Fab SpeedDial',__source:{fileName:_jsxFileName,lineNumber:37}}),_react.default.createElement(_reactNative.View,{style:{flex:1,position:'relative',paddingTop:350},__source:{fileName:_jsxFileName,lineNumber:39}},_react.default.createElement(_.FabSpeedDial,{extended:true,actions:actionsExtended,fab:_react.default.createElement(_.Fab,{label:\"Open\",icon:\"add\",__source:{fileName:_jsxFileName,lineNumber:43}}),__source:{fileName:_jsxFileName,lineNumber:40}})));});exports.default=_default;"
  },
  {
    "path": "dist/Components/Fab/FabSpeedDial/FabSpeedDial.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({container:{position:'absolute',bottom:0,right:0,backgroundColor:'transparent',alignItems:'flex-end'}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Fab/FabSpeedDial/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _FabSpeedDial.default;}});var _FabSpeedDial=_interopRequireDefault(require(\"./FabSpeedDial\"));"
  },
  {
    "path": "dist/Components/Fab/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _Fab.default;}});Object.defineProperty(exports,\"FabSpeedDial\",{enumerable:true,get:function get(){return _FabSpeedDial.default;}});var _Fab=_interopRequireDefault(require(\"./Fab\"));var _FabSpeedDial=_interopRequireDefault(require(\"./FabSpeedDial\"));"
  },
  {
    "path": "dist/Components/Icon/Icon.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _objectWithoutProperties2=_interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutProperties\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _MaterialIcons=_interopRequireDefault(require(\"react-native-vector-icons/MaterialIcons\"));var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Icon/Icon.js\";var Icon=function(_Component){(0,_inherits2.default)(Icon,_Component);function Icon(props){(0,_classCallCheck2.default)(this,Icon);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(Icon).call(this,props));}(0,_createClass2.default)(Icon,[{key:\"render\",value:function render(){var _this$props=this.props,style=_this$props.style,name=_this$props.name,color=_this$props.color,size=_this$props.size,testID=_this$props.testID,iconComponent=_this$props.iconComponent,rest=(0,_objectWithoutProperties2.default)(_this$props,[\"style\",\"name\",\"color\",\"size\",\"testID\",\"iconComponent\"]);var IconComponent=iconComponent||_MaterialIcons.default;return _react.default.createElement(IconComponent,(0,_extends2.default)({pointerEvents:\"none\",name:name,color:color,size:size,style:[{backgroundColor:'transparent'},style],testID:testID},rest,{__source:{fileName:_jsxFileName,lineNumber:33}}));}}]);return Icon;}(_react.Component);(0,_defineProperty2.default)(Icon,\"propTypes\",{style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),theme:_propTypes.default.object,color:_propTypes.default.string,size:_propTypes.default.number,name:_propTypes.default.string,testID:_propTypes.default.string,iconComponent:_propTypes.default.func});var _default=(0,_withTheme.default)(Icon);exports.default=_default;"
  },
  {
    "path": "dist/Components/Icon/Icon.styles.js",
    "content": ""
  },
  {
    "path": "dist/Components/Icon/Icons.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _MaterialCommunityIcons=_interopRequireDefault(require(\"react-native-vector-icons/MaterialCommunityIcons\"));var _=require(\"../../\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Icon/Icons.stories.js\";var _default=(0,_storiesOf.storiesOf)('Components|Icons',module).addParameters({jest:['Icons']}).add('Component',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:13}},_react.default.createElement(_Header.default,{title:'Icon Component',__source:{fileName:_jsxFileName,lineNumber:14}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:16}},_react.default.createElement(_.Icon,{name:\"alarm\",size:32,__source:{fileName:_jsxFileName,lineNumber:17}}),_react.default.createElement(_.Icon,{name:\"face\",size:32,__source:{fileName:_jsxFileName,lineNumber:18}}),_react.default.createElement(_.Icon,{name:\"arrow-back\",size:32,__source:{fileName:_jsxFileName,lineNumber:19}}),_react.default.createElement(_.Badge,{style:{position:'absolute',top:0,right:0},size:14,badgeContent:4,__source:{fileName:_jsxFileName,lineNumber:20}},_react.default.createElement(_.Icon,{name:\"favorite\",size:32,__source:{fileName:_jsxFileName,lineNumber:24}}))),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:27}},_react.default.createElement(_.Icon,{name:\"adb\",size:12,color:'#F44336',__source:{fileName:_jsxFileName,lineNumber:28}}),_react.default.createElement(_.Icon,{name:\"album\",size:24,color:'#E91E63',__source:{fileName:_jsxFileName,lineNumber:29}}),_react.default.createElement(_.Icon,{name:\"battery-full\",size:32,color:'#9C27B0',__source:{fileName:_jsxFileName,lineNumber:30}}),_react.default.createElement(_.Badge,{style:{position:'absolute',top:0,right:0},size:14,badgeContent:4,__source:{fileName:_jsxFileName,lineNumber:31}},_react.default.createElement(_.Icon,{name:\"camera\",size:48,color:'#009688',__source:{fileName:_jsxFileName,lineNumber:35}}))),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:38}},_react.default.createElement(_.Icon,{name:\"create\",size:24,color:'#00BCD4',__source:{fileName:_jsxFileName,lineNumber:39}}),_react.default.createElement(_.Icon,{name:\"dashboard\",size:32,color:'#607D8B',__source:{fileName:_jsxFileName,lineNumber:40}}),_react.default.createElement(_.Icon,{name:\"directions-walk\",size:48,color:'#8BC34A',__source:{fileName:_jsxFileName,lineNumber:41}}),_react.default.createElement(_.Icon,{name:\"flash-on\",size:64,color:'#FFEB3B',__source:{fileName:_jsxFileName,lineNumber:43}})));}).add('Another Source',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:48}},_react.default.createElement(_Header.default,{title:'Icons from another source',__source:{fileName:_jsxFileName,lineNumber:49}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:51}},_react.default.createElement(_.Icon,{name:\"visual-studio-code\",size:24,color:'#373177',iconComponent:_MaterialCommunityIcons.default,__source:{fileName:_jsxFileName,lineNumber:52}}),_react.default.createElement(_.Icon,{name:\"android-head\",size:32,color:'#69B342',iconComponent:_MaterialCommunityIcons.default,__source:{fileName:_jsxFileName,lineNumber:58}}),_react.default.createElement(_.Icon,{name:\"apple-ios\",size:48,color:'#000000',iconComponent:_MaterialCommunityIcons.default,__source:{fileName:_jsxFileName,lineNumber:64}}),_react.default.createElement(_.Icon,{name:\"react\",size:64,color:'#5FDAFB',iconComponent:_MaterialCommunityIcons.default,__source:{fileName:_jsxFileName,lineNumber:70}})));});exports.default=_default;"
  },
  {
    "path": "dist/Components/Icon/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _Icon.default;}});var _Icon=_interopRequireDefault(require(\"./Icon\"));"
  },
  {
    "path": "dist/Components/IconButton/IconButton.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _objectWithoutProperties2=_interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutProperties\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf3=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _Icon=_interopRequireDefault(require(\"../Icon/Icon\"));var _color=_interopRequireDefault(require(\"color\"));var _Ripple=_interopRequireDefault(require(\"../Ripple/Ripple\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/IconButton/IconButton.js\";var IconButton=function(_Component){(0,_inherits2.default)(IconButton,_Component);function IconButton(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,IconButton);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(IconButton)).call.apply(_getPrototypeOf2,[this].concat(args)));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{stateBackgroundColor:null});return _this;}(0,_createClass2.default)(IconButton,[{key:\"getRippleColor\",value:function getRippleColor(){var _this$props=this.props,color=_this$props.color,theme=_this$props.theme,rippleColor=_this$props.rippleColor;var implementedRippleColor=color?color:theme.primary.main;implementedRippleColor=(0,_color.default)(color).alpha(0.12).rgb().string();return rippleColor?rippleColor:implementedRippleColor;}},{key:\"render\",value:function render(){var _this$props2=this.props,style=_this$props2.style,name=_this$props2.name,color=_this$props2.color,size=_this$props2.size,onPress=_this$props2.onPress,disabled=_this$props2.disabled,testID=_this$props2.testID,iconComponent=_this$props2.iconComponent,rest=(0,_objectWithoutProperties2.default)(_this$props2,[\"style\",\"name\",\"color\",\"size\",\"onPress\",\"disabled\",\"testID\",\"iconComponent\"]);return _react.default.createElement(_Ripple.default,(0,_extends2.default)({rippleContainerBorderRadius:100,rippleColor:this.getRippleColor(),onPress:onPress,disabled:disabled,style:[{height:size,width:size,justifyContent:'center',alignItems:'center'},style],testID:testID},rest,{__source:{fileName:_jsxFileName,lineNumber:52}}),_react.default.createElement(_Icon.default,{name:name,color:color,size:size,style:{backgroundColor:'transparent'},iconComponent:iconComponent,__source:{fileName:_jsxFileName,lineNumber:68}}));}}]);return IconButton;}(_react.Component);(0,_defineProperty2.default)(IconButton,\"propTypes\",{style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),theme:_propTypes.default.object,color:_propTypes.default.string,size:_propTypes.default.number,name:_propTypes.default.string,onPress:_propTypes.default.func,rippleColor:_propTypes.default.string,disabled:_propTypes.default.bool,testID:_propTypes.default.string,iconComponent:_propTypes.default.func});var _default=(0,_withTheme.default)(IconButton);exports.default=_default;"
  },
  {
    "path": "dist/Components/IconButton/IconButton.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _MaterialCommunityIcons=_interopRequireDefault(require(\"react-native-vector-icons/MaterialCommunityIcons\"));var _=require(\"../../\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/IconButton/IconButton.stories.js\";var _default=(0,_storiesOf.storiesOf)('Components|Icon Button',module).addParameters({jest:['IconButton']}).addDecorator(function(story){return _react.default.createElement(_reactNative.View,{style:{padding:16},__source:{fileName:_jsxFileName,lineNumber:12}},story());}).add('Component',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:15}},_react.default.createElement(_Header.default,{title:'Icon Button',__source:{fileName:_jsxFileName,lineNumber:16}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:18}},_react.default.createElement(_.IconButton,{name:\"alarm\",size:32,__source:{fileName:_jsxFileName,lineNumber:19}}),_react.default.createElement(_.IconButton,{name:\"face\",size:32,color:'purple',__source:{fileName:_jsxFileName,lineNumber:20}}),_react.default.createElement(_.IconButton,{name:\"arrow-back\",size:32,color:'orange',__source:{fileName:_jsxFileName,lineNumber:21}})),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:23}},_react.default.createElement(_.IconButton,{name:\"adb\",size:12,color:'#F44336',__source:{fileName:_jsxFileName,lineNumber:24}}),_react.default.createElement(_.IconButton,{name:\"album\",size:24,color:'#E91E63',__source:{fileName:_jsxFileName,lineNumber:25}}),_react.default.createElement(_.IconButton,{name:\"battery-full\",size:32,color:'#9C27B0',__source:{fileName:_jsxFileName,lineNumber:26}}),_react.default.createElement(_.Badge,{style:{position:'absolute',top:0,right:0},size:14,badgeContent:4,__source:{fileName:_jsxFileName,lineNumber:27}},_react.default.createElement(_.IconButton,{name:\"camera\",size:48,color:'#009688',__source:{fileName:_jsxFileName,lineNumber:31}}))),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:34}},_react.default.createElement(_.IconButton,{name:\"create\",size:24,color:'#00BCD4',__source:{fileName:_jsxFileName,lineNumber:35}}),_react.default.createElement(_.IconButton,{name:\"dashboard\",size:32,color:'#607D8B',__source:{fileName:_jsxFileName,lineNumber:36}}),_react.default.createElement(_.IconButton,{name:\"directions-walk\",size:48,color:'#8BC34A',__source:{fileName:_jsxFileName,lineNumber:37}}),_react.default.createElement(_.IconButton,{name:\"flash-on\",size:64,color:'#FFEB3B',__source:{fileName:_jsxFileName,lineNumber:39}})));}).add('Another source',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:44}},_react.default.createElement(_Header.default,{title:'Icons from another source',__source:{fileName:_jsxFileName,lineNumber:45}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:47}},_react.default.createElement(_.IconButton,{name:\"visual-studio-code\",size:24,color:'#373177',iconComponent:_MaterialCommunityIcons.default,__source:{fileName:_jsxFileName,lineNumber:48}}),_react.default.createElement(_.IconButton,{name:\"android-head\",size:32,color:'#69B342',iconComponent:_MaterialCommunityIcons.default,__source:{fileName:_jsxFileName,lineNumber:54}}),_react.default.createElement(_.IconButton,{name:\"apple-ios\",size:48,color:'#000000',iconComponent:_MaterialCommunityIcons.default,__source:{fileName:_jsxFileName,lineNumber:60}}),_react.default.createElement(_.IconButton,{name:\"react\",size:64,color:'#5FDAFB',iconComponent:_MaterialCommunityIcons.default,__source:{fileName:_jsxFileName,lineNumber:66}})));});exports.default=_default;"
  },
  {
    "path": "dist/Components/IconButton/IconButton.styles.js",
    "content": ""
  },
  {
    "path": "dist/Components/IconButton/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _IconButton.default;}});var _IconButton=_interopRequireDefault(require(\"./IconButton\"));"
  },
  {
    "path": "dist/Components/List/List.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _BodyText=_interopRequireDefault(require(\"../Typography/BodyText/BodyText.js\"));var _Paper=_interopRequireDefault(require(\"../Paper/Paper.js\"));var _List=_interopRequireDefault(require(\"./List.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/List/List.js\";var List=function(_Component){(0,_inherits2.default)(List,_Component);function List(){(0,_classCallCheck2.default)(this,List);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(List).apply(this,arguments));}(0,_createClass2.default)(List,[{key:\"_renderSubheader\",value:function _renderSubheader(){var subheader=this.props.subheader;return _react.default.createElement(_BodyText.default,{style:_List.default.subheader,__source:{fileName:_jsxFileName,lineNumber:20}},subheader);}},{key:\"render\",value:function render(){var _this$props=this.props,style=_this$props.style,shadow=_this$props.shadow,subheader=_this$props.subheader,testID=_this$props.testID;return _react.default.createElement(_Paper.default,{shadow:shadow?shadow:0,style:[{backgroundColor:'#fff'},style],testID:testID,__source:{fileName:_jsxFileName,lineNumber:25}},subheader?this._renderSubheader():null,this.props.children);}}]);return List;}(_react.Component);(0,_defineProperty2.default)(List,\"propTypes\",{children:_propTypes.default.node,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),shadow:_propTypes.default.number,subheader:_propTypes.default.string,testID:_propTypes.default.string});var _default=(0,_withTheme.default)(List);exports.default=_default;"
  },
  {
    "path": "dist/Components/List/List.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _=require(\"../../\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _storybookState=require(\"@sambego/storybook-state\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/List/List.stories.js\";var store=new _storybookState.Store({checkedOne:false,checkedTwo:false,checkedThree:false,checkedFour:false,checkedFive:false,checkedSix:false});var _default=(0,_storiesOf.storiesOf)('Components|List',module).addParameters({jest:['List']}).add('simple',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:21}},_react.default.createElement(_Header.default,{title:'Simple text List',__source:{fileName:_jsxFileName,lineNumber:22}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:24}},function(state){return _react.default.createElement(_.List,{style:{width:300},__source:{fileName:_jsxFileName,lineNumber:26}},_react.default.createElement(_.ListItem,{text:'Attractions',icon:_react.default.createElement(_.Icon,{name:'insert-chart',size:24,__source:{fileName:_jsxFileName,lineNumber:29}}),onPress:function onPress(){return store.set({checkedOne:!state.checkedOne});},actionItem:_react.default.createElement(_.Checkbox,{checkboxColor:'rgba(0, 0, 0, 0.54)',checked:state.checkedOne,onPress:function onPress(){return store.set({checkedOne:!state.checkedOne});},__source:{fileName:_jsxFileName,lineNumber:32}}),__source:{fileName:_jsxFileName,lineNumber:27}}),_react.default.createElement(_.ListItem,{style:{paddingVertical:12},text:'Dining',icon:_react.default.createElement(_.Icon,{name:'insert-chart',size:24,__source:{fileName:_jsxFileName,lineNumber:42}}),onPress:function onPress(){return store.set({checkedTwo:!state.checkedTwo});},actionItem:_react.default.createElement(_.Checkbox,{checkboxColor:'rgba(0, 0, 0, 0.54)',checked:state.checkedTwo,onPress:function onPress(){return store.set({checkedTwo:!state.checkedTwo});},__source:{fileName:_jsxFileName,lineNumber:45}}),__source:{fileName:_jsxFileName,lineNumber:39}}),_react.default.createElement(_.ListItem,{style:{paddingVertical:12},text:'Education',icon:_react.default.createElement(_.Icon,{name:'insert-chart',size:24,__source:{fileName:_jsxFileName,lineNumber:55}}),onPress:function onPress(){return store.set({checkedThree:!state.checkedThree});},actionItem:_react.default.createElement(_.Checkbox,{checkboxColor:'rgba(0, 0, 0, 0.54)',checked:state.checkedThree,onPress:function onPress(){return store.set({checkedThree:!state.checkedThree});},__source:{fileName:_jsxFileName,lineNumber:58}}),__source:{fileName:_jsxFileName,lineNumber:52}}),_react.default.createElement(_.ListItem,{style:{paddingVertical:12},text:'Health',icon:_react.default.createElement(_.Icon,{name:'insert-chart',size:24,__source:{fileName:_jsxFileName,lineNumber:70}}),onPress:function onPress(){return store.set({checkedFour:!state.checkedFour});},actionItem:_react.default.createElement(_.Checkbox,{checkboxColor:'rgba(0, 0, 0, 0.54)',checked:state.checkedFour,onPress:function onPress(){return store.set({checkedFour:!state.checkedFour});},__source:{fileName:_jsxFileName,lineNumber:73}}),__source:{fileName:_jsxFileName,lineNumber:67}}),_react.default.createElement(_.ListItem,{style:{paddingVertical:12},text:'Family',icon:_react.default.createElement(_.Icon,{name:'insert-chart',size:24,__source:{fileName:_jsxFileName,lineNumber:83}}),onPress:function onPress(){return store.set({checkedFive:!state.checkedFive});},actionItem:_react.default.createElement(_.Checkbox,{checkboxColor:'rgba(0, 0, 0, 0.54)',checked:state.checkedFive,onPress:function onPress(){return store.set({checkedFive:!state.checkedFive});},__source:{fileName:_jsxFileName,lineNumber:86}}),__source:{fileName:_jsxFileName,lineNumber:80}}),_react.default.createElement(_.ListItem,{style:{paddingVertical:12},text:'Office',icon:_react.default.createElement(_.Icon,{name:'insert-chart',size:24,__source:{fileName:_jsxFileName,lineNumber:96}}),onPress:function onPress(){return store.set({checkedSix:!state.checkedSix});},actionItem:_react.default.createElement(_.Checkbox,{checkboxColor:'rgba(0, 0, 0, 0.54)',checked:state.checkedSix,onPress:function onPress(){return store.set({checkedSix:!state.checkedSix});},__source:{fileName:_jsxFileName,lineNumber:99}}),__source:{fileName:_jsxFileName,lineNumber:93}}));}));}).add('with subheader',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:113}},_react.default.createElement(_Header.default,{title:'List subheader',__source:{fileName:_jsxFileName,lineNumber:114}}),_react.default.createElement(_.List,{subheader:'Favorites',style:{width:300},__source:{fileName:_jsxFileName,lineNumber:116}},_react.default.createElement(_.ListItem,{text:'Janet Perkins',media:_react.default.createElement(_.Avatar,{type:\"icon\",content:\"person\",contentColor:'#ececec',color:'#a3a3a3',size:40,__source:{fileName:_jsxFileName,lineNumber:120}}),__source:{fileName:_jsxFileName,lineNumber:117}}),_react.default.createElement(_.ListItem,{text:'Mary Perkins',media:_react.default.createElement(_.Avatar,{type:\"icon\",content:\"person\",contentColor:'#ececec',color:'#a3a3a3',size:40,__source:{fileName:_jsxFileName,lineNumber:132}}),__source:{fileName:_jsxFileName,lineNumber:129}}),_react.default.createElement(_.ListItem,{text:'Peter Carlsson',media:_react.default.createElement(_.Avatar,{type:\"icon\",content:\"person\",contentColor:'#ececec',color:'#a3a3a3',size:40,__source:{fileName:_jsxFileName,lineNumber:144}}),__source:{fileName:_jsxFileName,lineNumber:141}}),_react.default.createElement(_.ListItem,{text:'Trevor Hansen',media:_react.default.createElement(_.Avatar,{type:\"icon\",content:\"person\",contentColor:'#ececec',color:'#a3a3a3',size:40,__source:{fileName:_jsxFileName,lineNumber:156}}),__source:{fileName:_jsxFileName,lineNumber:153}})));});exports.default=_default;"
  },
  {
    "path": "dist/Components/List/List.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({subheader:{color:'rgba(0,0,0,0.67)',fontSize:14,marginBottom:20}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/List/ListExpand/ListExpand.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf3=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _Ripple=_interopRequireDefault(require(\"../../Ripple/Ripple\"));var _Icon=_interopRequireDefault(require(\"../../Icon/Icon\"));var _Hoverable=_interopRequireDefault(require(\"../../../Utils/Hoverable/Hoverable.js\"));var _color=_interopRequireDefault(require(\"color\"));var _ListExpand=_interopRequireDefault(require(\"./ListExpand.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/List/ListExpand/ListExpand.js\";var ListExpand=function(_Component){(0,_inherits2.default)(ListExpand,_Component);function ListExpand(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,ListExpand);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(ListExpand)).call.apply(_getPrototypeOf2,[this].concat(args)));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{isOpen:false,menuHeight:new _reactNative.Animated.Value(0),animationDuration:150,stateBackgroundColor:null});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"toggleMenu\",function(){var onPress=_this.props.onPress;var _this$state=_this.state,isOpen=_this$state.isOpen,animationDuration=_this$state.animationDuration,menuHeight=_this$state.menuHeight,initialHeight=_this$state.initialHeight;if(initialHeight==0){setTimeout(function(){return _this.toggleMenu();},100);return;}var height=initialHeight;if(isOpen)height=0;if(onPress){onPress();}_reactNative.Animated.timing(menuHeight,{toValue:height,duration:animationDuration,useNativeDriver:true}).start();_this.setState({isOpen:!isOpen});});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"onMenuLayout\",function(e){var _e$nativeEvent$layout=e.nativeEvent.layout,width=_e$nativeEvent$layout.width,height=_e$nativeEvent$layout.height;_this.setState({initialWidth:width,initialHeight:height});});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"getBackgroundColor\",function(){var stateBackgroundColor=_this.state.stateBackgroundColor;var implementedBackgroundColor='transparent';implementedBackgroundColor=stateBackgroundColor?stateBackgroundColor:implementedBackgroundColor;return implementedBackgroundColor;});return _this;}(0,_createClass2.default)(ListExpand,[{key:\"componentDidMount\",value:function componentDidMount(){var expanded=this.props.expanded;if(expanded){this.setState({isOpen:expanded});}}},{key:\"componentDidUpdate\",value:function componentDidUpdate(prevProps){var expanded=this.props.expanded;if(expanded!==prevProps.expanded){this.setState({isOpen:expanded});}}},{key:\"renderExpandedContent\",value:function renderExpandedContent(){var _this$props=this.props,children=_this$props.children,icon=_this$props.icon;var _this$state2=this.state,menuHeight=_this$state2.menuHeight,initialHeight=_this$state2.initialHeight;return _react.default.createElement(_reactNative.Animated.View,{useNativeDriver:true,style:{height:menuHeight,overflow:'hidden',width:'100%',paddingLeft:icon?42:0,zIndex:100},__source:{fileName:_jsxFileName,lineNumber:88}},_react.default.createElement(_reactNative.View,{style:{width:'100%',height:initialHeight,zIndex:100},onLayout:this.onMenuLayout,__source:{fileName:_jsxFileName,lineNumber:97}},children));}},{key:\"_renderIcon\",value:function _renderIcon(){var icon=this.props.icon;return _react.default.cloneElement(icon,{size:icon.props.size?icon.props.size:24,color:icon.props.color?icon.props.color:'#6e6e6e'});}},{key:\"handleHover\",value:function handleHover(toggle){var rippleProps=this.props.rippleProps;var bgColor=this.getBackgroundColor();var implementedColor;if(bgColor=='transparent'){implementedColor=toggle?'rgba(0, 0, 0, 0.12)':null;}else{if((0,_color.default)(bgColor).isDark()){implementedColor=toggle?(0,_color.default)(bgColor).lighten(0.15).rgb().string():null;}else{implementedColor=toggle?(0,_color.default)(bgColor).darken(0.15).rgb().string():null;}}if(rippleProps&&rippleProps.rippleColor){implementedColor=toggle?(0,_color.default)(rippleProps.rippleColor).alpha(0.12).rgb().string():null;}this.setState({stateBackgroundColor:implementedColor});}},{key:\"render\",value:function render(){var _this2=this;var _this$props2=this.props,title=_this$props2.title,style=_this$props2.style,titleStyle=_this$props2.titleStyle,icon=_this$props2.icon,expandIconStyle=_this$props2.expandIconStyle,rippleProps=_this$props2.rippleProps;var isOpen=this.state.isOpen;return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:179}},_react.default.createElement(_Hoverable.default,{onHoverIn:function onHoverIn(){return _this2.handleHover(true);},onHoverOut:function onHoverOut(){return _this2.handleHover(false);},__source:{fileName:_jsxFileName,lineNumber:180}},_react.default.createElement(_Ripple.default,(0,_extends2.default)({style:[_ListExpand.default.container,{backgroundColor:this.getBackgroundColor()},style],onPress:this.toggleMenu,rippleDuration:100},rippleProps,{__source:{fileName:_jsxFileName,lineNumber:183}}),icon?this._renderIcon():null,_react.default.createElement(_reactNative.Text,{style:[_ListExpand.default.title,{marginLeft:icon?16:0},titleStyle],__source:{fileName:_jsxFileName,lineNumber:193}},title),_react.default.createElement(_reactNative.View,{style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:197}}),_react.default.createElement(_Icon.default,{name:isOpen?'expand-less':'expand-more',size:24,style:expandIconStyle,__source:{fileName:_jsxFileName,lineNumber:198}}))),this.renderExpandedContent());}}]);return ListExpand;}(_react.Component);(0,_defineProperty2.default)(ListExpand,\"propTypes\",{expanded:_propTypes.default.bool,onPress:_propTypes.default.func,children:_propTypes.default.node,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),title:_propTypes.default.string,titleStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),theme:_propTypes.default.object,icon:_propTypes.default.node,expandIconStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),rippleProps:_propTypes.default.object});var _default=(0,_withTheme.default)(ListExpand);exports.default=_default;"
  },
  {
    "path": "dist/Components/List/ListExpand/ListExpand.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _=require(\"../../../\");var _Header=_interopRequireDefault(require(\"../../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../../storybook/components/Container\"));var _storiesOf=require(\"../../../storybook/helpers/storiesOf\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/List/ListExpand/ListExpand.stories.js\";var _default=(0,_storiesOf.storiesOf)('Components|List/ListExpand',module).addParameters({jest:['ListExpand']}).add('simple',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:11}},_react.default.createElement(_Header.default,{title:'Text List Expand',__source:{fileName:_jsxFileName,lineNumber:12}}),_react.default.createElement(_.List,{style:{width:300},__source:{fileName:_jsxFileName,lineNumber:14}},_react.default.createElement(_.ListExpand,{title:'Events',__source:{fileName:_jsxFileName,lineNumber:15}},_react.default.createElement(_.ListItem,{text:'Attractions',__source:{fileName:_jsxFileName,lineNumber:16}}),_react.default.createElement(_.ListItem,{text:'Dining',__source:{fileName:_jsxFileName,lineNumber:17}}),_react.default.createElement(_.ListItem,{text:'Education',__source:{fileName:_jsxFileName,lineNumber:18}}),_react.default.createElement(_.ListItem,{text:'Health',__source:{fileName:_jsxFileName,lineNumber:19}}),_react.default.createElement(_.ListItem,{text:'Family',__source:{fileName:_jsxFileName,lineNumber:20}}),_react.default.createElement(_.ListItem,{text:'Office',__source:{fileName:_jsxFileName,lineNumber:21}}),_react.default.createElement(_.ListItem,{text:'Promotions',__source:{fileName:_jsxFileName,lineNumber:22}}))));}).add('with icon',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:28}},_react.default.createElement(_Header.default,{title:'Icon List Expand',__source:{fileName:_jsxFileName,lineNumber:29}}),_react.default.createElement(_.List,{style:{width:300},__source:{fileName:_jsxFileName,lineNumber:31}},_react.default.createElement(_.ListExpand,{title:'Attractions',icon:_react.default.createElement(_.Icon,{name:'local-movies',size:24,__source:{fileName:_jsxFileName,lineNumber:34}}),__source:{fileName:_jsxFileName,lineNumber:32}},_react.default.createElement(_.ListItem,{text:'Movies',__source:{fileName:_jsxFileName,lineNumber:35}}),_react.default.createElement(_.ListItem,{text:'Bowling',__source:{fileName:_jsxFileName,lineNumber:36}}),_react.default.createElement(_.ListItem,{text:'Fairgrounds',__source:{fileName:_jsxFileName,lineNumber:37}})),_react.default.createElement(_.ListExpand,{title:'Dining',icon:_react.default.createElement(_.Icon,{name:'local-dining',size:24,__source:{fileName:_jsxFileName,lineNumber:41}}),__source:{fileName:_jsxFileName,lineNumber:39}},_react.default.createElement(_.ListItem,{text:'Pizz Hut',__source:{fileName:_jsxFileName,lineNumber:42}}),_react.default.createElement(_.ListItem,{text:'Taco bell',__source:{fileName:_jsxFileName,lineNumber:43}}),_react.default.createElement(_.ListItem,{text:'Sonics',__source:{fileName:_jsxFileName,lineNumber:44}})),_react.default.createElement(_.ListExpand,{title:'Education',icon:_react.default.createElement(_.Icon,{name:'edit',size:24,__source:{fileName:_jsxFileName,lineNumber:46}}),__source:{fileName:_jsxFileName,lineNumber:46}},_react.default.createElement(_.ListItem,{text:'Basket Weaving',__source:{fileName:_jsxFileName,lineNumber:47}}),_react.default.createElement(_.ListItem,{text:'Cooking',__source:{fileName:_jsxFileName,lineNumber:48}}),_react.default.createElement(_.ListItem,{text:'Economics',__source:{fileName:_jsxFileName,lineNumber:49}}))));});exports.default=_default;"
  },
  {
    "path": "dist/Components/List/ListExpand/ListExpand.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({container:{paddingHorizontal:16,paddingVertical:12,flexDirection:'row',justifyContent:'space-between',alignItems:'center'},title:{fontSize:16}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/List/ListExpand/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _ListExpand.default;}});var _ListExpand=_interopRequireDefault(require(\"./ListExpand\"));"
  },
  {
    "path": "dist/Components/List/ListItem/ListItem.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _objectWithoutProperties2=_interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutProperties\"));var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf3=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _BodyText=_interopRequireDefault(require(\"../../Typography/BodyText/BodyText.js\"));var _Caption=_interopRequireDefault(require(\"../../Typography/Caption/Caption.js\"));var _Ripple=_interopRequireDefault(require(\"../../Ripple/Ripple.js\"));var _Hoverable=_interopRequireDefault(require(\"../../../Utils/Hoverable/Hoverable.js\"));var _color=_interopRequireDefault(require(\"color\"));var _ListItem=_interopRequireDefault(require(\"./ListItem.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/List/ListItem/ListItem.js\";var ListItem=function(_Component){(0,_inherits2.default)(ListItem,_Component);function ListItem(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,ListItem);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(ListItem)).call.apply(_getPrototypeOf2,[this].concat(args)));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{stateBackgroundColor:null,isPressed:false});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"getBackgroundColor\",function(){var _this$props=_this.props,backgroundColor=_this$props.backgroundColor,selected=_this$props.selected,disabled=_this$props.disabled,rippleProps=_this$props.rippleProps;var stateBackgroundColor=_this.state.stateBackgroundColor;var implementedBackgroundColor=backgroundColor?backgroundColor:'transparent';implementedBackgroundColor=stateBackgroundColor?stateBackgroundColor:implementedBackgroundColor;var rippleColor=rippleProps&&rippleProps.rippleColor?(0,_color.default)(rippleProps.rippleColor).alpha(0.12).rgb().string():'rgba(0, 0, 0, 0.12)';implementedBackgroundColor=selected?rippleColor:implementedBackgroundColor;return disabled?'transparent':implementedBackgroundColor;});return _this;}(0,_createClass2.default)(ListItem,[{key:\"_renderText\",value:function _renderText(){var _this$props2=this.props,text=_this$props2.text,_this$props2$textProp=_this$props2.textProps,textProps=_this$props2$textProp===void 0?{}:_this$props2$textProp,secondaryText=_this$props2.secondaryText,_this$props2$secondar=_this$props2.secondaryTextProps,secondaryTextProps=_this$props2$secondar===void 0?{}:_this$props2$secondar,disabled=_this$props2.disabled,textStyle=_this$props2.textStyle,secondaryTextStyle=_this$props2.secondaryTextStyle;return _react.default.createElement(_reactNative.View,{style:{alignItems:'flex-start'},ellipsizeMode:\"tail\",__source:{fileName:_jsxFileName,lineNumber:54}},_react.default.createElement(_BodyText.default,(0,_extends2.default)({style:[_ListItem.default.listItemText,{color:disabled?'rgba(0,0,0,0.47)':'rgba(0,0,0,1)'},textStyle],numberOfLines:1},textProps,{__source:{fileName:_jsxFileName,lineNumber:55}}),text),typeof secondaryText==='string'?_react.default.createElement(_Caption.default,(0,_extends2.default)({style:[_ListItem.default.listItemSecondaryText,{color:'rgba(0,0,0,0.57)'},secondaryTextStyle],numberOfLines:2},secondaryTextProps,{__source:{fileName:_jsxFileName,lineNumber:66}}),secondaryText):secondaryText);}},{key:\"_renderIcon\",value:function _renderIcon(){var icon=this.props.icon;return _react.default.cloneElement(icon,{size:icon.props.size?icon.props.size:24,color:icon.props.color?icon.props.color:'rgba(0, 0, 0, 0.54)'});}},{key:\"_renderActionitem\",value:function _renderActionitem(){var actionItem=this.props.actionItem;return _react.default.createElement(_react.Fragment,{__source:{fileName:_jsxFileName,lineNumber:95}},_react.default.createElement(_reactNative.View,{style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:96}}),actionItem);}},{key:\"_renderLeadingActionItem\",value:function _renderLeadingActionItem(){var leadingActionItem=this.props.leadingActionItem;return leadingActionItem;}},{key:\"handleHover\",value:function handleHover(toggle){var rippleProps=this.props.rippleProps;var bgColor=this.getBackgroundColor();var implementedColor;if(bgColor=='transparent'){implementedColor=toggle?'rgba(0, 0, 0, 0.12)':null;}else{if((0,_color.default)(bgColor).isDark()){implementedColor=toggle?(0,_color.default)(bgColor).lighten(0.15).rgb().string():null;}else{implementedColor=toggle?(0,_color.default)(bgColor).darken(0.15).rgb().string():null;}}if(rippleProps&&rippleProps.rippleColor){implementedColor=toggle?(0,_color.default)(rippleProps.rippleColor).alpha(0.12).rgb().string():null;}this.setState({stateBackgroundColor:implementedColor});}},{key:\"render\",value:function render(){var _this2=this;var _this$props3=this.props,style=_this$props3.style,onPress=_this$props3.onPress,disabled=_this$props3.disabled,children=_this$props3.children,media=_this$props3.media,icon=_this$props3.icon,actionItem=_this$props3.actionItem,leadingActionItem=_this$props3.leadingActionItem,rippleProps=_this$props3.rippleProps,rest=(0,_objectWithoutProperties2.default)(_this$props3,[\"style\",\"onPress\",\"disabled\",\"children\",\"media\",\"icon\",\"actionItem\",\"leadingActionItem\",\"rippleProps\"]);var isPressed=this.state.isPressed;var contentMargin=media?16:0;if(icon||leadingActionItem)contentMargin=32;return _react.default.createElement(_Hoverable.default,{onHoverIn:function onHoverIn(){return _this2.handleHover(true);},onHoverOut:function onHoverOut(){return _this2.handleHover(false);},__source:{fileName:_jsxFileName,lineNumber:190}},_react.default.createElement(_Ripple.default,(0,_extends2.default)({onAnimationEnd:function onAnimationEnd(){if(isPressed&&onPress){onPress();_this2.setState({isPressed:false});}},rippleDuration:200,disabled:disabled,rippleColor:'rgba(0,0,0,.8)',onPress:function onPress(){return _this2.setState({isPressed:true});},style:[{backgroundColor:this.getBackgroundColor(),flexDirection:'row',alignItems:'center',padding:16,width:_reactNative.Platform.OS==='web'?416:'100%',zIndex:1},style]},rippleProps,rest,{__source:{fileName:_jsxFileName,lineNumber:193}}),leadingActionItem?this._renderLeadingActionItem():null,icon?this._renderIcon():null,media?media:null,_react.default.createElement(_reactNative.View,{style:{alignSelf:'center',marginLeft:contentMargin,flexShrink:1},__source:{fileName:_jsxFileName,lineNumber:220}},children?children:this._renderText()),actionItem?this._renderActionitem():null));}}]);return ListItem;}(_react.Component);(0,_defineProperty2.default)(ListItem,\"propTypes\",{children:_propTypes.default.node,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),onPress:_propTypes.default.func,disabled:_propTypes.default.bool,selected:_propTypes.default.bool,text:_propTypes.default.string,textProps:_propTypes.default.object,secondaryText:_propTypes.default.oneOfType([_propTypes.default.string,_propTypes.default.element]),secondaryTextProps:_propTypes.default.object,media:_propTypes.default.node,icon:_propTypes.default.node,actionItem:_propTypes.default.node,leadingActionItem:_propTypes.default.node,textStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),secondaryTextStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),rippleProps:_propTypes.default.object,backgroundColor:_propTypes.default.string});var _default=(0,_withTheme.default)(ListItem);exports.default=_default;"
  },
  {
    "path": "dist/Components/List/ListItem/ListItem.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../../../\");var _Header=_interopRequireDefault(require(\"../../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../../storybook/components/Container\"));var _storiesOf=require(\"../../../storybook/helpers/storiesOf\");var _storybookState=require(\"@sambego/storybook-state\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/List/ListItem/ListItem.stories.js\";var store=new _storybookState.Store({checkedOne:false,checkedTwo:false,checkedThree:false,checkedFour:false,checkedFive:false,selected:2});var _default=(0,_storiesOf.storiesOf)('Components|List/ListItem',module).addParameters({jest:['ListItem']}).add('with text',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:30}},_react.default.createElement(_Header.default,{title:'Text List',__source:{fileName:_jsxFileName,lineNumber:31}}),_react.default.createElement(_.List,{style:{width:300},__source:{fileName:_jsxFileName,lineNumber:33}},_react.default.createElement(_.ListItem,{text:'Attractions',__source:{fileName:_jsxFileName,lineNumber:34}}),_react.default.createElement(_.ListItem,{text:'Dining',__source:{fileName:_jsxFileName,lineNumber:35}}),_react.default.createElement(_.ListItem,{text:'Education',__source:{fileName:_jsxFileName,lineNumber:36}}),_react.default.createElement(_.ListItem,{text:'Health',__source:{fileName:_jsxFileName,lineNumber:37}}),_react.default.createElement(_.ListItem,{text:'Family',__source:{fileName:_jsxFileName,lineNumber:38}}),_react.default.createElement(_.ListItem,{text:'Office',__source:{fileName:_jsxFileName,lineNumber:39}}),_react.default.createElement(_.ListItem,{text:'Promotions',__source:{fileName:_jsxFileName,lineNumber:40}})));}).add('with icon',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:45}},_react.default.createElement(_Header.default,{title:'Text and Icon List',__source:{fileName:_jsxFileName,lineNumber:46}}),_react.default.createElement(_.List,{style:{width:300},__source:{fileName:_jsxFileName,lineNumber:48}},_react.default.createElement(_.ListItem,{text:'Attractions',icon:_react.default.createElement(_.Icon,{name:'local-movies',size:24,__source:{fileName:_jsxFileName,lineNumber:51}}),__source:{fileName:_jsxFileName,lineNumber:49}}),_react.default.createElement(_.ListItem,{text:'Dining',icon:_react.default.createElement(_.Icon,{name:'local-dining',size:24,__source:{fileName:_jsxFileName,lineNumber:55}}),__source:{fileName:_jsxFileName,lineNumber:53}}),_react.default.createElement(_.ListItem,{text:'Education',icon:_react.default.createElement(_.Icon,{name:'edit',size:24,__source:{fileName:_jsxFileName,lineNumber:57}}),__source:{fileName:_jsxFileName,lineNumber:57}}),_react.default.createElement(_.ListItem,{text:'Health',icon:_react.default.createElement(_.Icon,{name:'favorite',size:24,__source:{fileName:_jsxFileName,lineNumber:58}}),__source:{fileName:_jsxFileName,lineNumber:58}}),_react.default.createElement(_.ListItem,{text:'Family',icon:_react.default.createElement(_.Icon,{name:'group',size:24,__source:{fileName:_jsxFileName,lineNumber:59}}),__source:{fileName:_jsxFileName,lineNumber:59}}),_react.default.createElement(_.ListItem,{text:'Office',icon:_react.default.createElement(_.Icon,{name:'content-cut',size:24,__source:{fileName:_jsxFileName,lineNumber:62}}),__source:{fileName:_jsxFileName,lineNumber:60}}),_react.default.createElement(_.ListItem,{text:'Promotions',icon:_react.default.createElement(_.Icon,{name:'loyalty',size:24,__source:{fileName:_jsxFileName,lineNumber:66}}),__source:{fileName:_jsxFileName,lineNumber:64}})));}).add('with media',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:72}},_react.default.createElement(_Header.default,{title:'Text and Media List',__source:{fileName:_jsxFileName,lineNumber:73}}),_react.default.createElement(_.List,{style:{width:300},__source:{fileName:_jsxFileName,lineNumber:75}},_react.default.createElement(_.ListItem,{text:'Janet Perkins',media:_react.default.createElement(_.Avatar,{type:\"icon\",content:\"person\",contentColor:'#ececec',color:'#a3a3a3',size:40,__source:{fileName:_jsxFileName,lineNumber:79}}),__source:{fileName:_jsxFileName,lineNumber:76}}),_react.default.createElement(_.ListItem,{text:'Mary Perkins',media:_react.default.createElement(_.Avatar,{type:\"icon\",content:\"person\",contentColor:'#ececec',color:'#a3a3a3',size:40,__source:{fileName:_jsxFileName,lineNumber:91}}),__source:{fileName:_jsxFileName,lineNumber:88}}),_react.default.createElement(_.ListItem,{text:'Peter Carlsson',media:_react.default.createElement(_.Avatar,{type:\"icon\",content:\"person\",contentColor:'#ececec',color:'#a3a3a3',size:40,__source:{fileName:_jsxFileName,lineNumber:103}}),__source:{fileName:_jsxFileName,lineNumber:100}}),_react.default.createElement(_.ListItem,{text:'Trevor Hansen',media:_react.default.createElement(_.Avatar,{type:\"icon\",content:\"person\",contentColor:'#ececec',color:'#a3a3a3',size:40,__source:{fileName:_jsxFileName,lineNumber:115}}),__source:{fileName:_jsxFileName,lineNumber:112}})));}).add('with actionItem',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:128}},_react.default.createElement(_Header.default,{title:'Text and Action Item List',__source:{fileName:_jsxFileName,lineNumber:129}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:130}},function(state){return _react.default.createElement(_.List,{style:{width:300},__source:{fileName:_jsxFileName,lineNumber:132}},_react.default.createElement(_.ListItem,{text:'Janet Perkins',media:_react.default.createElement(_.Avatar,{type:\"icon\",content:\"person\",contentColor:'#ececec',color:'#a3a3a3',size:40,__source:{fileName:_jsxFileName,lineNumber:136}}),onPress:function onPress(){return store.set({checkedOne:!state.checkedOne});},actionItem:_react.default.createElement(_.Checkbox,{checkboxColor:'rgba(0, 0, 0, 0.54)',checked:state.checkedOne,onPress:function onPress(){return store.set({checkedOne:!state.checkedOne});},__source:{fileName:_jsxFileName,lineNumber:146}}),__source:{fileName:_jsxFileName,lineNumber:133}}),_react.default.createElement(_.ListItem,{text:'Mary Perkins',media:_react.default.createElement(_.Avatar,{type:\"icon\",content:\"person\",contentColor:'#ececec',color:'#a3a3a3',size:40,__source:{fileName:_jsxFileName,lineNumber:156}}),onPress:function onPress(){return store.set({checkedTwo:!state.checkedTwo});},actionItem:_react.default.createElement(_.Checkbox,{checkboxColor:'rgba(0, 0, 0, 0.54)',checked:state.checkedTwo,onPress:function onPress(){return store.set({checkedTwo:!state.checkedTwo});},__source:{fileName:_jsxFileName,lineNumber:166}}),__source:{fileName:_jsxFileName,lineNumber:153}}),_react.default.createElement(_.ListItem,{text:'Peter Carlsson',media:_react.default.createElement(_.Avatar,{type:\"icon\",content:\"person\",contentColor:'#ececec',color:'#a3a3a3',size:40,__source:{fileName:_jsxFileName,lineNumber:176}}),onPress:function onPress(){return store.set({checkedThree:!state.checkedThree});},actionItem:_react.default.createElement(_.Checkbox,{checkboxColor:'rgba(0, 0, 0, 0.54)',checked:state.checkedThree,onPress:function onPress(){return store.set({checkedThree:!state.checkedThree});},__source:{fileName:_jsxFileName,lineNumber:186}}),__source:{fileName:_jsxFileName,lineNumber:173}}),_react.default.createElement(_.ListItem,{text:'Trevor Hansen',media:_react.default.createElement(_.Avatar,{type:\"icon\",content:\"person\",contentColor:'#ececec',color:'#a3a3a3',size:40,__source:{fileName:_jsxFileName,lineNumber:198}}),onPress:function onPress(){return store.set({checkedFour:!state.checkedFour});},actionItem:_react.default.createElement(_.Checkbox,{checkboxColor:'rgba(0, 0, 0, 0.54)',checked:state.checkedFour,onPress:function onPress(){return store.set({checkedFour:!state.checkedFour});},__source:{fileName:_jsxFileName,lineNumber:208}}),__source:{fileName:_jsxFileName,lineNumber:195}}));}));}).add('with leadingAction',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:221}},_react.default.createElement(_Header.default,{title:'Text and Leading Action List',__source:{fileName:_jsxFileName,lineNumber:222}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:223}},function(state){return _react.default.createElement(_.List,{style:{width:300},__source:{fileName:_jsxFileName,lineNumber:225}},_react.default.createElement(_.ListItem,{text:'Janet Perkins',onPress:function onPress(){return store.set({checkedOne:!state.checkedOne});},actionItem:_react.default.createElement(_.IconButton,{name:\"comment\",size:24,color:\"#6e6e6e\",__source:{fileName:_jsxFileName,lineNumber:230}}),leadingActionItem:_react.default.createElement(_.Checkbox,{checkboxColor:'rgba(0, 0, 0, 0.54)',checked:state.checkedOne,onPress:function onPress(){return store.set({checkedOne:!state.checkedOne});},__source:{fileName:_jsxFileName,lineNumber:233}}),__source:{fileName:_jsxFileName,lineNumber:226}}),_react.default.createElement(_.ListItem,{text:'Mary Perkins',onPress:function onPress(){return store.set({checkedTwo:!state.checkedTwo});},actionItem:_react.default.createElement(_.IconButton,{name:\"comment\",size:24,color:\"#6e6e6e\",__source:{fileName:_jsxFileName,lineNumber:244}}),leadingActionItem:_react.default.createElement(_.Checkbox,{checkboxColor:'rgba(0, 0, 0, 0.54)',checked:state.checkedTwo,onPress:function onPress(){return store.set({checkedTwo:!state.checkedTwo});},__source:{fileName:_jsxFileName,lineNumber:247}}),__source:{fileName:_jsxFileName,lineNumber:240}}),_react.default.createElement(_.ListItem,{text:'Peter Carlsson',onPress:function onPress(){return store.set({checkedThree:!state.checkedThree});},actionItem:_react.default.createElement(_.IconButton,{name:\"comment\",size:24,color:\"#6e6e6e\",__source:{fileName:_jsxFileName,lineNumber:258}}),leadingActionItem:_react.default.createElement(_.Checkbox,{checkboxColor:'rgba(0, 0, 0, 0.54)',checked:state.checkedThree,onPress:function onPress(){return store.set({checkedThree:!state.checkedThree});},__source:{fileName:_jsxFileName,lineNumber:261}}),__source:{fileName:_jsxFileName,lineNumber:254}}),_react.default.createElement(_.ListItem,{text:'Trevor Hansen',onPress:function onPress(){return store.set({checkedFour:!state.checkedFour});},actionItem:_react.default.createElement(_.IconButton,{name:\"comment\",size:24,color:\"#6e6e6e\",__source:{fileName:_jsxFileName,lineNumber:274}}),leadingActionItem:_react.default.createElement(_.Checkbox,{checkboxColor:'rgba(0, 0, 0, 0.54)',checked:state.checkedFour,onPress:function onPress(){return store.set({checkedFour:!state.checkedFour});},__source:{fileName:_jsxFileName,lineNumber:277}}),__source:{fileName:_jsxFileName,lineNumber:270}}));}));}).add('with secondary text',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:290}},_react.default.createElement(_Header.default,{title:'Text and secondary text List',__source:{fileName:_jsxFileName,lineNumber:291}}),_react.default.createElement(_.List,{style:{width:300},__source:{fileName:_jsxFileName,lineNumber:293}},_react.default.createElement(_.ListItem,{text:'Photos',secondaryText:'Jan 9, 2018',media:_react.default.createElement(_.Avatar,{type:\"icon\",content:\"folder\",contentColor:'#ececec',color:'#a3a3a3',size:40,__source:{fileName:_jsxFileName,lineNumber:298}}),actionItem:_react.default.createElement(_.IconButton,{name:\"error\",size:24,color:\"#6e6e6e\",__source:{fileName:_jsxFileName,lineNumber:306}}),__source:{fileName:_jsxFileName,lineNumber:294}}),_react.default.createElement(_.ListItem,{text:'Recipes',secondaryText:'Jan 17, 2018',media:_react.default.createElement(_.Avatar,{type:\"icon\",content:\"folder\",contentColor:'#ececec',color:'#a3a3a3',size:40,__source:{fileName:_jsxFileName,lineNumber:312}}),actionItem:_react.default.createElement(_.IconButton,{name:\"error\",size:24,color:\"#6e6e6e\",__source:{fileName:_jsxFileName,lineNumber:320}}),__source:{fileName:_jsxFileName,lineNumber:308}}),_react.default.createElement(_.ListItem,{text:'Work',secondaryText:'Jan 28, 2018',media:_react.default.createElement(_.Avatar,{type:\"icon\",content:\"folder\",contentColor:'#ececec',color:'#a3a3a3',size:40,__source:{fileName:_jsxFileName,lineNumber:326}}),actionItem:_react.default.createElement(_.IconButton,{name:\"error\",size:24,color:\"#6e6e6e\",__source:{fileName:_jsxFileName,lineNumber:334}}),__source:{fileName:_jsxFileName,lineNumber:322}}),_react.default.createElement(_.ListItem,{text:'Vacation',secondaryText:'Jan, 31, 2018',media:_react.default.createElement(_.Avatar,{type:\"icon\",content:\"folder\",contentColor:'#ececec',color:'#a3a3a3',size:40,__source:{fileName:_jsxFileName,lineNumber:340}}),actionItem:_react.default.createElement(_.IconButton,{name:\"error\",size:24,color:\"#6e6e6e\",__source:{fileName:_jsxFileName,lineNumber:348}}),__source:{fileName:_jsxFileName,lineNumber:336}})));}).add('selected',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:354}},_react.default.createElement(_Header.default,{title:'Selected Item',__source:{fileName:_jsxFileName,lineNumber:355}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:356}},function(state){return _react.default.createElement(_.List,{style:{width:300},__source:{fileName:_jsxFileName,lineNumber:358}},_react.default.createElement(_.ListItem,{text:'Attractions',icon:_react.default.createElement(_.Icon,{name:'local-movies',size:24,__source:{fileName:_jsxFileName,lineNumber:361}}),onPress:function onPress(){return store.set({selected:1});},selected:state.selected==1,__source:{fileName:_jsxFileName,lineNumber:359}}),_react.default.createElement(_.ListItem,{text:'Dining',icon:_react.default.createElement(_.Icon,{name:'local-dining',size:24,__source:{fileName:_jsxFileName,lineNumber:367}}),onPress:function onPress(){return store.set({selected:2});},selected:state.selected==2,__source:{fileName:_jsxFileName,lineNumber:365}}),_react.default.createElement(_.ListItem,{text:'Education',icon:_react.default.createElement(_.Icon,{name:'edit',size:24,__source:{fileName:_jsxFileName,lineNumber:373}}),onPress:function onPress(){return store.set({selected:3});},selected:state.selected==3,__source:{fileName:_jsxFileName,lineNumber:371}}),_react.default.createElement(_.ListItem,{text:'Health',icon:_react.default.createElement(_.Icon,{name:'favorite',size:24,__source:{fileName:_jsxFileName,lineNumber:379}}),onPress:function onPress(){return store.set({selected:4});},selected:state.selected==4,__source:{fileName:_jsxFileName,lineNumber:377}}),_react.default.createElement(_.ListItem,{text:'Family',icon:_react.default.createElement(_.Icon,{name:'group',size:24,__source:{fileName:_jsxFileName,lineNumber:385}}),onPress:function onPress(){return store.set({selected:5});},selected:state.selected==5,__source:{fileName:_jsxFileName,lineNumber:383}}));}));}).add('disabled',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:395}},_react.default.createElement(_Header.default,{title:'Text List',__source:{fileName:_jsxFileName,lineNumber:396}}),_react.default.createElement(_.List,{style:{width:300},__source:{fileName:_jsxFileName,lineNumber:398}},_react.default.createElement(_.ListItem,{text:'Attractions',__source:{fileName:_jsxFileName,lineNumber:399}}),_react.default.createElement(_.ListItem,{text:'Dining',__source:{fileName:_jsxFileName,lineNumber:400}}),_react.default.createElement(_.ListItem,{text:'Education',disabled:true,__source:{fileName:_jsxFileName,lineNumber:401}}),_react.default.createElement(_.ListItem,{text:'Health',__source:{fileName:_jsxFileName,lineNumber:402}}),_react.default.createElement(_.ListItem,{text:'Family',disabled:true,__source:{fileName:_jsxFileName,lineNumber:403}}),_react.default.createElement(_.ListItem,{text:'Office',disabled:true,__source:{fileName:_jsxFileName,lineNumber:404}}),_react.default.createElement(_.ListItem,{text:'Promotions',__source:{fileName:_jsxFileName,lineNumber:405}})));}).add('custom secondary text',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:410}},_react.default.createElement(_Header.default,{title:'Custom secondary text',__source:{fileName:_jsxFileName,lineNumber:411}}),_react.default.createElement(_.List,{style:{width:300},__source:{fileName:_jsxFileName,lineNumber:413}},_react.default.createElement(_.ListItem,{text:'New invoice',secondaryText:_react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:417}},_react.default.createElement(_.Caption,{style:{fontSize:14,lineHeight:14,marginTop:4,color:'rgba(0,0,0,0.57)'},__source:{fileName:_jsxFileName,lineNumber:418}},\"Example\"),_react.default.createElement(_reactNative.View,{style:{paddingTop:4},__source:{fileName:_jsxFileName,lineNumber:427}},_react.default.createElement(_.Chip,{text:\"Invoice.pdf\",leftIcon:_react.default.createElement(_.Icon,{name:\"picture-as-pdf\",__source:{fileName:_jsxFileName,lineNumber:430}}),__source:{fileName:_jsxFileName,lineNumber:428}}))),media:_react.default.createElement(_.Avatar,{type:\"icon\",content:\"email\",contentColor:'#ececec',color:'#a3a3a3',size:40,__source:{fileName:_jsxFileName,lineNumber:436}}),__source:{fileName:_jsxFileName,lineNumber:414}})));});exports.default=_default;"
  },
  {
    "path": "dist/Components/List/ListItem/ListItem.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({listItemText:{fontSize:16,lineHeight:24,letterSpacing:0.44},listItemSecondaryText:{fontSize:14,lineHeight:14,marginTop:4}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/List/ListItem/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _ListItem.default;}});var _ListItem=_interopRequireDefault(require(\"./ListItem\"));"
  },
  {
    "path": "dist/Components/List/ListSection/ListSection.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _Divider=_interopRequireDefault(require(\"../../Divider/Divider.js\"));var _ListSection=_interopRequireDefault(require(\"./ListSection.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/List/ListSection/ListSection.js\";var ListSection=function(_Component){(0,_inherits2.default)(ListSection,_Component);function ListSection(){(0,_classCallCheck2.default)(this,ListSection);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(ListSection).apply(this,arguments));}(0,_createClass2.default)(ListSection,[{key:\"render\",value:function render(){var _this$props=this.props,children=_this$props.children,label=_this$props.label,labelStyle=_this$props.labelStyle,topDivider=_this$props.topDivider,bottomDivider=_this$props.bottomDivider,inset=_this$props.inset,style=_this$props.style,contentStyle=_this$props.contentStyle,theme=_this$props.theme;return _react.default.createElement(_reactNative.View,{style:([_ListSection.default.container,{paddingTop:label?8:0}],style),__source:{fileName:_jsxFileName,lineNumber:36}},topDivider?_react.default.createElement(_Divider.default,{__source:{fileName:_jsxFileName,lineNumber:37}}):null,label?_react.default.createElement(_reactNative.Text,{style:[_ListSection.default.label,labelStyle],__source:{fileName:_jsxFileName,lineNumber:38}},label):null,_react.default.createElement(_reactNative.View,{style:[theme.text,_ListSection.default.content,contentStyle],__source:{fileName:_jsxFileName,lineNumber:39}},children),bottomDivider?_react.default.createElement(_Divider.default,{style:{width:inset&&_reactNative.Platform.OS=='web'?'calc(100% - 72px)':'100%',marginLeft:inset?72:0,marginTop:0,marginBottom:0},__source:{fileName:_jsxFileName,lineNumber:43}}):null);}}]);return ListSection;}(_react.Component);(0,_defineProperty2.default)(ListSection,\"propTypes\",{children:_propTypes.default.node,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),label:_propTypes.default.string,labelStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),topDivider:_propTypes.default.bool,bottomDivider:_propTypes.default.bool,inset:_propTypes.default.bool,contentStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),theme:_propTypes.default.object});var _default=(0,_withTheme.default)(ListSection);exports.default=_default;"
  },
  {
    "path": "dist/Components/List/ListSection/ListSection.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _=require(\"../../../\");var _Header=_interopRequireDefault(require(\"../../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../../storybook/components/Container\"));var _storiesOf=require(\"../../../storybook/helpers/storiesOf\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/List/ListSection/ListSection.stories.js\";var _default=(0,_storiesOf.storiesOf)('Components|List/ListSection',module).addParameters({jest:['ListSection']}).add('with label',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:11}},_react.default.createElement(_Header.default,{title:'Label List',__source:{fileName:_jsxFileName,lineNumber:12}}),_react.default.createElement(_.List,{style:{width:300},__source:{fileName:_jsxFileName,lineNumber:14}},_react.default.createElement(_.ListSection,{label:'Entertainment',__source:{fileName:_jsxFileName,lineNumber:15}},_react.default.createElement(_.ListItem,{text:'Attractions',icon:_react.default.createElement(_.Icon,{name:'local-movies',size:24,__source:{fileName:_jsxFileName,lineNumber:18}}),__source:{fileName:_jsxFileName,lineNumber:16}}),_react.default.createElement(_.ListItem,{text:'Dining',icon:_react.default.createElement(_.Icon,{name:'local-dining',size:24,__source:{fileName:_jsxFileName,lineNumber:22}}),__source:{fileName:_jsxFileName,lineNumber:20}})),_react.default.createElement(_.ListSection,{label:'Home',__source:{fileName:_jsxFileName,lineNumber:25}},_react.default.createElement(_.ListItem,{text:'Health',icon:_react.default.createElement(_.Icon,{name:'favorite',size:24,__source:{fileName:_jsxFileName,lineNumber:28}}),__source:{fileName:_jsxFileName,lineNumber:26}}),_react.default.createElement(_.ListItem,{text:'Family',icon:_react.default.createElement(_.Icon,{name:'group',size:24,__source:{fileName:_jsxFileName,lineNumber:30}}),__source:{fileName:_jsxFileName,lineNumber:30}})),_react.default.createElement(_.ListSection,{label:'Job',__source:{fileName:_jsxFileName,lineNumber:32}},_react.default.createElement(_.ListItem,{text:'Education',icon:_react.default.createElement(_.Icon,{name:'edit',size:24,__source:{fileName:_jsxFileName,lineNumber:35}}),__source:{fileName:_jsxFileName,lineNumber:33}}),_react.default.createElement(_.ListItem,{text:'Office',icon:_react.default.createElement(_.Icon,{name:'content-cut',size:24,__source:{fileName:_jsxFileName,lineNumber:39}}),__source:{fileName:_jsxFileName,lineNumber:37}}),_react.default.createElement(_.ListItem,{text:'Promotions',icon:_react.default.createElement(_.Icon,{name:'loyalty',size:24,__source:{fileName:_jsxFileName,lineNumber:43}}),__source:{fileName:_jsxFileName,lineNumber:41}}))));}).add('with divider',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:50}},_react.default.createElement(_Header.default,{title:'Label List',__source:{fileName:_jsxFileName,lineNumber:51}}),_react.default.createElement(_.List,{style:{width:300},__source:{fileName:_jsxFileName,lineNumber:53}},_react.default.createElement(_.ListSection,{bottomDivider:true,__source:{fileName:_jsxFileName,lineNumber:54}},_react.default.createElement(_.ListItem,{text:'Attractions',icon:_react.default.createElement(_.Icon,{name:'local-movies',size:24,__source:{fileName:_jsxFileName,lineNumber:57}}),__source:{fileName:_jsxFileName,lineNumber:55}}),_react.default.createElement(_.ListItem,{text:'Dining',icon:_react.default.createElement(_.Icon,{name:'local-dining',size:24,__source:{fileName:_jsxFileName,lineNumber:61}}),__source:{fileName:_jsxFileName,lineNumber:59}})),_react.default.createElement(_.ListSection,{bottomDivider:true,__source:{fileName:_jsxFileName,lineNumber:64}},_react.default.createElement(_.ListItem,{text:'Health',icon:_react.default.createElement(_.Icon,{name:'favorite',size:24,__source:{fileName:_jsxFileName,lineNumber:67}}),__source:{fileName:_jsxFileName,lineNumber:65}}),_react.default.createElement(_.ListItem,{text:'Family',icon:_react.default.createElement(_.Icon,{name:'group',size:24,__source:{fileName:_jsxFileName,lineNumber:69}}),__source:{fileName:_jsxFileName,lineNumber:69}})),_react.default.createElement(_.ListSection,{__source:{fileName:_jsxFileName,lineNumber:71}},_react.default.createElement(_.ListItem,{text:'Education',icon:_react.default.createElement(_.Icon,{name:'edit',size:24,__source:{fileName:_jsxFileName,lineNumber:74}}),__source:{fileName:_jsxFileName,lineNumber:72}}),_react.default.createElement(_.ListItem,{text:'Office',icon:_react.default.createElement(_.Icon,{name:'content-cut',size:24,__source:{fileName:_jsxFileName,lineNumber:78}}),__source:{fileName:_jsxFileName,lineNumber:76}}),_react.default.createElement(_.ListItem,{text:'Promotions',icon:_react.default.createElement(_.Icon,{name:'loyalty',size:24,__source:{fileName:_jsxFileName,lineNumber:82}}),__source:{fileName:_jsxFileName,lineNumber:80}}))));}).add('with inset divider',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:89}},_react.default.createElement(_Header.default,{title:'Label List',__source:{fileName:_jsxFileName,lineNumber:90}}),_react.default.createElement(_.List,{style:{width:300},__source:{fileName:_jsxFileName,lineNumber:92}},_react.default.createElement(_.ListSection,{inset:true,bottomDivider:true,__source:{fileName:_jsxFileName,lineNumber:93}},_react.default.createElement(_.ListItem,{text:'Attractions',icon:_react.default.createElement(_.Icon,{name:'local-movies',size:24,__source:{fileName:_jsxFileName,lineNumber:96}}),__source:{fileName:_jsxFileName,lineNumber:94}}),_react.default.createElement(_.ListItem,{text:'Dining',icon:_react.default.createElement(_.Icon,{name:'local-dining',size:24,__source:{fileName:_jsxFileName,lineNumber:100}}),__source:{fileName:_jsxFileName,lineNumber:98}})),_react.default.createElement(_.ListSection,{inset:true,bottomDivider:true,__source:{fileName:_jsxFileName,lineNumber:103}},_react.default.createElement(_.ListItem,{text:'Health',icon:_react.default.createElement(_.Icon,{name:'favorite',size:24,__source:{fileName:_jsxFileName,lineNumber:106}}),__source:{fileName:_jsxFileName,lineNumber:104}}),_react.default.createElement(_.ListItem,{text:'Family',icon:_react.default.createElement(_.Icon,{name:'group',size:24,__source:{fileName:_jsxFileName,lineNumber:108}}),__source:{fileName:_jsxFileName,lineNumber:108}})),_react.default.createElement(_.ListSection,{inset:true,__source:{fileName:_jsxFileName,lineNumber:110}},_react.default.createElement(_.ListItem,{text:'Education',icon:_react.default.createElement(_.Icon,{name:'edit',size:24,__source:{fileName:_jsxFileName,lineNumber:113}}),__source:{fileName:_jsxFileName,lineNumber:111}}),_react.default.createElement(_.ListItem,{text:'Office',icon:_react.default.createElement(_.Icon,{name:'content-cut',size:24,__source:{fileName:_jsxFileName,lineNumber:117}}),__source:{fileName:_jsxFileName,lineNumber:115}}),_react.default.createElement(_.ListItem,{text:'Promotions',icon:_react.default.createElement(_.Icon,{name:'loyalty',size:24,__source:{fileName:_jsxFileName,lineNumber:121}}),__source:{fileName:_jsxFileName,lineNumber:119}}))));});exports.default=_default;"
  },
  {
    "path": "dist/Components/List/ListSection/ListSection.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({content:{paddingTop:8,paddingBottom:8},label:{marginBottom:8,alignSelf:'flex-start'}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/List/ListSection/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _ListSection.default;}});var _ListSection=_interopRequireDefault(require(\"./ListSection\"));"
  },
  {
    "path": "dist/Components/List/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _List.default;}});Object.defineProperty(exports,\"ListSection\",{enumerable:true,get:function get(){return _ListSection.default;}});Object.defineProperty(exports,\"ListExpand\",{enumerable:true,get:function get(){return _ListExpand.default;}});Object.defineProperty(exports,\"ListItem\",{enumerable:true,get:function get(){return _ListItem.default;}});var _List=_interopRequireDefault(require(\"./List\"));var _ListSection=_interopRequireDefault(require(\"./ListSection\"));var _ListExpand=_interopRequireDefault(require(\"./ListExpand\"));var _ListItem=_interopRequireDefault(require(\"./ListItem\"));"
  },
  {
    "path": "dist/Components/Menu/Menu.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf3=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _Menu=_interopRequireDefault(require(\"./Menu.styles\"));var _ModalMenu=_interopRequireDefault(require(\"./ModalMenu\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Menu/Menu.js\";var Menu=function(_Component){(0,_inherits2.default)(Menu,_Component);function Menu(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,Menu);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(Menu)).call.apply(_getPrototypeOf2,[this].concat(args)));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{menuHeight:new _reactNative.Animated.Value(0),menuWidth:new _reactNative.Animated.Value(0),opacity:new _reactNative.Animated.Value(0),modalMenuWidth:0,easing:_reactNative.Easing.bezier(0.4,0,0.2,1),animationDuration:300,expanded:false});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"onModalMenuLayout\",function(e){var width=e.nativeEvent.layout.width;_this.setState({modalMenuWidth:width});});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"onButtonLayout\",function(e){var _e$nativeEvent$layout=e.nativeEvent.layout,width=_e$nativeEvent$layout.width,height=_e$nativeEvent$layout.height;var locationX,locationY;if(_reactNative.Platform.OS==='web'){locationX=e.nativeEvent.target.getBoundingClientRect().x;locationY=e.nativeEvent.target.getBoundingClientRect().y;_this.setState({buttonWidth:width,buttonHeight:height,buttonPositionX:locationX,buttonPositionY:locationY});}else{_this.marker.measure(function(x,y,width,height,pageX,pageY){locationX=pageX;locationY=pageY;_this.setState({buttonWidth:width,buttonHeight:height,buttonPositionX:locationX,buttonPositionY:locationY});});}});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"onMenuLayout\",function(e){var _e$nativeEvent$layout2=e.nativeEvent.layout,width=_e$nativeEvent$layout2.width,height=_e$nativeEvent$layout2.height;_this.setState({initialWidth:width,initialHeight:height});});return _this;}(0,_createClass2.default)(Menu,[{key:\"componentDidMount\",value:function componentDidMount(){var visible=this.props.visible;if(visible){this.toggle();}}},{key:\"componentDidUpdate\",value:function componentDidUpdate(prevProps){var visible=this.props.visible;if(visible!==prevProps.visible){this.toggle();}}},{key:\"toggle\",value:function toggle(){var _this2=this;var _this$state=this.state,initialHeight=_this$state.initialHeight,initialWidth=_this$state.initialWidth,easing=_this$state.easing,animationDuration=_this$state.animationDuration,buttonWidth=_this$state.buttonWidth;if(!initialHeight||!initialWidth){setTimeout(function(){return _this2.toggle();},100);return;}var sameWidth=this.props.sameWidth;var widthType=sameWidth?buttonWidth:initialWidth;var opacity=1;var height=initialHeight+24;var width=widthType+24;if(!this.props.visible){opacity=0;height=0;width=0;}_reactNative.Animated.parallel([_reactNative.Animated.timing(this.state.menuHeight,{toValue:height,duration:animationDuration,easing:easing}),_reactNative.Animated.timing(this.state.menuWidth,{toValue:width,duration:animationDuration,easing:easing}),_reactNative.Animated.timing(this.state.opacity,{toValue:opacity,duration:animationDuration,easing:easing})]).start();}},{key:\"render\",value:function render(){var _this3=this;var _this$state2=this.state,menuHeight=_this$state2.menuHeight,menuWidth=_this$state2.menuWidth,opacity=_this$state2.opacity,buttonWidth=_this$state2.buttonWidth,buttonPositionY=_this$state2.buttonPositionY,buttonPositionX=_this$state2.buttonPositionX,modalMenuWidth=_this$state2.modalMenuWidth,initialWidth=_this$state2.initialWidth,initialHeight=_this$state2.initialHeight;var _this$props=this.props,button=_this$props.button,children=_this$props.children,menuStyle=_this$props.menuStyle,modalMenuStyle=_this$props.modalMenuStyle,sameWidth=_this$props.sameWidth,visible=_this$props.visible,onBackdropPress=_this$props.onBackdropPress,contentContainerStyle=_this$props.contentContainerStyle,tooltip=_this$props.tooltip,tooltipPosition=_this$props.tooltipPosition,noBackDrop=_this$props.noBackDrop,testID=_this$props.testID,fullWidth=_this$props.fullWidth;var menuContainerStyle={height:menuHeight,width:menuWidth,opacity:opacity,top:buttonPositionY?buttonPositionY-14:0};if(modalMenuWidth>0){if(buttonPositionX>modalMenuWidth/2){menuContainerStyle.right=modalMenuWidth-buttonPositionX-buttonWidth;}else{menuContainerStyle.left=buttonPositionX-10;}}if(tooltip){menuContainerStyle.top=buttonPositionY-initialHeight-12;menuContainerStyle.left=buttonPositionX-8+buttonWidth/2-initialWidth/2;if(tooltipPosition=='bottom'){menuContainerStyle.top=buttonPositionY+initialHeight+(_reactNative.Platform.OS=='web'?4:-4);}else if(tooltipPosition=='right'){menuContainerStyle.top=buttonPositionY-(_reactNative.Platform.OS=='web'?4:8);menuContainerStyle.left=buttonPositionX-8+buttonWidth;}else if(tooltipPosition=='left'){menuContainerStyle.top=buttonPositionY-(_reactNative.Platform.OS=='web'?4:8);menuContainerStyle.left=buttonPositionX-12-initialWidth;}}if(Number.isNaN(menuContainerStyle.top)||Number.isNaN(menuContainerStyle.left)){menuContainerStyle.top=0;menuContainerStyle.left=0;}return _react.default.createElement(_reactNative.View,{testID:testID,__source:{fileName:_jsxFileName,lineNumber:219}},_react.default.createElement(_reactNative.View,{onLayout:this.onButtonLayout,ref:function ref(_ref){_this3.marker=_ref;},style:{alignSelf:'flex-start',width:fullWidth?'100%':'auto'},__source:{fileName:_jsxFileName,lineNumber:220}},button),_react.default.createElement(_ModalMenu.default,{onLayout:this.onModalMenuLayout,animationType:'none',visible:visible,onBackdropPress:onBackdropPress,noBackDrop:noBackDrop,transparent:true,__source:{fileName:_jsxFileName,lineNumber:231}},_react.default.createElement(_reactNative.Animated.View,{style:[_Menu.default.menuContainer,menuContainerStyle,modalMenuStyle],__source:{fileName:_jsxFileName,lineNumber:238}},_react.default.createElement(_reactNative.View,{style:[_Menu.default.menu,{width:sameWidth?buttonWidth:'auto'},menuStyle],onLayout:this.onMenuLayout,__source:{fileName:_jsxFileName,lineNumber:240}},_react.default.createElement(_reactNative.ScrollView,{contentContainerStyle:[{paddingVertical:8},contentContainerStyle],__source:{fileName:_jsxFileName,lineNumber:247}},children)))));}}]);return Menu;}(_react.Component);(0,_defineProperty2.default)(Menu,\"propTypes\",{button:_propTypes.default.node,children:_propTypes.default.node,onHidden:_propTypes.default.func,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),visible:_propTypes.default.bool,menuStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),sameWidth:_propTypes.default.bool,onBackdropPress:_propTypes.default.func,modalMenuStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),contentContainerStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),noBackDrop:_propTypes.default.bool,tooltip:_propTypes.default.bool,tooltipPosition:_propTypes.default.string,testID:_propTypes.default.string,fullWidth:_propTypes.default.bool});var _default=(0,_withTheme.default)(Menu);exports.default=_default;"
  },
  {
    "path": "dist/Components/Menu/Menu.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../../\");var _storybookState=require(\"@sambego/storybook-state\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Menu/Menu.stories.js\";var store=new _storybookState.Store({visibleOne:false,visibleTwo:false,visibleThree:false,visibleFour:false,visibleFive:false});var _default=(0,_storiesOf.storiesOf)('Components|Menu',module).addParameters({jest:['Menu']}).add('Simple',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:21}},_react.default.createElement(_Header.default,{title:'Menu',__source:{fileName:_jsxFileName,lineNumber:22}}),_react.default.createElement(_.Heading,{style:{marginBottom:10},__source:{fileName:_jsxFileName,lineNumber:23}},\"On the left\"),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:24}},function(state){return _react.default.createElement(_reactNative.View,{style:{marginBottom:40},__source:{fileName:_jsxFileName,lineNumber:26}},_react.default.createElement(_.Menu,{menuStyle:{width:324},visible:state.visibleOne,onBackdropPress:function onBackdropPress(){store.set({visibleOne:false});},button:_react.default.createElement(_.Button,{text:'Show menu',onPress:function onPress(){store.set({visibleOne:!state.visibleOne});},type:\"contained\",__source:{fileName:_jsxFileName,lineNumber:34}}),__source:{fileName:_jsxFileName,lineNumber:27}},_react.default.createElement(_.MenuItem,{text:'Menu Item 1',onPress:function onPress(){return store.set({visibleOne:false});},__source:{fileName:_jsxFileName,lineNumber:42}}),_react.default.createElement(_.MenuItem,{text:'Menu Item 2',onPress:function onPress(){return store.set({visibleOne:false});},__source:{fileName:_jsxFileName,lineNumber:46}}),_react.default.createElement(_.MenuItem,{text:'Menu Item 3',disabled:true,onPress:function onPress(){return store.set({visibleOne:false});},__source:{fileName:_jsxFileName,lineNumber:50}}),_react.default.createElement(_.MenuItem,{text:'Menu Item 4',onPress:function onPress(){return store.set({visibleOne:false});},__source:{fileName:_jsxFileName,lineNumber:55}})));}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:63}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:65}},_react.default.createElement(_.Menu,{menuStyle:{width:324},visible:state.visibleTwo,onBackdropPress:function onBackdropPress(){store.set({visibleTwo:false});},button:_react.default.createElement(_.IconButton,{name:\"more-vert\",onPress:function onPress(){store.set({visibleTwo:!state.visibleTwo});},size:24,__source:{fileName:_jsxFileName,lineNumber:73}}),__source:{fileName:_jsxFileName,lineNumber:66}},_react.default.createElement(_.MenuItem,{text:'Menu Item 1',onPress:function onPress(){return store.set({visibleTwo:false});},__source:{fileName:_jsxFileName,lineNumber:81}}),_react.default.createElement(_.MenuItem,{text:'Menu Item 2',onPress:function onPress(){return store.set({visibleTwo:false});},__source:{fileName:_jsxFileName,lineNumber:85}}),_react.default.createElement(_.MenuItem,{text:'Menu Item 3',disabled:true,onPress:function onPress(){return store.set({visibleTwo:false});},__source:{fileName:_jsxFileName,lineNumber:89}}),_react.default.createElement(_.MenuItem,{text:'Menu Item 4',onPress:function onPress(){return store.set({visibleTwo:false});},__source:{fileName:_jsxFileName,lineNumber:94}})));}),_react.default.createElement(_.Heading,{style:{marginBottom:10,marginTop:50,alignSelf:'flex-end'},__source:{fileName:_jsxFileName,lineNumber:102}},\"On the Right\"),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:106}},function(state){return _react.default.createElement(_reactNative.View,{style:{alignItems:'flex-end',marginBottom:40},__source:{fileName:_jsxFileName,lineNumber:108}},_react.default.createElement(_.Menu,{visible:state.visibleThree,onBackdropPress:function onBackdropPress(){store.set({visibleThree:false});},sameWidth:true,button:_react.default.createElement(_.Button,{text:'Show menu',onPress:function onPress(){store.set({visibleThree:!state.visibleThree});},type:\"contained\",__source:{fileName:_jsxFileName,lineNumber:116}}),__source:{fileName:_jsxFileName,lineNumber:109}},_react.default.createElement(_.MenuItem,{text:'Menu Item 1',style:{paddingHorizontal:'12%'},onPress:function onPress(){return store.set({visibleThree:false});},__source:{fileName:_jsxFileName,lineNumber:124}}),_react.default.createElement(_.MenuItem,{text:'Menu Item 2',style:{paddingHorizontal:'12%'},onPress:function onPress(){return store.set({visibleThree:false});},__source:{fileName:_jsxFileName,lineNumber:129}}),_react.default.createElement(_.MenuItem,{text:'Menu Item 3',style:{paddingHorizontal:'12%'},disabled:true,onPress:function onPress(){return store.set({visibleThree:false});},__source:{fileName:_jsxFileName,lineNumber:134}}),_react.default.createElement(_.MenuItem,{text:'Menu Item 4',style:{paddingHorizontal:'12%'},onPress:function onPress(){return store.set({visibleThree:false});},__source:{fileName:_jsxFileName,lineNumber:140}})));}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:149}},function(state){return _react.default.createElement(_reactNative.View,{style:{alignItems:'flex-end'},__source:{fileName:_jsxFileName,lineNumber:151}},_react.default.createElement(_.Menu,{visible:state.visibleFour,onBackdropPress:function onBackdropPress(){store.set({visibleFour:false});},button:_react.default.createElement(_.IconButton,{name:\"more-vert\",onPress:function onPress(){store.set({visibleFour:!state.visibleFour});},size:24,__source:{fileName:_jsxFileName,lineNumber:158}}),__source:{fileName:_jsxFileName,lineNumber:152}},_react.default.createElement(_.MenuItem,{text:'Menu Item 1',onPress:function onPress(){return store.set({visibleFour:false});},__source:{fileName:_jsxFileName,lineNumber:166}}),_react.default.createElement(_.MenuItem,{text:'Menu Item 2',onPress:function onPress(){return store.set({visibleFour:false});},__source:{fileName:_jsxFileName,lineNumber:170}}),_react.default.createElement(_.MenuItem,{text:'Menu Item 3',disabled:true,onPress:function onPress(){return store.set({visibleFour:false});},__source:{fileName:_jsxFileName,lineNumber:174}}),_react.default.createElement(_.MenuItem,{text:'Menu Item 4',onPress:function onPress(){return store.set({visibleFour:false});},__source:{fileName:_jsxFileName,lineNumber:179}})));}));}).add('Scrolling',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:190}},_react.default.createElement(_Header.default,{title:'Menu',__source:{fileName:_jsxFileName,lineNumber:191}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:193}},function(state){return _react.default.createElement(_reactNative.View,{style:{marginBottom:40},__source:{fileName:_jsxFileName,lineNumber:195}},_react.default.createElement(_.Menu,{menuStyle:{width:324,maxHeight:200},visible:state.visibleFive,onBackdropPress:function onBackdropPress(){store.set({visibleFive:false});},button:_react.default.createElement(_.Button,{text:'Show menu',onPress:function onPress(){store.set({visibleFive:!state.visibleFive});},type:\"contained\",__source:{fileName:_jsxFileName,lineNumber:203}}),__source:{fileName:_jsxFileName,lineNumber:196}},_react.default.createElement(_.MenuItem,{text:'Menu Item 1',onPress:function onPress(){return store.set({visibleFive:false});},__source:{fileName:_jsxFileName,lineNumber:211}}),_react.default.createElement(_.MenuItem,{text:'Menu Item 2',onPress:function onPress(){return store.set({visibleFive:false});},__source:{fileName:_jsxFileName,lineNumber:215}}),_react.default.createElement(_.MenuItem,{text:'Menu Item 3',disabled:true,onPress:function onPress(){return store.set({visibleFive:false});},__source:{fileName:_jsxFileName,lineNumber:219}}),_react.default.createElement(_.MenuItem,{text:'Menu Item 4',onPress:function onPress(){return store.set({visibleFive:false});},__source:{fileName:_jsxFileName,lineNumber:224}}),_react.default.createElement(_.MenuItem,{text:'Menu Item 5',onPress:function onPress(){return store.set({visibleFive:false});},__source:{fileName:_jsxFileName,lineNumber:228}}),_react.default.createElement(_.MenuItem,{text:'Menu Item 6',onPress:function onPress(){return store.set({visibleFive:false});},__source:{fileName:_jsxFileName,lineNumber:232}}),_react.default.createElement(_.MenuItem,{text:'Menu Item 7',disabled:true,onPress:function onPress(){return store.set({visibleFive:false});},__source:{fileName:_jsxFileName,lineNumber:236}}),_react.default.createElement(_.MenuItem,{text:'Menu Item 8',onPress:function onPress(){return store.set({visibleFive:false});},__source:{fileName:_jsxFileName,lineNumber:241}})));}));});exports.default=_default;"
  },
  {
    "path": "dist/Components/Menu/Menu.styles.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _reactNative=require(\"react-native\");var _shadow=_interopRequireDefault(require(\"../../Utils/Shadow/shadow\"));function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}var styles=_reactNative.StyleSheet.create({menuContainer:{top:-10,overflow:'hidden',position:'absolute',zIndex:200},menu:_objectSpread({borderRadius:6,position:'absolute',left:10,top:10,backgroundColor:'white',minWidth:112,zIndex:200},(0,_shadow.default)(8))});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Menu/MenuItem/MenuItem.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _MenuItem=_interopRequireDefault(require(\"./MenuItem.styles\"));var _Ripple=_interopRequireDefault(require(\"../../Ripple/Ripple.js\"));var _Hoverable=_interopRequireDefault(require(\"../../../Utils/Hoverable/Hoverable.js\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Menu/MenuItem/MenuItem.js\";var MenuItem=function(_Component){(0,_inherits2.default)(MenuItem,_Component);function MenuItem(props){var _this;(0,_classCallCheck2.default)(this,MenuItem);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(MenuItem).call(this,props));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{stateBackgroundColor:null});return _this;}(0,_createClass2.default)(MenuItem,[{key:\"handleHover\",value:function handleHover(toggle){var disabled=this.props.disabled;var implementedColor=toggle?'rgba(0,0,0,.12)':null;if(disabled)implementedColor=null;this.setState({stateBackgroundColor:implementedColor});}},{key:\"_renderIcon\",value:function _renderIcon(){var icon=this.props.icon;return _react.default.cloneElement(icon,{size:24,color:'rgba(0, 0, 0, 0.54)'});}},{key:\"_renderKeyboardCommand\",value:function _renderKeyboardCommand(){var keyboardCommand=this.props.keyboardCommand;return _react.default.createElement(_react.Fragment,{__source:{fileName:_jsxFileName,lineNumber:51}},_react.default.createElement(_reactNative.View,{style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:52}}),keyboardCommand);}},{key:\"_renderText\",value:function _renderText(){var _this$props=this.props,disabled=_this$props.disabled,textStyle=_this$props.textStyle,text=_this$props.text,icon=_this$props.icon;return _react.default.createElement(_reactNative.Text,{ellipsizeMode:_reactNative.Platform.OS==='ios'?'clip':'tail',numberOfLines:1,style:[_MenuItem.default.title,{color:disabled?'rgba(0,0,0,.50)':'rgba(0,0,0,.87)',marginLeft:icon?20:0},textStyle],__source:{fileName:_jsxFileName,lineNumber:61}},text);}},{key:\"render\",value:function render(){var _this2=this;var _this$props2=this.props,children=_this$props2.children,disabled=_this$props2.disabled,onPress=_this$props2.onPress,style=_this$props2.style,icon=_this$props2.icon,keyboardCommand=_this$props2.keyboardCommand;var stateBackgroundColor=this.state.stateBackgroundColor;return _react.default.createElement(_Hoverable.default,{onHoverIn:function onHoverIn(){return _this2.handleHover(true);},onHoverOut:function onHoverOut(){return _this2.handleHover(false);},__source:{fileName:_jsxFileName,lineNumber:89}},_react.default.createElement(_Ripple.default,{disabled:disabled,onPress:onPress,style:[_MenuItem.default.container,{backgroundColor:stateBackgroundColor},style],__source:{fileName:_jsxFileName,lineNumber:92}},icon?this._renderIcon():null,children?children:this._renderText(),keyboardCommand?this._renderKeyboardCommand():null));}}]);return MenuItem;}(_react.Component);(0,_defineProperty2.default)(MenuItem,\"propTypes\",{children:_propTypes.default.node,disabled:_propTypes.default.bool,onPress:_propTypes.default.func,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),textStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),icon:_propTypes.default.node,keyboardCommand:_propTypes.default.node,text:_propTypes.default.string});(0,_defineProperty2.default)(MenuItem,\"defaultProps\",{disabled:false,disabledTextColor:'#BDBDBD',underlayColor:'#E0E0E0'});var _default=(0,_withTheme.default)(MenuItem);exports.default=_default;"
  },
  {
    "path": "dist/Components/Menu/MenuItem/MenuItem.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../../..\");var _Header=_interopRequireDefault(require(\"../../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../../storybook/components/Container\"));var _storiesOf=require(\"../../../storybook/helpers/storiesOf\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Menu/MenuItem/MenuItem.stories.js\";var _default=(0,_storiesOf.storiesOf)('Components|Menu/MenuItem',module).addParameters({jest:['MenuItem']}).add('Simple',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:13}},_react.default.createElement(_Header.default,{title:'Menu Item',__source:{fileName:_jsxFileName,lineNumber:14}}),_react.default.createElement(_.Paper,{radius:6,style:{width:324},__source:{fileName:_jsxFileName,lineNumber:16}},_react.default.createElement(_.MenuItem,{text:\"Menu Item 1\",__source:{fileName:_jsxFileName,lineNumber:17}}),_react.default.createElement(_.MenuItem,{text:\"Menu Item 2\",__source:{fileName:_jsxFileName,lineNumber:18}}),_react.default.createElement(_.Divider,{__source:{fileName:_jsxFileName,lineNumber:19}}),_react.default.createElement(_.MenuItem,{disabled:true,text:\"Menu Item 3\",__source:{fileName:_jsxFileName,lineNumber:20}}),_react.default.createElement(_.MenuItem,{text:\"Menu Item 4\",__source:{fileName:_jsxFileName,lineNumber:21}})));}).add('with icon',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:26}},_react.default.createElement(_Header.default,{title:'Menu icons',__source:{fileName:_jsxFileName,lineNumber:27}}),_react.default.createElement(_.Paper,{radius:6,style:{width:324},__source:{fileName:_jsxFileName,lineNumber:29}},_react.default.createElement(_.MenuItem,{text:'Preview',icon:_react.default.createElement(_.Icon,{name:'assignment-turned-in',__source:{fileName:_jsxFileName,lineNumber:32}}),__source:{fileName:_jsxFileName,lineNumber:30}}),_react.default.createElement(_.MenuItem,{text:'Share',icon:_react.default.createElement(_.Icon,{name:'person-add',__source:{fileName:_jsxFileName,lineNumber:34}}),__source:{fileName:_jsxFileName,lineNumber:34}}),_react.default.createElement(_.MenuItem,{text:'Get Link',icon:_react.default.createElement(_.Icon,{name:'link',__source:{fileName:_jsxFileName,lineNumber:35}}),__source:{fileName:_jsxFileName,lineNumber:35}}),_react.default.createElement(_.Divider,{__source:{fileName:_jsxFileName,lineNumber:36}}),_react.default.createElement(_.MenuItem,{text:'Preview',icon:_react.default.createElement(_.Icon,{name:'content-copy',__source:{fileName:_jsxFileName,lineNumber:37}}),__source:{fileName:_jsxFileName,lineNumber:37}}),_react.default.createElement(_.MenuItem,{text:'Download',icon:_react.default.createElement(_.Icon,{name:'file-download',__source:{fileName:_jsxFileName,lineNumber:38}}),__source:{fileName:_jsxFileName,lineNumber:38}})));}).add('with keyboard',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:43}},_react.default.createElement(_Header.default,{title:'Menu keyboard commands',__source:{fileName:_jsxFileName,lineNumber:44}}),_react.default.createElement(_.Paper,{radius:6,style:{width:324},__source:{fileName:_jsxFileName,lineNumber:46}},_react.default.createElement(_.MenuItem,{text:'Cut',icon:_react.default.createElement(_.Icon,{name:'content-cut',__source:{fileName:_jsxFileName,lineNumber:49}}),keyboardCommand:_react.default.createElement(_reactNative.Text,{style:{fontSize:12,color:'#6e6e6e'},__source:{fileName:_jsxFileName,lineNumber:51}},\"\\u2318X\"),__source:{fileName:_jsxFileName,lineNumber:47}}),_react.default.createElement(_.MenuItem,{text:'Copy',icon:_react.default.createElement(_.Icon,{name:'content-copy',__source:{fileName:_jsxFileName,lineNumber:57}}),keyboardCommand:_react.default.createElement(_reactNative.Text,{style:{fontSize:12,color:'#6e6e6e'},__source:{fileName:_jsxFileName,lineNumber:59}},\"\\u2318C\"),__source:{fileName:_jsxFileName,lineNumber:55}}),_react.default.createElement(_.MenuItem,{text:'Paste',icon:_react.default.createElement(_.Icon,{name:'content-paste',__source:{fileName:_jsxFileName,lineNumber:65}}),keyboardCommand:_react.default.createElement(_reactNative.Text,{style:{fontSize:12,color:'#6e6e6e'},__source:{fileName:_jsxFileName,lineNumber:67}},\"\\u2318V\"),__source:{fileName:_jsxFileName,lineNumber:63}})));});exports.default=_default;"
  },
  {
    "path": "dist/Components/Menu/MenuItem/MenuItem.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({container:{minHeight:32,width:324,minWidth:124,alignItems:'center',flexDirection:'row',paddingVertical:12,paddingHorizontal:24},title:{fontSize:16,fontWeight:'400',lineHeight:24,letterSpacing:0.44,color:'#000000'}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Menu/MenuItem/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _MenuItem.default;}});var _MenuItem=_interopRequireDefault(require(\"./MenuItem\"));"
  },
  {
    "path": "dist/Components/Menu/ModalMenu/ModalMenu.native.styles.js",
    "content": ""
  },
  {
    "path": "dist/Components/Menu/ModalMenu/ModalMenu.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var _default=_reactNative.StyleSheet.create({container:{flex:1,justifyContent:'center',alignItems:'center',position:'static',zIndex:9999},bgTransparent:{backgroundColor:'transparent'},bgNotTransparent:{backgroundColor:'#ffffff'},hidden:{display:'none'},visible:{display:'flex'}});exports.default=_default;"
  },
  {
    "path": "dist/Components/Menu/ModalMenu/Portal.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf3=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=require(\"react\");var _reactDom=_interopRequireDefault(require(\"react-dom\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var Portal=function(_Component){(0,_inherits2.default)(Portal,_Component);function Portal(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,Portal);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(Portal)).call.apply(_getPrototypeOf2,[this].concat(args)));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{el:null,target:null});return _this;}(0,_createClass2.default)(Portal,[{key:\"componentDidMount\",value:function componentDidMount(){var _this2=this;var container=document.createElement('div');if(typeof document==\"undefined\"){return;}this.setState({el:container,target:document.body},function(){_this2.state.target.appendChild(_this2.state.el);});}},{key:\"componentWillUnmount\",value:function componentWillUnmount(){this.state.target&&this.state.target.removeChild(this.state.el);}},{key:\"render\",value:function render(){var children=this.props.children;if(this.state.el){return _reactDom.default.createPortal(children,this.state.el);}return null;}}]);return Portal;}(_react.Component);exports.default=Portal;(0,_defineProperty2.default)(Portal,\"propTypes\",{children:_propTypes.default.node.isRequired,visible:_propTypes.default.bool});"
  },
  {
    "path": "dist/Components/Menu/ModalMenu/ariaAppHider.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.assertNodeList=assertNodeList;exports.setElement=setElement;exports.validateElement=validateElement;exports.hide=hide;exports.show=show;exports.documentNotReadyOrSSRTesting=documentNotReadyOrSSRTesting;exports.resetForTesting=resetForTesting;var _utils=require(\"./utils\");var globalElement=null;function assertNodeList(nodeList,selector){if(!nodeList||!nodeList.length){throw new Error(\"modal-react-native-web: No elements were found for selector \"+selector+\".\");}}function setElement(element){var useElement=element;if(typeof useElement==='string'&&_utils.canUseDOM){var el=document.querySelectorAll(useElement);assertNodeList(el,useElement);useElement='length'in el?el[0]:el;}globalElement=useElement||globalElement;return globalElement;}function validateElement(appElement){if(!appElement&&!globalElement){return false;}return true;}function hide(appElement){if(validateElement(appElement)){(appElement||globalElement).setAttribute('aria-hidden','true');}}function show(appElement){if(validateElement(appElement)){(appElement||globalElement).removeAttribute('aria-hidden');}}function documentNotReadyOrSSRTesting(){globalElement=null;}function resetForTesting(){globalElement=null;}"
  },
  {
    "path": "dist/Components/Menu/ModalMenu/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var _index=_interopRequireDefault(require(\"./index.web\"));var _index2=_interopRequireDefault(require(\"./index.native\"));var index=_index2.default;if(_reactNative.Platform.OS=='web'){index=_index.default;}var _default=index;exports.default=_default;"
  },
  {
    "path": "dist/Components/Menu/ModalMenu/index.native.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _reactNative=require(\"react-native\");var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _ModalMenuNative=_interopRequireDefault(require(\"./ModalMenu.native.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Menu/ModalMenu/index.native.js\";var Modal=function(_Component){(0,_inherits2.default)(Modal,_Component);function Modal(){(0,_classCallCheck2.default)(this,Modal);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(Modal).apply(this,arguments));}(0,_createClass2.default)(Modal,[{key:\"render\",value:function render(){var _this$props=this.props,onRequestClose=_this$props.onRequestClose,onShow=_this$props.onShow,onBackdropPress=_this$props.onBackdropPress,containerStyle=_this$props.containerStyle,children=_this$props.children,NativeModalProps=_this$props.NativeModalProps,visible=_this$props.visible;var deviceWidth=_reactNative.Dimensions.get('window').width;var deviceHeight=_reactNative.Dimensions.get('window').height;return _react.default.createElement(_reactNative.Modal,(0,_extends2.default)({animationType:'none',transparent:true,visible:visible,onRequestClose:onRequestClose,onShow:onShow},NativeModalProps,{__source:{fileName:_jsxFileName,lineNumber:45}}),_react.default.createElement(_reactNative.View,{style:[_ModalMenuNative.default.container,containerStyle],__source:{fileName:_jsxFileName,lineNumber:52}},_react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:onBackdropPress,__source:{fileName:_jsxFileName,lineNumber:53}},_react.default.createElement(_reactNative.Animated.View,{style:{width:deviceWidth,height:deviceHeight,position:'absolute',padding:24},__source:{fileName:_jsxFileName,lineNumber:54}})),children));}}]);return Modal;}(_react.Component);(0,_defineProperty2.default)(Modal,\"propTypes\",{buttons:_propTypes.default.element,visible:_propTypes.default.bool,onRequestClose:_propTypes.default.func,onShow:_propTypes.default.func,onBackdropPress:_propTypes.default.func,containerStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),NativeModalProps:_propTypes.default.object,children:_propTypes.default.node});(0,_defineProperty2.default)(Modal,\"defaultProps\",{visible:false});var _default=(0,_withTheme.default)(Modal);exports.default=_default;"
  },
  {
    "path": "dist/Components/Menu/ModalMenu/index.web.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _Portal=_interopRequireDefault(require(\"./Portal\"));var ariaAppHider=_interopRequireWildcard(require(\"./ariaAppHider\"));var _utils=require(\"./utils\");var _ModalMenu=_interopRequireDefault(require(\"./ModalMenu.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Menu/ModalMenu/index.web.js\";var ariaHiddenInstances=0;var Modal=function(_Component){(0,_inherits2.default)(Modal,_Component);(0,_createClass2.default)(Modal,null,[{key:\"setAppElement\",value:function setAppElement(element){ariaAppHider.setElement(element);}}]);function Modal(props){var _this;(0,_classCallCheck2.default)(this,Modal);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(Modal).call(this,props));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"animateFadeIn\",function(callback){if(_this.state.animationFade){_this.state.animationFade.stop();}var animationFade=_reactNative.Animated.timing(_this.state.opacityFade,{toValue:1,duration:300,useNativeDriver:true});_this.setState({animationFade:animationFade},function(){requestAnimationFrame(function(){_this.setState({styleFade:{display:'flex'}},function(){return _this.state.animationFade.start(callback);});});});});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"animateFadeOut\",function(callback){if(_this.state.animationFade){_this.state.animationFade.stop();}var animationFade=_reactNative.Animated.timing(_this.state.opacityFade,{toValue:0,duration:300,useNativeDriver:true});_this.setState({animationFade:animationFade},function(){requestAnimationFrame(function(){_this.state.animationFade.start(function(){_this.setState({styleFade:{display:'none'}},callback);});});});});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"animateSlideIn\",function(callback){if(_this.state.animationSlide){_this.state.animationSlide.stop();}var animationSlide=_reactNative.Animated.timing(_this.state.slideTranslation,{toValue:1,easing:_reactNative.Easing.out(_reactNative.Easing.poly(4)),duration:300,useNativeDriver:true});_this.setState({animationSlide:animationSlide},function(){requestAnimationFrame(function(){_this.setState({styleFade:{display:'flex'}},function(){return _this.state.animationSlide.start(callback);});});});});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"animateSlideOut\",function(callback){if(_this.state.animationSlide){_this.state.animationSlide.stop();}var animationSlide=_reactNative.Animated.timing(_this.state.slideTranslation,{toValue:0,easing:_reactNative.Easing.in(_reactNative.Easing.poly(4)),duration:300,useNativeDriver:true});_this.setState({animationSlide:animationSlide},function(){requestAnimationFrame(function(){_this.state.animationSlide.start(function(){_this.setState({styleFade:{display:'none'}},callback);});});});});_this.state={animationSlide:null,animationFade:null,styleFade:{display:props.visible?'flex':'none'},opacityFade:new _reactNative.Animated.Value(0),slideTranslation:new _reactNative.Animated.Value(0)};return _this;}(0,_createClass2.default)(Modal,[{key:\"componentDidMount\",value:function componentDidMount(){if(this.props.visible)this.handleShow();}},{key:\"componentDidUpdate\",value:function componentDidUpdate(prevProps){if(prevProps.visible&&!this.props.visible)this.handleShow();if(!prevProps.visible&&this.props.visible)this.handleClose();}},{key:\"handleShow\",value:function handleShow(){var _this$props=this.props,animationType=_this$props.animationType,onShow=_this$props.onShow,ariaHideApp=_this$props.ariaHideApp,appElement=_this$props.appElement;if(ariaHideApp){ariaHiddenInstances+=1;ariaAppHider.hide(appElement);}if(animationType==='slide'){this.animateSlideIn(onShow);}else if(animationType==='fade'){this.animateFadeIn(onShow);}else{onShow();}}},{key:\"handleClose\",value:function handleClose(){var _this$props2=this.props,animationType=_this$props2.animationType,onDismiss=_this$props2.onDismiss,ariaHideApp=_this$props2.ariaHideApp,appElement=_this$props2.appElement;if(animationType==='slide'){this.animateSlideOut(onDismiss);}else if(animationType==='fade'){this.animateFadeOut(onDismiss);}else{onDismiss();}if(ariaHideApp&&ariaHiddenInstances>0){ariaHiddenInstances-=1;if(ariaHiddenInstances===0){ariaAppHider.show(appElement);}}}},{key:\"getAnimationStyle\",value:function getAnimationStyle(){var _this$props3=this.props,visible=_this$props3.visible,animationType=_this$props3.animationType;var styleFade=this.state.styleFade;if(animationType==='slide'){return[{transform:[{translateY:this.state.slideTranslation.interpolate({inputRange:[0,1],outputRange:[_reactNative.Dimensions.get('window').height,0],extrapolate:'clamp'})}]},styleFade];}if(animationType==='fade'){return[{opacity:this.state.opacityFade},styleFade];}return[_ModalMenu.default[visible?'visible':'hidden']];}},{key:\"render\",value:function render(){var _this$props4=this.props,containerStyle=_this$props4.containerStyle,onBackdropPress=_this$props4.onBackdropPress,children=_this$props4.children,visible=_this$props4.visible,onLayout=_this$props4.onLayout,noBackDrop=_this$props4.noBackDrop;return _react.default.createElement(_Portal.default,{visible:visible,__source:{fileName:_jsxFileName,lineNumber:265}},_react.default.createElement(_reactNative.Animated.View,{useNativeDriver:true,onLayout:onLayout,\"aria-modal\":\"true\",style:[_ModalMenu.default.container,{height:'100%',width:'100%',zIndex:visible?10:-10},containerStyle],__source:{fileName:_jsxFileName,lineNumber:266}},noBackDrop?null:_react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:onBackdropPress,__source:{fileName:_jsxFileName,lineNumber:280}},_react.default.createElement(_reactNative.View,{style:{height:visible?'100%':0,width:visible?'100%':0,position:'fixed',top:0,zIndex:visible?10:-10},__source:{fileName:_jsxFileName,lineNumber:281}})),children));}}]);return Modal;}(_react.Component);exports.default=Modal;(0,_defineProperty2.default)(Modal,\"propTypes\",{animationType:_propTypes.default.oneOf(['none','slide','fade']),transparent:_propTypes.default.bool,visible:_propTypes.default.bool,onRequestClose:_reactNative.Platform.isTV||_reactNative.Platform.OS==='android'?_propTypes.default.func.isRequired:_propTypes.default.func,onShow:_propTypes.default.func,onDismiss:_propTypes.default.func,children:_propTypes.default.node.isRequired,ariaHideApp:_propTypes.default.bool,appElement:_propTypes.default.instanceOf(_utils.SafeHTMLElement),containerStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),onBackdropPress:_propTypes.default.func,onLayout:_propTypes.default.func,noBackDrop:_propTypes.default.bool});(0,_defineProperty2.default)(Modal,\"defaultProps\",{animationType:'none',transparent:false,visible:true,onShow:function onShow(){},onRequestClose:function onRequestClose(){},onDismiss:function onDismiss(){},ariaHideApp:true,appElement:null});"
  },
  {
    "path": "dist/Components/Menu/ModalMenu/utils.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.SafeHTMLElement=exports.canUseDOM=void 0;var _propTypes=_interopRequireDefault(require(\"prop-types\"));var canUseDOM=!!(typeof window!=='undefined'&&window.document&&window.document.createElement);exports.canUseDOM=canUseDOM;var SafeHTMLElement=canUseDOM?HTMLElement:_propTypes.default.any;exports.SafeHTMLElement=SafeHTMLElement;"
  },
  {
    "path": "dist/Components/Menu/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _Menu.default;}});Object.defineProperty(exports,\"MenuItem\",{enumerable:true,get:function get(){return _MenuItem.default;}});var _Menu=_interopRequireDefault(require(\"./Menu\"));var _MenuItem=_interopRequireDefault(require(\"./MenuItem\"));"
  },
  {
    "path": "dist/Components/Modal/Modal.android.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf3=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _reactNative=require(\"react-native\");var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _Modal=_interopRequireDefault(require(\"./Modal.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Modal/Modal.android.js\";var Modal=function(_Component){(0,_inherits2.default)(Modal,_Component);function Modal(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,Modal);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(Modal)).call.apply(_getPrototypeOf2,[this].concat(args)));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{opacityAnimation:new _reactNative.Animated.Value(0),scaleAnimation:new _reactNative.Animated.Value(0.5),animationDuration:200,show:false});return _this;}(0,_createClass2.default)(Modal,[{key:\"componentDidUpdate\",value:function componentDidUpdate(prevProps){var visible=this.props.visible;if(visible!==prevProps.visible){this.toggle();}}},{key:\"toggle\",value:function toggle(){var _this2=this;var _this$state=this.state,opacityAnimation=_this$state.opacityAnimation,scaleAnimation=_this$state.scaleAnimation,animationDuration=_this$state.animationDuration,show=_this$state.show;var visible=this.props.visible;var opacity=0;var scale=0;if(visible){opacity=1;scale=1;this.setState({show:!show},function(){_reactNative.Animated.parallel([_reactNative.Animated.timing(opacityAnimation,{toValue:opacity,duration:animationDuration+50,useNativeDriver:true}),_reactNative.Animated.timing(scaleAnimation,{toValue:scale,duration:animationDuration,useNativeDriver:true})]).start();});}else{_reactNative.Animated.parallel([_reactNative.Animated.timing(opacityAnimation,{toValue:opacity,duration:animationDuration,useNativeDriver:true}),_reactNative.Animated.timing(scaleAnimation,{toValue:scale,duration:400,useNativeDriver:true})]).start(function(){_this2.setState({show:!show});});}}},{key:\"render\",value:function render(){var _this$props=this.props,onRequestClose=_this$props.onRequestClose,onShow=_this$props.onShow,onTouchOutside=_this$props.onTouchOutside,containerStyle=_this$props.containerStyle,children=_this$props.children,NativeModalProps=_this$props.NativeModalProps;var _this$state2=this.state,opacityAnimation=_this$state2.opacityAnimation,scaleAnimation=_this$state2.scaleAnimation,show=_this$state2.show;var deviceWidth=_reactNative.Dimensions.get('window').width;var deviceHeight=_reactNative.Dimensions.get('window').height;return _react.default.createElement(_reactNative.Modal,(0,_extends2.default)({animationType:'none',transparent:true,visible:show,onRequestClose:onRequestClose,onShow:onShow},NativeModalProps,{__source:{fileName:_jsxFileName,lineNumber:113}}),_react.default.createElement(_reactNative.View,{style:[_Modal.default.container,containerStyle],__source:{fileName:_jsxFileName,lineNumber:120}},_react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:onTouchOutside,__source:{fileName:_jsxFileName,lineNumber:121}},_react.default.createElement(_reactNative.Animated.View,{style:{width:deviceWidth,height:deviceHeight,position:'absolute',backgroundColor:'rgba(0,0,0,.5)',padding:24,opacity:opacityAnimation},__source:{fileName:_jsxFileName,lineNumber:122}})),_react.default.createElement(_reactNative.Animated.View,{useNativeDriver:true,style:{opacity:opacityAnimation,transform:[{scale:scaleAnimation}]},__source:{fileName:_jsxFileName,lineNumber:133}},children)));}}]);return Modal;}(_react.Component);(0,_defineProperty2.default)(Modal,\"propTypes\",{buttons:_propTypes.default.element,visible:_propTypes.default.bool,onRequestClose:_propTypes.default.func,onShow:_propTypes.default.func,onTouchOutside:_propTypes.default.func,containerStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),NativeModalProps:_propTypes.default.object,children:_propTypes.default.node});(0,_defineProperty2.default)(Modal,\"defaultProps\",{visible:false});var _default=(0,_withTheme.default)(Modal);exports.default=_default;"
  },
  {
    "path": "dist/Components/Modal/Modal.ios.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf3=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _reactNative=require(\"react-native\");var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _Modal=_interopRequireDefault(require(\"./Modal.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Modal/Modal.ios.js\";var Modal=function(_Component){(0,_inherits2.default)(Modal,_Component);function Modal(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,Modal);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(Modal)).call.apply(_getPrototypeOf2,[this].concat(args)));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{opacityAnimation:new _reactNative.Animated.Value(0),scaleAnimation:new _reactNative.Animated.Value(0.5),animationDuration:200,show:false});return _this;}(0,_createClass2.default)(Modal,[{key:\"componentDidUpdate\",value:function componentDidUpdate(prevProps){var visible=this.props.visible;if(visible!==prevProps.visible){this.toggle();}}},{key:\"toggle\",value:function toggle(){var _this2=this;var _this$state=this.state,opacityAnimation=_this$state.opacityAnimation,scaleAnimation=_this$state.scaleAnimation,animationDuration=_this$state.animationDuration,show=_this$state.show;var visible=this.props.visible;var opacity=0;var scale=0;if(visible){opacity=1;scale=1;this.setState({show:!show},function(){_reactNative.Animated.parallel([_reactNative.Animated.timing(opacityAnimation,{toValue:opacity,duration:animationDuration+50,useNativeDriver:true}),_reactNative.Animated.timing(scaleAnimation,{toValue:scale,duration:animationDuration,useNativeDriver:true})]).start();});}else{_reactNative.Animated.parallel([_reactNative.Animated.timing(opacityAnimation,{toValue:opacity,duration:animationDuration,useNativeDriver:true}),_reactNative.Animated.timing(scaleAnimation,{toValue:scale,duration:400,useNativeDriver:true})]).start(function(){_this2.setState({show:!show});});}}},{key:\"render\",value:function render(){var _this$props=this.props,onRequestClose=_this$props.onRequestClose,onShow=_this$props.onShow,onTouchOutside=_this$props.onTouchOutside,containerStyle=_this$props.containerStyle,children=_this$props.children,NativeModalProps=_this$props.NativeModalProps;var _this$state2=this.state,opacityAnimation=_this$state2.opacityAnimation,scaleAnimation=_this$state2.scaleAnimation,show=_this$state2.show;var deviceWidth=_reactNative.Dimensions.get('window').width;var deviceHeight=_reactNative.Dimensions.get('window').height;return _react.default.createElement(_reactNative.Modal,(0,_extends2.default)({animationType:'none',transparent:true,visible:show,onRequestClose:onRequestClose,onShow:onShow},NativeModalProps,{__source:{fileName:_jsxFileName,lineNumber:113}}),_react.default.createElement(_reactNative.View,{style:[_Modal.default.container,containerStyle],__source:{fileName:_jsxFileName,lineNumber:120}},_react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:onTouchOutside,__source:{fileName:_jsxFileName,lineNumber:121}},_react.default.createElement(_reactNative.Animated.View,{style:{width:deviceWidth,height:deviceHeight,position:'absolute',backgroundColor:'rgba(0,0,0,.5)',padding:24,opacity:opacityAnimation},__source:{fileName:_jsxFileName,lineNumber:122}})),_react.default.createElement(_reactNative.Animated.View,{useNativeDriver:true,style:{opacity:opacityAnimation,transform:[{scale:scaleAnimation}]},__source:{fileName:_jsxFileName,lineNumber:133}},children)));}}]);return Modal;}(_react.Component);(0,_defineProperty2.default)(Modal,\"propTypes\",{buttons:_propTypes.default.element,visible:_propTypes.default.bool,onRequestClose:_propTypes.default.func,onShow:_propTypes.default.func,onTouchOutside:_propTypes.default.func,containerStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),NativeModalProps:_propTypes.default.object,children:_propTypes.default.node});(0,_defineProperty2.default)(Modal,\"defaultProps\",{visible:false});var _default=(0,_withTheme.default)(Modal);exports.default=_default;"
  },
  {
    "path": "dist/Components/Modal/Modal.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _Modal=_interopRequireDefault(require(\"./Modal.web\"));var _default=_Modal.default;exports.default=_default;"
  },
  {
    "path": "dist/Components/Modal/Modal.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({container:{flex:1,padding:24,justifyContent:'center',alignItems:'center'}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Modal/Modal.web.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf3=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _reactNative=require(\"react-native\");var _modalEnhancedReactNativeWeb=_interopRequireDefault(require(\"modal-enhanced-react-native-web\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _Modal=_interopRequireDefault(require(\"./Modal.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Modal/Modal.web.js\";var ImplementedModal=_reactNative.Platform.OS=='web'?_modalEnhancedReactNativeWeb.default:_reactNative.Modal;var Modal=function(_Component){(0,_inherits2.default)(Modal,_Component);function Modal(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,Modal);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(Modal)).call.apply(_getPrototypeOf2,[this].concat(args)));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{opacityAnimation:new _reactNative.Animated.Value(0),scaleAnimation:new _reactNative.Animated.Value(0.5),animationDuration:200,show:false});return _this;}(0,_createClass2.default)(Modal,[{key:\"componentDidUpdate\",value:function componentDidUpdate(prevProps){var visible=this.props.visible;if(visible!==prevProps.visible){this.toggle();}}},{key:\"toggle\",value:function toggle(){var _this2=this;var _this$state=this.state,opacityAnimation=_this$state.opacityAnimation,scaleAnimation=_this$state.scaleAnimation,animationDuration=_this$state.animationDuration,show=_this$state.show;var visible=this.props.visible;var opacity=0;var scale=0;if(visible){opacity=1;scale=1;this.setState({show:!show},function(){_reactNative.Animated.parallel([_reactNative.Animated.timing(opacityAnimation,{toValue:opacity,duration:animationDuration+50,useNativeDriver:true}),_reactNative.Animated.timing(scaleAnimation,{toValue:scale,duration:animationDuration,useNativeDriver:true})]).start();});}else{_reactNative.Animated.parallel([_reactNative.Animated.timing(opacityAnimation,{toValue:opacity,duration:animationDuration,useNativeDriver:true}),_reactNative.Animated.timing(scaleAnimation,{toValue:scale,duration:400,useNativeDriver:true})]).start(function(){_this2.setState({show:!show});});}}},{key:\"render\",value:function render(){var _this$props=this.props,onRequestClose=_this$props.onRequestClose,onShow=_this$props.onShow,onTouchOutside=_this$props.onTouchOutside,containerStyle=_this$props.containerStyle,children=_this$props.children,NativeModalProps=_this$props.NativeModalProps;var _this$state2=this.state,opacityAnimation=_this$state2.opacityAnimation,scaleAnimation=_this$state2.scaleAnimation,show=_this$state2.show;var deviceWidth=_reactNative.Dimensions.get('window').width;var deviceHeight=_reactNative.Dimensions.get('window').height;return _react.default.createElement(ImplementedModal,(0,_extends2.default)({animationType:'none',transparent:true,visible:show,onRequestClose:onRequestClose,onShow:onShow},NativeModalProps,{__source:{fileName:_jsxFileName,lineNumber:116}}),_react.default.createElement(_reactNative.View,{style:[_Modal.default.container,containerStyle],__source:{fileName:_jsxFileName,lineNumber:123}},_react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:onTouchOutside,__source:{fileName:_jsxFileName,lineNumber:124}},_react.default.createElement(_reactNative.Animated.View,{style:{width:deviceWidth,height:deviceHeight,position:'absolute',backgroundColor:'rgba(0,0,0,.5)',padding:24,opacity:opacityAnimation},__source:{fileName:_jsxFileName,lineNumber:125}})),_react.default.createElement(_reactNative.Animated.View,{useNativeDriver:true,style:{opacity:opacityAnimation,transform:[{scale:scaleAnimation}]},__source:{fileName:_jsxFileName,lineNumber:136}},children)));}}]);return Modal;}(_react.Component);(0,_defineProperty2.default)(Modal,\"propTypes\",{buttons:_propTypes.default.element,visible:_propTypes.default.bool,onRequestClose:_propTypes.default.func,onShow:_propTypes.default.func,onTouchOutside:_propTypes.default.func,containerStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),NativeModalProps:_propTypes.default.object,children:_propTypes.default.node});(0,_defineProperty2.default)(Modal,\"defaultProps\",{visible:false});var _default=(0,_withTheme.default)(Modal);exports.default=_default;"
  },
  {
    "path": "dist/Components/Paper/Paper.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _objectWithoutProperties2=_interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutProperties\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _index=require(\"../../index\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Paper/Paper.js\";var Paper=function(_Component){(0,_inherits2.default)(Paper,_Component);function Paper(){(0,_classCallCheck2.default)(this,Paper);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(Paper).apply(this,arguments));}(0,_createClass2.default)(Paper,[{key:\"render\",value:function render(){var _this$props=this.props,style=_this$props.style,theme=_this$props.theme,children=_this$props.children,userShadow=_this$props.shadow,radius=_this$props.radius,testID=_this$props.testID,props=(0,_objectWithoutProperties2.default)(_this$props,[\"style\",\"theme\",\"children\",\"shadow\",\"radius\",\"testID\"]);var shadows=(0,_index.shadow)(4);if(userShadow>-1&&userShadow<25){shadows=(0,_index.shadow)(userShadow);}var borderRadius=radius?radius:2;return _react.default.createElement(_reactNative.Animated.View,(0,_extends2.default)({useNativeDriver:true,style:[theme.paper,shadows,{borderRadius:borderRadius},style],testID:testID},props,{__source:{fileName:_jsxFileName,lineNumber:35}}),children);}}]);return Paper;}(_react.Component);(0,_defineProperty2.default)(Paper,\"propTypes\",{children:_propTypes.default.node,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),theme:_propTypes.default.object,shadow:_propTypes.default.number,radius:_propTypes.default.number,testID:_propTypes.default.string});var _default=(0,_withTheme.default)(Paper);exports.default=_default;"
  },
  {
    "path": "dist/Components/Paper/Paper.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _=require(\"../../\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Paper/Paper.stories.js\";var _default=(0,_storiesOf.storiesOf)('Components|Paper',module).addParameters({jest:['Paper']}).add('Elevation',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:11}},_react.default.createElement(_Header.default,{title:'Paper',__source:{fileName:_jsxFileName,lineNumber:12}}),_react.default.createElement(_.Paper,{style:{padding:8,height:100,width:100,alignItems:'center'},elevation:2,__source:{fileName:_jsxFileName,lineNumber:13}}),_react.default.createElement(_.Paper,{style:{padding:8,height:100,width:100,marginTop:30,alignItems:'center',justifyContent:'center'},elevation:4,__source:{fileName:_jsxFileName,lineNumber:22}}),_react.default.createElement(_.Paper,{style:{padding:8,height:100,width:100,marginTop:30,alignItems:'center',justifyContent:'center'},elevation:8,__source:{fileName:_jsxFileName,lineNumber:33}}));}).add('Roundness',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:47}},_react.default.createElement(_Header.default,{title:'Roudness',__source:{fileName:_jsxFileName,lineNumber:48}}),_react.default.createElement(_.Paper,{style:{padding:8,height:100,width:100,alignItems:'center'},elevation:4,radius:2,__source:{fileName:_jsxFileName,lineNumber:49}}),_react.default.createElement(_.Paper,{style:{padding:8,height:100,width:100,marginTop:30,alignItems:'center',justifyContent:'center'},elevation:4,radius:8,__source:{fileName:_jsxFileName,lineNumber:59}}));});exports.default=_default;"
  },
  {
    "path": "dist/Components/Paper/Paper.styles.js",
    "content": ""
  },
  {
    "path": "dist/Components/Progress/ProgressBar/ProgressBar.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf3=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _react=_interopRequireWildcard(require(\"react\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _ProgressBar=_interopRequireDefault(require(\"./ProgressBar.styles\"));var _color=_interopRequireDefault(require(\"color\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Progress/ProgressBar/ProgressBar.js\";var ProgressBar=function(_PureComponent){(0,_inherits2.default)(ProgressBar,_PureComponent);function ProgressBar(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,ProgressBar);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(ProgressBar)).call.apply(_getPrototypeOf2,[this].concat(args)));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{indicatorPosition:new _reactNative.Animated.Value(_this.props.indicatorStartPosition),indicatorScaleX:new _reactNative.Animated.Value(1),indicatorWidth:new _reactNative.Animated.Value(0),trackScaleY:new _reactNative.Animated.Value(0),trackOpacity:new _reactNative.Animated.Value(0),trackHeight:0,trackWidth:0});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"onTrackLayout\",function(e){var _e$nativeEvent$layout=e.nativeEvent.layout,width=_e$nativeEvent$layout.width,height=_e$nativeEvent$layout.height;_this.setState({trackWidth:width,trackHeight:height});});return _this;}(0,_createClass2.default)(ProgressBar,[{key:\"componentDidMount\",value:function componentDidMount(){var _this$props=this.props,visible=_this$props.visible,determinate=_this$props.determinate;if(visible){this.animateTrackHeight();}if(determinate){this.startDeterminateAnimation();}}},{key:\"componentDidUpdate\",value:function componentDidUpdate(prevProps){var _this$props2=this.props,value=_this$props2.value,visible=_this$props2.visible,determinate=_this$props2.determinate;if(value!=prevProps.value&&determinate){this.startDeterminateAnimation();}if(visible&&!prevProps.visible||!visible&&prevProps.visible){this.animateTrackHeight();}}},{key:\"animateTrackHeight\",value:function animateTrackHeight(){var _this2=this;var _this$state=this.state,trackScaleY=_this$state.trackScaleY,trackOpacity=_this$state.trackOpacity;var _this$props3=this.props,visible=_this$props3.visible,determinate=_this$props3.determinate;var scale=visible?1:0;var opacity=visible?1:0;_reactNative.Animated.parallel([_reactNative.Animated.timing(trackScaleY,{toValue:scale,duration:300}),_reactNative.Animated.timing(trackOpacity,{toValue:opacity,duration:300})]).start(function(){if(determinate){_this2.startDeterminateAnimation();}else{_this2.startIndeterminateAnimation();}});}},{key:\"startDeterminateAnimation\",value:function startDeterminateAnimation(){var _this3=this;var _this$state2=this.state,indicatorWidth=_this$state2.indicatorWidth,trackWidth=_this$state2.trackWidth;var _this$props4=this.props,animationDuration=_this$props4.animationDuration,value=_this$props4.value;if(trackWidth==0){setTimeout(function(){return _this3.startDeterminateAnimation();},100);}_reactNative.Animated.parallel([_reactNative.Animated.timing(indicatorWidth,{toValue:trackWidth*(value/100),duration:animationDuration})]).start();}},{key:\"startIndeterminateAnimation\",value:function startIndeterminateAnimation(){var _this4=this;var _this$state3=this.state,indicatorPosition=_this$state3.indicatorPosition,indicatorScaleX=_this$state3.indicatorScaleX,trackWidth=_this$state3.trackWidth;var _this$props5=this.props,animationDuration=_this$props5.animationDuration,animationEasing=_this$props5.animationEasing;if(trackWidth==0){setTimeout(function(){return _this4.startIndeterminateAnimation();},100);}_reactNative.Animated.loop(_reactNative.Animated.parallel([_reactNative.Animated.timing(indicatorPosition,{toValue:trackWidth,duration:animationDuration,animationEasing:animationEasing,useNativeDriver:true}),_reactNative.Animated.timing(indicatorScaleX,{toValue:2,duration:animationDuration/4,animationEasing:animationEasing,useNativeDriver:true})]),{iterations:-1}).start();}},{key:\"render\",value:function render(){var _this$props6=this.props,height=_this$props6.height,color=_this$props6.color,trackStyle=_this$props6.trackStyle,determinate=_this$props6.determinate,theme=_this$props6.theme,testID=_this$props6.testID;var _this$state4=this.state,indicatorPosition=_this$state4.indicatorPosition,indicatorScaleX=_this$state4.indicatorScaleX,indicatorWidth=_this$state4.indicatorWidth,trackScaleY=_this$state4.trackScaleY,trackOpacity=_this$state4.trackOpacity;var trackColor=color?(0,_color.default)(color).fade(0.4).string():(0,_color.default)(theme.primary.main).fade(0.4).string();var indicatorColor=color?color:theme.primary.main;return _react.default.createElement(_reactNative.Animated.View,{onLayout:this.onTrackLayout,style:[_ProgressBar.default.track,{backgroundColor:trackColor,height:height?height:4,opacity:trackOpacity,transform:[{scaleY:trackScaleY}]},trackStyle],testID:testID,__source:{fileName:_jsxFileName,lineNumber:164}},_react.default.createElement(_reactNative.Animated.View,{style:[_ProgressBar.default.indicator,{backgroundColor:indicatorColor,height:height?height:4,width:determinate?indicatorWidth:112,transform:[{translateX:indicatorPosition},{scaleX:indicatorScaleX}]}],__source:{fileName:_jsxFileName,lineNumber:177}}));}}]);return ProgressBar;}(_react.PureComponent);(0,_defineProperty2.default)(ProgressBar,\"propTypes\",{color:_propTypes.default.string,height:_propTypes.default.number,trackStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),determinate:_propTypes.default.bool,indicatorStartPosition:_propTypes.default.number,animationEasing:_propTypes.default.func,animationDuration:_propTypes.default.number,value:_propTypes.default.number,visible:_propTypes.default.bool,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),theme:_propTypes.default.object,testID:_propTypes.default.string});(0,_defineProperty2.default)(ProgressBar,\"defaultProps\",{animationDuration:1000,indicatorStartPosition:0,animationEasing:_reactNative.Easing.bezier(0.65,0.815,0.735,0.395)});var _default=(0,_withTheme.default)(ProgressBar);exports.default=_default;"
  },
  {
    "path": "dist/Components/Progress/ProgressBar/ProgressBar.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../../..\");var _storybookState=require(\"@sambego/storybook-state\");var _Header=_interopRequireDefault(require(\"../../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../../storybook/components/Container\"));var _storiesOf=require(\"../../../storybook/helpers/storiesOf\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Progress/ProgressBar/ProgressBar.stories.js\";var store=new _storybookState.Store({value3:30,visible2:true,circleValue3:40});var _default=(0,_storiesOf.storiesOf)('Components|Progress/ProgressBar',module).addParameters({jest:['ProgressBar']}).add('Indeterminate',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:19}},_react.default.createElement(_Header.default,{title:'Progress Bar',__source:{fileName:_jsxFileName,lineNumber:20}}),_react.default.createElement(_.ProgressBar,{visible:true,__source:{fileName:_jsxFileName,lineNumber:22}}),_react.default.createElement(_.ProgressBar,{visible:true,indicatorStartPosition:100,trackStyle:{marginTop:20},color:'#E91E63',__source:{fileName:_jsxFileName,lineNumber:23}}),_react.default.createElement(_.ProgressBar,{visible:true,indicatorStartPosition:100,trackStyle:{marginTop:20},color:'#009688',animationDuration:2000,__source:{fileName:_jsxFileName,lineNumber:29}}),_react.default.createElement(_.ProgressBar,{visible:true,indicatorStartPosition:100,trackStyle:{marginTop:20},color:'#673AB7',animationDuration:4000,__source:{fileName:_jsxFileName,lineNumber:36}}),_react.default.createElement(_.ProgressBar,{visible:true,indicatorStartPosition:100,trackStyle:{marginTop:20},color:'#8BC34A',animationDuration:3000,height:5,__source:{fileName:_jsxFileName,lineNumber:43}}),_react.default.createElement(_.ProgressBar,{visible:true,indicatorStartPosition:100,trackStyle:{marginTop:20},color:'#03A9F4',animationDuration:4000,height:10,__source:{fileName:_jsxFileName,lineNumber:51}}));}).add('Determinate',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:62}},_react.default.createElement(_Header.default,{title:'Progress Bar',__source:{fileName:_jsxFileName,lineNumber:63}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:65}},function(state){return _react.default.createElement(_reactNative.View,{style:{marginBottom:40},__source:{fileName:_jsxFileName,lineNumber:67}},_react.default.createElement(_.ProgressBar,{determinate:true,value:state.value3,animationDuration:2000,trackStyle:{marginTop:40},visible:state.visible2,__source:{fileName:_jsxFileName,lineNumber:68}}),_react.default.createElement(_.Button,{type:\"outlined\",style:{marginTop:20},text:' Change Value',onPress:function onPress(){store.set({value3:Math.floor(Math.random()*Math.floor(100))});},__source:{fileName:_jsxFileName,lineNumber:75}}),_react.default.createElement(_.Button,{type:\"outlined\",style:{marginTop:20},animationDuration:500,text:'Hide / Show Animate',onPress:function onPress(){store.set({visible2:!state.visible2});},__source:{fileName:_jsxFileName,lineNumber:86}}));}),_react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:101}},_react.default.createElement(_.ProgressBar,{determinate:true,value:25,color:'#E91E63',animationDuration:2000,trackStyle:{marginBottom:40},visible:true,__source:{fileName:_jsxFileName,lineNumber:102}}),_react.default.createElement(_.ProgressBar,{determinate:true,value:50,color:'#009688',animationDuration:500,trackStyle:{marginBottom:40},visible:true,__source:{fileName:_jsxFileName,lineNumber:110}}),_react.default.createElement(_.ProgressBar,{determinate:true,value:75,color:'#673AB7',animationDuration:400,trackStyle:{marginBottom:40},visible:true,height:5,__source:{fileName:_jsxFileName,lineNumber:118}})));});exports.default=_default;"
  },
  {
    "path": "dist/Components/Progress/ProgressBar/ProgressBar.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({track:{width:'100%',position:'relative',overflow:'hidden'}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Progress/ProgressBar/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _ProgressBar.default;}});var _ProgressBar=_interopRequireDefault(require(\"./ProgressBar\"));"
  },
  {
    "path": "dist/Components/Progress/ProgressCircle/ProgressCircle.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _react=_interopRequireWildcard(require(\"react\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _ProgressCircleDeterminate=_interopRequireDefault(require(\"./ProgressCircleDeterminate\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Progress/ProgressCircle/ProgressCircle.js\";var ProgressCircle=function(_PureComponent){(0,_inherits2.default)(ProgressCircle,_PureComponent);function ProgressCircle(props){var _this;(0,_classCallCheck2.default)(this,ProgressCircle);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(ProgressCircle).call(this,props));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{frames:60*_this.props.animationDuration/1000,progress:new _reactNative.Animated.Value(0)});return _this;}(0,_createClass2.default)(ProgressCircle,[{key:\"componentDidMount\",value:function componentDidMount(){var _this$props=this.props,visible=_this$props.visible,determinate=_this$props.determinate;if(visible&&!determinate){this.startIndeterminateAnimation();}}},{key:\"componentDidUpdate\",value:function componentDidUpdate(prevProps){var _this$props2=this.props,visible=_this$props2.visible,determinate=_this$props2.determinate;if(visible&&!prevProps.visible||!visible&&prevProps.visible){if(determinate)this.startIndeterminateAnimation();}}},{key:\"startIndeterminateAnimation\",value:function startIndeterminateAnimation(){var progress=this.state.progress;var _this$props3=this.props,animationEasing=_this$props3.animationEasing,animationDuration=_this$props3.animationDuration;_reactNative.Animated.loop(_reactNative.Animated.timing(progress,{duration:animationDuration,easing:animationEasing,toValue:1,useNativeDriver:true}),{iterations:-1}).start();}},{key:\"stopAnimation\",value:function stopAnimation(){this.state.progress.stopAnimation();}},{key:\"getLayerStyle\",value:function getLayerStyle(){var size=this.props.size;var progress=this.state.progress;var inputRange=[0,1];var outputRange=[0+30+15+'deg',2*360+30+15+'deg'];var rotate={rotate:progress.interpolate({inputRange:inputRange,outputRange:outputRange})};return{width:size,height:size,transform:[rotate]};}},{key:\"getViewportStyle\",value:function getViewportStyle(){var size=this.props.size;var progress=this.state.progress;var rotate={rotate:progress.interpolate({inputRange:this.getInputRange(progress),outputRange:this.getOutputRange(progress)})};return{width:size,height:size,transform:[rotate]};}},{key:\"getInputRange\",value:function getInputRange(){var frames=this.state.frames;var inputRange=Array.from(new Array(frames),function(undefined,frameIndex){return frameIndex/(frames-1);});return inputRange;}},{key:\"getOutputRange\",value:function getOutputRange(){var easing=_reactNative.Easing.bezier(0.4,0.0,0.7,1.0);var frames=this.state.frames;var outputRange=Array.from(new Array(frames),function(undefined,frameIndex){var progress=2*frameIndex/(frames-1);var rotation=-(180-15);if(progress>1.0){progress=2.0-progress;}var direction=+1;return direction*(180-30)*easing(progress)+rotation+'deg';});return outputRange;}},{key:\"render\",value:function render(){var _this$props4=this.props,style=_this$props4.style,size=_this$props4.size,color=_this$props4.color,determinate=_this$props4.determinate,widthOfBorder=_this$props4.widthOfBorder,testID=_this$props4.testID;var layerStyle=this.getLayerStyle();var viewportStyle=this.getViewportStyle();var containerStyle={width:size,height:size/2,overflow:'hidden'};var lineStyle={width:size,height:size,borderColor:color,borderWidth:size/widthOfBorder,borderRadius:size/2};if(determinate)return _react.default.createElement(_ProgressCircleDeterminate.default,(0,_extends2.default)({},this.props,{__source:{fileName:_jsxFileName,lineNumber:177}}));return _react.default.createElement(_reactNative.View,{style:style,testID:testID,__source:{fileName:_jsxFileName,lineNumber:180}},_react.default.createElement(_reactNative.Animated.View,{style:layerStyle,useNativeDriver:true,__source:{fileName:_jsxFileName,lineNumber:181}},_react.default.createElement(_reactNative.Animated.View,{style:containerStyle,collapsable:false,useNativeDriver:true,__source:{fileName:_jsxFileName,lineNumber:182}},_react.default.createElement(_reactNative.Animated.View,{style:viewportStyle,useNativeDriver:true,__source:{fileName:_jsxFileName,lineNumber:186}},_react.default.createElement(_reactNative.Animated.View,{style:containerStyle,collapsable:false,useNativeDriver:true,__source:{fileName:_jsxFileName,lineNumber:187}},_react.default.createElement(_reactNative.Animated.View,{style:lineStyle,useNativeDriver:true,__source:{fileName:_jsxFileName,lineNumber:191}}))))));}}]);return ProgressCircle;}(_react.PureComponent);(0,_defineProperty2.default)(ProgressCircle,\"propTypes\",{color:_propTypes.default.string,size:_propTypes.default.number,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),animationDuration:_propTypes.default.number,animationEasing:_propTypes.default.func,visible:_propTypes.default.bool,determinate:_propTypes.default.bool,widthOfBorder:_propTypes.default.number,testID:_propTypes.default.string});(0,_defineProperty2.default)(ProgressCircle,\"defaultProps\",{color:'rgb(0, 0, 0)',size:48,animationEasing:_reactNative.Easing.linear,animationDuration:2400,visible:true,determinate:false,widthOfBorder:10});var _default=(0,_withTheme.default)(ProgressCircle);exports.default=_default;"
  },
  {
    "path": "dist/Components/Progress/ProgressCircle/ProgressCircle.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../../..\");var _storybookState=require(\"@sambego/storybook-state\");var _Header=_interopRequireDefault(require(\"../../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../../storybook/components/Container\"));var _storiesOf=require(\"../../../storybook/helpers/storiesOf\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Progress/ProgressCircle/ProgressCircle.stories.js\";var store=new _storybookState.Store({value3:30,visible2:true,circleValue3:40});var _default=(0,_storiesOf.storiesOf)('Components|Progress/ProgressCircle',module).addParameters({jest:['ProgressCircle']}).add('Indeterminate',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:20}},_react.default.createElement(_Header.default,{title:'Progress Circle',__source:{fileName:_jsxFileName,lineNumber:21}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',flexWrap:'wrap',marginBottom:40},__source:{fileName:_jsxFileName,lineNumber:23}},_react.default.createElement(_.ProgressCircle,{__source:{fileName:_jsxFileName,lineNumber:25}}),_react.default.createElement(_.ProgressCircle,{color:'#03A9F4',__source:{fileName:_jsxFileName,lineNumber:26}}),_react.default.createElement(_.ProgressCircle,{color:'#E91E63',__source:{fileName:_jsxFileName,lineNumber:27}}),_react.default.createElement(_.ProgressCircle,{color:'#009688',__source:{fileName:_jsxFileName,lineNumber:28}})),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',flexWrap:'wrap',marginBottom:40},__source:{fileName:_jsxFileName,lineNumber:30}},_react.default.createElement(_.ProgressCircle,{animationDuration:4800,__source:{fileName:_jsxFileName,lineNumber:32}}),_react.default.createElement(_.ProgressCircle,{color:'#03A9F4',animationDuration:4800,__source:{fileName:_jsxFileName,lineNumber:33}}),_react.default.createElement(_.ProgressCircle,{color:'#E91E63',animationDuration:4800,__source:{fileName:_jsxFileName,lineNumber:34}}),_react.default.createElement(_.ProgressCircle,{color:'#009688',animationDuration:4800,__source:{fileName:_jsxFileName,lineNumber:35}})),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',flexWrap:'wrap',marginBottom:40},__source:{fileName:_jsxFileName,lineNumber:37}},_react.default.createElement(_.ProgressCircle,{animationDuration:1200,__source:{fileName:_jsxFileName,lineNumber:39}}),_react.default.createElement(_.ProgressCircle,{color:'#03A9F4',animationDuration:1200,__source:{fileName:_jsxFileName,lineNumber:40}}),_react.default.createElement(_.ProgressCircle,{color:'#E91E63',animationDuration:1200,__source:{fileName:_jsxFileName,lineNumber:41}}),_react.default.createElement(_.ProgressCircle,{color:'#009688',animationDuration:1200,__source:{fileName:_jsxFileName,lineNumber:42}})));}).add('Determinate',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:47}},_react.default.createElement(_Header.default,{title:'Progress Circle',__source:{fileName:_jsxFileName,lineNumber:48}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:49}},function(state){return _react.default.createElement(_reactNative.View,{style:{flexDirection:'column',marginBottom:40},__source:{fileName:_jsxFileName,lineNumber:51}},_react.default.createElement(_.ProgressCircle,{value:state.circleValue3,size:48,thickness:4,color:\"#2b80ff\",unfilledColor:\"#f2f2f2\",animationMethod:\"timing\",animationConfig:{speed:1},shouldAnimateFirstValue:true,determinate:true,__source:{fileName:_jsxFileName,lineNumber:52}}),_react.default.createElement(_.Button,{type:\"outlined\",style:{marginTop:20},text:'Change Value',onPress:function onPress(){store.set({circleValue3:Math.floor(Math.random()*Math.floor(100))});},__source:{fileName:_jsxFileName,lineNumber:64}}));}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',marginBottom:40},__source:{fileName:_jsxFileName,lineNumber:77}},_react.default.createElement(_.ProgressCircle,{value:25,size:48,thickness:4,color:\"#E91E63\",animationMethod:\"timing\",animationConfig:{duration:1000},shouldAnimateFirstValue:true,determinate:true,__source:{fileName:_jsxFileName,lineNumber:78}}),_react.default.createElement(_.ProgressCircle,{value:50,size:48,thickness:4,color:\"#E91E63\",animationMethod:\"timing\",animationConfig:{duration:1000},shouldAnimateFirstValue:true,determinate:true,__source:{fileName:_jsxFileName,lineNumber:88}}),_react.default.createElement(_.ProgressCircle,{value:75,size:48,thickness:4,color:\"#E91E63\",animationMethod:\"timing\",animationConfig:{duration:1000},shouldAnimateFirstValue:true,determinate:true,__source:{fileName:_jsxFileName,lineNumber:98}}),_react.default.createElement(_.ProgressCircle,{value:100,size:48,thickness:4,color:\"#E91E63\",animationMethod:\"timing\",animationConfig:{duration:1000},shouldAnimateFirstValue:true,determinate:true,__source:{fileName:_jsxFileName,lineNumber:108}})),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row'},__source:{fileName:_jsxFileName,lineNumber:119}},_react.default.createElement(_.ProgressCircle,{value:25,size:48,thickness:8,color:\"#009688\",animationMethod:\"timing\",animationConfig:{duration:1000},shouldAnimateFirstValue:true,determinate:true,__source:{fileName:_jsxFileName,lineNumber:120}}),_react.default.createElement(_.ProgressCircle,{value:50,size:48,thickness:8,color:\"#009688\",animationMethod:\"timing\",animationConfig:{duration:1000},shouldAnimateFirstValue:true,determinate:true,__source:{fileName:_jsxFileName,lineNumber:130}}),_react.default.createElement(_.ProgressCircle,{value:75,size:48,thickness:8,color:\"#009688\",animationMethod:\"timing\",animationConfig:{duration:1000},shouldAnimateFirstValue:true,determinate:true,__source:{fileName:_jsxFileName,lineNumber:140}}),_react.default.createElement(_.ProgressCircle,{value:100,size:48,thickness:8,color:\"#009688\",animationMethod:\"timing\",animationConfig:{duration:1000},shouldAnimateFirstValue:true,determinate:true,__source:{fileName:_jsxFileName,lineNumber:150}})));});exports.default=_default;"
  },
  {
    "path": "dist/Components/Progress/ProgressCircle/ProgressCircle.styles.js",
    "content": ""
  },
  {
    "path": "dist/Components/Progress/ProgressCircle/ProgressCircleDeterminate.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf3=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Progress/ProgressCircle/ProgressCircleDeterminate.js\";function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}var ProgressCircleDeterminate=function(_Component){(0,_inherits2.default)(ProgressCircleDeterminate,_Component);function ProgressCircleDeterminate(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,ProgressCircleDeterminate);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(ProgressCircleDeterminate)).call.apply(_getPrototypeOf2,[this].concat(args)));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{animatedValue:_this.props.value.constructor.name==='AnimatedValue'?null:new _reactNative.Animated.Value(_this.props.shouldAnimateFirstValue?0:_this.props.value)});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"ANIMATION_TYPES\",['timing','spring','bounce','decay']);(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"handleChange\",function(){var value=arguments.length>0&&arguments[0]!==undefined?arguments[0]:_this.props.value;_this.props.onChange();if(value.constructor.name==='AnimatedValue'){return;}if(_this.getAnimationMethod()){_this.animateChange(value);}else{_this.state.animatedValue.setValue(value);}});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"animateChange\",function(value){return _reactNative.Animated[_this.getAnimationMethod()](_this.state.animatedValue,_objectSpread({toValue:value/100,useNativeDriver:true},_this.props.animationConfig)).start(_this.props.onChangeAnimationEnd);});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"renderHalfCircle\",function(){var _ref=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{},_ref$isFlipped=_ref.isFlipped,isFlipped=_ref$isFlipped===void 0?false:_ref$isFlipped;var _this$props=_this.props,size=_this$props.size,color=_this$props.color,thickness=_this$props.thickness,value=_this$props.value;var valueToInterpolate=value.constructor.name==='AnimatedValue'?value:_this.state.animatedValue;return _react.default.createElement(_reactNative.View,{pointerEvents:\"none\",style:[_this.getHalfCircleContainerStyle(),{transform:[{scaleX:isFlipped?-1:1}]}],__source:{fileName:_jsxFileName,lineNumber:114}},_react.default.createElement(_reactNative.Animated.View,{useNativeDriver:true,style:{width:size,height:size,transform:[{rotate:valueToInterpolate.interpolate({inputRange:isFlipped?[0,0.5]:[0.5,1],outputRange:isFlipped?['180deg','0deg']:['-180deg','0deg'],extrapolate:'clamp'})}]},__source:{fileName:_jsxFileName,lineNumber:120}},_react.default.createElement(_reactNative.View,{style:_this.getHalfCircleContainerStyle(),__source:{fileName:_jsxFileName,lineNumber:137}},_react.default.createElement(_reactNative.View,{style:[_this.getFullCircleStyle(),{borderWidth:thickness,borderColor:color}],__source:{fileName:_jsxFileName,lineNumber:138}}))));});return _this;}(0,_createClass2.default)(ProgressCircleDeterminate,[{key:\"componentDidMount\",value:function componentDidMount(){var _this$props2=this.props,shouldAnimateFirstValue=_this$props2.shouldAnimateFirstValue,value=_this$props2.value;if(shouldAnimateFirstValue)this.animateChange(value);}},{key:\"componentDidUpdate\",value:function componentDidUpdate(prevProps){var value=this.props.value;if(value!=prevProps.value){this.handleChange(value);}}},{key:\"getFullCircleStyle\",value:function getFullCircleStyle(){return{width:this.props.size,height:this.props.size,borderRadius:this.props.size/2};}},{key:\"getHalfCircleContainerStyle\",value:function getHalfCircleContainerStyle(){return{width:this.props.size/2,height:this.props.size,overflow:'hidden'};}},{key:\"getAnimationMethod\",value:function getAnimationMethod(){return this.ANIMATION_TYPES.includes(this.props.animationMethod)?this.props.animationMethod:null;}},{key:\"render\",value:function render(){var _this$props3=this.props,thickness=_this$props3.thickness,unfilledColor=_this$props3.unfilledColor,children=_this$props3.children,style=_this$props3.style,noTrackColor=_this$props3.noTrackColor;return _react.default.createElement(_reactNative.View,{style:[this.getFullCircleStyle(),styles.mainContainer,style],__source:{fileName:_jsxFileName,lineNumber:160}},_react.default.createElement(_reactNative.View,{pointerEvents:\"box-none\",style:[this.getFullCircleStyle(),{borderWidth:noTrackColor?0:thickness,borderColor:unfilledColor},styles.innerCircleContainer],__source:{fileName:_jsxFileName,lineNumber:161}},children),this.renderHalfCircle(),this.renderHalfCircle({isFlipped:true}));}}]);return ProgressCircleDeterminate;}(_react.Component);(0,_defineProperty2.default)(ProgressCircleDeterminate,\"propTypes\",{value:_propTypes.default.number,size:_propTypes.default.number,thickness:_propTypes.default.number,color:_propTypes.default.string,unfilledColor:_propTypes.default.string,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),children:_propTypes.default.node,animationMethod:_propTypes.default.string,animationConfig:_propTypes.default.object,shouldAnimateFirstValue:_propTypes.default.bool,onChange:_propTypes.default.func,onChangeAnimationEnd:_propTypes.default.func,noTrackColor:_propTypes.default.bool});(0,_defineProperty2.default)(ProgressCircleDeterminate,\"defaultProps\",{value:0,size:64,thickness:4,color:'#4c90ff',unfilledColor:'transparent',noTrackColor:true,style:{},children:null,animationMethod:null,animationConfig:{duration:200},shouldAnimateFirstValue:false,onChange:function onChange(){},onChangeAnimationEnd:function onChangeAnimationEnd(){}});var styles=_reactNative.StyleSheet.create({mainContainer:{flexDirection:'row',borderColor:'transparent',backgroundColor:'transparent'},innerCircleContainer:{position:'absolute',justifyContent:'center',alignItems:'center'}});var _default=(0,_withTheme.default)(ProgressCircleDeterminate);exports.default=_default;"
  },
  {
    "path": "dist/Components/Progress/ProgressCircle/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _ProgressCircle.default;}});var _ProgressCircle=_interopRequireDefault(require(\"./ProgressCircle\"));"
  },
  {
    "path": "dist/Components/RadioButton/RadioButton.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _Ripple=_interopRequireDefault(require(\"../Ripple/Ripple\"));var _RadioButton=_interopRequireDefault(require(\"./RadioButton.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/RadioButton/RadioButton.js\";var RadioButton=function(_Component){(0,_inherits2.default)(RadioButton,_Component);function RadioButton(){(0,_classCallCheck2.default)(this,RadioButton);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(RadioButton).apply(this,arguments));}(0,_createClass2.default)(RadioButton,[{key:\"_renderLabel\",value:function _renderLabel(){var _this$props=this.props,label=_this$props.label,labelStyle=_this$props.labelStyle,onPress=_this$props.onPress;if(!label)return null;return _react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:onPress,__source:{fileName:_jsxFileName,lineNumber:35}},_react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:36}},_react.default.createElement(_reactNative.Text,{style:[_RadioButton.default.label,labelStyle],__source:{fileName:_jsxFileName,lineNumber:37}},label)));}},{key:\"render\",value:function render(){var _this$props2=this.props,checked=_this$props2.checked,disabled=_this$props2.disabled,onPress=_this$props2.onPress,rippleColor=_this$props2.rippleColor,radioButtonColor=_this$props2.radioButtonColor,uncheckedBorderColor=_this$props2.uncheckedBorderColor,style=_this$props2.style,labelPos=_this$props2.labelPos,error=_this$props2.error,theme=_this$props2.theme,testID=_this$props2.testID;var rippleColorApplied=rippleColor?rippleColor:'rgba(0,0,0,.8)';var radioButtonColorApplied=radioButtonColor?radioButtonColor:'rgba(33, 150, 243, 1)';var uncheckedBorderColorApplied=uncheckedBorderColor?uncheckedBorderColor:'rgba(0,0,0,.5)';if(error){radioButtonColorApplied=theme.error.main;uncheckedBorderColorApplied=theme.error.main;}if(disabled){radioButtonColorApplied='rgba(0,0,0,.5)';}return _react.default.createElement(_reactNative.View,{style:[_RadioButton.default.container,style],testID:testID,__source:{fileName:_jsxFileName,lineNumber:75}},labelPos==='left'?this._renderLabel():null,_react.default.createElement(_Ripple.default,{rippleColor:rippleColorApplied,rippleContainerBorderRadius:18,onPress:onPress,style:[_RadioButton.default.ripple],rippleCentered:true,disabled:disabled,__source:{fileName:_jsxFileName,lineNumber:77}},_react.default.createElement(_reactNative.Animated.View,{useNativeDriver:true,style:[_RadioButton.default.radio,{borderColor:checked?radioButtonColorApplied:uncheckedBorderColorApplied}],__source:{fileName:_jsxFileName,lineNumber:84}},checked?_react.default.createElement(_reactNative.Animated.View,{useNativeDriver:true,style:[_RadioButton.default.radioDot,{backgroundColor:radioButtonColorApplied}],__source:{fileName:_jsxFileName,lineNumber:95}}):null)),labelPos==='right'?this._renderLabel():null);}}]);return RadioButton;}(_react.Component);(0,_defineProperty2.default)(RadioButton,\"propTypes\",{checked:_propTypes.default.bool,disabled:_propTypes.default.bool,onPress:_propTypes.default.func,rippleColor:_propTypes.default.string,radioButtonColor:_propTypes.default.string,uncheckedBorderColor:_propTypes.default.string,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),label:_propTypes.default.string,labelStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),labelPos:_propTypes.default.string,error:_propTypes.default.bool,theme:_propTypes.default.object,testID:_propTypes.default.string});(0,_defineProperty2.default)(RadioButton,\"defaultProps\",{labelPos:'right'});var _default=(0,_withTheme.default)(RadioButton);exports.default=_default;"
  },
  {
    "path": "dist/Components/RadioButton/RadioButton.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../../\");var _storybookState=require(\"@sambego/storybook-state\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/RadioButton/RadioButton.stories.js\";var store=new _storybookState.Store({checked:1,checked1:2,checked2:3,checked3:1,checked4:1});var _default=(0,_storiesOf.storiesOf)('Components|Radio Button',module).addParameters({jest:['RadioButton']}).add('simple',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:21}},_react.default.createElement(_Header.default,{title:'Radio Button',__source:{fileName:_jsxFileName,lineNumber:22}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:23}},function(state){return _react.default.createElement(_reactNative.View,{style:{flexDirection:'row',flexWrap:'wrap'},__source:{fileName:_jsxFileName,lineNumber:25}},_react.default.createElement(_.RadioButton,{checked:state.checked==1,onPress:function onPress(){return store.set({checked:1});},__source:{fileName:_jsxFileName,lineNumber:26}}),_react.default.createElement(_.RadioButton,{checked:state.checked==2,onPress:function onPress(){return store.set({checked:2});},__source:{fileName:_jsxFileName,lineNumber:30}}),_react.default.createElement(_.RadioButton,{checked:state.checked==3,onPress:function onPress(){return store.set({checked:3});},__source:{fileName:_jsxFileName,lineNumber:34}}));}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:41}},function(state){return _react.default.createElement(_reactNative.View,{style:{flexDirection:'row',flexWrap:'wrap'},__source:{fileName:_jsxFileName,lineNumber:43}},_react.default.createElement(_.RadioButton,{checked:state.checked1==1,radioButtonColor:'#E91E63',rippleColor:'#E91E63',onPress:function onPress(){return store.set({checked1:1});},__source:{fileName:_jsxFileName,lineNumber:44}}),_react.default.createElement(_.RadioButton,{checked:state.checked1==2,radioButtonColor:'#E91E63',rippleColor:'#E91E63',onPress:function onPress(){return store.set({checked1:2});},__source:{fileName:_jsxFileName,lineNumber:50}}),_react.default.createElement(_.RadioButton,{checked:state.checked1==3,radioButtonColor:'#E91E63',rippleColor:'#E91E63',onPress:function onPress(){return store.set({checked1:3});},__source:{fileName:_jsxFileName,lineNumber:56}}));}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:65}},function(state){return _react.default.createElement(_reactNative.View,{style:{flexDirection:'row',flexWrap:'wrap'},__source:{fileName:_jsxFileName,lineNumber:67}},_react.default.createElement(_.RadioButton,{checked:state.checked2==1,onPress:function onPress(){return store.set({checked2:1});},uncheckedBorderColor:'#009688',radioButtonColor:'#009688',rippleColor:'#009688',__source:{fileName:_jsxFileName,lineNumber:68}}),_react.default.createElement(_.RadioButton,{checked:state.checked2==2,onPress:function onPress(){return store.set({checked2:2});},uncheckedBorderColor:'#009688',radioButtonColor:'#009688',rippleColor:'#009688',__source:{fileName:_jsxFileName,lineNumber:75}}),_react.default.createElement(_.RadioButton,{checked:state.checked2==3,onPress:function onPress(){return store.set({checked2:3});},uncheckedBorderColor:'#009688',radioButtonColor:'#009688',rippleColor:'#009688',__source:{fileName:_jsxFileName,lineNumber:82}}));}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:92}},function(state){return _react.default.createElement(_reactNative.View,{style:{flexDirection:'row',flexWrap:'wrap'},__source:{fileName:_jsxFileName,lineNumber:94}},_react.default.createElement(_.RadioButton,{checked:state.checked3==1,onPress:function onPress(){return store.set({checked2:1});},disabled:true,__source:{fileName:_jsxFileName,lineNumber:95}}),_react.default.createElement(_.RadioButton,{checked:state.checked3==1,onPress:function onPress(){return store.set({checked2:2});},disabled:true,__source:{fileName:_jsxFileName,lineNumber:100}}),_react.default.createElement(_.RadioButton,{checked:state.checked3==1,onPress:function onPress(){return store.set({checked2:3});},disabled:true,__source:{fileName:_jsxFileName,lineNumber:105}}));}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:113}},function(state){return _react.default.createElement(_reactNative.View,{style:{flexDirection:'row',flexWrap:'wrap'},__source:{fileName:_jsxFileName,lineNumber:115}},_react.default.createElement(_.RadioButton,{checked:state.checked4==1,onPress:function onPress(){return store.set({checked4:1});},error:true,__source:{fileName:_jsxFileName,lineNumber:116}}),_react.default.createElement(_.RadioButton,{checked:state.checked4==2,onPress:function onPress(){return store.set({checked4:2});},error:true,__source:{fileName:_jsxFileName,lineNumber:121}}),_react.default.createElement(_.RadioButton,{checked:state.checked4==3,onPress:function onPress(){return store.set({checked4:3});},error:true,__source:{fileName:_jsxFileName,lineNumber:126}}));}));}).add('label',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:137}},_react.default.createElement(_Header.default,{title:'Radio Button',__source:{fileName:_jsxFileName,lineNumber:138}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:139}},function(state){return _react.default.createElement(_reactNative.View,{style:{flexDirection:'column',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:141}},_react.default.createElement(_.RadioButton,{checked:state.checked==1,onPress:function onPress(){return store.set({checked:1});},label:\"Home\",__source:{fileName:_jsxFileName,lineNumber:142}}),_react.default.createElement(_.RadioButton,{checked:state.checked==2,onPress:function onPress(){return store.set({checked:2});},label:\"Work\",__source:{fileName:_jsxFileName,lineNumber:147}}),_react.default.createElement(_.RadioButton,{checked:state.checked==3,onPress:function onPress(){return store.set({checked:3});},label:\"Anywhere\",__source:{fileName:_jsxFileName,lineNumber:152}}));}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:160}},function(state){return _react.default.createElement(_reactNative.View,{style:{flexDirection:'row',flexWrap:'wrap',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:162}},_react.default.createElement(_.RadioButton,{checked:state.checked1==1,radioButtonColor:'#E91E63',rippleColor:'#E91E63',onPress:function onPress(){return store.set({checked1:1});},label:\"Beach\",__source:{fileName:_jsxFileName,lineNumber:168}}),_react.default.createElement(_.RadioButton,{checked:state.checked1==2,radioButtonColor:'#E91E63',rippleColor:'#E91E63',onPress:function onPress(){return store.set({checked1:2});},label:\"Mountain\",__source:{fileName:_jsxFileName,lineNumber:175}}),_react.default.createElement(_.RadioButton,{checked:state.checked1==3,radioButtonColor:'#E91E63',rippleColor:'#E91E63',onPress:function onPress(){return store.set({checked1:3});},label:\"Woods\",__source:{fileName:_jsxFileName,lineNumber:182}}));}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:192}},function(state){return _react.default.createElement(_reactNative.View,{style:{flexDirection:'row',marginBottom:20},__source:{fileName:_jsxFileName,lineNumber:194}},_react.default.createElement(_.RadioButton,{checked:state.checked2==1,onPress:function onPress(){return store.set({checked2:1});},uncheckedBorderColor:'#009688',radioButtonColor:'#009688',rippleColor:'#009688',label:\"Rocky\",labelPos:\"left\",__source:{fileName:_jsxFileName,lineNumber:195}}),_react.default.createElement(_.RadioButton,{checked:state.checked2==2,onPress:function onPress(){return store.set({checked2:2});},uncheckedBorderColor:'#009688',radioButtonColor:'#009688',rippleColor:'#009688',label:\"Mountain\",labelPos:\"left\",__source:{fileName:_jsxFileName,lineNumber:204}}),_react.default.createElement(_.RadioButton,{checked:state.checked2==3,onPress:function onPress(){return store.set({checked2:3});},uncheckedBorderColor:'#009688',radioButtonColor:'#009688',rippleColor:'#009688',label:\"High\",labelPos:\"left\",__source:{fileName:_jsxFileName,lineNumber:213}}));}));});exports.default=_default;"
  },
  {
    "path": "dist/Components/RadioButton/RadioButton.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({container:{flexDirection:'row',alignItems:'center'},ripple:{borderRadius:18,alignItems:'center',justifyContent:'center',height:40,width:40},radio:{height:20,width:20,borderRadius:24,borderWidth:2,margin:2,alignItems:'center',justifyContent:'center'},radioDot:{height:10,width:10,borderRadius:5}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/RadioButton/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _RadioButton.default;}});var _RadioButton=_interopRequireDefault(require(\"./RadioButton\"));"
  },
  {
    "path": "dist/Components/Ripple/Ripple.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _objectWithoutProperties2=_interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutProperties\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _react=_interopRequireWildcard(require(\"react\"));var _reactNative=require(\"react-native\");var _Ripple=_interopRequireWildcard(require(\"./Ripple.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Ripple/Ripple.js\";function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}var Ripple=function(_PureComponent){(0,_inherits2.default)(Ripple,_PureComponent);function Ripple(props){var _this;(0,_classCallCheck2.default)(this,Ripple);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(Ripple).call(this,props));_this.onLayout=_this.onLayout.bind((0,_assertThisInitialized2.default)(_this));_this.onPress=_this.onPress.bind((0,_assertThisInitialized2.default)(_this));_this.onPressIn=_this.onPressIn.bind((0,_assertThisInitialized2.default)(_this));_this.onPressOut=_this.onPressOut.bind((0,_assertThisInitialized2.default)(_this));_this.onLongPress=_this.onLongPress.bind((0,_assertThisInitialized2.default)(_this));_this.onAnimationEnd=_this.onAnimationEnd.bind((0,_assertThisInitialized2.default)(_this));_this.renderRipple=_this.renderRipple.bind((0,_assertThisInitialized2.default)(_this));_this.unique=0;_this.mounted=false;_this.rippleFades=_this.props.rippleFades&&!_this.props.displayUntilPressOut;_this.isPressingIn=false;_this.animationWaitingForEnd=false;_this.state={width:0,height:0,ripples:[]};return _this;}(0,_createClass2.default)(Ripple,[{key:\"componentDidMount\",value:function componentDidMount(){this.mounted=true;}},{key:\"componentWillUnmount\",value:function componentWillUnmount(){this.mounted=false;}},{key:\"onLayout\",value:function onLayout(event){var _event$nativeEvent$la=event.nativeEvent.layout,width=_event$nativeEvent$la.width,height=_event$nativeEvent$la.height;var onLayout=this.props.onLayout;if('function'===typeof onLayout){onLayout(event);}this.setState({width:width,height:height});}},{key:\"onPress\",value:function onPress(event){var onPress=this.props.onPress;if('function'===typeof onPress){requestAnimationFrame(function(){return onPress(event);});}}},{key:\"onLongPress\",value:function onLongPress(event){var _this$props=this.props,onLongPress=_this$props.onLongPress,disabled=_this$props.disabled;if(disabled)return;if('function'===typeof onLongPress){requestAnimationFrame(function(){return onLongPress(event);});}this.startRipple(event);}},{key:\"onPressIn\",value:function onPressIn(event){var _this$props2=this.props,onPressIn=_this$props2.onPressIn,rippleSequential=_this$props2.rippleSequential,disabled=_this$props2.disabled;var ripples=this.state.ripples;if(disabled)return;this.isPressingIn=true;if(!rippleSequential||!ripples.length){if(onPressIn){onPressIn(event);}this.startRipple(event);}}},{key:\"onPressOut\",value:function onPressOut(event){var onPressOut=this.props.onPressOut;if('function'===typeof onPressOut){onPressOut(event);}this.signalAnimationEnd();this.isPressingIn=false;}},{key:\"onAnimationEnd\",value:function onAnimationEnd(event){if(this.props.displayUntilPressOut&&this.isPressingIn){this.animationWaitingForEnd=true;return;}if(this.props.onAnimationEnd){this.props.onAnimationEnd(event);}this.forceAnimationEnd();}},{key:\"signalAnimationEnd\",value:function signalAnimationEnd(){if(this.animationWaitingForEnd){this.forceAnimationEnd();}}},{key:\"forceAnimationEnd\",value:function forceAnimationEnd(){if(this.mounted){this.setState(function(_ref){var ripples=_ref.ripples;return{ripples:ripples.slice(1)};});}this.animationWaitingForEnd=false;}},{key:\"webGetPositionInElement\",value:function webGetPositionInElement(e){var rect=e.nativeEvent.target.getBoundingClientRect();var x=e.nativeEvent.pageX-rect.left;var y=e.nativeEvent.changedTouches[0].clientY-rect.top;return{x:x,y:y};}},{key:\"startRipple\",value:function startRipple(event){var _this$state=this.state,width=_this$state.width,height=_this$state.height;var _this$props3=this.props,rippleDuration=_this$props3.rippleDuration,rippleCentered=_this$props3.rippleCentered,rippleSize=_this$props3.rippleSize,onRippleAnimation=_this$props3.onRippleAnimation;var w2=0.5*width;var h2=0.5*height;var _event$nativeEvent=event.nativeEvent,locationX=_event$nativeEvent.locationX,locationY=_event$nativeEvent.locationY;if(_reactNative.Platform.OS==='web'){locationX=this.webGetPositionInElement(event).x;locationY=this.webGetPositionInElement(event).y;}if(rippleCentered){locationX=w2;locationY=h2;}var offsetX=Math.abs(w2-locationX);var offsetY=Math.abs(h2-locationY);var R=rippleSize>0?0.5*rippleSize:Math.sqrt(Math.pow(w2+offsetX,2)+Math.pow(h2+offsetY,2));var ripple={unique:this.unique++,progress:new _reactNative.Animated.Value(0),locationX:locationX,locationY:locationY,R:R};var animation=_reactNative.Animated.timing(ripple.progress,{toValue:1,easing:_reactNative.Easing.out(_reactNative.Easing.ease),duration:rippleDuration,useNativeDriver:true});onRippleAnimation(animation,this.onAnimationEnd);this.setState(function(_ref2){var ripples=_ref2.ripples;return{ripples:ripples.concat(ripple)};});}},{key:\"renderRipple\",value:function renderRipple(_ref3){var unique=_ref3.unique,progress=_ref3.progress,locationX=_ref3.locationX,locationY=_ref3.locationY,R=_ref3.R;var _this$props4=this.props,rippleColor=_this$props4.rippleColor,rippleOpacity=_this$props4.rippleOpacity;var rippleFades=this.rippleFades;var rippleStyle={top:locationY-_Ripple.radius,left:locationX-_Ripple.radius,backgroundColor:rippleColor,transform:[{scale:progress.interpolate({inputRange:[0,1],outputRange:[0.5/_Ripple.radius,R/_Ripple.radius]})}],opacity:rippleFades?progress.interpolate({inputRange:[0,1],outputRange:[rippleOpacity,0]}):rippleOpacity};return _react.default.createElement(_reactNative.Animated.View,{style:[_Ripple.default.ripple,rippleStyle],key:unique,useNativeDriver:true,__source:{fileName:_jsxFileName,lineNumber:251}});}},{key:\"render\",value:function render(){var ripples=this.state.ripples;var onPress=this.onPress,onPressIn=this.onPressIn,onPressOut=this.onPressOut,onLongPress=this.onLongPress,onLayout=this.onLayout;var _this$props5=this.props,delayLongPress=_this$props5.delayLongPress,delayPressIn=_this$props5.delayPressIn,delayPressOut=_this$props5.delayPressOut,disabled=_this$props5.disabled,hitSlop=_this$props5.hitSlop,pressRetentionOffset=_this$props5.pressRetentionOffset,children=_this$props5.children,rippleContainerBorderRadius=_this$props5.rippleContainerBorderRadius,testID=_this$props5.testID,nativeID=_this$props5.nativeID,accessible=_this$props5.accessible,accessibilityLabel=_this$props5.accessibilityLabel,panResponder=_this$props5.panResponder,props=(0,_objectWithoutProperties2.default)(_this$props5,[\"delayLongPress\",\"delayPressIn\",\"delayPressOut\",\"disabled\",\"hitSlop\",\"pressRetentionOffset\",\"children\",\"rippleContainerBorderRadius\",\"testID\",\"nativeID\",\"accessible\",\"accessibilityLabel\",\"panResponder\"]);var touchableProps={delayLongPress:delayLongPress,delayPressIn:delayPressIn,delayPressOut:delayPressOut,disabled:disabled,hitSlop:hitSlop,pressRetentionOffset:pressRetentionOffset,onPress:onPress,onPressIn:onPressIn,testID:testID,nativeID:nativeID,accessible:accessible,accessibilityLabel:accessibilityLabel,onPressOut:onPressOut,onLongPress:props.onLongPress?onLongPress:undefined,onLayout:onLayout};var containerStyle={borderRadius:rippleContainerBorderRadius};return _react.default.createElement(_reactNative.TouchableWithoutFeedback,(0,_extends2.default)({},touchableProps,panResponder,{testID:testID,__source:{fileName:_jsxFileName,lineNumber:302}}),_react.default.createElement(_reactNative.Animated.View,(0,_extends2.default)({useNativeDriver:true},props,{__source:{fileName:_jsxFileName,lineNumber:306}}),children,_react.default.createElement(_reactNative.View,{style:[_Ripple.default.container,containerStyle],pointerEvents:\"none\",__source:{fileName:_jsxFileName,lineNumber:308}},ripples.map(this.renderRipple))));}}]);return Ripple;}(_react.PureComponent);exports.default=Ripple;(0,_defineProperty2.default)(Ripple,\"defaultProps\",_objectSpread({},_reactNative.TouchableWithoutFeedback.defaultProps,{rippleColor:'rgba(0, 0, 0, .87)',rippleOpacity:0.3,rippleDuration:400,rippleSize:0,rippleContainerBorderRadius:0,rippleCentered:false,rippleSequential:false,rippleFades:true,disabled:false,displayUntilPressOut:true,onRippleAnimation:function onRippleAnimation(animation,callback){return animation.start(callback);},testID:'mb-ripple'}));(0,_defineProperty2.default)(Ripple,\"propTypes\",_objectSpread({},_reactNative.Animated.View.propTypes,{},_reactNative.TouchableWithoutFeedback.propTypes,{rippleColor:_propTypes.default.string,rippleOpacity:_propTypes.default.number,rippleDuration:_propTypes.default.number,rippleSize:_propTypes.default.number,rippleContainerBorderRadius:_propTypes.default.number,rippleCentered:_propTypes.default.bool,rippleSequential:_propTypes.default.bool,rippleFades:_propTypes.default.bool,disabled:_propTypes.default.bool,displayUntilPressOut:_propTypes.default.bool,onRippleAnimation:_propTypes.default.func,testID:_propTypes.default.string}));"
  },
  {
    "path": "dist/Components/Ripple/Ripple.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../../\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Ripple/Ripple.stories.js\";var _default=(0,_storiesOf.storiesOf)('Components|Ripple',module).addParameters({jest:['Ripple']}).add('from click',function(){return _react.default.createElement(_Container.default,{scroll:true,__source:{fileName:_jsxFileName,lineNumber:13}},_react.default.createElement(_Header.default,{title:'Ripple from where it was clicked',__source:{fileName:_jsxFileName,lineNumber:14}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',flexWrap:'wrap'},__source:{fileName:_jsxFileName,lineNumber:15}},_react.default.createElement(_.Ripple,{rippleColor:'blue',style:{width:180,height:250,justifyContent:'center',alignItems:'center',borderWidth:1,borderColor:'black',borderRadius:5},__source:{fileName:_jsxFileName,lineNumber:16}},_react.default.createElement(_reactNative.Text,{__source:{fileName:_jsxFileName,lineNumber:27}},\"Click Me\")),_react.default.createElement(_.Ripple,{style:{width:200,height:200,marginLeft:40},__source:{fileName:_jsxFileName,lineNumber:29}},_react.default.createElement(_.Card,{shadow:4,style:{width:200,height:200,justifyContent:'center',alignItems:'center'},__source:{fileName:_jsxFileName,lineNumber:30}},_react.default.createElement(_reactNative.Text,{__source:{fileName:_jsxFileName,lineNumber:38}},\"Click Me\")))),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',flexWrap:'wrap',marginTop:40},__source:{fileName:_jsxFileName,lineNumber:42}},_react.default.createElement(_.Ripple,{rippleColor:'#E91E63',rippleContainerBorderRadius:100,style:{width:100,height:100,justifyContent:'center',alignItems:'center'},__source:{fileName:_jsxFileName,lineNumber:43}},_react.default.createElement(_.Avatar,{type:\"icon\",content:\"add\",size:48,color:'#E91E63',contentColor:'white',__source:{fileName:_jsxFileName,lineNumber:52}})),_react.default.createElement(_.Ripple,{rippleColor:'#9C27B0',style:{width:300,height:200,marginLeft:40,justifyContent:'center',alignItems:'center'},rippleContainerBorderRadius:100,__source:{fileName:_jsxFileName,lineNumber:60}},_react.default.createElement(_reactNative.Text,{__source:{fileName:_jsxFileName,lineNumber:70}},\"Massive Button\"))));}).add('from center',function(){return _react.default.createElement(_Container.default,{scroll:true,__source:{fileName:_jsxFileName,lineNumber:76}},_react.default.createElement(_Header.default,{title:'Ripple form center',__source:{fileName:_jsxFileName,lineNumber:77}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',flexWrap:'wrap'},__source:{fileName:_jsxFileName,lineNumber:78}},_react.default.createElement(_.Ripple,{rippleColor:'blue',rippleCentered:true,style:{width:180,height:250,justifyContent:'center',alignItems:'center',borderWidth:1,borderColor:'black',borderRadius:5},__source:{fileName:_jsxFileName,lineNumber:79}},_react.default.createElement(_reactNative.Text,{__source:{fileName:_jsxFileName,lineNumber:91}},\"Click Me\")),_react.default.createElement(_.Ripple,{rippleCentered:true,style:{width:200,height:200,marginLeft:40},__source:{fileName:_jsxFileName,lineNumber:93}},_react.default.createElement(_.Card,{shadow:4,style:{width:200,height:200,justifyContent:'center',alignItems:'center'},__source:{fileName:_jsxFileName,lineNumber:96}},_react.default.createElement(_reactNative.Text,{__source:{fileName:_jsxFileName,lineNumber:104}},\"Click Me\")))));}).add('sequential',function(){return _react.default.createElement(_Container.default,{scroll:true,__source:{fileName:_jsxFileName,lineNumber:111}},_react.default.createElement(_Header.default,{title:'Sequential Ripple',__source:{fileName:_jsxFileName,lineNumber:112}}),_react.default.createElement(_reactNative.Text,{style:{marginBottom:40},__source:{fileName:_jsxFileName,lineNumber:113}},\"Try clicking quickly versus other demos\"),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',flexWrap:'wrap'},__source:{fileName:_jsxFileName,lineNumber:116}},_react.default.createElement(_.Ripple,{rippleColor:'blue',rippleSequential:true,style:{width:180,height:250,justifyContent:'center',alignItems:'center',borderWidth:1,borderColor:'black',borderRadius:5},__source:{fileName:_jsxFileName,lineNumber:117}},_react.default.createElement(_reactNative.Text,{__source:{fileName:_jsxFileName,lineNumber:129}},\"Click Me\")),_react.default.createElement(_.Ripple,{rippleCentered:true,rippleSequential:true,style:{width:200,height:200,marginLeft:40},__source:{fileName:_jsxFileName,lineNumber:131}},_react.default.createElement(_.Card,{shadow:4,style:{width:200,height:200,justifyContent:'center',alignItems:'center'},__source:{fileName:_jsxFileName,lineNumber:135}},_react.default.createElement(_reactNative.Text,{__source:{fileName:_jsxFileName,lineNumber:143}},\"Click Me\")))));}).add('speed',function(){return _react.default.createElement(_Container.default,{scroll:true,__source:{fileName:_jsxFileName,lineNumber:150}},_react.default.createElement(_Header.default,{title:'Speed Ripple',__source:{fileName:_jsxFileName,lineNumber:151}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',flexWrap:'wrap'},__source:{fileName:_jsxFileName,lineNumber:153}},_react.default.createElement(_.Ripple,{rippleColor:'blue',rippleDuration:250,style:{width:180,height:250,justifyContent:'center',alignItems:'center',borderWidth:1,borderColor:'black',borderRadius:5},__source:{fileName:_jsxFileName,lineNumber:154}},_react.default.createElement(_reactNative.Text,{__source:{fileName:_jsxFileName,lineNumber:166}},\"Really fast\")),_react.default.createElement(_.Ripple,{rippleCentered:true,rippleDuration:1000,style:{width:200,height:200,marginLeft:40},__source:{fileName:_jsxFileName,lineNumber:168}},_react.default.createElement(_.Card,{shadow:4,style:{width:200,height:200,justifyContent:'center',alignItems:'center'},__source:{fileName:_jsxFileName,lineNumber:172}},_react.default.createElement(_reactNative.Text,{__source:{fileName:_jsxFileName,lineNumber:180}},\"Really Slow\")))));});exports.default=_default;"
  },
  {
    "path": "dist/Components/Ripple/Ripple.styles.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=exports.radius=void 0;var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _reactNative=require(\"react-native\");function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}var radius=10;exports.radius=radius;var styles=_reactNative.StyleSheet.create({container:_objectSpread({},_reactNative.StyleSheet.absoluteFillObject,{backgroundColor:'transparent',overflow:'hidden',zIndex:10}),ripple:{width:radius*2,height:radius*2,borderRadius:radius,overflow:'hidden',position:'absolute',zIndex:10}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Ripple/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _Ripple.default;}});var _Ripple=_interopRequireDefault(require(\"./Ripple\"));"
  },
  {
    "path": "dist/Components/Select/Select.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf3=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _Menu=_interopRequireDefault(require(\"../Menu/Menu.js\"));var _MenuItem=_interopRequireDefault(require(\"../Menu/MenuItem/MenuItem.js\"));var _Icon=_interopRequireDefault(require(\"../Icon/Icon.js\"));var _TextField=_interopRequireDefault(require(\"../TextField/TextField.js\"));var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _Select=_interopRequireDefault(require(\"./Select.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Select/Select.js\";var _Dimensions$get=_reactNative.Dimensions.get('window'),height=_Dimensions$get.height;var Select=function(_Component){(0,_inherits2.default)(Select,_Component);function Select(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,Select);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(Select)).call.apply(_getPrototypeOf2,[this].concat(args)));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{visible:false});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"onSelect\",function(item){_this.props.onSelect(item);_this.hideMenu();});return _this;}(0,_createClass2.default)(Select,[{key:\"showMenu\",value:function showMenu(){this.setState({visible:true});}},{key:\"hideMenu\",value:function hideMenu(){this.setState({visible:false});}},{key:\"render\",value:function render(){var _this2=this;var _this$props=this.props,buttonStyle=_this$props.buttonStyle,label=_this$props.label,selectedItem=_this$props.selectedItem,menuItems=_this$props.menuItems,textFieldProps=_this$props.textFieldProps,menuProps=_this$props.menuProps,type=_this$props.type,theme=_this$props.theme,testID=_this$props.testID,fullWidth=_this$props.fullWidth;var visible=this.state.visible;var iconColor=visible?theme.primary.main:'#757575';if(textFieldProps&&textFieldProps.error)iconColor=theme.error.main;var platformStyles=_reactNative.Platform.OS=='web'?{cursor:'pointer'}:{};var estimatedListHeight=menuItems.length*48;var menuListItemsWrapperStyle=estimatedListHeight>height?{height:400}:null;return _react.default.createElement(_Menu.default,(0,_extends2.default)({style:[_Select.default.menu,{flex:1}],sameWidth:true,visible:visible,fullWidth:fullWidth,modalMenuStyle:{marginTop:textFieldProps&&textFieldProps.dense?60:71,width:'100%',marginLeft:_reactNative.Platform.OS!=='web'?6:0},onBackdropPress:function onBackdropPress(){return _this2.hideMenu();},testID:testID,button:_react.default.createElement(_reactNative.TouchableHighlight,{onPress:function onPress(){return _this2.showMenu();},style:[_Select.default.button,{width:fullWidth?'100%':'auto'},buttonStyle],underlayColor:'transparent',__source:{fileName:_jsxFileName,lineNumber:103}},_react.default.createElement(_reactNative.View,{style:_Select.default.innerView,__source:{fileName:_jsxFileName,lineNumber:111}},_react.default.createElement(_TextField.default,(0,_extends2.default)({type:type?type:'flat',label:label,value:selectedItem,focused:visible,editable:false,style:[_Select.default.textfield,platformStyles,textFieldProps&&textFieldProps.style],trailingIcon:_react.default.createElement(_Icon.default,{name:\"arrow-drop-down\",size:24,color:iconColor,style:_Select.default.icon,__source:{fileName:_jsxFileName,lineNumber:124}})},textFieldProps,{__source:{fileName:_jsxFileName,lineNumber:112}}))))},menuProps,{__source:{fileName:_jsxFileName,lineNumber:90}}),_react.default.createElement(_reactNative.View,{style:menuListItemsWrapperStyle,__source:{fileName:_jsxFileName,lineNumber:137}},_react.default.createElement(_reactNative.FlatList,{data:menuItems,renderItem:function renderItem(_ref){var item=_ref.item;return _react.default.createElement(_MenuItem.default,{key:item.id,text:item.name,onPress:function onPress(){return _this2.onSelect(item);},style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:142}});},__source:{fileName:_jsxFileName,lineNumber:138}})));}}]);return Select;}(_react.Component);(0,_defineProperty2.default)(Select,\"propTypes\",{onSelect:_propTypes.default.func,buttonStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),label:_propTypes.default.string,selectedItem:_propTypes.default.node,menuItems:_propTypes.default.array,visible:_propTypes.default.bool,textFieldProps:_propTypes.default.object,menuProps:_propTypes.default.object,type:_propTypes.default.string,onBackdropPress:_propTypes.default.func,theme:_propTypes.default.object,testID:_propTypes.default.string,fullWidth:_propTypes.default.bool});var _default=(0,_withTheme.default)(Select);exports.default=_default;"
  },
  {
    "path": "dist/Components/Select/Select.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({button:{width:'100%',minWidth:'100%',height:56,alignItems:'center',flexDirection:'row',justifyContent:'space-between',marginTop:8,borderRadius:4,position:'relative'},innerView:{alignItems:'center',flexDirection:'row',justifyContent:'space-between',width:'100%',height:56,position:'relative',zIndex:2},textfield:{width:'100%',minWidth:'100%'}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Select/SelectFilled/SelectFilled.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../../..\");var _storybookState=require(\"@sambego/storybook-state\");var _Header=_interopRequireDefault(require(\"../../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../../storybook/components/Container\"));var _storiesOf=require(\"../../../storybook/helpers/storiesOf\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Select/SelectFilled/SelectFilled.stories.js\";var store=new _storybookState.Store({selectedItem:''});var data=[{id:1,name:'Option 1'},{id:2,name:'Option 2'},{id:3,name:'Option 3'}];var _default=(0,_storiesOf.storiesOf)('Components|Select/Filled',module).addParameters({jest:['SelectFilled']}).add('simple',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:23}},_react.default.createElement(_Header.default,{title:'Filled Select',__source:{fileName:_jsxFileName,lineNumber:24}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:26}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:28}},_react.default.createElement(_.Select,{type:'filled',label:'Select',menuItems:data,onSelect:function onSelect(value){return store.set({selectedItem:value.name});},selectedItem:state.selectedItem,__source:{fileName:_jsxFileName,lineNumber:29}}),_react.default.createElement(_.Select,{type:'filled',label:'Select',menuItems:data,onSelect:function onSelect(value){return store.set({selectedItemTwo:value.name});},selectedItem:state.selectedItemTwo,textFieldProps:{error:true,helperText:'error',containerStyle:{marginTop:40}},__source:{fileName:_jsxFileName,lineNumber:36}}));}));}).add('dense',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:54}},_react.default.createElement(_Header.default,{title:'Filled Select',__source:{fileName:_jsxFileName,lineNumber:55}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:57}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:59}},_react.default.createElement(_.Select,{type:'filled',label:'Select',menuItems:data,onSelect:function onSelect(value){return store.set({selectedItem:value.name});},selectedItem:state.selectedItem,textFieldProps:{dense:true},__source:{fileName:_jsxFileName,lineNumber:60}}),_react.default.createElement(_.Select,{type:'filled',label:'Select',menuItems:data,onSelect:function onSelect(value){return store.set({selectedItemTwo:value.name});},selectedItem:state.selectedItemTwo,textFieldProps:{error:true,dense:true},__source:{fileName:_jsxFileName,lineNumber:70}}));}));}).add('leading icon',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:87}},_react.default.createElement(_Header.default,{title:'Filled Select',__source:{fileName:_jsxFileName,lineNumber:88}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:90}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:92}},_react.default.createElement(_.Select,{type:'filled',label:'Select',menuItems:data,onSelect:function onSelect(value){return store.set({selectedItem:value.name});},selectedItem:state.selectedItem,textFieldProps:{leadingIcon:_react.default.createElement(_.Icon,{name:'date-range',size:24,color:'#6e6e6e',__source:{fileName:_jsxFileName,lineNumber:101}})},__source:{fileName:_jsxFileName,lineNumber:93}}));}));});exports.default=_default;"
  },
  {
    "path": "dist/Components/Select/SelectFlat/SelectFlat.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../../..\");var _storybookState=require(\"@sambego/storybook-state\");var _Header=_interopRequireDefault(require(\"../../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../../storybook/components/Container\"));var _storiesOf=require(\"../../../storybook/helpers/storiesOf\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Select/SelectFlat/SelectFlat.stories.js\";var store=new _storybookState.Store({selectedItem:''});var data=[{id:1,name:'Option 1'},{id:2,name:'Option 2'},{id:3,name:'Option 3'}];var _default=(0,_storiesOf.storiesOf)('Components|Select/Flat',module).addParameters({jest:['SelectFlat']}).add('simple',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:23}},_react.default.createElement(_Header.default,{title:'Flat Select',__source:{fileName:_jsxFileName,lineNumber:24}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:26}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:28}},_react.default.createElement(_.Select,{type:'flat',label:'Select',menuItems:data,onSelect:function onSelect(value){return store.set({selectedItem:value.name});},selectedItem:state.selectedItem,__source:{fileName:_jsxFileName,lineNumber:29}}),_react.default.createElement(_.Select,{type:'flat',label:'Select',menuItems:data,onSelect:function onSelect(value){return store.set({selectedItemTwo:value.name});},selectedItem:state.selectedItemTwo,textFieldProps:{error:true,helperText:'error',containerStyle:{marginTop:40}},__source:{fileName:_jsxFileName,lineNumber:36}}));}));}).add('dense',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:54}},_react.default.createElement(_Header.default,{title:'Flat Select',__source:{fileName:_jsxFileName,lineNumber:55}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:57}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:59}},_react.default.createElement(_.Select,{type:'flat',label:'Select',menuItems:data,onSelect:function onSelect(value){return store.set({selectedItem:value.name});},selectedItem:state.selectedItem,textFieldProps:{dense:true},__source:{fileName:_jsxFileName,lineNumber:60}}),_react.default.createElement(_.Select,{type:'flat',label:'Select',menuItems:data,onSelect:function onSelect(value){return store.set({selectedItemTwo:value.name});},selectedItem:state.selectedItemTwo,textFieldProps:{error:true,dense:true},__source:{fileName:_jsxFileName,lineNumber:70}}));}));}).add('leading icon',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:87}},_react.default.createElement(_Header.default,{title:'Flat Select',__source:{fileName:_jsxFileName,lineNumber:88}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:90}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:92}},_react.default.createElement(_.Select,{type:'flat',label:'Select',menuItems:data,onSelect:function onSelect(value){return store.set({selectedItem:value.name});},selectedItem:state.selectedItem,textFieldProps:{leadingIcon:_react.default.createElement(_.Icon,{name:'date-range',size:24,color:'#6e6e6e',__source:{fileName:_jsxFileName,lineNumber:101}})},__source:{fileName:_jsxFileName,lineNumber:93}}));}));});exports.default=_default;"
  },
  {
    "path": "dist/Components/Select/SelectOutlined/SelectOutlined.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../../..\");var _storybookState=require(\"@sambego/storybook-state\");var _Header=_interopRequireDefault(require(\"../../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../../storybook/components/Container\"));var _storiesOf=require(\"../../../storybook/helpers/storiesOf\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Select/SelectOutlined/SelectOutlined.stories.js\";var store=new _storybookState.Store({selectedItem:'',selectedItemTwo:''});var data=[{id:1,name:'Option 1'},{id:2,name:'Option 2'},{id:3,name:'Option 3'},{id:4,name:'Option 4'},{id:5,name:'Option 5'},{id:6,name:'Option 6'},{id:7,name:'Option 7'},{id:8,name:'Option 8'},{id:9,name:'Option 9'},{id:10,name:'Option 10'},{id:11,name:'Option 11'},{id:12,name:'Option 12'},{id:13,name:'Option 13'},{id:14,name:'Option 14'},{id:15,name:'Option 15'},{id:16,name:'Option 16'},{id:17,name:'Option 17'},{id:18,name:'Option 18'},{id:19,name:'Option 19'}];var _default=(0,_storiesOf.storiesOf)('Components|Select/Outlined',module).addParameters({jest:['SelectOutlined']}).add('simple',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:40}},_react.default.createElement(_Header.default,{title:'Outlined Select',__source:{fileName:_jsxFileName,lineNumber:41}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:43}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:45}},_react.default.createElement(_.Select,{type:'outlined',label:'Select',menuItems:data.slice(0,4),onSelect:function onSelect(value){return store.set({selectedItem:value.name});},selectedItem:state.selectedItem,__source:{fileName:_jsxFileName,lineNumber:46}}),_react.default.createElement(_.Select,{type:'outlined',label:'Select',menuItems:data,onSelect:function onSelect(value){return store.set({selectedItemTwo:value.name});},selectedItem:state.selectedItemTwo,textFieldProps:{error:true,helperText:'error',containerStyle:{marginTop:40}},__source:{fileName:_jsxFileName,lineNumber:53}}));}));}).add('dense',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:71}},_react.default.createElement(_Header.default,{title:'Outlined Select',__source:{fileName:_jsxFileName,lineNumber:72}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:74}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:76}},_react.default.createElement(_.Select,{type:'outlined',label:'Select',menuItems:data,onSelect:function onSelect(value){return store.set({selectedItem:value.name});},selectedItem:state.selectedItem,textFieldProps:{dense:true},__source:{fileName:_jsxFileName,lineNumber:77}}),_react.default.createElement(_.Select,{type:'outlined',label:'Select',menuItems:data,onSelect:function onSelect(value){return store.set({selectedItemTwo:value.name});},selectedItem:state.selectedItemTwo,textFieldProps:{error:true,dense:true},__source:{fileName:_jsxFileName,lineNumber:87}}));}));}).add('leading icon',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:104}},_react.default.createElement(_Header.default,{title:'Outlined Select',__source:{fileName:_jsxFileName,lineNumber:105}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:107}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:109}},_react.default.createElement(_.Select,{type:'outlined',label:'Select',menuItems:data,onSelect:function onSelect(value){return store.set({selectedItem:value.name});},selectedItem:state.selectedItem,textFieldProps:{leadingIcon:_react.default.createElement(_.Icon,{name:'date-range',size:24,color:'#6e6e6e',__source:{fileName:_jsxFileName,lineNumber:118}})},__source:{fileName:_jsxFileName,lineNumber:110}}));}));});exports.default=_default;"
  },
  {
    "path": "dist/Components/Select/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _Select.default;}});var _Select=_interopRequireDefault(require(\"./Select\"));"
  },
  {
    "path": "dist/Components/SheetBottom/SheetBottom.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _SheetBottom=_interopRequireDefault(require(\"./SheetBottom.web\"));var _default=_SheetBottom.default;exports.default=_default;"
  },
  {
    "path": "dist/Components/SheetBottom/SheetBottom.native.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _SheetBottom=_interopRequireDefault(require(\"./SheetBottom.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/SheetBottom/SheetBottom.native.js\";var SheetBottom=function(_Component){(0,_inherits2.default)(SheetBottom,_Component);function SheetBottom(props){var _this;(0,_classCallCheck2.default)(this,SheetBottom);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(SheetBottom).call(this,props));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{internalVisible:false,pan:new _reactNative.Animated.ValueXY(),initialHeight:0,initialWidth:0,fullHeight:0});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"onMenuLayout\",function(e){var _this$state=_this.state,pan=_this$state.pan,initialHeight=_this$state.initialHeight;var _e$nativeEvent$layout=e.nativeEvent.layout,width=_e$nativeEvent$layout.width,height=_e$nativeEvent$layout.height;if(height==0)return;if(height<=initialHeight)return;var windowHeight=_reactNative.Dimensions.get('window').height;_this.setState({initialWidth:width,initialHeight:height,fullHeight:windowHeight},function(){pan.setValue({x:0,y:windowHeight});_this.createPanResponder();});});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"createPanResponder\",function(){var _this$props=_this.props,onSwipeDown=_this$props.onSwipeDown,onSwipeUp=_this$props.onSwipeUp,cardVerticalPadding=_this$props.cardVerticalPadding;var _this$state2=_this.state,pan=_this$state2.pan,initialHeight=_this$state2.initialHeight,fullHeight=_this$state2.fullHeight;_this.panResponder=_reactNative.PanResponder.create({onStartShouldSetPanResponder:function onStartShouldSetPanResponder(){return true;},onPanResponderMove:function onPanResponderMove(e,gestureState){if(gestureState.dy<80&&gestureState.dy>-40){_reactNative.Animated.timing(pan,{useNativeDriver:true,toValue:{x:0,y:fullHeight-initialHeight-cardVerticalPadding+gestureState.dy},duration:0}).start();}},onPanResponderRelease:function onPanResponderRelease(e,gestureState){if(initialHeight/4-gestureState.dy<0){if(onSwipeDown)onSwipeDown();}else if(initialHeight/4+gestureState.dy>0){if(onSwipeUp)onSwipeUp();}}});});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"_close\",function(){_this.animateSheet(false);_this.setState({initialHeight:0});});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"_onBackdropPress\",function(){var onBackdropPress=_this.props.onBackdropPress;if(onBackdropPress)onBackdropPress();});_this.createPanResponder();return _this;}(0,_createClass2.default)(SheetBottom,[{key:\"componentDidMount\",value:function componentDidMount(){var _this$props2=this.props,visible=_this$props2.visible,pageHeight=_this$props2.pageHeight;var pan=this.state.pan;if(visible){this._open();}this.createPanResponder();var fullHeight=pageHeight?pageHeight:_reactNative.Dimensions.get('window').height;pan.setValue({x:0,y:fullHeight});this.setState({fullHeight:fullHeight});}},{key:\"componentDidUpdate\",value:function componentDidUpdate(prevProps){var visible=this.props.visible;if(visible!=prevProps.visible){if(visible){this._open();}else{this._close();}}}},{key:\"animateSheet\",value:function animateSheet(visible){var _this2=this;var _this$props3=this.props,cardVerticalPadding=_this$props3.cardVerticalPadding,duration=_this$props3.duration;var _this$state3=this.state,initialHeight=_this$state3.initialHeight,fullHeight=_this$state3.fullHeight,pan=_this$state3.pan;if(visible){this.setState({internalVisible:true},function(){if(initialHeight==0){setTimeout(function(){return _this2.animateSheet(true);},100);return;}_reactNative.Animated.spring(pan,{useNativeDriver:true,toValue:{x:0,y:fullHeight-initialHeight-cardVerticalPadding}}).start();});}else{_reactNative.Animated.timing(pan,{useNativeDriver:true,toValue:{x:0,y:fullHeight},duration:duration}).start(function(){_this2.setState({internalVisible:false});});}}},{key:\"_open\",value:function _open(){this.animateSheet(true);}},{key:\"_handlePlatform\",value:function _handlePlatform(){var internalVisible=this.state.internalVisible;return _react.default.createElement(_reactNative.Modal,{transparent:true,animationType:'none',visible:internalVisible,onRequestClose:this._close,supportedOrientations:['portrait','landscape'],__source:{fileName:_jsxFileName,lineNumber:176}},this._renderContent());}},{key:\"_renderContent\",value:function _renderContent(){var _this$props4=this.props,children=_this$props4.children,wrapperStyles=_this$props4.wrapperStyles,style=_this$props4.style,cardVerticalPadding=_this$props4.cardVerticalPadding,testID=_this$props4.testID;var _this$state4=this.state,pan=_this$state4.pan,fullHeight=_this$state4.fullHeight;return _react.default.createElement(_reactNative.View,{style:[_SheetBottom.default.wrapper,wrapperStyles],testID:testID,__source:{fileName:_jsxFileName,lineNumber:198}},_react.default.createElement(_reactNative.TouchableOpacity,{style:_SheetBottom.default.mask,activeOpacity:1,onPress:this._onBackdropPress,__source:{fileName:_jsxFileName,lineNumber:199}}),_react.default.createElement(_reactNative.Animated.View,(0,_extends2.default)({useNativeDriver:true},this.panResponder.panHandlers,{style:[_SheetBottom.default.container,style,{height:fullHeight,paddingVertical:cardVerticalPadding,transform:[{translateY:pan.y}]}],__source:{fileName:_jsxFileName,lineNumber:205}}),_react.default.createElement(_reactNative.SafeAreaView,{onLayout:this.onMenuLayout,__source:{fileName:_jsxFileName,lineNumber:218}},children)));}},{key:\"render\",value:function render(){return this._handlePlatform();}}]);return SheetBottom;}(_react.Component);(0,_defineProperty2.default)(SheetBottom,\"propTypes\",{duration:_propTypes.default.number,onBackdropPress:_propTypes.default.func,onSwipeDown:_propTypes.default.func,onSwipeUp:_propTypes.default.func,children:_propTypes.default.node,wrapperStyles:_propTypes.default.object,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),visible:_propTypes.default.bool,cardVerticalPadding:_propTypes.default.number,pageHeight:_propTypes.default.number,testID:_propTypes.default.string});(0,_defineProperty2.default)(SheetBottom,\"defaultProps\",{duration:200,cardVerticalPadding:20});var _default=SheetBottom;exports.default=_default;"
  },
  {
    "path": "dist/Components/SheetBottom/SheetBottom.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../../\");var _storybookState=require(\"@sambego/storybook-state\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/SheetBottom/SheetBottom.stories.js\";var store=new _storybookState.Store({visible:false});var _default=(0,_storiesOf.storiesOf)('Components|SheetBottom',module).addParameters({jest:['SheetBottom']}).add('Modal',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:17}},_react.default.createElement(_Header.default,{title:'SheetBottom',__source:{fileName:_jsxFileName,lineNumber:18}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:19}},function(state){return _react.default.createElement(_reactNative.View,{style:{flex:1,height:400},__source:{fileName:_jsxFileName,lineNumber:21}},_react.default.createElement(_.Button,{text:\"Open Sheet\",onPress:function onPress(){store.set({visible:true});},__source:{fileName:_jsxFileName,lineNumber:22}}),_react.default.createElement(_.SheetBottom,{visible:state.visible,pageHeight:_reactNative.Platform.OS=='web'?600:null,onBackdropPress:function onBackdropPress(){return store.set({visible:false});},onSwipeDown:function onSwipeDown(){return store.set({visible:false});},__source:{fileName:_jsxFileName,lineNumber:28}},_react.default.createElement(_.List,{__source:{fileName:_jsxFileName,lineNumber:33}},_react.default.createElement(_.ListItem,{text:'Attractions',icon:_react.default.createElement(_.Icon,{name:'local-movies',size:24,__source:{fileName:_jsxFileName,lineNumber:36}}),__source:{fileName:_jsxFileName,lineNumber:34}}),_react.default.createElement(_.ListItem,{text:'Dining',icon:_react.default.createElement(_.Icon,{name:'local-dining',size:24,__source:{fileName:_jsxFileName,lineNumber:40}}),__source:{fileName:_jsxFileName,lineNumber:38}}),_react.default.createElement(_.ListItem,{text:'Education',icon:_react.default.createElement(_.Icon,{name:'edit',size:24,__source:{fileName:_jsxFileName,lineNumber:44}}),__source:{fileName:_jsxFileName,lineNumber:42}}),_react.default.createElement(_.ListItem,{text:'Health',icon:_react.default.createElement(_.Icon,{name:'favorite',size:24,__source:{fileName:_jsxFileName,lineNumber:48}}),__source:{fileName:_jsxFileName,lineNumber:46}}),_react.default.createElement(_.ListItem,{text:'Family',icon:_react.default.createElement(_.Icon,{name:'group',size:24,__source:{fileName:_jsxFileName,lineNumber:52}}),__source:{fileName:_jsxFileName,lineNumber:50}}),_react.default.createElement(_.ListItem,{text:'Office',icon:_react.default.createElement(_.Icon,{name:'content-cut',size:24,__source:{fileName:_jsxFileName,lineNumber:56}}),__source:{fileName:_jsxFileName,lineNumber:54}}),_react.default.createElement(_.ListItem,{text:'Promotions',icon:_react.default.createElement(_.Icon,{name:'loyalty',size:24,__source:{fileName:_jsxFileName,lineNumber:60}}),__source:{fileName:_jsxFileName,lineNumber:58}}))));}));});exports.default=_default;"
  },
  {
    "path": "dist/Components/SheetBottom/SheetBottom.styles.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _reactNative=require(\"react-native\");var _shadow=_interopRequireDefault(require(\"../../Utils/Shadow/shadow\"));function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}var styles=_reactNative.StyleSheet.create({wrapper:{flex:1,backgroundColor:'#00000077'},mask:{backgroundColor:'transparent',width:'100%',height:'100%',zIndex:-1,position:'absolute',top:0,left:0},container:_objectSpread({backgroundColor:'#fff',width:'100%',overflow:'hidden',paddingVertical:20,zIndex:1000},(0,_shadow.default)(16))});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/SheetBottom/SheetBottom.web.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _SheetBottom=_interopRequireDefault(require(\"./SheetBottom.styles\"));var _modalEnhancedReactNativeWeb=_interopRequireDefault(require(\"modal-enhanced-react-native-web\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/SheetBottom/SheetBottom.web.js\";var SheetBottom=function(_Component){(0,_inherits2.default)(SheetBottom,_Component);function SheetBottom(props){var _this;(0,_classCallCheck2.default)(this,SheetBottom);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(SheetBottom).call(this,props));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{internalVisible:false,pan:new _reactNative.Animated.ValueXY(),initialHeight:0,initialWidth:0,fullHeight:0});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"onMenuLayout\",function(e){var _this$state=_this.state,pan=_this$state.pan,initialHeight=_this$state.initialHeight,fullHeight=_this$state.fullHeight;var _e$nativeEvent$layout=e.nativeEvent.layout,width=_e$nativeEvent$layout.width,height=_e$nativeEvent$layout.height;if(height==0)return;if(height<=initialHeight)return;_this.setState({initialWidth:width,initialHeight:height},function(){pan.setValue({x:0,y:fullHeight});_this.createPanResponder(_this.props);});});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"createPanResponder\",function(){var _this$props=_this.props,onSwipeDown=_this$props.onSwipeDown,onSwipeUp=_this$props.onSwipeUp,cardVerticalPadding=_this$props.cardVerticalPadding;var _this$state2=_this.state,pan=_this$state2.pan,initialHeight=_this$state2.initialHeight,fullHeight=_this$state2.fullHeight;_this.panResponder=_reactNative.PanResponder.create({onStartShouldSetPanResponder:function onStartShouldSetPanResponder(){return true;},onPanResponderMove:function onPanResponderMove(e,gestureState){if(gestureState.dy<80&&gestureState.dy>-40){_reactNative.Animated.timing(pan,{useNativeDriver:true,toValue:{x:0,y:fullHeight-initialHeight-cardVerticalPadding+gestureState.dy},duration:0}).start();}},onPanResponderRelease:function onPanResponderRelease(e,gestureState){if(initialHeight/4-gestureState.dy<0){if(onSwipeDown)onSwipeDown();}else if(initialHeight/4+gestureState.dy>0){if(onSwipeUp)onSwipeUp();}}});});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"_close\",function(){_this.animateSheet(false);});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"_onBackdropPress\",function(){var onBackdropPress=_this.props.onBackdropPress;if(onBackdropPress)onBackdropPress();});_this.createPanResponder(_this.props);return _this;}(0,_createClass2.default)(SheetBottom,[{key:\"componentDidMount\",value:function componentDidMount(){var _this$props2=this.props,visible=_this$props2.visible,pageHeight=_this$props2.pageHeight;var pan=this.state.pan;if(visible){this._open();}var fullHeight=pageHeight?pageHeight:_reactNative.Dimensions.get('window').height;this.createPanResponder(this.props);pan.setValue({x:0,y:fullHeight});this.setState({fullHeight:fullHeight});}},{key:\"componentDidUpdate\",value:function componentDidUpdate(prevProps){var visible=this.props.visible;if(visible!=prevProps.visible){if(visible){this._open();}else{this._close();}}}},{key:\"animateSheet\",value:function animateSheet(visible){var _this2=this;var _this$props3=this.props,cardVerticalPadding=_this$props3.cardVerticalPadding,duration=_this$props3.duration;var _this$state3=this.state,initialHeight=_this$state3.initialHeight,fullHeight=_this$state3.fullHeight,pan=_this$state3.pan;if(visible){this.setState({internalVisible:true},function(){if(initialHeight==0){setTimeout(function(){return _this2.animateSheet(true);},100);return;}_reactNative.Animated.spring(pan,{useNativeDriver:true,toValue:{x:0,y:fullHeight-initialHeight-cardVerticalPadding}}).start();});}else{_reactNative.Animated.timing(pan,{useNativeDriver:true,toValue:{x:0,y:fullHeight},duration:duration}).start(function(){_this2.setState({internalVisible:false});});}}},{key:\"_open\",value:function _open(){this.animateSheet(true);}},{key:\"_handlePlatform\",value:function _handlePlatform(){var internalVisible=this.state.internalVisible;if(_reactNative.Platform.OS=='web'){return _react.default.createElement(_modalEnhancedReactNativeWeb.default,{transparent:true,animationType:'none',visible:internalVisible,onRequestClose:this._close,style:{margin:0},__source:{fileName:_jsxFileName,lineNumber:174}},this._renderContent());}else{return _react.default.createElement(_reactNative.Modal,{transparent:true,animationType:'none',visible:internalVisible,onRequestClose:this._close,__source:{fileName:_jsxFileName,lineNumber:185}},this._renderContent());}}},{key:\"_renderContent\",value:function _renderContent(){var _this$props4=this.props,children=_this$props4.children,wrapperStyles=_this$props4.wrapperStyles,style=_this$props4.style,cardVerticalPadding=_this$props4.cardVerticalPadding,testID=_this$props4.testID;var _this$state4=this.state,pan=_this$state4.pan,fullHeight=_this$state4.fullHeight;return _react.default.createElement(_reactNative.View,{style:[_SheetBottom.default.wrapper,wrapperStyles],testID:testID,__source:{fileName:_jsxFileName,lineNumber:207}},_react.default.createElement(_reactNative.TouchableOpacity,{style:_SheetBottom.default.mask,activeOpacity:1,onPress:this._onBackdropPress,__source:{fileName:_jsxFileName,lineNumber:208}}),_react.default.createElement(_reactNative.Animated.View,(0,_extends2.default)({useNativeDriver:true},this.panResponder.panHandlers,{style:[_SheetBottom.default.container,style,{position:'absolute',bottom:0,height:fullHeight,paddingVertical:cardVerticalPadding,transform:[{translateY:pan.y}]}],__source:{fileName:_jsxFileName,lineNumber:214}}),_react.default.createElement(_reactNative.View,{onLayout:this.onMenuLayout,__source:{fileName:_jsxFileName,lineNumber:229}},children)));}},{key:\"render\",value:function render(){return this._handlePlatform();}}]);return SheetBottom;}(_react.Component);(0,_defineProperty2.default)(SheetBottom,\"propTypes\",{duration:_propTypes.default.number,onBackdropPress:_propTypes.default.func,onSwipeDown:_propTypes.default.func,onSwipeUp:_propTypes.default.func,children:_propTypes.default.node,wrapperStyles:_propTypes.default.object,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),visible:_propTypes.default.bool,cardVerticalPadding:_propTypes.default.number,pageHeight:_propTypes.default.number,testID:_propTypes.default.string});(0,_defineProperty2.default)(SheetBottom,\"defaultProps\",{duration:200,cardVerticalPadding:20});var _default=SheetBottom;exports.default=_default;"
  },
  {
    "path": "dist/Components/SheetBottom/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _SheetBottom.default;}});var _SheetBottom=_interopRequireDefault(require(\"./SheetBottom\"));"
  },
  {
    "path": "dist/Components/SheetSide/SheetSide.android.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _SheetSide=_interopRequireDefault(require(\"./SheetSide.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/SheetSide/SheetSide.android.js\";var needsSafeArea=_reactNative.Platform.OS==='ios'&&parseInt(_reactNative.Platform.Version,10);var SheetSide=function(_Component){(0,_inherits2.default)(SheetSide,_Component);function SheetSide(props){var _this;(0,_classCallCheck2.default)(this,SheetSide);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(SheetSide).call(this,props));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{internalVisible:false,animatedPosition:new _reactNative.Animated.Value(0),pan:new _reactNative.Animated.ValueXY(),initialHeight:0,initialWidth:0,fullHeight:0,fullWidth:0});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"onMenuLayout\",function(e){var _e$nativeEvent$layout=e.nativeEvent.layout,width=_e$nativeEvent$layout.width,height=_e$nativeEvent$layout.height;_this.setState({initialWidth:width,initialHeight:height},function(){_this.createPanResponder(_this.props);});});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"createPanResponder\",function(){var _this$props=_this.props,onSwipeLeft=_this$props.onSwipeLeft,onSwipeRight=_this$props.onSwipeRight,widthPercentage=_this$props.widthPercentage,sheetWidth=_this$props.sheetWidth;var fullWidth=_this.state.fullWidth;var sheetWidthCalculated=_reactNative.Platform.OS=='web'?sheetWidth:fullWidth*widthPercentage;_this.panResponder=_reactNative.PanResponder.create({onStartShouldSetPanResponder:function onStartShouldSetPanResponder(){return true;},onPanResponderRelease:function onPanResponderRelease(e,gestureState){if(sheetWidthCalculated/4-gestureState.dy<0){if(onSwipeLeft)onSwipeLeft();}else if(sheetWidthCalculated/4+gestureState.dy>0){if(onSwipeRight)onSwipeRight();}}});});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"_close\",function(){_this.animateSheet(false);});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"_onBackdropPress\",function(){var onBackdropPress=_this.props.onBackdropPress;if(onBackdropPress)onBackdropPress();});_this.createPanResponder(_this.props);return _this;}(0,_createClass2.default)(SheetSide,[{key:\"componentDidMount\",value:function componentDidMount(){var _this$props2=this.props,visible=_this$props2.visible,pageHeight=_this$props2.pageHeight,pageWidth=_this$props2.pageWidth,side=_this$props2.side;var pan=this.state.pan;if(visible){this._open();}this.createPanResponder(this.props);var width=_reactNative.Dimensions.get('window').width;pan.setValue({x:side=='left'?-width:width,y:0});this.setState({fullHeight:pageHeight?pageHeight:_reactNative.Dimensions.get('window').height,fullWidth:pageWidth?pageWidth:width});}},{key:\"componentDidUpdate\",value:function componentDidUpdate(prevProps){var visible=this.props.visible;if(visible!=prevProps.visible){if(visible){this._open();}else{this._close();}}}},{key:\"animateSheet\",value:function animateSheet(visible){var _this2=this;var _this$props3=this.props,duration=_this$props3.duration,widthPercentage=_this$props3.widthPercentage,side=_this$props3.side,sheetWidth=_this$props3.sheetWidth;var _this$state=this.state,fullWidth=_this$state.fullWidth,pan=_this$state.pan;var openValue=_reactNative.Platform.OS=='web'?fullWidth-sheetWidth:fullWidth*(1-widthPercentage);var closeValue=fullWidth;if(side=='left'){openValue=0;closeValue=-closeValue;}if(visible){this.setState({internalVisible:true},function(){_reactNative.Animated.timing(pan,{useNativeDriver:true,toValue:{x:openValue,y:0},duration:duration}).start();});}else{_reactNative.Animated.timing(pan,{useNativeDriver:true,toValue:{x:closeValue,y:0},duration:duration}).start(function(){_this2.setState({internalVisible:false});});}}},{key:\"_open\",value:function _open(){this.animateSheet(true);}},{key:\"_handlePlatform\",value:function _handlePlatform(){var internalVisible=this.state.internalVisible;return _react.default.createElement(_reactNative.Modal,{transparent:true,animationType:'none',visible:internalVisible,onRequestClose:this._close,__source:{fileName:_jsxFileName,lineNumber:183}},this._handleSafeView());}},{key:\"_handleSafeView\",value:function _handleSafeView(){var fullWidth=this.state.fullWidth;if(needsSafeArea){return _react.default.createElement(_reactNative.SafeAreaView,{style:[_SheetSide.default.safeAreaView,{backgroundColor:'transparent',width:fullWidth,height:'100%'}],__source:{fileName:_jsxFileName,lineNumber:197}},this._renderContent());}else{return this._renderContent();}}},{key:\"_renderContent\",value:function _renderContent(){var _this$props4=this.props,children=_this$props4.children,wrapperStyles=_this$props4.wrapperStyles,style=_this$props4.style,widthPercentage=_this$props4.widthPercentage,testID=_this$props4.testID,sheetWidth=_this$props4.sheetWidth;var _this$state2=this.state,pan=_this$state2.pan,fullWidth=_this$state2.fullWidth;return _react.default.createElement(_reactNative.View,{style:[_SheetSide.default.wrapper,wrapperStyles],testID:testID,__source:{fileName:_jsxFileName,lineNumber:226}},_react.default.createElement(_reactNative.TouchableOpacity,{style:_SheetSide.default.mask,activeOpacity:1,onPress:this._onBackdropPress,__source:{fileName:_jsxFileName,lineNumber:227}}),_react.default.createElement(_reactNative.Animated.View,(0,_extends2.default)({useNativeDriver:true},this.panResponder.panHandlers,{style:[_SheetSide.default.container,style,{height:'100%',width:_reactNative.Platform.OS=='web'?sheetWidth:fullWidth*widthPercentage,transform:[{translateX:pan.x}]}],__source:{fileName:_jsxFileName,lineNumber:233}}),_react.default.createElement(_reactNative.View,{onLayout:this.onMenuLayout,__source:{fileName:_jsxFileName,lineNumber:247}},children)));}},{key:\"render\",value:function render(){return this._handlePlatform();}}]);return SheetSide;}(_react.Component);(0,_defineProperty2.default)(SheetSide,\"propTypes\",{duration:_propTypes.default.number,onBackdropPress:_propTypes.default.func,onSwipeLeft:_propTypes.default.func,onSwipeRight:_propTypes.default.func,children:_propTypes.default.node,wrapperStyles:_propTypes.default.object,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),visible:_propTypes.default.bool,pageWidth:_propTypes.default.number,pageHeight:_propTypes.default.number,widthPercentage:_propTypes.default.number,side:_propTypes.default.string,testID:_propTypes.default.string,sheetWidth:_propTypes.default.number});(0,_defineProperty2.default)(SheetSide,\"defaultProps\",{duration:200,widthPercentage:0.8,side:'right',sheetWidth:300});var _default=SheetSide;exports.default=_default;"
  },
  {
    "path": "dist/Components/SheetSide/SheetSide.ios.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _SheetSide=_interopRequireDefault(require(\"./SheetSide.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/SheetSide/SheetSide.ios.js\";var needsSafeArea=_reactNative.Platform.OS==='ios'&&parseInt(_reactNative.Platform.Version,10);var SheetSide=function(_Component){(0,_inherits2.default)(SheetSide,_Component);function SheetSide(props){var _this;(0,_classCallCheck2.default)(this,SheetSide);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(SheetSide).call(this,props));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{internalVisible:false,animatedPosition:new _reactNative.Animated.Value(0),pan:new _reactNative.Animated.ValueXY(),initialHeight:0,initialWidth:0,fullHeight:0,fullWidth:0});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"onMenuLayout\",function(e){var _e$nativeEvent$layout=e.nativeEvent.layout,width=_e$nativeEvent$layout.width,height=_e$nativeEvent$layout.height;_this.setState({initialWidth:width,initialHeight:height},function(){_this.createPanResponder(_this.props);});});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"createPanResponder\",function(){var _this$props=_this.props,onSwipeLeft=_this$props.onSwipeLeft,onSwipeRight=_this$props.onSwipeRight,widthPercentage=_this$props.widthPercentage,sheetWidth=_this$props.sheetWidth;var fullWidth=_this.state.fullWidth;var sheetWidthCalculated=_reactNative.Platform.OS=='web'?sheetWidth:fullWidth*widthPercentage;_this.panResponder=_reactNative.PanResponder.create({onStartShouldSetPanResponder:function onStartShouldSetPanResponder(){return true;},onPanResponderRelease:function onPanResponderRelease(e,gestureState){if(sheetWidthCalculated/4-gestureState.dy<0){if(onSwipeLeft)onSwipeLeft();}else if(sheetWidthCalculated/4+gestureState.dy>0){if(onSwipeRight)onSwipeRight();}}});});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"_close\",function(){_this.animateSheet(false);});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"_onBackdropPress\",function(){var onBackdropPress=_this.props.onBackdropPress;if(onBackdropPress)onBackdropPress();});_this.createPanResponder(_this.props);return _this;}(0,_createClass2.default)(SheetSide,[{key:\"componentDidMount\",value:function componentDidMount(){var _this$props2=this.props,visible=_this$props2.visible,pageHeight=_this$props2.pageHeight,pageWidth=_this$props2.pageWidth,side=_this$props2.side;var pan=this.state.pan;if(visible){this._open();}this.createPanResponder(this.props);var width=_reactNative.Dimensions.get('window').width;pan.setValue({x:side=='left'?-width:width,y:0});this.setState({fullHeight:pageHeight?pageHeight:_reactNative.Dimensions.get('window').height,fullWidth:pageWidth?pageWidth:width});}},{key:\"componentDidUpdate\",value:function componentDidUpdate(prevProps){var visible=this.props.visible;if(visible!=prevProps.visible){if(visible){this._open();}else{this._close();}}}},{key:\"animateSheet\",value:function animateSheet(visible){var _this2=this;var _this$props3=this.props,duration=_this$props3.duration,widthPercentage=_this$props3.widthPercentage,side=_this$props3.side,sheetWidth=_this$props3.sheetWidth;var _this$state=this.state,fullWidth=_this$state.fullWidth,pan=_this$state.pan;var openValue=_reactNative.Platform.OS=='web'?fullWidth-sheetWidth:fullWidth*(1-widthPercentage);var closeValue=fullWidth;if(side=='left'){openValue=0;closeValue=-closeValue;}if(visible){this.setState({internalVisible:true},function(){_reactNative.Animated.timing(pan,{useNativeDriver:true,toValue:{x:openValue,y:0},duration:duration}).start();});}else{_reactNative.Animated.timing(pan,{useNativeDriver:true,toValue:{x:closeValue,y:0},duration:duration}).start(function(){_this2.setState({internalVisible:false});});}}},{key:\"_open\",value:function _open(){this.animateSheet(true);}},{key:\"_handlePlatform\",value:function _handlePlatform(){var internalVisible=this.state.internalVisible;return _react.default.createElement(_reactNative.Modal,{transparent:true,animationType:'none',visible:internalVisible,onRequestClose:this._close,__source:{fileName:_jsxFileName,lineNumber:183}},this._handleSafeView());}},{key:\"_handleSafeView\",value:function _handleSafeView(){var fullWidth=this.state.fullWidth;if(needsSafeArea){return _react.default.createElement(_reactNative.SafeAreaView,{style:[_SheetSide.default.safeAreaView,{backgroundColor:'transparent',width:fullWidth,height:'100%'}],__source:{fileName:_jsxFileName,lineNumber:197}},this._renderContent());}else{return this._renderContent();}}},{key:\"_renderContent\",value:function _renderContent(){var _this$props4=this.props,children=_this$props4.children,wrapperStyles=_this$props4.wrapperStyles,style=_this$props4.style,widthPercentage=_this$props4.widthPercentage,testID=_this$props4.testID,sheetWidth=_this$props4.sheetWidth;var _this$state2=this.state,pan=_this$state2.pan,fullWidth=_this$state2.fullWidth;return _react.default.createElement(_reactNative.View,{style:[_SheetSide.default.wrapper,wrapperStyles],testID:testID,__source:{fileName:_jsxFileName,lineNumber:226}},_react.default.createElement(_reactNative.TouchableOpacity,{style:_SheetSide.default.mask,activeOpacity:1,onPress:this._onBackdropPress,__source:{fileName:_jsxFileName,lineNumber:227}}),_react.default.createElement(_reactNative.Animated.View,(0,_extends2.default)({useNativeDriver:true},this.panResponder.panHandlers,{style:[_SheetSide.default.container,style,{height:'100%',width:_reactNative.Platform.OS=='web'?sheetWidth:fullWidth*widthPercentage,transform:[{translateX:pan.x}]}],__source:{fileName:_jsxFileName,lineNumber:233}}),_react.default.createElement(_reactNative.View,{onLayout:this.onMenuLayout,__source:{fileName:_jsxFileName,lineNumber:247}},children)));}},{key:\"render\",value:function render(){return this._handlePlatform();}}]);return SheetSide;}(_react.Component);(0,_defineProperty2.default)(SheetSide,\"propTypes\",{duration:_propTypes.default.number,onBackdropPress:_propTypes.default.func,onSwipeLeft:_propTypes.default.func,onSwipeRight:_propTypes.default.func,children:_propTypes.default.node,wrapperStyles:_propTypes.default.object,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),visible:_propTypes.default.bool,pageWidth:_propTypes.default.number,pageHeight:_propTypes.default.number,widthPercentage:_propTypes.default.number,side:_propTypes.default.string,testID:_propTypes.default.string,sheetWidth:_propTypes.default.number});(0,_defineProperty2.default)(SheetSide,\"defaultProps\",{duration:200,widthPercentage:0.8,side:'right',sheetWidth:300});var _default=SheetSide;exports.default=_default;"
  },
  {
    "path": "dist/Components/SheetSide/SheetSide.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _SheetSide=_interopRequireDefault(require(\"./SheetSide.web\"));var _default=_SheetSide.default;exports.default=_default;"
  },
  {
    "path": "dist/Components/SheetSide/SheetSide.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../../\");var _storybookState=require(\"@sambego/storybook-state\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/SheetSide/SheetSide.stories.js\";var store=new _storybookState.Store({visible:false});var _default=(0,_storiesOf.storiesOf)('Components|SheetSide',module).addParameters({jest:['SheetSide']}).add('Modal Right',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:17}},_react.default.createElement(_Header.default,{title:'SheetSide',__source:{fileName:_jsxFileName,lineNumber:18}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:19}},function(state){return _react.default.createElement(_reactNative.View,{style:{flex:1,height:400},__source:{fileName:_jsxFileName,lineNumber:21}},_react.default.createElement(_.Button,{text:\"Open Sheet\",onPress:function onPress(){store.set({visible:true});},__source:{fileName:_jsxFileName,lineNumber:22}}),_react.default.createElement(_.SheetSide,{visible:state.visible,pageHeight:_reactNative.Platform.OS=='web'?600:null,onBackdropPress:function onBackdropPress(){return store.set({visible:false});},onSwipeRight:function onSwipeRight(){return store.set({visible:false});},__source:{fileName:_jsxFileName,lineNumber:28}},_react.default.createElement(_.List,{__source:{fileName:_jsxFileName,lineNumber:33}},_react.default.createElement(_.ListItem,{text:'Attractions',icon:_react.default.createElement(_.Icon,{name:'local-movies',size:24,__source:{fileName:_jsxFileName,lineNumber:36}}),__source:{fileName:_jsxFileName,lineNumber:34}}),_react.default.createElement(_.ListItem,{text:'Dining',icon:_react.default.createElement(_.Icon,{name:'local-dining',size:24,__source:{fileName:_jsxFileName,lineNumber:40}}),__source:{fileName:_jsxFileName,lineNumber:38}}),_react.default.createElement(_.ListItem,{text:'Education',icon:_react.default.createElement(_.Icon,{name:'edit',size:24,__source:{fileName:_jsxFileName,lineNumber:44}}),__source:{fileName:_jsxFileName,lineNumber:42}}),_react.default.createElement(_.ListItem,{text:'Health',icon:_react.default.createElement(_.Icon,{name:'favorite',size:24,__source:{fileName:_jsxFileName,lineNumber:48}}),__source:{fileName:_jsxFileName,lineNumber:46}}),_react.default.createElement(_.ListItem,{text:'Family',icon:_react.default.createElement(_.Icon,{name:'group',size:24,__source:{fileName:_jsxFileName,lineNumber:52}}),__source:{fileName:_jsxFileName,lineNumber:50}}),_react.default.createElement(_.ListItem,{text:'Office',icon:_react.default.createElement(_.Icon,{name:'content-cut',size:24,__source:{fileName:_jsxFileName,lineNumber:56}}),__source:{fileName:_jsxFileName,lineNumber:54}}),_react.default.createElement(_.ListItem,{text:'Promotions',icon:_react.default.createElement(_.Icon,{name:'loyalty',size:24,__source:{fileName:_jsxFileName,lineNumber:60}}),__source:{fileName:_jsxFileName,lineNumber:58}}))));}));}).add('Modal Left',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:70}},_react.default.createElement(_Header.default,{title:'SheetSide',__source:{fileName:_jsxFileName,lineNumber:71}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:72}},function(state){return _react.default.createElement(_reactNative.View,{style:{flex:1,height:400},__source:{fileName:_jsxFileName,lineNumber:74}},_react.default.createElement(_.Button,{text:\"Open Sheet\",onPress:function onPress(){store.set({visible:true});},__source:{fileName:_jsxFileName,lineNumber:75}}),_react.default.createElement(_.SheetSide,{visible:state.visible,side:'left',pageHeight:_reactNative.Platform.OS=='web'?600:null,onBackdropPress:function onBackdropPress(){return store.set({visible:false});},onSwipeLeft:function onSwipeLeft(){return store.set({visible:false});},__source:{fileName:_jsxFileName,lineNumber:81}},_react.default.createElement(_.List,{__source:{fileName:_jsxFileName,lineNumber:87}},_react.default.createElement(_.ListItem,{text:'Attractions',icon:_react.default.createElement(_.Icon,{name:'local-movies',size:24,__source:{fileName:_jsxFileName,lineNumber:90}}),__source:{fileName:_jsxFileName,lineNumber:88}}),_react.default.createElement(_.ListItem,{text:'Dining',icon:_react.default.createElement(_.Icon,{name:'local-dining',size:24,__source:{fileName:_jsxFileName,lineNumber:94}}),__source:{fileName:_jsxFileName,lineNumber:92}}),_react.default.createElement(_.ListItem,{text:'Education',icon:_react.default.createElement(_.Icon,{name:'edit',size:24,__source:{fileName:_jsxFileName,lineNumber:98}}),__source:{fileName:_jsxFileName,lineNumber:96}}),_react.default.createElement(_.ListItem,{text:'Health',icon:_react.default.createElement(_.Icon,{name:'favorite',size:24,__source:{fileName:_jsxFileName,lineNumber:102}}),__source:{fileName:_jsxFileName,lineNumber:100}}),_react.default.createElement(_.ListItem,{text:'Family',icon:_react.default.createElement(_.Icon,{name:'group',size:24,__source:{fileName:_jsxFileName,lineNumber:106}}),__source:{fileName:_jsxFileName,lineNumber:104}}),_react.default.createElement(_.ListItem,{text:'Office',icon:_react.default.createElement(_.Icon,{name:'content-cut',size:24,__source:{fileName:_jsxFileName,lineNumber:110}}),__source:{fileName:_jsxFileName,lineNumber:108}}),_react.default.createElement(_.ListItem,{text:'Promotions',icon:_react.default.createElement(_.Icon,{name:'loyalty',size:24,__source:{fileName:_jsxFileName,lineNumber:114}}),__source:{fileName:_jsxFileName,lineNumber:112}}))));}));});exports.default=_default;"
  },
  {
    "path": "dist/Components/SheetSide/SheetSide.styles.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _reactNative=require(\"react-native\");var _shadow=_interopRequireDefault(require(\"../../Utils/Shadow/shadow\"));function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}var styles=_reactNative.StyleSheet.create({wrapper:{flex:1,backgroundColor:'#00000077'},mask:{backgroundColor:'transparent',width:'100%',height:'100%',zIndex:-1,position:'absolute',top:0,left:0},container:_objectSpread({backgroundColor:'#fff',overflow:'hidden',paddingVertical:16,zIndex:1000},(0,_shadow.default)(16))});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/SheetSide/SheetSide.web.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _SheetSide=_interopRequireDefault(require(\"./SheetSide.styles\"));var _modalEnhancedReactNativeWeb=_interopRequireDefault(require(\"modal-enhanced-react-native-web\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/SheetSide/SheetSide.web.js\";var needsSafeArea=_reactNative.Platform.OS==='ios'&&parseInt(_reactNative.Platform.Version,10);var SheetSide=function(_Component){(0,_inherits2.default)(SheetSide,_Component);function SheetSide(props){var _this;(0,_classCallCheck2.default)(this,SheetSide);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(SheetSide).call(this,props));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{internalVisible:false,animatedPosition:new _reactNative.Animated.Value(0),pan:new _reactNative.Animated.ValueXY(),initialHeight:0,initialWidth:0,fullHeight:0,fullWidth:0});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"onMenuLayout\",function(e){var _e$nativeEvent$layout=e.nativeEvent.layout,width=_e$nativeEvent$layout.width,height=_e$nativeEvent$layout.height;_this.setState({initialWidth:width,initialHeight:height},function(){_this.createPanResponder(_this.props);});});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"createPanResponder\",function(){var _this$props=_this.props,onSwipeLeft=_this$props.onSwipeLeft,onSwipeRight=_this$props.onSwipeRight,widthPercentage=_this$props.widthPercentage,sheetWidth=_this$props.sheetWidth;var fullWidth=_this.state.fullWidth;var sheetWidthCalculated=_reactNative.Platform.OS=='web'?sheetWidth:fullWidth*widthPercentage;_this.panResponder=_reactNative.PanResponder.create({onStartShouldSetPanResponder:function onStartShouldSetPanResponder(){return true;},onPanResponderRelease:function onPanResponderRelease(e,gestureState){if(sheetWidthCalculated/4-gestureState.dy<0){if(onSwipeLeft)onSwipeLeft();}else if(sheetWidthCalculated/4+gestureState.dy>0){if(onSwipeRight)onSwipeRight();}}});});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"_close\",function(){_this.animateSheet(false);});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"_onBackdropPress\",function(){var onBackdropPress=_this.props.onBackdropPress;if(onBackdropPress)onBackdropPress();});_this.createPanResponder(_this.props);return _this;}(0,_createClass2.default)(SheetSide,[{key:\"componentDidMount\",value:function componentDidMount(){var _this$props2=this.props,visible=_this$props2.visible,pageHeight=_this$props2.pageHeight,pageWidth=_this$props2.pageWidth,side=_this$props2.side;var pan=this.state.pan;if(visible){this._open();}this.createPanResponder(this.props);var width=_reactNative.Dimensions.get('window').width;pan.setValue({x:side=='left'?-width:width,y:0});this.setState({fullHeight:pageHeight?pageHeight:_reactNative.Dimensions.get('window').height,fullWidth:pageWidth?pageWidth:width});}},{key:\"componentDidUpdate\",value:function componentDidUpdate(prevProps){var visible=this.props.visible;if(visible!=prevProps.visible){if(visible){this._open();}else{this._close();}}}},{key:\"animateSheet\",value:function animateSheet(visible){var _this2=this;var _this$props3=this.props,duration=_this$props3.duration,side=_this$props3.side;var _this$state=this.state,fullWidth=_this$state.fullWidth,pan=_this$state.pan;var openValue=0;var closeValue=fullWidth;if(side=='left'){openValue=0;closeValue=-closeValue;}if(visible){this.setState({internalVisible:true},function(){_reactNative.Animated.timing(pan,{useNativeDriver:true,toValue:{x:openValue,y:0},duration:duration}).start();});}else{_reactNative.Animated.timing(pan,{useNativeDriver:true,toValue:{x:closeValue,y:0},duration:duration}).start(function(){_this2.setState({internalVisible:false});});}}},{key:\"_open\",value:function _open(){this.animateSheet(true);}},{key:\"_handlePlatform\",value:function _handlePlatform(){var internalVisible=this.state.internalVisible;if(_reactNative.Platform.OS=='web'){return _react.default.createElement(_modalEnhancedReactNativeWeb.default,{transparent:true,animationType:'none',visible:internalVisible,onRequestClose:this._close,style:{margin:0},__source:{fileName:_jsxFileName,lineNumber:181}},this._handleSafeView());}else{return _react.default.createElement(_reactNative.Modal,{transparent:true,animationType:'none',visible:internalVisible,onRequestClose:this._close,__source:{fileName:_jsxFileName,lineNumber:192}},this._handleSafeView());}}},{key:\"_handleSafeView\",value:function _handleSafeView(){var fullWidth=this.state.fullWidth;if(needsSafeArea){return _react.default.createElement(_reactNative.SafeAreaView,{style:[_SheetSide.default.safeAreaView,{backgroundColor:'transparent',width:fullWidth,height:'100%'}],__source:{fileName:_jsxFileName,lineNumber:207}},this._renderContent());}else{return this._renderContent();}}},{key:\"_renderContent\",value:function _renderContent(){var _this$props4=this.props,children=_this$props4.children,wrapperStyles=_this$props4.wrapperStyles,style=_this$props4.style,widthPercentage=_this$props4.widthPercentage,testID=_this$props4.testID,sheetWidth=_this$props4.sheetWidth,side=_this$props4.side;var _this$state2=this.state,pan=_this$state2.pan,fullWidth=_this$state2.fullWidth;return _react.default.createElement(_reactNative.View,{style:[_SheetSide.default.wrapper,wrapperStyles],testID:testID,__source:{fileName:_jsxFileName,lineNumber:237}},_react.default.createElement(_reactNative.TouchableOpacity,{style:_SheetSide.default.mask,activeOpacity:1,onPress:this._onBackdropPress,__source:{fileName:_jsxFileName,lineNumber:238}}),_react.default.createElement(_reactNative.Animated.View,(0,_extends2.default)({useNativeDriver:true},this.panResponder.panHandlers,{style:[_SheetSide.default.container,style,{height:'100%',position:'absolute',right:side=='right'?0:'auto',width:_reactNative.Platform.OS=='web'?sheetWidth:fullWidth*widthPercentage,transform:[{translateX:pan.x}]}],__source:{fileName:_jsxFileName,lineNumber:244}}),_react.default.createElement(_reactNative.View,{onLayout:this.onMenuLayout,__source:{fileName:_jsxFileName,lineNumber:260}},children)));}},{key:\"render\",value:function render(){return this._handlePlatform();}}]);return SheetSide;}(_react.Component);(0,_defineProperty2.default)(SheetSide,\"propTypes\",{duration:_propTypes.default.number,onBackdropPress:_propTypes.default.func,onSwipeLeft:_propTypes.default.func,onSwipeRight:_propTypes.default.func,children:_propTypes.default.node,wrapperStyles:_propTypes.default.object,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),visible:_propTypes.default.bool,pageWidth:_propTypes.default.number,pageHeight:_propTypes.default.number,widthPercentage:_propTypes.default.number,side:_propTypes.default.string,testID:_propTypes.default.string,sheetWidth:_propTypes.default.number});(0,_defineProperty2.default)(SheetSide,\"defaultProps\",{duration:200,widthPercentage:0.8,side:'right',sheetWidth:300});var _default=SheetSide;exports.default=_default;"
  },
  {
    "path": "dist/Components/SheetSide/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _SheetSide.default;}});var _SheetSide=_interopRequireDefault(require(\"./SheetSide\"));"
  },
  {
    "path": "dist/Components/Slider/Marker/Marker.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf3=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _Marker=_interopRequireDefault(require(\"./Marker.styles\"));var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _Ripple=_interopRequireDefault(require(\"../../Ripple/Ripple.js\"));var _Hoverable=_interopRequireDefault(require(\"../../../Utils/Hoverable/Hoverable.js\"));var _color=_interopRequireDefault(require(\"color\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Slider/Marker/Marker.js\";var Marker=function(_Component){(0,_inherits2.default)(Marker,_Component);function Marker(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,Marker);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(Marker)).call.apply(_getPrototypeOf2,[this].concat(args)));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{backgroundColorHover:'transparent'});return _this;}(0,_createClass2.default)(Marker,[{key:\"render\",value:function render(){var _this2=this;var _this$props=this.props,disabled=_this$props.disabled,color=_this$props.color,theme=_this$props.theme,markerSize=_this$props.markerSize;var backgroundColorHover=this.state.backgroundColorHover;var backgroundColor=color?color:theme.primary.main;if(disabled)backgroundColor='#d3d3d3';return _react.default.createElement(_Hoverable.default,{onHoverIn:function onHoverIn(){return _this2.setState({backgroundColorHover:(0,_color.default)(backgroundColor).alpha(0.3)});},onHoverOut:function onHoverOut(){return _this2.setState({backgroundColorHover:'transparent'});},__source:{fileName:_jsxFileName,lineNumber:33}},_react.default.createElement(_Ripple.default,{rippleColor:backgroundColor,style:[_Marker.default.ripple,{height:markerSize*2.33,width:markerSize*2.33,borderRadius:markerSize*1.67},{backgroundColor:backgroundColorHover}],rippleContainerBorderRadius:100,__source:{fileName:_jsxFileName,lineNumber:42}},_react.default.createElement(_reactNative.View,{style:[{backgroundColor:backgroundColor,height:markerSize,width:markerSize,borderRadius:markerSize},disabled&&_Marker.default.disabled],__source:{fileName:_jsxFileName,lineNumber:54}})));}}]);return Marker;}(_react.Component);(0,_defineProperty2.default)(Marker,\"propTypes\",{pressed:_propTypes.default.bool,disabled:_propTypes.default.bool,color:_propTypes.default.string,theme:_propTypes.default.object,onPress:_propTypes.default.func,markerSize:_propTypes.default.number});var _default=(0,_withTheme.default)(Marker);exports.default=_default;"
  },
  {
    "path": "dist/Components/Slider/Marker/Marker.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({ripple:{justifyContent:'center',alignItems:'center'}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Slider/MarkerContainer/MarkerContainer.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _MarkerContainer=_interopRequireDefault(require(\"./MarkerContainer.styles\"));var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _Marker=_interopRequireDefault(require(\"../Marker/Marker\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Slider/MarkerContainer/MarkerContainer.js\";var MarkerContainer=function(_Component){(0,_inherits2.default)(MarkerContainer,_Component);function MarkerContainer(){(0,_classCallCheck2.default)(this,MarkerContainer);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(MarkerContainer).apply(this,arguments));}(0,_createClass2.default)(MarkerContainer,[{key:\"render\",value:function render(){var _this$props=this.props,sliderLength=_this$props.sliderLength,position=_this$props.position,pressed=_this$props.pressed,disabled=_this$props.disabled,color=_this$props.color,panResponder=_this$props.panResponder,onPress=_this$props.onPress,markerSize=_this$props.markerSize,trackHeight=_this$props.trackHeight;return _react.default.createElement(_reactNative.View,{style:[_MarkerContainer.default.markerContainer,{top:-markerSize*2+trackHeight/2,right:sliderLength-position-markerSize*2,height:markerSize*4,width:markerSize*4}],__source:{fileName:_jsxFileName,lineNumber:36}},_react.default.createElement(_reactNative.View,(0,_extends2.default)({style:[_MarkerContainer.default.touch]},panResponder,{__source:{fileName:_jsxFileName,lineNumber:46}}),_react.default.createElement(_Marker.default,{pressed:pressed,disabled:disabled,color:color,onPress:onPress,markerSize:markerSize,__source:{fileName:_jsxFileName,lineNumber:47}})));}}]);return MarkerContainer;}(_react.Component);(0,_defineProperty2.default)(MarkerContainer,\"propTypes\",{pressed:_propTypes.default.bool,disabled:_propTypes.default.bool,color:_propTypes.default.string,theme:_propTypes.default.object,sliderLength:_propTypes.default.number,position:_propTypes.default.number,panResponder:_propTypes.default.object,onPress:_propTypes.default.func,markerSize:_propTypes.default.number,trackHeight:_propTypes.default.number});var _default=(0,_withTheme.default)(MarkerContainer);exports.default=_default;"
  },
  {
    "path": "dist/Components/Slider/MarkerContainer/MarkerContainer.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({markerContainer:{position:'absolute',backgroundColor:'transparent',justifyContent:'center',alignItems:'center'},topMarkerContainer:{zIndex:1},touch:{backgroundColor:'transparent',justifyContent:'center',alignItems:'center',alignSelf:'stretch'}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Slider/Slider.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _MarkerContainer=_interopRequireDefault(require(\"./MarkerContainer/MarkerContainer\"));var _Track=_interopRequireDefault(require(\"./Track/Track\"));var _converts=require(\"./converts\");var _Slider=_interopRequireDefault(require(\"./Slider.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Slider/Slider.js\";var Slider=function(_Component){(0,_inherits2.default)(Slider,_Component);function Slider(props){var _this;(0,_classCallCheck2.default)(this,Slider);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(Slider).call(this,props));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"startMarkerLeft\",function(){var disableOne=_this.props.disableOne;var onePressed=_this.state.onePressed;if(!disableOne){_this.setState({onePressed:!onePressed});}});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"startMarkerRight\",function(){var disableTwo=_this.props.disableTwo;var twoPressed=_this.state.twoPressed;if(!disableTwo){_this.setState({twoPressed:!twoPressed});}});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"moveMarkerLeft\",function(gestureState){var _this$props=_this.props,disableOne=_this$props.disableOne,allowOverlap=_this$props.allowOverlap,sliderLength=_this$props.sliderLength,onValuesChange=_this$props.onValuesChange;var _this$state=_this.state,pastOne=_this$state.pastOne,positionTwo=_this$state.positionTwo,valueOne=_this$state.valueOne;if(disableOne){return;}var accumDistance=gestureState.dx;var unconfined=accumDistance+pastOne;var bottom=0;var trueTop=positionTwo-(allowOverlap?0:_this.stepLength);var top=trueTop===0?0:trueTop||sliderLength;var confined=unconfined<bottom?bottom:unconfined>top?top:unconfined;var value=(0,_converts.positionToValue)(confined,_this.optionsArray,sliderLength);_this.setState({positionOne:confined});if(value!==valueOne){_this.setState({valueOne:value},function(){var _this$state2=_this.state,newValOne=_this$state2.valueOne,valueTwo=_this$state2.valueTwo;var change=[newValOne];if(valueTwo){change.push(valueTwo);}onValuesChange(change);});}});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"moveMarkerRight\",function(gestureState){var _this$props2=_this.props,disableTwo=_this$props2.disableTwo,allowOverlap=_this$props2.allowOverlap,sliderLength=_this$props2.sliderLength,onValuesChange=_this$props2.onValuesChange;var _this$state3=_this.state,pastTwo=_this$state3.pastTwo,positionOne=_this$state3.positionOne,valueTwo=_this$state3.valueTwo;if(disableTwo){return;}var accumDistance=gestureState.dx;var unconfined=accumDistance+pastTwo;var bottom=positionOne+(allowOverlap?0:_this.stepLength);var top=sliderLength;var confined=unconfined<bottom?bottom:unconfined>top?top:unconfined;var value=(0,_converts.positionToValue)(confined,_this.optionsArray,sliderLength);_this.setState({positionTwo:confined});if(value!==valueTwo){_this.setState({valueTwo:value},function(){var _this$state4=_this.state,valueOne=_this$state4.valueOne,newValTwo=_this$state4.valueTwo;onValuesChange([valueOne,newValTwo]);});}});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"endMarkerLeft\",function(){var onValuesChangeEnd=_this.props.onValuesChangeEnd;var _this$state5=_this.state,positionOne=_this$state5.positionOne,onePressed=_this$state5.onePressed;_this.setState({pastOne:positionOne,onePressed:!onePressed},function(){var _this$state6=_this.state,valueOne=_this$state6.valueOne,valueTwo=_this$state6.valueTwo;var change=[valueOne];if(valueTwo){change.push(valueTwo);}onValuesChangeEnd(change);});});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"endMarkerRight\",function(){var _this$state7=_this.state,twoPressed=_this$state7.twoPressed,positionTwo=_this$state7.positionTwo;_this.setState({twoPressed:!twoPressed,pastTwo:positionTwo},function(){var _this$state8=_this.state,valueOne=_this$state8.valueOne,valueTwo=_this$state8.valueTwo;_this.props.onValuesChangeEnd([valueOne,valueTwo]);});});var _this$props3=_this.props,_sliderLength=_this$props3.sliderLength,values=_this$props3.values,min=_this$props3.min,max=_this$props3.max,step=_this$props3.step,trackHeight=_this$props3.trackHeight,trackStyle=_this$props3.trackStyle;_this.optionsArray=(0,_converts.createArray)(min,max,step);_this.stepLength=_sliderLength/_this.optionsArray.length;_this.finalTrackHeight=trackHeight||_reactNative.StyleSheet.flatten(trackStyle).height||2;var initialValues=values.map(function(value){return(0,_converts.valueToPosition)(value,_this.optionsArray,_sliderLength);});var customPanResponder=function customPanResponder(start,move,end){return _reactNative.PanResponder.create({onStartShouldSetPanResponder:function onStartShouldSetPanResponder(){return true;},onStartShouldSetPanResponderCapture:function onStartShouldSetPanResponderCapture(){return false;},onMoveShouldSetPanResponder:function onMoveShouldSetPanResponder(){return true;},onMoveShouldSetPanResponderCapture:function onMoveShouldSetPanResponderCapture(){return true;},onPanResponderGrant:function onPanResponderGrant(){return start();},onPanResponderMove:function onPanResponderMove(evt,gestureState){return move(gestureState);},onPanResponderTerminationRequest:function onPanResponderTerminationRequest(){return false;},onPanResponderRelease:function onPanResponderRelease(evt,gestureState){return end(gestureState);},onPanResponderTerminate:function onPanResponderTerminate(evt,gestureState){return end(gestureState);},onShouldBlockNativeResponder:function onShouldBlockNativeResponder(){return true;}});};_this._panResponderOne=customPanResponder(_this.startMarkerLeft,_this.moveMarkerLeft,_this.endMarkerLeft);_this._panResponderTwo=customPanResponder(_this.startMarkerRight,_this.moveMarkerRight,_this.endMarkerRight);_this.state={pressedOne:true,valueOne:values[0],valueTwo:values[1],pastOne:initialValues[0],pastTwo:initialValues[1],positionOne:initialValues[0],positionTwo:initialValues[1]};return _this;}(0,_createClass2.default)(Slider,[{key:\"componentWillReceiveProps\",value:function componentWillReceiveProps(nextProps){var _this$props4=this.props,sliderLength=_this$props4.sliderLength,min=_this$props4.min,max=_this$props4.max,step=_this$props4.step;var _this$state9=this.state,onePressed=_this$state9.onePressed,twoPressed=_this$state9.twoPressed,valueOne=_this$state9.valueOne,valueTwo=_this$state9.valueTwo;if(onePressed||twoPressed){return;}var nextState={};if(nextProps.min!==min||nextProps.max!==max||nextProps.step!==step||nextProps.values[0]!==valueOne||nextProps.sliderLength!==sliderLength||nextProps.values[1]!==valueTwo||nextProps.sliderLength!==sliderLength&&nextProps.values[1]){this.optionsArray=(0,_converts.createArray)(nextProps.min,nextProps.max,nextProps.step);this.stepLength=sliderLength/this.optionsArray.length;var positionOne=(0,_converts.valueToPosition)(nextProps.values[0],this.optionsArray,nextProps.sliderLength);nextState.valueOne=nextProps.values[0];nextState.pastOne=positionOne;nextState.positionOne=positionOne;var positionTwo=(0,_converts.valueToPosition)(nextProps.values[1],this.optionsArray,nextProps.sliderLength);nextState.valueTwo=nextProps.values[1];nextState.pastTwo=positionTwo;nextState.positionTwo=positionTwo;}if(nextState!={}){this.setState(nextState);}}},{key:\"_renderMarkerRight\",value:function _renderMarkerRight(){var _this$props5=this.props,sliderLength=_this$props5.sliderLength,disableTwo=_this$props5.disableTwo,markerColor=_this$props5.markerColor,onPress=_this$props5.onPress,markerSize=_this$props5.markerSize;var _this$state10=this.state,positionTwo=_this$state10.positionTwo,twoPressed=_this$state10.twoPressed;return _react.default.createElement(_MarkerContainer.default,{sliderLength:sliderLength,position:positionTwo,pressed:twoPressed,disabled:disableTwo,panResponder:this._panResponderTwo.panHandlers,color:markerColor,onPress:onPress,markerSize:markerSize,trackHeight:this.finalTrackHeight,__source:{fileName:_jsxFileName,lineNumber:310}});}},{key:\"_renderMarkerLeft\",value:function _renderMarkerLeft(){var _this$props6=this.props,sliderLength=_this$props6.sliderLength,disableOne=_this$props6.disableOne,markerColor=_this$props6.markerColor,onPress=_this$props6.onPress,markerSize=_this$props6.markerSize;var _this$state11=this.state,positionOne=_this$state11.positionOne,onePressed=_this$state11.onePressed;return _react.default.createElement(_MarkerContainer.default,{sliderLength:sliderLength,position:positionOne,pressed:onePressed,disabled:disableOne,panResponder:this._panResponderOne.panHandlers,color:markerColor,onPress:onPress,markerSize:markerSize,trackHeight:this.finalTrackHeight,__source:{fileName:_jsxFileName,lineNumber:335}});}},{key:\"_renderTracks\",value:function _renderTracks(){var _this$props7=this.props,sliderLength=_this$props7.sliderLength,values=_this$props7.values,trackColor=_this$props7.trackColor,backgroundTrackColor=_this$props7.backgroundTrackColor,disableOne=_this$props7.disableOne,disableTwo=_this$props7.disableTwo,trackStyle=_this$props7.trackStyle;var _this$state12=this.state,positionOne=_this$state12.positionOne,positionTwo=_this$state12.positionTwo;return _react.default.createElement(_Track.default,{twoMarkers:values.length==2,sliderLength:sliderLength,positionTwo:positionTwo,positionOne:positionOne,trackColor:trackColor,backgroundTrackColor:backgroundTrackColor,bothDisabled:disableOne&&disableTwo,oneDisabled:disableOne,trackHeight:this.finalTrackHeight,trackStyle:trackStyle,__source:{fileName:_jsxFileName,lineNumber:362}});}},{key:\"render\",value:function render(){var _this$props8=this.props,sliderLength=_this$props8.sliderLength,values=_this$props8.values,style=_this$props8.style,testID=_this$props8.testID;var twoMarkers=values.length==2;return _react.default.createElement(_reactNative.View,{style:[_Slider.default.container,style],testID:testID,__source:{fileName:_jsxFileName,lineNumber:382}},_react.default.createElement(_reactNative.View,{style:[_Slider.default.fullTrack,{width:sliderLength}],__source:{fileName:_jsxFileName,lineNumber:383}},this._renderTracks(),this._renderMarkerLeft(),twoMarkers?this._renderMarkerRight():null));}}]);return Slider;}(_react.Component);(0,_defineProperty2.default)(Slider,\"propTypes\",{values:_propTypes.default.array,sliderLength:_propTypes.default.number,min:_propTypes.default.number,max:_propTypes.default.number,step:_propTypes.default.number,disableOne:_propTypes.default.bool,disableTwo:_propTypes.default.bool,onValuesChange:_propTypes.default.func,onValuesChangeEnd:_propTypes.default.func,trackColor:_propTypes.default.string,backgroundTrackColor:_propTypes.default.string,markerColor:_propTypes.default.string,allowOverlap:_propTypes.default.bool,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),testID:_propTypes.default.string,markerSize:_propTypes.default.number,trackHeight:_propTypes.default.number,trackStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array])});(0,_defineProperty2.default)(Slider,\"defaultProps\",{values:[0],onValuesChange:function onValuesChange(){},onValuesChangeEnd:function onValuesChangeEnd(){},step:1,min:0,max:100,sliderLength:280,disableOne:false,disableTwo:false,allowOverlap:false,snapped:false,minMarkerOverlapDistance:0,markerSize:12,trackStyle:{}});var _default=(0,_withTheme.default)(Slider);exports.default=_default;"
  },
  {
    "path": "dist/Components/Slider/Slider.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../../\");var _storybookState=require(\"@sambego/storybook-state\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Slider/Slider.stories.js\";var store=new _storybookState.Store({slider:20,sliderOne:10,sliderTwo:40});var _default=(0,_storiesOf.storiesOf)('Components|Slider',module).addParameters({jest:['Slider']}).add('Simple',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:19}},_react.default.createElement(_Header.default,{title:'Slider',__source:{fileName:_jsxFileName,lineNumber:20}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:21}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:23}},_react.default.createElement(_.Slider,{value:state.slider,sliderLength:200,onValueChange:function onValueChange(value){return store.set({slider:value});},valuePrefix:'test',__source:{fileName:_jsxFileName,lineNumber:24}}),_react.default.createElement(_.Slider,{value:state.slider,sliderLength:200,disableOne:true,onValueChange:function onValueChange(value){return store.set({slider:value});},__source:{fileName:_jsxFileName,lineNumber:31}}));}));}).add('Ranged',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:43}},_react.default.createElement(_Header.default,{title:'Slider',__source:{fileName:_jsxFileName,lineNumber:44}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:45}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:47}},_react.default.createElement(_.Slider,{values:[state.sliderOne,state.sliderTwo],sliderLength:280,onValueChange:function onValueChange(value){return store.set({slider:value});},allowOverlap:true,__source:{fileName:_jsxFileName,lineNumber:48}}),_react.default.createElement(_.Slider,{values:[state.sliderOne,state.sliderTwo],sliderLength:280,onValueChange:function onValueChange(value){return store.set({slider:value});},min:0,max:100,step:1,disableOne:true,allowOverlap:true,__source:{fileName:_jsxFileName,lineNumber:54}}),_react.default.createElement(_.Slider,{values:[state.sliderOne,state.sliderTwo],sliderLength:280,onValueChange:function onValueChange(value){return store.set({slider:value});},min:0,max:100,step:1,disableTwo:true,allowOverlap:true,__source:{fileName:_jsxFileName,lineNumber:64}}),_react.default.createElement(_.Slider,{values:[state.sliderOne,state.sliderTwo],sliderLength:280,onValueChange:function onValueChange(value){return store.set({slider:value});},min:0,max:100,step:1,disableOne:true,disableTwo:true,allowOverlap:true,__source:{fileName:_jsxFileName,lineNumber:74}}));}));});exports.default=_default;"
  },
  {
    "path": "dist/Components/Slider/Slider.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({container:{position:'relative',height:50,justifyContent:'center'},fullTrack:{flexDirection:_reactNative.I18nManager.isRTL?'row-reverse':'row'}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Slider/Track/Track.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _Track=_interopRequireDefault(require(\"./Track.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Slider/Track/Track.js\";var Track=function(_Component){(0,_inherits2.default)(Track,_Component);function Track(){(0,_classCallCheck2.default)(this,Track);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(Track).apply(this,arguments));}(0,_createClass2.default)(Track,[{key:\"render\",value:function render(){var _this$props=this.props,backgroundTrackColor=_this$props.backgroundTrackColor,sliderLength=_this$props.sliderLength,positionOne=_this$props.positionOne,positionTwo=_this$props.positionTwo,twoMarkers=_this$props.twoMarkers,theme=_this$props.theme,trackColor=_this$props.trackColor,bothDisabled=_this$props.bothDisabled,oneDisabled=_this$props.oneDisabled,trackHeight=_this$props.trackHeight,trackStyle=_this$props.trackStyle;var selectedColor=trackColor?trackColor:theme.primary.main;var unselectedColor=backgroundTrackColor?backgroundTrackColor:'#CECECE';var trackOneLength=positionOne;var trackThreeLength=twoMarkers?sliderLength-positionTwo:0;var trackTwoLength=sliderLength-trackOneLength-trackThreeLength;var commonStyles=[_Track.default.track,trackStyle,{height:trackHeight}];return _react.default.createElement(_react.Fragment,{__source:{fileName:_jsxFileName,lineNumber:50}},_react.default.createElement(_reactNative.View,{style:[].concat(commonStyles,[{width:trackOneLength,backgroundColor:twoMarkers||oneDisabled?unselectedColor:selectedColor}]),__source:{fileName:_jsxFileName,lineNumber:51}}),_react.default.createElement(_reactNative.View,{style:[].concat(commonStyles,[{width:trackTwoLength,backgroundColor:twoMarkers&&!bothDisabled?selectedColor:unselectedColor}]),__source:{fileName:_jsxFileName,lineNumber:61}}),twoMarkers&&_react.default.createElement(_reactNative.View,{style:[].concat(commonStyles,[{width:trackThreeLength,backgroundColor:twoMarkers?unselectedColor:selectedColor}]),__source:{fileName:_jsxFileName,lineNumber:72}}));}}]);return Track;}(_react.Component);(0,_defineProperty2.default)(Track,\"propTypes\",{backgroundTrackColor:_propTypes.default.string,twoMarkers:_propTypes.default.bool,sliderLength:_propTypes.default.number,positionOne:_propTypes.default.number,positionTwo:_propTypes.default.number,theme:_propTypes.default.object,trackColor:_propTypes.default.string,bothDisabled:_propTypes.default.bool,oneDisabled:_propTypes.default.bool,trackHeight:_propTypes.default.number,trackStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array])});var _default=(0,_withTheme.default)(Track);exports.default=_default;"
  },
  {
    "path": "dist/Components/Slider/Track/Track.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({track:{backgroundColor:'#CECECE'},selectedTrack:{backgroundColor:'#0D8675'}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Slider/converts.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.valueToPosition=valueToPosition;exports.positionToValue=positionToValue;exports.createArray=createArray;var closest=function closest(array,n){var minI=0;var maxI=array.length-1;if(array[minI]>n){return minI;}else if(array[maxI]<n){return maxI;}else if(array[minI]<=n&&n<=array[maxI]){var closestIndex=null;while(closestIndex===null){var midI=Math.round((minI+maxI)/2);var midVal=array[midI];if(midVal===n){closestIndex=midI;}else if(maxI===minI+1){var minValue=array[minI];var maxValue=array[maxI];var deltaMin=Math.abs(minValue-n);var deltaMax=Math.abs(maxValue-n);closestIndex=deltaMax<=deltaMin?maxI:minI;}else if(midVal<n){minI=midI;}else if(midVal>n){maxI=midI;}else{closestIndex=-1;}}return closestIndex;}return-1;};function valueToPosition(value,valuesArray,sliderLength){var index=closest(valuesArray,value);var arrLength=valuesArray.length-1;var validIndex=index===-1?arrLength:index;return sliderLength*validIndex/arrLength;}function positionToValue(position,valuesArray,sliderLength){var arrLength;var index;if(position<0||sliderLength<position){return null;}else{arrLength=valuesArray.length-1;index=arrLength*position/sliderLength;return valuesArray[Math.round(index)];}}function createArray(start,end,step){var i;var length;var direction=start-end>0?-1:1;var result=[];if(!step){return result;}else{length=Math.abs((start-end)/step)+1;for(i=0;i<length;i++){result.push(start+i*Math.abs(step)*direction);}return result;}}"
  },
  {
    "path": "dist/Components/Slider/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _Slider.default;}});var _Slider=_interopRequireDefault(require(\"./Slider\"));"
  },
  {
    "path": "dist/Components/Snackbar/Snackbar.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf3=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _Paper=_interopRequireDefault(require(\"../Paper/Paper\"));var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _Snackbar=_interopRequireDefault(require(\"./Snackbar.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Snackbar/Snackbar.js\";var Snackbar=function(_Component){(0,_inherits2.default)(Snackbar,_Component);function Snackbar(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,Snackbar);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(Snackbar)).call.apply(_getPrototypeOf2,[this].concat(args)));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{scaleAnimation:new _reactNative.Animated.Value(0.8),opacity:new _reactNative.Animated.Value(0)});return _this;}(0,_createClass2.default)(Snackbar,[{key:\"componentDidMount\",value:function componentDidMount(){var visible=this.props.visible;if(visible)this.show();}},{key:\"componentDidUpdate\",value:function componentDidUpdate(prevProps){var visible=this.props.visible;if(visible&&!prevProps.visible){this.show();}else if(!visible&&prevProps.visible){this.hide();}}},{key:\"show\",value:function show(){var _this$state=this.state,opacity=_this$state.opacity,scaleAnimation=_this$state.scaleAnimation;var animationDuration=this.props.animationDuration;this.setState({show:false});_reactNative.Animated.parallel([_reactNative.Animated.timing(scaleAnimation,{toValue:1,duration:animationDuration,useNativeDriver:true}),_reactNative.Animated.timing(opacity,{toValue:1,duration:animationDuration,useNativeDriver:true})]).start();}},{key:\"hide\",value:function hide(){var _this$state2=this.state,opacity=_this$state2.opacity,scaleAnimation=_this$state2.scaleAnimation;var animationDuration=this.props.animationDuration;_reactNative.Animated.parallel([_reactNative.Animated.timing(scaleAnimation,{toValue:0.8,duration:animationDuration,useNativeDriver:true}),_reactNative.Animated.timing(opacity,{toValue:0,duration:animationDuration,useNativeDriver:true})]).start();}},{key:\"_renderAction\",value:function _renderAction(){var action=this.props.action;if(!action)return null;return _react.default.createElement(_reactNative.View,{style:_Snackbar.default.actions,__source:{fileName:_jsxFileName,lineNumber:88}},action);}},{key:\"render\",value:function render(){var _this$props=this.props,children=_this$props.children,style=_this$props.style,visible=_this$props.visible,testID=_this$props.testID,action=_this$props.action;var _this$state3=this.state,opacity=_this$state3.opacity,scaleAnimation=_this$state3.scaleAnimation;return _react.default.createElement(_reactNative.View,{style:[_Snackbar.default.container,{zIndex:visible?10:-1}],testID:testID,__source:{fileName:_jsxFileName,lineNumber:96}},_react.default.createElement(_Paper.default,{style:[_Snackbar.default.card,{opacity:opacity,transform:[{scale:scaleAnimation}]},style],__source:{fileName:_jsxFileName,lineNumber:99}},_react.default.createElement(_reactNative.Text,{style:[_Snackbar.default.text,{marginRight:action?0:8}],__source:{fileName:_jsxFileName,lineNumber:112}},children),this._renderAction()));}}]);return Snackbar;}(_react.Component);(0,_defineProperty2.default)(Snackbar,\"propTypes\",{visible:_propTypes.default.bool,animationDuration:_propTypes.default.number,children:_propTypes.default.node,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),action:_propTypes.default.node,testID:_propTypes.default.string});(0,_defineProperty2.default)(Snackbar,\"defaultProps\",{animationDuration:200});var _default=(0,_withTheme.default)(Snackbar);exports.default=_default;"
  },
  {
    "path": "dist/Components/Snackbar/Snackbar.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../../\");var _storybookState=require(\"@sambego/storybook-state\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Snackbar/Snackbar.stories.js\";var store=new _storybookState.Store({show1:false,show2:false,show3:false});var _default=(0,_storiesOf.storiesOf)('Components|Snackbar',module).addParameters({jest:['Snackbar']}).add('Simple Snackbar',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:19}},_react.default.createElement(_Header.default,{title:'Simple Snackbar',__source:{fileName:_jsxFileName,lineNumber:20}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:21}},function(state){return _react.default.createElement(_reactNative.View,{style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:23}},_react.default.createElement(_.Button,{type:\"outlined\",onPress:function onPress(){return store.set({show1:true});},text:'Open Snackbar',textColor:'#6E2CFA',__source:{fileName:_jsxFileName,lineNumber:24}}),_react.default.createElement(_.Snackbar,{visible:state.show1,action:_react.default.createElement(_.Button,{type:\"text\",onPress:function onPress(){return store.set({show1:false});},text:'Button',textColor:'#6E2CFA',__source:{fileName:_jsxFileName,lineNumber:33}}),__source:{fileName:_jsxFileName,lineNumber:30}},'This is a snackbar component'));}));}).add('No button snackbar',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:48}},_react.default.createElement(_Header.default,{title:'No Button Snackbar',__source:{fileName:_jsxFileName,lineNumber:49}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:50}},function(state){return _react.default.createElement(_reactNative.View,{style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:52}},_react.default.createElement(_.Button,{type:\"outlined\",onPress:function onPress(){return store.set({show2:true});},text:'Open Snackbar',textColor:'#6E2CFA',__source:{fileName:_jsxFileName,lineNumber:53}}),_react.default.createElement(_.Snackbar,{visible:state.show2,__source:{fileName:_jsxFileName,lineNumber:59}},'This is a single line snackbar'));}));}).add('Two line snackbar',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:68}},_react.default.createElement(_Header.default,{title:'Two line Snackbar',__source:{fileName:_jsxFileName,lineNumber:69}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:70}},function(state){return _react.default.createElement(_reactNative.View,{style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:72}},_react.default.createElement(_.Button,{type:\"outlined\",onPress:function onPress(){return store.set({show3:true});},text:'Open Snackbar',textColor:'#6E2CFA',__source:{fileName:_jsxFileName,lineNumber:73}}),_react.default.createElement(_.Snackbar,{visible:state.show3,style:{flex:1,flexDirection:'column',paddingBottom:16,paddingRight:16},action:_react.default.createElement(_.Button,{style:{marginTop:16,marginLeft:220},type:\"text\",onPress:function onPress(){return store.set({show3:false});},text:'Button',textColor:'#6E2CFA',density:-2,__source:{fileName:_jsxFileName,lineNumber:88}}),__source:{fileName:_jsxFileName,lineNumber:79}},'Two line message with long CTA button:'+'Lorem ipsum dolor sit amet, consectetur'));}));});exports.default=_default;"
  },
  {
    "path": "dist/Components/Snackbar/Snackbar.styles.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _reactNative=require(\"react-native\");var _shadow=_interopRequireDefault(require(\"../../Utils/Shadow/shadow.js\"));function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}var styles=_reactNative.StyleSheet.create({container:{bottom:0,flex:1,width:'100%',justifyContent:'center',alignItems:'center',position:'absolute'},card:_objectSpread({},(0,_shadow.default)(6),{borderRadius:3,width:342,backgroundColor:'#212121',flexDirection:'row',justifyContent:'space-between',alignItems:'center',padding:8}),text:{flex:1,fontWeight:'400',flexWrap:'wrap',color:'white',marginLeft:8,marginVertical:8,fontSize:14,lineHeight:16,letterSpacing:0.25}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Snackbar/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _Snackbar.default;}});var _Snackbar=_interopRequireDefault(require(\"./Snackbar\"));"
  },
  {
    "path": "dist/Components/SwipeNav/SwipeNav.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf3=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _SwipeNav=_interopRequireDefault(require(\"./SwipeNav.styles\"));var _statusBarHeight=_interopRequireDefault(require(\"../../helpers/statusBarHeight\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/SwipeNav/SwipeNav.js\";var SwipeNav=function(_Component){(0,_inherits2.default)(SwipeNav,_Component);function SwipeNav(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,SwipeNav);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(SwipeNav)).call.apply(_getPrototypeOf2,[this].concat(args)));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{headerHeight:56,footerHeight:100,offsetY:0,headerOffsetY:new _reactNative.Animated.Value(0),scrollPaddingTop:new _reactNative.Animated.Value(56),footerOffsetY:new _reactNative.Animated.Value(0),scrollPaddingBottom:new _reactNative.Animated.Value(100)});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"onHeaderLayout\",function(e){_this.setState({headerHeight:e.nativeEvent.layout.height});});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"onFooterLayout\",function(e){_this.setState({footeerHeight:e.nativeEvent.layout.height});});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"onScroll\",function(e){var _this$props=_this.props,header=_this$props.header,footer=_this$props.footer;var offsetY=e.nativeEvent.contentOffset.y;var lastOffsetY=_this.state.offsetY;_this.setState({offsetY:offsetY});if(header&&offsetY-lastOffsetY>20||offsetY-lastOffsetY<-20){if(offsetY>lastOffsetY){_this.animateHeader(true);}else{_this.animateHeader(false);}}if(footer&&offsetY-lastOffsetY<-20||offsetY-lastOffsetY>20){if(offsetY<lastOffsetY){_this.animateFooter(true);}else{_this.animateFooter(false);}}});return _this;}(0,_createClass2.default)(SwipeNav,[{key:\"animateHeader\",value:function animateHeader(hide){var _this$state=this.state,headerOffsetY=_this$state.headerOffsetY,headerHeight=_this$state.headerHeight,scrollPaddingTop=_this$state.scrollPaddingTop;var newHeaderOffset=hide?-headerHeight-(0,_statusBarHeight.default)():0;var newScrollPadding=hide?0:headerHeight;_reactNative.Animated.parallel([_reactNative.Animated.timing(headerOffsetY,{toValue:newHeaderOffset,duration:100,useNativeDriver:true}),_reactNative.Animated.timing(scrollPaddingTop,{toValue:newScrollPadding,duration:100,useNativeDriver:true})]).start();}},{key:\"animateFooter\",value:function animateFooter(hide){var _this$state2=this.state,footerOffsetY=_this$state2.footerOffsetY,footerHeight=_this$state2.footerHeight,scrollPaddingBottom=_this$state2.scrollPaddingBottom;var newFooterOffset=hide?footerHeight:0;var newScrollPadding=hide?0:footerHeight;_reactNative.Animated.parallel([_reactNative.Animated.timing(footerOffsetY,{toValue:newFooterOffset,duration:100,useNativeDriver:true}),_reactNative.Animated.timing(scrollPaddingBottom,{toValue:newScrollPadding,duration:100,useNativeDriver:true})]).start();}},{key:\"renderScrollView\",value:function renderScrollView(){var _this$props2=this.props,header=_this$props2.header,footer=_this$props2.footer,scrollViewStyle=_this$props2.scrollViewStyle,scrollViewProps=_this$props2.scrollViewProps,children=_this$props2.children;return _react.default.createElement(_reactNative.Animated.ScrollView,(0,_extends2.default)({useNativeDriver:true,scrollEventThrottle:16},scrollViewProps,{onScroll:this.onScroll,style:[_SwipeNav.default.scroll,{paddingTop:header?this.state.scrollPaddingTop:0,paddingBottom:footer?this.state.paddingBottom:0},scrollViewStyle],__source:{fileName:_jsxFileName,lineNumber:113}}),children);}},{key:\"renderCustomScrollView\",value:function renderCustomScrollView(){var _this2=this;var _this$props3=this.props,header=_this$props3.header,footer=_this$props3.footer,scrollComponent=_this$props3.scrollComponent,scrollViewStyle=_this$props3.scrollViewStyle;return _react.default.cloneElement(scrollComponent,{scrollEventThrottle:16,style:[_SwipeNav.default.scroll,{paddingTop:header?this.state.scrollPaddingTop:0,paddingBottom:footer?this.state.paddingBottom:0},scrollViewStyle],onScroll:function onScroll(e){_this2.onScroll(e);scrollComponent.props.onScroll&&scrollComponent.props.onScroll(e);}});}},{key:\"_renderHeader\",value:function _renderHeader(){var _this$props4=this.props,header=_this$props4.header,headerContainerStyle=_this$props4.headerContainerStyle;return _react.default.createElement(_reactNative.Animated.View,{useNativeDriver:true,style:[_SwipeNav.default.headerContainer,headerContainerStyle,{transform:[{translateY:this.state.headerOffsetY}]}],onLayout:this.onHeaderLayout,__source:{fileName:_jsxFileName,lineNumber:154}},header);}},{key:\"_renderFooter\",value:function _renderFooter(){var _this$props5=this.props,footer=_this$props5.footer,footerContainerStyle=_this$props5.footerContainerStyle;return _react.default.createElement(_reactNative.Animated.View,{useNativeDriver:true,style:[_SwipeNav.default.footerContainer,footerContainerStyle,{transform:[{translateY:this.state.footerOffsetY}]}],onLayout:this.onFooterLayout,__source:{fileName:_jsxFileName,lineNumber:173}},footer);}},{key:\"render\",value:function render(){var _this$props6=this.props,header=_this$props6.header,footer=_this$props6.footer,scrollComponent=_this$props6.scrollComponent,style=_this$props6.style;return _react.default.createElement(_reactNative.View,{style:[_SwipeNav.default.container,style],__source:{fileName:_jsxFileName,lineNumber:192}},header?this._renderHeader():null,_react.default.createElement(_reactNative.View,{style:[_SwipeNav.default.scrollContainer],__source:{fileName:_jsxFileName,lineNumber:194}},scrollComponent?this.renderCustomScrollView():this.renderScrollView()),footer?this._renderFooter():null);}}]);return SwipeNav;}(_react.Component);(0,_defineProperty2.default)(SwipeNav,\"propTypes\",{header:_propTypes.default.node,footer:_propTypes.default.node,scrollViewProps:_propTypes.default.object,scrollComponent:_propTypes.default.node,style:_propTypes.default.object,headerContainerStyle:_propTypes.default.object,footerContainerStyle:_propTypes.default.object,scrollViewStyle:_propTypes.default.object,children:_propTypes.default.node});var _default=SwipeNav;exports.default=_default;"
  },
  {
    "path": "dist/Components/SwipeNav/SwipeNav.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _=require(\"../..\");var _SwipeNav=_interopRequireDefault(require(\"./SwipeNav\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/SwipeNav/SwipeNav.stories.js\";var _default=(0,_storiesOf.storiesOf)('Components|SwipeNav',module).addParameters({jest:['SwipeNav']}).add('Header',function(){return _react.default.createElement(_reactNative.SafeAreaView,{__source:{fileName:_jsxFileName,lineNumber:21}},_react.default.createElement(_reactNative.View,{style:{height:'100%',maxWidth:500},__source:{fileName:_jsxFileName,lineNumber:22}},_react.default.createElement(_SwipeNav.default,{header:_react.default.createElement(_.Appbar,{barType:'normal',color:'#009688',navigation:'menu',title:'News',actionItems:[{name:'more-vert'}],__source:{fileName:_jsxFileName,lineNumber:25}}),scrollViewStyle:{height:_reactNative.Platform.OS=='web'?500:'100%'},__source:{fileName:_jsxFileName,lineNumber:23}},_react.default.createElement(BodyContent,{__source:{fileName:_jsxFileName,lineNumber:34}}))));}).add('Footer BottomNav',function(){return _react.default.createElement(_reactNative.SafeAreaView,{__source:{fileName:_jsxFileName,lineNumber:40}},_react.default.createElement(_reactNative.View,{style:{height:'100%',maxWidth:500},__source:{fileName:_jsxFileName,lineNumber:41}},_react.default.createElement(_SwipeNav.default,{footer:_react.default.createElement(_.BottomNavigation,{style:{maxWidth:672,width:'100%'},value:true,showLabels:true,actionItems:[{label:'Buy'},{label:'Sell'},{label:'Settings'}],__source:{fileName:_jsxFileName,lineNumber:44}}),scrollViewStyle:{height:_reactNative.Platform.OS=='web'?400:'100%',overflow:'hidden'},__source:{fileName:_jsxFileName,lineNumber:42}},_react.default.createElement(BodyContent,{__source:{fileName:_jsxFileName,lineNumber:59}}))));}).add('Footer AppbarBottom',function(){return _react.default.createElement(_reactNative.SafeAreaView,{__source:{fileName:_jsxFileName,lineNumber:65}},_react.default.createElement(_reactNative.View,{style:{height:'100%',maxWidth:500},__source:{fileName:_jsxFileName,lineNumber:66}},_react.default.createElement(_SwipeNav.default,{footer:_react.default.createElement(_.AppbarBottom,{fab:_react.default.createElement(_.Fab,{icon:'change-history',backgroundColor:'#009688',__source:{fileName:_jsxFileName,lineNumber:70}}),fabPosition:'center',navigation:'menu',color:'#E91E63',__source:{fileName:_jsxFileName,lineNumber:69}}),scrollViewStyle:{height:_reactNative.Platform.OS=='web'?400:'100%',overflow:'hidden'},__source:{fileName:_jsxFileName,lineNumber:67}},_react.default.createElement(BodyContent,{__source:{fileName:_jsxFileName,lineNumber:80}}))));});exports.default=_default;var SimpleCard=function SimpleCard(_ref){var hours=_ref.hours,title=_ref.title,description=_ref.description;return _react.default.createElement(_.Card,{style:{maxWidth:500,width:'100%',marginBottom:6,marginTop:6},__source:{fileName:_jsxFileName,lineNumber:88}},_react.default.createElement(_.CardContent,{__source:{fileName:_jsxFileName,lineNumber:90}},_react.default.createElement(_reactNative.Text,{style:{color:'rgba(0,0,0,.6)',fontSize:14,marginBottom:6},__source:{fileName:_jsxFileName,lineNumber:91}},hours),_react.default.createElement(_reactNative.Text,{style:{color:'rgba(0,0,0,1)',fontSize:16,marginBottom:10},__source:{fileName:_jsxFileName,lineNumber:95}},title),_react.default.createElement(_reactNative.Text,{style:{color:'rgba(0,0,0,.8)',fontSize:14},__source:{fileName:_jsxFileName,lineNumber:99}},description)));};var BodyContent=function BodyContent(){return _react.default.createElement(_reactNative.View,{style:{backgroundColor:'salmon',paddingLeft:8,paddingRight:8},__source:{fileName:_jsxFileName,lineNumber:109}},_react.default.createElement(SimpleCard,{hours:'2 hours ago',title:'Woman Opens Two Chrome Tabs',description:'After downloading 128GB of RAM on her custom desktop, Karen was able to open two Chrome tabs at the same time which experts have called \"Revolutionary\"',__source:{fileName:_jsxFileName,lineNumber:116}}),_react.default.createElement(SimpleCard,{hours:'3 hours ago',title:'Local developer wastes time',description:'A local develop wastes his Sunday writing placeholder text for a demo instead of going outside',__source:{fileName:_jsxFileName,lineNumber:123}}),_react.default.createElement(SimpleCard,{hours:'4 hours ago',title:'Bitcoin dead again',description:'Bitcoin has died yet again after falling .2% in 1 hour says leading economist.',__source:{fileName:_jsxFileName,lineNumber:130}}),_react.default.createElement(SimpleCard,{hours:'6 hours ago',title:'Bitcoin going to the moon',description:'Bitcoin has risen 11.4% in the last 5 minutes which has some experts predicating the start of the next bull run',__source:{fileName:_jsxFileName,lineNumber:137}}),_react.default.createElement(SimpleCard,{hours:'8 hours ago',title:'U.S Tech Startups rebound',description:'Favorable Business Conditions have allowed startups to secure more fundraising deals compared to last year.',__source:{fileName:_jsxFileName,lineNumber:145}}),_react.default.createElement(SimpleCard,{hours:'9 hours ago',title:\"Asia's clean energy initiatives\",description:'China Plans to invest billions of dollars for the development of over 300 clean energy projects in SouthEast Asia',__source:{fileName:_jsxFileName,lineNumber:152}}),_react.default.createElement(SimpleCard,{hours:'10 hours ago',title:'Copper on the rise',description:'Copper prices soar admid global market optimism and increasing demand',__source:{fileName:_jsxFileName,lineNumber:159}}),_react.default.createElement(SimpleCard,{hours:'11 hours ago',title:'Poverty to Empowerment in Chicago',description:'How one woman is transforming the lives of underpriveledged children.',__source:{fileName:_jsxFileName,lineNumber:166}}));};SimpleCard.propTypes={hours:_propTypes.default.string,title:_propTypes.default.string,description:_propTypes.default.string};"
  },
  {
    "path": "dist/Components/SwipeNav/SwipeNav.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _default={container:{flex:1,overflow:'hidden'},headerContainer:{position:'absolute',left:0,right:0,top:0,zIndex:100},footerContainer:{position:'absolute',left:0,right:0,bottom:0,zIndex:100},scrollContainer:{zIndex:10}};exports.default=_default;"
  },
  {
    "path": "dist/Components/SwipeNav/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _SwipeNav.default;}});var _SwipeNav=_interopRequireDefault(require(\"./SwipeNav\"));"
  },
  {
    "path": "dist/Components/Switch/Switch.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _objectWithoutProperties2=_interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutProperties\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf3=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _reactNative=require(\"react-native\");var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _Ripple=_interopRequireDefault(require(\"../Ripple/Ripple.js\"));var _ProgressCircle=_interopRequireDefault(require(\"../Progress/ProgressCircle/ProgressCircle.js\"));var _Switch=_interopRequireDefault(require(\"./Switch.styles\"));var _color=_interopRequireDefault(require(\"color\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Switch/Switch.js\";function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}var Switch=function(_Component){(0,_inherits2.default)(Switch,_Component);function Switch(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,Switch);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(Switch)).call.apply(_getPrototypeOf2,[this].concat(args)));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{thumbTranslateX:new _reactNative.Animated.Value(0)});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"getDimensions\",function(width){var height=width*(8/9);return{height:height,trackDimensions:{width:width,height:height*(7/16),borderRadius:height*(5/16)},thumbRippleDimensions:{width:width*(8/9),top:height*-(9/32),left:width*-(2/9)},thumbDimensions:{width:width*(5/9),height:height*(5/8)}};});return _this;}(0,_createClass2.default)(Switch,[{key:\"componentDidMount\",value:function componentDidMount(){var _this$props=this.props,checked=_this$props.checked,width=_this$props.width;var thumbTranslateX=this.state.thumbTranslateX;if(checked){var xValue=width/2;thumbTranslateX.setValue(_reactNative.I18nManager.isRTL?-xValue:xValue);}}},{key:\"componentDidUpdate\",value:function componentDidUpdate(prevProps){var checked=this.props.checked;if(checked!=prevProps.checked){this.handleSwitch();}}},{key:\"_renderLabel\",value:function _renderLabel(){var _this$props2=this.props,label=_this$props2.label,labelPos=_this$props2.labelPos,_onPress=_this$props2.onPress;return _react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:function onPress(){return _onPress();},__source:{fileName:_jsxFileName,lineNumber:59}},_react.default.createElement(_reactNative.View,{style:{marginLeft:labelPos=='right'?8:0,marginRight:labelPos=='left'?8:0},__source:{fileName:_jsxFileName,lineNumber:60}},label));}},{key:\"handleSwitch\",value:function handleSwitch(){var thumbTranslateX=this.state.thumbTranslateX;var _this$props3=this.props,checked=_this$props3.checked,width=_this$props3.width;var xValue=width/2;if(!checked){xValue=0;}_reactNative.Animated.parallel([_reactNative.Animated.timing(thumbTranslateX,{toValue:_reactNative.I18nManager.isRTL?-xValue:xValue,duration:300,useNativeDriver:true})]).start();}},{key:\"render\",value:function render(){var thumbTranslateX=this.state.thumbTranslateX;var _this$props4=this.props,label=_this$props4.label,labelPos=_this$props4.labelPos,style=_this$props4.style,trackStyle=_this$props4.trackStyle,thumbStyle=_this$props4.thumbStyle,theme=_this$props4.theme,color=_this$props4.color,checked=_this$props4.checked,onPress=_this$props4.onPress,loading=_this$props4.loading,testID=_this$props4.testID,width=_this$props4.width,rest=(0,_objectWithoutProperties2.default)(_this$props4,[\"label\",\"labelPos\",\"style\",\"trackStyle\",\"thumbStyle\",\"theme\",\"color\",\"checked\",\"onPress\",\"loading\",\"testID\",\"width\"]);var trackColor=color?(0,_color.default)(color).alpha(0.54):(0,_color.default)(theme.primary.main).alpha(0.54);var thumbColor=color?color:theme.primary.main;var _this$getDimensions=this.getDimensions(width),height=_this$getDimensions.height,trackDimensions=_this$getDimensions.trackDimensions,thumbRippleDimensions=_this$getDimensions.thumbRippleDimensions,thumbDimensions=_this$getDimensions.thumbDimensions;return _react.default.createElement(_reactNative.View,(0,_extends2.default)({style:[_Switch.default.container,style],testID:testID},rest,{__source:{fileName:_jsxFileName,lineNumber:142}}),labelPos=='left'&&label?this._renderLabel():null,_react.default.createElement(_reactNative.Animated.View,{useNativeDriver:true,style:[_Switch.default.track,_objectSpread({backgroundColor:checked&&!loading?trackColor:'rgba(0, 0, 0, 0.3)'},trackDimensions),trackStyle],onPress:onPress,__source:{fileName:_jsxFileName,lineNumber:144}},_react.default.createElement(_Ripple.default,{rippleContainerBorderRadius:100,style:[_Switch.default.thumbRipple,_objectSpread({transform:[{translateX:thumbTranslateX}],height:height},thumbRippleDimensions)],onPress:onPress,__source:{fileName:_jsxFileName,lineNumber:156}},_react.default.createElement(_reactNative.Animated.View,{useNativeDriver:true,style:[_Switch.default.thumb,_objectSpread({backgroundColor:checked&&!loading?thumbColor:'white'},thumbDimensions),thumbStyle],__source:{fileName:_jsxFileName,lineNumber:167}},loading?_react.default.createElement(_ProgressCircle.default,{color:thumbColor,size:14,widthOfBorder:6,__source:{fileName:_jsxFileName,lineNumber:178}}):null))),labelPos=='right'&&label?this._renderLabel():null);}}]);return Switch;}(_react.Component);(0,_defineProperty2.default)(Switch,\"propTypes\",{checked:_propTypes.default.bool,onPress:_propTypes.default.func,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),trackStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),thumbStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),label:_propTypes.default.node,labelPos:_propTypes.default.string,theme:_propTypes.default.object,color:_propTypes.default.string,loading:_propTypes.default.bool,testID:_propTypes.default.string,width:_propTypes.default.number});(0,_defineProperty2.default)(Switch,\"defaultProps\",{labelPos:'right',width:36});var _default=(0,_withTheme.default)(Switch);exports.default=_default;"
  },
  {
    "path": "dist/Components/Switch/Switch.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../../\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _storybookState=require(\"@sambego/storybook-state\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Switch/Switch.stories.js\";var store=new _storybookState.Store({checkedOne:true,checkedTwo:true,checkedThree:true,checkedFour:true,checkedFive:true,isLoading:true});var _default=(0,_storiesOf.storiesOf)('Components|Switch',module).addParameters({jest:['Switch']}).add('simple',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:22}},_react.default.createElement(_Header.default,{title:'Switch',__source:{fileName:_jsxFileName,lineNumber:23}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:24}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:26}},_react.default.createElement(_.Switch,{onPress:function onPress(){return store.set({checkedOne:!state.checkedOne});},checked:state.checkedOne,style:{marginBottom:16},__source:{fileName:_jsxFileName,lineNumber:27}}),_react.default.createElement(_.Switch,{color:'#E91E63',onPress:function onPress(){return store.set({checkedTwo:!state.checkedTwo});},checked:state.checkedTwo,style:{marginBottom:16},__source:{fileName:_jsxFileName,lineNumber:32}}),_react.default.createElement(_.Switch,{color:'#009688',onPress:function onPress(){return store.set({checkedThree:!state.checkedThree});},checked:state.checkedThree,__source:{fileName:_jsxFileName,lineNumber:38}}));}));}).add('loading',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:49}},_react.default.createElement(_Header.default,{title:'Switch',__source:{fileName:_jsxFileName,lineNumber:50}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:51}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:53}},_react.default.createElement(_.Switch,{onPress:function onPress(){return store.set({checkedOne:!state.checkedOne});},checked:state.checkedOne,loading:state.isLoading,style:{marginBottom:16},__source:{fileName:_jsxFileName,lineNumber:54}}),_react.default.createElement(_.Switch,{onPress:function onPress(){return store.set({checkedOne:!state.checkedOne});},checked:state.checkedOne,loading:state.isLoading,style:{marginBottom:16},color:'#E91E63',__source:{fileName:_jsxFileName,lineNumber:60}}),_react.default.createElement(_.Switch,{onPress:function onPress(){return store.set({checkedOne:!state.checkedOne});},checked:state.checkedOne,loading:state.isLoading,style:{marginBottom:16},color:'#9C27B0',__source:{fileName:_jsxFileName,lineNumber:67}}),_react.default.createElement(_.Button,{text:'Toggle Loading',type:\"outlined\",onPress:function onPress(){return store.set({isLoading:!state.isLoading});},__source:{fileName:_jsxFileName,lineNumber:74}}));}));}).add('label',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:85}},_react.default.createElement(_Header.default,{title:'Switch',__source:{fileName:_jsxFileName,lineNumber:86}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:88}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:90}},_react.default.createElement(_.Switch,{label:_react.default.createElement(_.BodyText,{type:2,text:'Label',__source:{fileName:_jsxFileName,lineNumber:92}}),style:{marginBottom:16},color:'#E91E63',onPress:function onPress(){return store.set({checkedOne:!state.checkedOne});},checked:state.checkedOne,__source:{fileName:_jsxFileName,lineNumber:91}}),_react.default.createElement(_.Switch,{label:_react.default.createElement(_.BodyText,{type:2,style:{color:'#E91E63'},text:'Label',__source:{fileName:_jsxFileName,lineNumber:100}}),style:{marginBottom:16},color:'#E91E63',onPress:function onPress(){return store.set({checkedTwo:!state.checkedTwo});},checked:state.checkedTwo,__source:{fileName:_jsxFileName,lineNumber:98}}),_react.default.createElement(_.Switch,{label:_react.default.createElement(_.BodyText,{type:2,text:'Label',__source:{fileName:_jsxFileName,lineNumber:112}}),labelPos:'left',color:'#9C27B0',style:{marginBottom:16},onPress:function onPress(){return store.set({checkedThree:!state.checkedThree});},checked:state.checkedThree,__source:{fileName:_jsxFileName,lineNumber:111}}),_react.default.createElement(_.Switch,{label:_react.default.createElement(_.BodyText,{type:2,text:'Label',__source:{fileName:_jsxFileName,lineNumber:120}}),labelPos:'left',color:'#3F51B5',style:{marginBottom:16},onPress:function onPress(){return store.set({checkedFour:!state.checkedFour});},checked:state.checkedFour,__source:{fileName:_jsxFileName,lineNumber:119}}));}));});exports.default=_default;"
  },
  {
    "path": "dist/Components/Switch/Switch.styles.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _reactNative=require(\"react-native\");var _shadow=_interopRequireDefault(require(\"../../Utils/Shadow/shadow.js\"));function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}var styles=_reactNative.StyleSheet.create({container:{flexDirection:'row',alignItems:'center',alignSelf:'flex-start'},track:{backgroundColor:'rgba(0,0,0,.3)',position:'relative'},thumbRipple:{borderRadius:100,position:'absolute',justifyContent:'center',alignItems:'center'},thumb:_objectSpread({borderRadius:100,justifyContent:'center',alignItems:'center'},(0,_shadow.default)(2))});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Switch/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _Switch.default;}});var _Switch=_interopRequireDefault(require(\"./Switch\"));"
  },
  {
    "path": "dist/Components/Tabs/Tab/Tab.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _Ripple=_interopRequireDefault(require(\"../../Ripple/Ripple.js\"));var _Icon=_interopRequireDefault(require(\"../../Icon/Icon.js\"));var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _Tab=_interopRequireDefault(require(\"./Tab.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Tabs/Tab/Tab.js\";var Tab=function(_Component){(0,_inherits2.default)(Tab,_Component);function Tab(){(0,_classCallCheck2.default)(this,Tab);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(Tab).apply(this,arguments));}(0,_createClass2.default)(Tab,[{key:\"_renderIcon\",value:function _renderIcon(color){var _this$props=this.props,icon=_this$props.icon,iconStyles=_this$props.iconStyles;return _react.default.createElement(_Icon.default,{name:icon,size:24,color:color,style:iconStyles,__source:{fileName:_jsxFileName,lineNumber:34}});}},{key:\"_renderText\",value:function _renderText(color){var _this$props2=this.props,label=_this$props2.label,icon=_this$props2.icon,textStyle=_this$props2.textStyle;return _react.default.createElement(_reactNative.Text,{style:[_Tab.default.text,{color:color,marginTop:icon?4:0},textStyle],__source:{fileName:_jsxFileName,lineNumber:40}},label?label.toUpperCase():null);}},{key:\"_renderTab\",value:function _renderTab(){var _this$props3=this.props,label=_this$props3.label,active=_this$props3.active,activeTextColor=_this$props3.activeTextColor,containerStyle=_this$props3.containerStyle,inActiveTextColor=_this$props3.inActiveTextColor,icon=_this$props3.icon;var color=active?activeTextColor:inActiveTextColor;return _react.default.createElement(_reactNative.View,{style:[_Tab.default.container,containerStyle],__source:{fileName:_jsxFileName,lineNumber:67}},icon?this._renderIcon(color):null,label?this._renderText(color):null);}},{key:\"getHeight\",value:function getHeight(){var _this$props4=this.props,icon=_this$props4.icon,label=_this$props4.label;var height=icon&&label?72:48;return height;}},{key:\"render\",value:function render(){var _this$props5=this.props,onPress=_this$props5.onPress,tabWidth=_this$props5.tabWidth,rippleProps=_this$props5.rippleProps,style=_this$props5.style;return _react.default.createElement(_Ripple.default,(0,_extends2.default)({onPress:onPress,style:[{width:tabWidth,height:this.getHeight()},style]},rippleProps,{__source:{fileName:_jsxFileName,lineNumber:85}}),this._renderTab());}}]);return Tab;}(_react.Component);(0,_defineProperty2.default)(Tab,\"propTypes\",{label:_propTypes.default.string,active:_propTypes.default.bool,activeTextColor:_propTypes.default.string,containerStyle:_reactNative.ViewPropTypes.style,inActiveTextColor:_propTypes.default.string,textStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),iconStyles:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),onPress:_propTypes.default.func,tabWidth:_propTypes.default.number,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),icon:_propTypes.default.string,rippleProps:_propTypes.default.object});(0,_defineProperty2.default)(Tab,\"defaultProps\",{inActiveTextColor:'rgba(255, 255, 255, 0.7)',activeTextColor:'#fff',containerStyle:{}});var _default=(0,_withTheme.default)(Tab);exports.default=_default;"
  },
  {
    "path": "dist/Components/Tabs/Tab/Tab.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../../..\");var _Header=_interopRequireDefault(require(\"../../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../../storybook/components/Container\"));var _storiesOf=require(\"../../../storybook/helpers/storiesOf\");var _storybookState=require(\"@sambego/storybook-state\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Tabs/Tab/Tab.stories.js\";var store=new _storybookState.Store({selectedTab:1});var _default=(0,_storiesOf.storiesOf)('Components|Tabs/Tab',module).addParameters({jest:['Tab']}).add('as component',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:18}},_react.default.createElement(_Header.default,{title:'Tab',__source:{fileName:_jsxFileName,lineNumber:19}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:20}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:22}},_react.default.createElement(_.Tabs,{selectedIndex:state.selectedTab,handleChange:function handleChange(index){return store.set({selectedTab:index});},actionItems:[_react.default.createElement(_.Tab,{key:1,icon:\"phone\",label:\"Recents\",__source:{fileName:_jsxFileName,lineNumber:27}}),_react.default.createElement(_.Tab,{key:2,icon:\"favorite\",label:\"Favorites\",__source:{fileName:_jsxFileName,lineNumber:28}}),_react.default.createElement(_.Tab,{key:3,icon:\"map\",label:\"Nearby\",__source:{fileName:_jsxFileName,lineNumber:29}})],__source:{fileName:_jsxFileName,lineNumber:23}}));}));}).add('custom',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:38}},_react.default.createElement(_Header.default,{title:'Tab',__source:{fileName:_jsxFileName,lineNumber:39}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:40}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:42}},_react.default.createElement(_.Tabs,{selectedIndex:state.selectedTab,handleChange:function handleChange(index){return store.set({selectedTab:index});},actionItems:[_react.default.createElement(_.Tab,{key:1,icon:\"phone\",label:\"Recents\",style:{backgroundColor:'#9C27B0'},__source:{fileName:_jsxFileName,lineNumber:47}}),_react.default.createElement(_.Tab,{key:2,icon:\"favorite\",label:\"Favorites\",style:{backgroundColor:'#009688'},__source:{fileName:_jsxFileName,lineNumber:53}}),_react.default.createElement(_.Tab,{key:3,icon:\"map\",label:\"Nearby\",__source:{fileName:_jsxFileName,lineNumber:59}}),_react.default.createElement(_.Tab,{key:4,icon:\"account-circle\",label:\"Account\",style:{backgroundColor:'#E91E63'},__source:{fileName:_jsxFileName,lineNumber:60}})],__source:{fileName:_jsxFileName,lineNumber:43}}));}));});exports.default=_default;"
  },
  {
    "path": "dist/Components/Tabs/Tab/Tab.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({container:{alignItems:'center',justifyContent:'center',padding:12,minHeight:48,maxHeight:72},text:{fontSize:14,textAlign:'center',minWidth:'100%'}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Tabs/Tab/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _Tab.default;}});var _Tab=_interopRequireDefault(require(\"./Tab\"));"
  },
  {
    "path": "dist/Components/Tabs/Tabs.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=exports.TabsContext=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf3=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _Tab=_interopRequireDefault(require(\"./Tab/Tab\"));var _Underline=_interopRequireDefault(require(\"./Underline/Underline\"));var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _Tabs=_interopRequireDefault(require(\"./Tabs.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Tabs/Tabs.js\";var TabsContext=_react.default.createContext();exports.TabsContext=TabsContext;var Tabs=function(_Component){(0,_inherits2.default)(Tabs,_Component);function Tabs(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,Tabs);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(Tabs)).call.apply(_getPrototypeOf2,[this].concat(args)));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{tabWidth:0,barWidth:0,indicatorPosition:new _reactNative.Animated.Value(0)});return _this;}(0,_createClass2.default)(Tabs,[{key:\"componentDidUpdate\",value:function componentDidUpdate(prevProps){var _this2=this;var actionItems=this.props.actionItems;if(actionItems.length!==prevProps.actionItems.length&&this.container){this.container.measure(function(_,b,width){_this2.getTabWidth(width);});}this.selectTab();}},{key:\"shouldComponentUpdate\",value:function shouldComponentUpdate(nextProps){var actionItems=this.props.actionItems;return actionItems.length!==nextProps.actionItems.length||nextProps.selectedIndex<nextProps.actionItems.length&&nextProps.selectedIndex>=0;}},{key:\"getAnimateValues\",value:function getAnimateValues(){var _this$props=this.props,selectedIndex=_this$props.selectedIndex,scrollEnabled=_this$props.scrollEnabled,actionItems=_this$props.actionItems;var _this$state=this.state,tabWidth=_this$state.tabWidth,barWidth=_this$state.barWidth;var index=selectedIndex;var scrollValue=!scrollEnabled?tabWidth:barWidth*0.4;if(scrollValue<90)scrollValue=90;if(!scrollEnabled&&scrollValue>90){return{indicatorPosition:index===0?0:index*scrollValue,scrollPosition:0};}switch(index){case 0:return{indicatorPosition:0,scrollPosition:0};case 1:return{indicatorPosition:barWidth*0.5-scrollValue/4,scrollPosition:scrollValue*0.25};case actionItems.length-1:return{indicatorPosition:scrollValue*(index-1)+(barWidth*0.5-scrollValue/4),scrollPosition:scrollValue*(index-2)+scrollValue*0.5};default:return{indicatorPosition:scrollValue*(index-1)+(barWidth*0.5-scrollValue/4),scrollPosition:scrollValue*0.25+scrollValue*(index-1)};}}},{key:\"selectTab\",value:function selectTab(){var _this$getAnimateValue=this.getAnimateValues(),indicatorPosition=_this$getAnimateValue.indicatorPosition,scrollPosition=_this$getAnimateValue.scrollPosition;_reactNative.Animated.spring(this.state.indicatorPosition,{toValue:_reactNative.I18nManager.isRTL?-indicatorPosition:indicatorPosition,tension:300,friction:20,useNativeDriver:true}).start();if(this.scrollView){this.scrollView.scrollTo({x:scrollPosition});}}},{key:\"getTabWidth\",value:function getTabWidth(width){var _this$props2=this.props,scrollEnabled=_this$props2.scrollEnabled,actionItems=_this$props2.actionItems;if(!scrollEnabled){var tabWidth=width/actionItems.length;this.setState({tabWidth:tabWidth});}this.setState({barWidth:width});}},{key:\"getColor\",value:function getColor(){var _this$props3=this.props,backgroundColor=_this$props3.backgroundColor,theme=_this$props3.theme;var implementedColor=backgroundColor?backgroundColor:theme.primary.main;return implementedColor;}},{key:\"_renderTabs\",value:function _renderTabs(){var _this$props4=this.props,scrollEnabled=_this$props4.scrollEnabled,actionItems=_this$props4.actionItems,handleChange=_this$props4.handleChange,selectedIndex=_this$props4.selectedIndex;var _this$state2=this.state,tabWidth=_this$state2.tabWidth,barWidth=_this$state2.barWidth;var tabWidthImplemented=!scrollEnabled?tabWidth:barWidth*0.4;if(tabWidthImplemented<90)tabWidthImplemented=90;return actionItems.map(function(item,index){if(!item.props){return _react.default.createElement(_Tab.default,{key:index,label:item.label,icon:item.icon,onPress:function onPress(){handleChange(index);if(item.onPress)item.onPress();},active:index===selectedIndex,tabWidth:tabWidthImplemented,__source:{fileName:_jsxFileName,lineNumber:157}});}else{return _react.default.cloneElement(item,{key:index,active:index===selectedIndex,tabWidth:tabWidthImplemented,onPress:function onPress(){handleChange(index);if(item.props.onPress)item.onPress();}});}});}},{key:\"_renderContent\",value:function _renderContent(){var _this$props5=this.props,scrollEnabled=_this$props5.scrollEnabled,underlineColor=_this$props5.underlineColor,underlineHeight=_this$props5.underlineHeight;var _this$state3=this.state,tabWidth=_this$state3.tabWidth,indicatorPosition=_this$state3.indicatorPosition,barWidth=_this$state3.barWidth;var tabWidthImplemented=!scrollEnabled?tabWidth:barWidth*0.4;if(tabWidthImplemented<90)tabWidthImplemented=90;return _react.default.createElement(_react.Fragment,{__source:{fileName:_jsxFileName,lineNumber:191}},_react.default.createElement(_reactNative.View,{style:_Tabs.default.tabsWrapper,__source:{fileName:_jsxFileName,lineNumber:192}},this._renderTabs()),_react.default.createElement(_Underline.default,{underlineHeight:underlineHeight,color:underlineColor,value:indicatorPosition,tabWidth:tabWidthImplemented,__source:{fileName:_jsxFileName,lineNumber:194}}));}},{key:\"_renderScrollView\",value:function _renderScrollView(){var _this3=this;var scrollEnabled=this.props.scrollEnabled;var _this$state4=this.state,tabWidth=_this$state4.tabWidth,barWidth=_this$state4.barWidth;var tabWidthImplemented=!scrollEnabled?tabWidth:barWidth*0.4;if(scrollEnabled||tabWidthImplemented<90){return _react.default.createElement(_reactNative.ScrollView,{horizontal:true,ref:function ref(_ref){_this3.scrollView=_ref;},showsHorizontalScrollIndicator:false,keyboardShouldPersistTaps:'never',scrollEnabled:scrollEnabled||tabWidthImplemented<90,__source:{fileName:_jsxFileName,lineNumber:212}},this._renderContent());}else{return this._renderContent();}}},{key:\"render\",value:function render(){var _this4=this;var _this$props6=this.props,style=_this$props6.style,testID=_this$props6.testID;return _react.default.createElement(TabsContext.Provider,{__source:{fileName:_jsxFileName,lineNumber:232}},_react.default.createElement(_reactNative.View,{style:[_Tabs.default.container,{backgroundColor:this.getColor()},style],testID:testID,ref:function ref(_ref2){_this4.container=_ref2;},onLayout:function onLayout(event){return _this4.getTabWidth(event.nativeEvent.layout.width);},__source:{fileName:_jsxFileName,lineNumber:233}},this._renderScrollView()));}}]);return Tabs;}(_react.Component);(0,_defineProperty2.default)(Tabs,\"propTypes\",{actionItems:_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.element])),selectedIndex:_propTypes.default.number,backgroundColor:_propTypes.default.string,underlineColor:_propTypes.default.string,underlineHeight:_propTypes.default.number,scrollEnabled:_propTypes.default.bool,handleChange:_propTypes.default.func,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),theme:_propTypes.default.object,testID:_propTypes.default.string});(0,_defineProperty2.default)(Tabs,\"defaultProps\",{selectedIndex:0,underlineColor:'#fff',scrollEnabled:false});var _default=(0,_withTheme.default)(Tabs);exports.default=_default;"
  },
  {
    "path": "dist/Components/Tabs/Tabs.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../../\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _storybookState=require(\"@sambego/storybook-state\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Tabs/Tabs.stories.js\";var store=new _storybookState.Store({selectedTab:1});var _default=(0,_storiesOf.storiesOf)('Components|Tabs',module).addParameters({jest:['Tabs']}).add('label',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:17}},_react.default.createElement(_Header.default,{title:'Tabs',__source:{fileName:_jsxFileName,lineNumber:18}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:19}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:21}},_react.default.createElement(_.Tabs,{selectedIndex:state.selectedTab,handleChange:function handleChange(index){return store.set({selectedTab:index});},actionItems:[{label:'Dogs'},{label:'Cats'},{label:'Birds'}],__source:{fileName:_jsxFileName,lineNumber:22}}));}));}).add('icon',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:37}},_react.default.createElement(_Header.default,{title:'Tabs',__source:{fileName:_jsxFileName,lineNumber:38}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:39}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:41}},_react.default.createElement(_.Tabs,{selectedIndex:state.selectedTab,handleChange:function handleChange(index){return store.set({selectedTab:index});},backgroundColor:'#009688',actionItems:[{icon:'phone'},{icon:'favorite'},{icon:'map'}],__source:{fileName:_jsxFileName,lineNumber:42}}));}));}).add('icon + label',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:58}},_react.default.createElement(_Header.default,{title:'Tabs',__source:{fileName:_jsxFileName,lineNumber:59}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:60}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:62}},_react.default.createElement(_.Tabs,{selectedIndex:state.selectedTab,handleChange:function handleChange(index){return store.set({selectedTab:index});},backgroundColor:'#9C27B0',actionItems:[{icon:'phone',label:'Recents'},{icon:'favorite',label:'Favorites'},{icon:'map',label:'Nearby'}],__source:{fileName:_jsxFileName,lineNumber:63}}));}));}).add('scrollable',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:79}},_react.default.createElement(_Header.default,{title:'Tabs',__source:{fileName:_jsxFileName,lineNumber:80}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:81}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:83}},_react.default.createElement(_.Tabs,{selectedIndex:state.selectedTab,handleChange:function handleChange(index){return store.set({selectedTab:index});},scrollEnabled:true,actionItems:[{icon:'phone',label:'Recents'},{icon:'favorite',label:'Favorites'},{icon:'map',label:'Nearby'},{icon:'account-circle',label:'Account'},{icon:'album',label:'Music'}],__source:{fileName:_jsxFileName,lineNumber:84}}));}));});exports.default=_default;"
  },
  {
    "path": "dist/Components/Tabs/Tabs.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({container:{minHeight:48,maxHeight:78},tabsWrapper:{flexDirection:'row',minHeight:48,maxHeight:78}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Tabs/Underline/Underline.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _Undrline=_interopRequireDefault(require(\"./Undrline.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Tabs/Underline/Underline.js\";var Underline=function(_Component){(0,_inherits2.default)(Underline,_Component);function Underline(){(0,_classCallCheck2.default)(this,Underline);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(Underline).apply(this,arguments));}(0,_createClass2.default)(Underline,[{key:\"render\",value:function render(){var _this$props=this.props,tabWidth=_this$props.tabWidth,color=_this$props.color,value=_this$props.value,underlineHeight=_this$props.underlineHeight;return _react.default.createElement(_reactNative.Animated.View,{useNativeDriver:true,style:[_Undrline.default.underline,{width:tabWidth,backgroundColor:color,transform:[{translateX:value}],height:underlineHeight}],__source:{fileName:_jsxFileName,lineNumber:27}});}}]);return Underline;}(_react.Component);(0,_defineProperty2.default)(Underline,\"propTypes\",{color:_propTypes.default.string,value:_propTypes.default.oneOfType([_propTypes.default.string,_propTypes.default.instanceOf(_reactNative.Animated.Value)]),tabWidth:_propTypes.default.number,underlineHeight:_propTypes.default.number});(0,_defineProperty2.default)(Underline,\"defaultProps\",{underlineHeight:2});var _default=(0,_withTheme.default)(Underline);exports.default=_default;"
  },
  {
    "path": "dist/Components/Tabs/Underline/Undrline.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({underline:{height:2,position:'absolute',bottom:0}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Tabs/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _Tabs.default;}});Object.defineProperty(exports,\"Tab\",{enumerable:true,get:function get(){return _Tab.default;}});var _Tabs=_interopRequireDefault(require(\"./Tabs\"));var _Tab=_interopRequireDefault(require(\"./Tab\"));"
  },
  {
    "path": "dist/Components/TextField/Searchfield/Searchfield.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _IconButton=_interopRequireDefault(require(\"../../IconButton/IconButton\"));var _Searchfield=_interopRequireDefault(require(\"./Searchfield.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/TextField/Searchfield/Searchfield.js\";var Searchfield=function(_Component){(0,_inherits2.default)(Searchfield,_Component);function Searchfield(){(0,_classCallCheck2.default)(this,Searchfield);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(Searchfield).apply(this,arguments));}(0,_createClass2.default)(Searchfield,[{key:\"render\",value:function render(){var _this$props=this.props,color=_this$props.color,searchIconProps=_this$props.searchIconProps,closeIconProps=_this$props.closeIconProps,inputProps=_this$props.inputProps,inputRef=_this$props.inputRef,onBlur=_this$props.onBlur,onChangeText=_this$props.onChangeText,onCloseIcon=_this$props.onCloseIcon,onFocus=_this$props.onFocus,placeholder=_this$props.placeholder,style=_this$props.style,textStyle=_this$props.textStyle,value=_this$props.value;return _react.default.createElement(_reactNative.View,{style:[_Searchfield.default.container,{backgroundColor:color?color:'rgba(255,255,255,.15)'},style],__source:{fileName:_jsxFileName,lineNumber:43}},_react.default.createElement(_IconButton.default,(0,_extends2.default)({name:'search',size:20,color:'white'},searchIconProps,{__source:{fileName:_jsxFileName,lineNumber:49}})),_react.default.createElement(_reactNative.TextInput,(0,_extends2.default)({ref:inputRef,style:[_Searchfield.default.searchInput,textStyle],placeholder:placeholder?placeholder:'Search',value:value,onChangeText:onChangeText,placeholderTextColor:'rgba(255,255,255,.57)',onFocus:onFocus,onBlur:onBlur},inputProps,{__source:{fileName:_jsxFileName,lineNumber:56}})),_react.default.createElement(_IconButton.default,(0,_extends2.default)({name:'close',size:20,style:{opacity:!value||value&&value.length<1?0:1},onPress:onCloseIcon,color:'white'},closeIconProps,{__source:{fileName:_jsxFileName,lineNumber:68}})));}}]);return Searchfield;}(_react.Component);(0,_defineProperty2.default)(Searchfield,\"propTypes\",{color:_propTypes.default.string,inputRef:_propTypes.default.func,onBlur:_propTypes.default.func,onChangeText:_propTypes.default.func,onCloseIcon:_propTypes.default.func,onFocus:_propTypes.default.func,placeholder:_propTypes.default.string,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),textStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),value:_propTypes.default.string,searchIconProps:_propTypes.default.object,closeIconProps:_propTypes.default.object,inputProps:_propTypes.default.object});var _default=(0,_withTheme.default)(Searchfield);exports.default=_default;"
  },
  {
    "path": "dist/Components/TextField/Searchfield/Searchfield.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../../../\");var _storybookState=require(\"@sambego/storybook-state\");var _Header=_interopRequireDefault(require(\"../../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../../storybook/components/Container\"));var _storiesOf=require(\"../../../storybook/helpers/storiesOf\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/TextField/Searchfield/Searchfield.stories.js\";var store=new _storybookState.Store({searchOne:''});var _default=(0,_storiesOf.storiesOf)('Components|TextField/SearchField',module).addParameters({jest:['Searchfield']}).add('Simple',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:17}},_react.default.createElement(_Header.default,{title:'Searchfield',__source:{fileName:_jsxFileName,lineNumber:18}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:19}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:21}},_react.default.createElement(_.Searchfield,{color:'#E91E63',value:state.search,onChangeText:function onChangeText(search){return store.set({search:search});},onCloseIcon:function onCloseIcon(){return store.set({search:''});},__source:{fileName:_jsxFileName,lineNumber:22}}));}));});exports.default=_default;"
  },
  {
    "path": "dist/Components/TextField/Searchfield/Searchfield.styles.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _reactNative=require(\"react-native\");var _shadow=_interopRequireDefault(require(\"../../../Utils/Shadow/shadow.js\"));function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}var styles=_reactNative.StyleSheet.create({container:{flexDirection:'row',alignItems:'center',borderRadius:4,paddingHorizontal:8,height:40},searchInput:_objectSpread({fontSize:16,height:40,marginLeft:8,flex:1,color:'white'},(0,_shadow.default)(0))});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/TextField/TextField.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _objectWithoutProperties2=_interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutProperties\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf3=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _TextFieldOutline=_interopRequireDefault(require(\"./TextFieldOutline/TextFieldOutline.js\"));var _TextFieldFilled=_interopRequireDefault(require(\"./TextFieldFilled/TextFieldFilled.js\"));var _TextFieldFlat=_interopRequireDefault(require(\"./TextFieldFlat/TextFieldFlat.js\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/TextField/TextField.js\";var TextField=function(_Component){(0,_inherits2.default)(TextField,_Component);function TextField(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,TextField);for(var _len=arguments.length,_args=new Array(_len),_key=0;_key<_len;_key++){_args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(TextField)).call.apply(_getPrototypeOf2,[this].concat(_args)));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{focused:false});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"handleFocus\",function(){var _this$props=_this.props,disabled=_this$props.disabled,onFocus=_this$props.onFocus;if(disabled)return;_this.setState({focused:true});if(onFocus)onFocus.apply(void 0,arguments);});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"handleBlur\",function(){var _this$props2=_this.props,disabled=_this$props2.disabled,onBlur=_this$props2.onBlur;if(disabled)return;_this.setState({focused:false});if(onBlur)onBlur.apply(void 0,arguments);});return _this;}(0,_createClass2.default)(TextField,[{key:\"render\",value:function render(){var _this$props3=this.props,type=_this$props3.type,rest=(0,_objectWithoutProperties2.default)(_this$props3,[\"type\"]);var focused=this.state.focused;if(type=='outlined'){return _react.default.createElement(_TextFieldOutline.default,(0,_extends2.default)({handleFocus:this.handleFocus,handleBlur:this.handleBlur,focused:focused},rest,{__source:{fileName:_jsxFileName,lineNumber:46}}));}else if(type=='filled'){return _react.default.createElement(_TextFieldFilled.default,(0,_extends2.default)({handleFocus:this.handleFocus,handleBlur:this.handleBlur,focused:focused},rest,{__source:{fileName:_jsxFileName,lineNumber:55}}));}else{return _react.default.createElement(_TextFieldFlat.default,(0,_extends2.default)({handleFocus:this.handleFocus,handleBlur:this.handleBlur,focused:focused},rest,{__source:{fileName:_jsxFileName,lineNumber:64}}));}}}]);return TextField;}(_react.Component);(0,_defineProperty2.default)(TextField,\"propTypes\",{type:_propTypes.default.string,onFocus:_propTypes.default.func,onBlur:_propTypes.default.func,disabled:_propTypes.default.bool});var _default=(0,_withTheme.default)(TextField);exports.default=_default;"
  },
  {
    "path": "dist/Components/TextField/TextField.styles.js",
    "content": ""
  },
  {
    "path": "dist/Components/TextField/TextFieldFilled/TextFieldFilled.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _objectWithoutProperties2=_interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutProperties\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _TextFieldUnderline=_interopRequireDefault(require(\"../TextFieldUnderline/TextFieldUnderline\"));var _TextFieldLabel=_interopRequireDefault(require(\"../TextFieldLabel/TextFieldLabel\"));var _TextFieldHelperText=_interopRequireDefault(require(\"../TextFieldHelperText/TextFieldHelperText\"));var _TextFieldFilled=_interopRequireDefault(require(\"./TextFieldFilled.styles\"));var _TextFieldLabel2=require(\"../TextFieldLabel/TextFieldLabel.constants\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/TextField/TextFieldFilled/TextFieldFilled.js\";var TextFieldFilled=function(_Component){(0,_inherits2.default)(TextFieldFilled,_Component);function TextFieldFilled(props){var _this;(0,_classCallCheck2.default)(this,TextFieldFilled);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(TextFieldFilled).call(this,props));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{height:56,labelHeight:0});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"_updateTextInputHeight\",function(e){var labelHeight=_this.state.labelHeight;if(!_this.props.multiline)return;var nativeHeight=e.nativeEvent.contentSize.height;var heightOffset=_reactNative.Platform.OS==='ios'?labelHeight+_TextFieldLabel2.nonOutlinedStops.active+8:0;_this.setState({height:Math.max(56,nativeHeight+heightOffset)});});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"_measureLabel\",function(_ref){var height=_ref.nativeEvent.layout.height;return _this.setState({labelHeight:height});});return _this;}(0,_createClass2.default)(TextFieldFilled,[{key:\"componentDidUpdate\",value:function componentDidUpdate(prevProps){var _this$props=this.props,value=_this$props.value,multiline=_this$props.multiline;if(value&&!value.length&&prevProps.value.length&&multiline){this.setState({height:56});}}},{key:\"_renderLeadingIcon\",value:function _renderLeadingIcon(){var leadingIcon=this.props.leadingIcon;var isFunc=typeof leadingIcon==='function';return _react.default.createElement(_reactNative.View,{style:{position:'absolute',left:8,top:16},__source:{fileName:_jsxFileName,lineNumber:63}},isFunc?leadingIcon():leadingIcon);}},{key:\"_renderTrailingIcon\",value:function _renderTrailingIcon(){var trailingIcon=this.props.trailingIcon;var isFunc=typeof trailingIcon==='function';return _react.default.createElement(_reactNative.View,{style:{position:'absolute',right:12,top:16},__source:{fileName:_jsxFileName,lineNumber:74}},isFunc?trailingIcon():trailingIcon);}},{key:\"_renderPrefix\",value:function _renderPrefix(){var prefix=this.props.prefix;return _react.default.createElement(_reactNative.View,{style:{position:'absolute',left:16,top:26,zIndex:1},__source:{fileName:_jsxFileName,lineNumber:83}},_react.default.cloneElement(prefix,{color:prefix.props.color?prefix.props.color:'rgba(0, 0, 0, .57)',fontSize:prefix.props.fontSize?prefix.props.fontSize:16}));}},{key:\"_renderSuffix\",value:function _renderSuffix(){var suffix=this.props.suffix;return _react.default.createElement(_reactNative.View,{style:{position:'absolute',right:16,top:28},__source:{fileName:_jsxFileName,lineNumber:96}},_react.default.cloneElement(suffix,{color:suffix.props.color?suffix.props.color:'rgba(0, 0, 0, .57)',fontSize:suffix.props.fontSize?suffix.props.fontSize:14}));}},{key:\"render\",value:function render(){var _this2=this;var _this$props2=this.props,style=_this$props2.style,containerStyle=_this$props2.containerStyle,error=_this$props2.error,label=_this$props2.label,labelColor=_this$props2.labelColor,labelStyle=_this$props2.labelStyle,handleFocus=_this$props2.handleFocus,handleBlur=_this$props2.handleBlur,focused=_this$props2.focused,helperText=_this$props2.helperText,helperVisible=_this$props2.helperVisible,helperTextStyle=_this$props2.helperTextStyle,underlineColor=_this$props2.underlineColor,underlineActiveColor=_this$props2.underlineActiveColor,leadingIcon=_this$props2.leadingIcon,trailingIcon=_this$props2.trailingIcon,dense=_this$props2.dense,suffix=_this$props2.suffix,prefix=_this$props2.prefix,testID=_this$props2.testID,focusedLabelColor=_this$props2.focusedLabelColor,rest=(0,_objectWithoutProperties2.default)(_this$props2,[\"style\",\"containerStyle\",\"error\",\"label\",\"labelColor\",\"labelStyle\",\"handleFocus\",\"handleBlur\",\"focused\",\"helperText\",\"helperVisible\",\"helperTextStyle\",\"underlineColor\",\"underlineActiveColor\",\"leadingIcon\",\"trailingIcon\",\"dense\",\"suffix\",\"prefix\",\"testID\",\"focusedLabelColor\"]);var height=this.state.height;var paddingTop=rest.multiline?24:12;if(dense){height=label?52:40;paddingTop=6;}var paddingLeft=leadingIcon?44:12;if(prefix)paddingLeft=32;var platformStyles=_reactNative.Platform.OS==='web'?{outlineWidth:0}:{};return _react.default.createElement(_reactNative.View,{style:[_TextFieldFilled.default.containerStyle,{marginBottom:helperText&&helperVisible?20:0},containerStyle],__source:{fileName:_jsxFileName,lineNumber:163}},label?_react.default.createElement(_TextFieldLabel.default,{label:label,focused:focused,error:error,value:rest.value,labelColor:labelColor,style:labelStyle,leadingIcon:!!leadingIcon,dense:dense,prefix:prefix,type:'filled',focusedLabelColor:focusedLabelColor,onLayout:this._measureLabel,__source:{fileName:_jsxFileName,lineNumber:170}}):null,leadingIcon?this._renderLeadingIcon():null,prefix?this._renderPrefix():null,_react.default.createElement(_reactNative.TextInput,(0,_extends2.default)({style:[_TextFieldFilled.default.textField,_TextFieldFilled.default.filledInput,platformStyles,{minHeight:dense?40:56,height:height,paddingBottom:rest.multiline?8:0,paddingTop:paddingTop,paddingLeft:paddingLeft,paddingRight:trailingIcon||suffix?36:12},style],onContentSizeChange:function onContentSizeChange(e){return _this2._updateTextInputHeight(e);},testID:testID,scrollEnabled:false},rest,{onFocus:handleFocus,onBlur:handleBlur,__source:{fileName:_jsxFileName,lineNumber:187}})),trailingIcon?this._renderTrailingIcon():null,suffix?this._renderSuffix():null,_react.default.createElement(_TextFieldUnderline.default,{focused:focused,error:error,underlineColor:underlineColor,underlineActiveColor:underlineActiveColor,__source:{fileName:_jsxFileName,lineNumber:212}}),_react.default.createElement(_TextFieldHelperText.default,{error:error,visible:helperVisible||error,style:helperTextStyle,__source:{fileName:_jsxFileName,lineNumber:219}},helperText));}}]);return TextFieldFilled;}(_react.Component);(0,_defineProperty2.default)(TextFieldFilled,\"propTypes\",{style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),containerStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),error:_propTypes.default.bool,label:_propTypes.default.string,labelColor:_propTypes.default.string,labelStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),handleFocus:_propTypes.default.func,handleBlur:_propTypes.default.func,focused:_propTypes.default.bool,helperText:_propTypes.default.string,helperVisible:_propTypes.default.bool,helperTextStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),underlineColor:_propTypes.default.string,underlineActiveColor:_propTypes.default.string,leadingIcon:_propTypes.default.oneOfType([_propTypes.default.func,_propTypes.default.node]),trailingIcon:_propTypes.default.oneOfType([_propTypes.default.func,_propTypes.default.node]),dense:_propTypes.default.bool,value:_propTypes.default.string,multiline:_propTypes.default.bool,suffix:_propTypes.default.node,prefix:_propTypes.default.node,testID:_propTypes.default.string,focusedLabelColor:_propTypes.default.string});(0,_defineProperty2.default)(TextFieldFilled,\"defaultProps\",{helperVisible:true});var _default=(0,_withTheme.default)(TextFieldFilled);exports.default=_default;"
  },
  {
    "path": "dist/Components/TextField/TextFieldFilled/TextFieldFilled.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _storybookState=require(\"@sambego/storybook-state\");var _Header=_interopRequireDefault(require(\"../../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../../storybook/components/Container\"));var _storiesOf=require(\"../../../storybook/helpers/storiesOf\");var _=require(\"../../../\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/TextField/TextFieldFilled/TextFieldFilled.stories.js\";var store=new _storybookState.Store({filledOne:'',filledTwo:'',filledThree:''});var _default=(0,_storiesOf.storiesOf)('Components|TextField/Filled',module).addParameters({jest:['TextFieldFilled']}).add('simple',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:20}},_react.default.createElement(_Header.default,{title:'Filled TextField',__source:{fileName:_jsxFileName,lineNumber:21}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:22}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:24}},_react.default.createElement(_.TextField,{type:'filled',containerStyle:{marginTop:20},label:'Label',value:state.filledOne,onChangeText:function onChangeText(value){return store.set({filledOne:value});},__source:{fileName:_jsxFileName,lineNumber:25}}),_react.default.createElement(_.TextField,{type:'filled',containerStyle:{marginTop:20},label:'Label',error:true,value:state.filledThree,onChangeText:function onChangeText(value){return store.set({filledThree:value});},helperText:'There is an error',__source:{fileName:_jsxFileName,lineNumber:33}}));}));}).add('multiline',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:48}},_react.default.createElement(_Header.default,{title:'Filled TextField',__source:{fileName:_jsxFileName,lineNumber:49}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:50}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:52}},_react.default.createElement(_.TextField,{type:'filled',containerStyle:{marginTop:20},label:'Multiline',multiline:true,value:state.filledTwo,onChangeText:function onChangeText(value){return store.set({filledTwo:value});},__source:{fileName:_jsxFileName,lineNumber:53}}));}));}).add('with leadingIcon',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:67}},_react.default.createElement(_Header.default,{title:'Filled TextField',__source:{fileName:_jsxFileName,lineNumber:68}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:69}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:71}},_react.default.createElement(_.TextField,{type:'filled',containerStyle:{marginTop:20},label:'Icon',leadingIcon:_react.default.createElement(_.Icon,{name:'date-range',size:24,color:'#6e6e6e',__source:{fileName:_jsxFileName,lineNumber:77}}),value:state.filledTwo,onChangeText:function onChangeText(value){return store.set({filledTwo:value});},__source:{fileName:_jsxFileName,lineNumber:72}}));}));}).add('with trailingIcon',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:88}},_react.default.createElement(_Header.default,{title:'Filled TextField',__source:{fileName:_jsxFileName,lineNumber:89}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:90}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:92}},_react.default.createElement(_.TextField,{type:'filled',containerStyle:{marginTop:20},label:'Icon',trailingIcon:_react.default.createElement(_.Icon,{name:'date-range',size:24,color:'#6e6e6e',__source:{fileName:_jsxFileName,lineNumber:98}}),value:state.filledTwo,onChangeText:function onChangeText(value){return store.set({filledTwo:value});},__source:{fileName:_jsxFileName,lineNumber:93}}));}));}).add('with prefix',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:109}},_react.default.createElement(_Header.default,{title:'Filled TextField',__source:{fileName:_jsxFileName,lineNumber:110}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:111}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:113}},_react.default.createElement(_.TextField,{type:'filled',containerStyle:{marginTop:20},label:'Pounds',prefix:_react.default.createElement(_.BodyText,{text:'$',__source:{fileName:_jsxFileName,lineNumber:118}}),value:state.filledTwo,onChangeText:function onChangeText(value){return store.set({filledTwo:value});},__source:{fileName:_jsxFileName,lineNumber:114}}));}));}).add('with suffix',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:128}},_react.default.createElement(_Header.default,{title:'Filled TextField',__source:{fileName:_jsxFileName,lineNumber:129}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:130}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:132}},_react.default.createElement(_.TextField,{type:'filled',containerStyle:{marginTop:20},label:'Pounds',suffix:_react.default.createElement(_.Caption,{text:\"lbs\",__source:{fileName:_jsxFileName,lineNumber:137}}),value:state.filledTwo,onChangeText:function onChangeText(value){return store.set({filledTwo:value});},__source:{fileName:_jsxFileName,lineNumber:133}}));}));}).add('with helperText',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:147}},_react.default.createElement(_Header.default,{title:'Filled TextField',__source:{fileName:_jsxFileName,lineNumber:148}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:149}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:151}},_react.default.createElement(_.TextField,{type:'filled',containerStyle:{marginTop:20},label:'Label',value:state.filledOne,onChangeText:function onChangeText(value){return store.set({filledOne:value});},helperText:'Some helper text',__source:{fileName:_jsxFileName,lineNumber:152}}),_react.default.createElement(_.TextField,{type:'filled',containerStyle:{marginTop:20},label:'Label',error:true,value:state.filledThree,onChangeText:function onChangeText(value){return store.set({filledThree:value});},helperText:'This is the error text that will show',__source:{fileName:_jsxFileName,lineNumber:161}}));}));}).add('dense',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:176}},_react.default.createElement(_Header.default,{title:'Filled TextField',__source:{fileName:_jsxFileName,lineNumber:177}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:178}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:180}},_react.default.createElement(_.TextField,{type:'filled',containerStyle:{marginTop:20},label:'With Label',value:state.filledOne,onChangeText:function onChangeText(value){return store.set({filledOne:value});},dense:true,__source:{fileName:_jsxFileName,lineNumber:181}}),_react.default.createElement(_.TextField,{type:'filled',containerStyle:{marginTop:20},value:state.filledThree,onChangeText:function onChangeText(value){return store.set({filledThree:value});},dense:true,__source:{fileName:_jsxFileName,lineNumber:190}}));}));});exports.default=_default;"
  },
  {
    "path": "dist/Components/TextField/TextFieldFilled/TextFieldFilled.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({containerStyle:{position:'relative'},textField:{paddingHorizontal:12},filledInput:{borderTopLeftRadius:4,borderTopRightRadius:4,backgroundColor:'#d9d9d9'}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/TextField/TextFieldFlat/TextFieldFlat.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _objectWithoutProperties2=_interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutProperties\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _TextFieldUnderline=_interopRequireDefault(require(\"../TextFieldUnderline/TextFieldUnderline\"));var _TextFieldLabel=_interopRequireDefault(require(\"../TextFieldLabel/TextFieldLabel\"));var _TextFieldHelperText=_interopRequireDefault(require(\"../TextFieldHelperText/TextFieldHelperText\"));var _TextFieldFlat=_interopRequireDefault(require(\"./TextFieldFlat.styles\"));var _TextFieldLabel2=require(\"../TextFieldLabel/TextFieldLabel.constants\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/TextField/TextFieldFlat/TextFieldFlat.js\";var TextFieldFlat=function(_Component){(0,_inherits2.default)(TextFieldFlat,_Component);function TextFieldFlat(props){var _this;(0,_classCallCheck2.default)(this,TextFieldFlat);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(TextFieldFlat).call(this,props));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{height:56,labelHeight:0});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"_updateTextInputHeight\",function(e){var labelHeight=_this.state.labelHeight;if(!_this.props.multiline)return;var nativeHeight=e.nativeEvent.contentSize.height;var heightOffset=_reactNative.Platform.OS==='ios'?labelHeight+_TextFieldLabel2.nonOutlinedStops.active+8:0;_this.setState({height:Math.max(56,nativeHeight+heightOffset)});});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"_measureLabel\",function(_ref){var height=_ref.nativeEvent.layout.height;return _this.setState({labelHeight:height});});return _this;}(0,_createClass2.default)(TextFieldFlat,[{key:\"_renderLeadingIcon\",value:function _renderLeadingIcon(){var leadingIcon=this.props.leadingIcon;var isFunc=typeof leadingIcon==='function';return _react.default.createElement(_reactNative.View,{style:{position:'absolute',left:8,top:16},__source:{fileName:_jsxFileName,lineNumber:60}},isFunc?leadingIcon():leadingIcon);}},{key:\"_renderTrailingIcon\",value:function _renderTrailingIcon(){var trailingIcon=this.props.trailingIcon;var isFunc=typeof trailingIcon==='function';return _react.default.createElement(_reactNative.View,{style:{position:'absolute',right:12,top:16},__source:{fileName:_jsxFileName,lineNumber:71}},isFunc?trailingIcon():trailingIcon);}},{key:\"_renderPrefix\",value:function _renderPrefix(){var prefix=this.props.prefix;return _react.default.createElement(_reactNative.View,{style:{position:'absolute',left:0,top:26},__source:{fileName:_jsxFileName,lineNumber:81}},_react.default.cloneElement(prefix,{color:prefix.props.color?prefix.props.color:'rgba(0, 0, 0, .57)',fontSize:prefix.props.fontSize?prefix.props.fontSize:16}));}},{key:\"_renderSuffix\",value:function _renderSuffix(){var suffix=this.props.suffix;return _react.default.createElement(_reactNative.View,{style:{position:'absolute',right:16,top:28},__source:{fileName:_jsxFileName,lineNumber:94}},_react.default.cloneElement(suffix,{color:suffix.props.color?suffix.props.color:'rgba(0, 0, 0, .57)',fontSize:suffix.props.fontSize?suffix.props.fontSize:12}));}},{key:\"render\",value:function render(){var _this2=this;var _this$props=this.props,style=_this$props.style,containerStyle=_this$props.containerStyle,error=_this$props.error,label=_this$props.label,labelColor=_this$props.labelColor,labelStyle=_this$props.labelStyle,handleFocus=_this$props.handleFocus,handleBlur=_this$props.handleBlur,focused=_this$props.focused,helperText=_this$props.helperText,helperVisible=_this$props.helperVisible,helperTextStyle=_this$props.helperTextStyle,underlineColor=_this$props.underlineColor,underlineActiveColor=_this$props.underlineActiveColor,leadingIcon=_this$props.leadingIcon,trailingIcon=_this$props.trailingIcon,dense=_this$props.dense,suffix=_this$props.suffix,prefix=_this$props.prefix,testID=_this$props.testID,focusedLabelColor=_this$props.focusedLabelColor,rest=(0,_objectWithoutProperties2.default)(_this$props,[\"style\",\"containerStyle\",\"error\",\"label\",\"labelColor\",\"labelStyle\",\"handleFocus\",\"handleBlur\",\"focused\",\"helperText\",\"helperVisible\",\"helperTextStyle\",\"underlineColor\",\"underlineActiveColor\",\"leadingIcon\",\"trailingIcon\",\"dense\",\"suffix\",\"prefix\",\"testID\",\"focusedLabelColor\"]);var height=this.state.height;if(dense){height=40;}var paddingLeft=leadingIcon?44:0;if(prefix)paddingLeft=16;var platformStyles=_reactNative.Platform.OS==='web'?{outlineWidth:0}:{};return _react.default.createElement(_reactNative.View,{style:[_TextFieldFlat.default.containerStyle,{marginBottom:helperText&&helperVisible?20:0},containerStyle],__source:{fileName:_jsxFileName,lineNumber:160}},label?_react.default.createElement(_TextFieldLabel.default,{label:label,focused:focused,error:error,value:rest.value,type:'flat',labelColor:labelColor,style:labelStyle,leadingIcon:!!leadingIcon,dense:dense,prefix:prefix,focusedLabelColor:focusedLabelColor,onLayout:this._measureLabel,__source:{fileName:_jsxFileName,lineNumber:167}}):null,leadingIcon?this._renderLeadingIcon():null,prefix?this._renderPrefix():null,_react.default.createElement(_reactNative.TextInput,(0,_extends2.default)({style:[_TextFieldFlat.default.textField,_TextFieldFlat.default.flatInput,platformStyles,{minHeight:dense?40:56,height:height,paddingBottom:rest.multiline?8:0,paddingTop:rest.multiline?24:16,paddingLeft:paddingLeft,paddingRight:trailingIcon||suffix?36:0},style],testID:testID,scrollEnabled:false,onContentSizeChange:function onContentSizeChange(e){return _this2._updateTextInputHeight(e);}},rest,{onFocus:handleFocus,onBlur:handleBlur,__source:{fileName:_jsxFileName,lineNumber:184}})),trailingIcon?this._renderTrailingIcon():null,suffix?this._renderSuffix():null,_react.default.createElement(_TextFieldUnderline.default,{focused:focused,error:error,underlineColor:underlineColor,underlineActiveColor:underlineActiveColor,__source:{fileName:_jsxFileName,lineNumber:208}}),_react.default.createElement(_TextFieldHelperText.default,{error:error,visible:helperVisible||error,style:helperTextStyle,__source:{fileName:_jsxFileName,lineNumber:214}},helperText));}}]);return TextFieldFlat;}(_react.Component);(0,_defineProperty2.default)(TextFieldFlat,\"propTypes\",{style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),containerStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),error:_propTypes.default.bool,label:_propTypes.default.string,labelColor:_propTypes.default.string,labelStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),handleFocus:_propTypes.default.func,handleBlur:_propTypes.default.func,focused:_propTypes.default.bool,helperText:_propTypes.default.string,helperVisible:_propTypes.default.bool,helperTextStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),underlineColor:_propTypes.default.string,underlineActiveColor:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array,_propTypes.default.string]),leadingIcon:_propTypes.default.oneOfType([_propTypes.default.func,_propTypes.default.node]),trailingIcon:_propTypes.default.oneOfType([_propTypes.default.func,_propTypes.default.node]),dense:_propTypes.default.bool,value:_propTypes.default.string,multiline:_propTypes.default.bool,suffix:_propTypes.default.node,prefix:_propTypes.default.node,testID:_propTypes.default.string,focusedLabelColor:_propTypes.default.string});(0,_defineProperty2.default)(TextFieldFlat,\"defaultProps\",{helperVisible:true});var _default=(0,_withTheme.default)(TextFieldFlat);exports.default=_default;"
  },
  {
    "path": "dist/Components/TextField/TextFieldFlat/TextFieldFlat.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _storybookState=require(\"@sambego/storybook-state\");var _Header=_interopRequireDefault(require(\"../../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../../storybook/components/Container\"));var _storiesOf=require(\"../../../storybook/helpers/storiesOf\");var _=require(\"../../../\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/TextField/TextFieldFlat/TextFieldFlat.stories.js\";var store=new _storybookState.Store({flatOne:'',flatTwo:'',flatThree:''});var _default=(0,_storiesOf.storiesOf)('Components|TextField/Flat',module).addParameters({jest:['TextFieldFlat']}).add('simple',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:19}},_react.default.createElement(_Header.default,{title:'Flat TextField',__source:{fileName:_jsxFileName,lineNumber:20}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:21}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:23}},_react.default.createElement(_.TextField,{label:'Label',value:state.flatOne,onChangeText:function onChangeText(value){return store.set({flatOne:value});},__source:{fileName:_jsxFileName,lineNumber:24}}),_react.default.createElement(_.TextField,{containerStyle:{marginTop:20},label:'Multiline',multiline:true,value:state.flatTwo,onChangeText:function onChangeText(value){return store.set({flatTwo:value});},__source:{fileName:_jsxFileName,lineNumber:29}}));}));}).add('multiline',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:42}},_react.default.createElement(_Header.default,{title:'Flat TextField',__source:{fileName:_jsxFileName,lineNumber:43}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:44}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:46}},_react.default.createElement(_.TextField,{containerStyle:{marginTop:20},label:'Multiline',multiline:true,value:state.flatTwo,onChangeText:function onChangeText(value){return store.set({flatTwo:value});},__source:{fileName:_jsxFileName,lineNumber:47}}));}));}).add('with leadingIcon',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:60}},_react.default.createElement(_Header.default,{title:'Flat TextField',__source:{fileName:_jsxFileName,lineNumber:61}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:62}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:64}},_react.default.createElement(_.TextField,{type:'flat',containerStyle:{marginTop:20},label:'Icon',leadingIcon:_react.default.createElement(_.Icon,{name:'date-range',size:24,color:'#6e6e6e',__source:{fileName:_jsxFileName,lineNumber:70}}),value:state.flatTwo,onChangeText:function onChangeText(value){return store.set({flatTwo:value});},__source:{fileName:_jsxFileName,lineNumber:65}}));}));}).add('with prefix',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:81}},_react.default.createElement(_Header.default,{title:'Flat TextField',__source:{fileName:_jsxFileName,lineNumber:82}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:83}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:85}},_react.default.createElement(_.TextField,{type:'flat',containerStyle:{marginTop:20},label:'Pounds',prefix:_react.default.createElement(_.BodyText,{text:\"$\",__source:{fileName:_jsxFileName,lineNumber:90}}),value:state.flatOne,onChangeText:function onChangeText(value){return store.set({flatOne:value});},__source:{fileName:_jsxFileName,lineNumber:86}}));}));}).add('with suffix',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:100}},_react.default.createElement(_Header.default,{title:'Flat TextField',__source:{fileName:_jsxFileName,lineNumber:101}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:102}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:104}},_react.default.createElement(_.TextField,{type:'flat',containerStyle:{marginTop:20},label:'Pounds',suffix:_react.default.createElement(_.Caption,{text:\"lbs\",__source:{fileName:_jsxFileName,lineNumber:109}}),value:state.flatOne,onChangeText:function onChangeText(value){return store.set({flatOne:value});},__source:{fileName:_jsxFileName,lineNumber:105}}));}));}).add('with trailingIcon',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:120}},_react.default.createElement(_Header.default,{title:'Flat TextField',__source:{fileName:_jsxFileName,lineNumber:121}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:122}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:124}},_react.default.createElement(_.TextField,{type:'flat',containerStyle:{marginTop:20},label:'Icon',trailingIcon:_react.default.createElement(_.Icon,{name:'date-range',size:24,color:'#6e6e6e',__source:{fileName:_jsxFileName,lineNumber:130}}),value:state.flatOne,onChangeText:function onChangeText(value){return store.set({flatOne:value});},__source:{fileName:_jsxFileName,lineNumber:125}}));}));}).add('with helperText',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:141}},_react.default.createElement(_Header.default,{title:'Flat TextField',__source:{fileName:_jsxFileName,lineNumber:142}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:143}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:145}},_react.default.createElement(_.TextField,{label:'Label',value:state.flatOne,onChangeText:function onChangeText(value){return store.set({flatOne:value});},helperText:'This is some helper text',__source:{fileName:_jsxFileName,lineNumber:146}}),_react.default.createElement(_.TextField,{containerStyle:{marginTop:20},label:'Label',error:true,value:state.flatThree,onChangeText:function onChangeText(value){return store.set({flatThree:value});},helperText:'There is an error',__source:{fileName:_jsxFileName,lineNumber:153}}));}));}).add('dense',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:167}},_react.default.createElement(_Header.default,{title:'Flat TextField',__source:{fileName:_jsxFileName,lineNumber:168}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:169}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:171}},_react.default.createElement(_.TextField,{label:'Label',value:state.flatOne,onChangeText:function onChangeText(value){return store.set({flatOne:value});},dense:true,__source:{fileName:_jsxFileName,lineNumber:172}}),_react.default.createElement(_.TextField,{containerStyle:{marginTop:20},placeholder:'Placeholder',value:state.flatThree,onChangeText:function onChangeText(value){return store.set({flatThree:value});},dense:true,__source:{fileName:_jsxFileName,lineNumber:179}}));}));});exports.default=_default;"
  },
  {
    "path": "dist/Components/TextField/TextFieldFlat/TextFieldFlat.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({containerStyle:{position:'relative'},textField:{height:56,textAlignVertical:'bottom',paddingTop:16},flatInput:{}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/TextField/TextFieldHelperText/TextFieldHelperText.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _TextFieldHelperText=_interopRequireDefault(require(\"./TextFieldHelperText.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/TextField/TextFieldHelperText/TextFieldHelperText.js\";var TextFieldHelperText=function(_Component){(0,_inherits2.default)(TextFieldHelperText,_Component);function TextFieldHelperText(){(0,_classCallCheck2.default)(this,TextFieldHelperText);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(TextFieldHelperText).apply(this,arguments));}(0,_createClass2.default)(TextFieldHelperText,[{key:\"render\",value:function render(){var _this$props=this.props,children=_this$props.children,visible=_this$props.visible,error=_this$props.error,style=_this$props.style;if(!visible)return null;return _react.default.createElement(_reactNative.Text,{style:[_TextFieldHelperText.default.helper,{color:error?'#E53935':'rgba(0,0,0,0.6)'},style],__source:{fileName:_jsxFileName,lineNumber:20}},children);}}]);return TextFieldHelperText;}(_react.Component);(0,_defineProperty2.default)(TextFieldHelperText,\"propTypes\",{error:_propTypes.default.bool,children:_propTypes.default.node,visible:_propTypes.default.bool,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array])});var _default=(0,_withTheme.default)(TextFieldHelperText);exports.default=_default;"
  },
  {
    "path": "dist/Components/TextField/TextFieldHelperText/TextFieldHelperText.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({helper:{color:'rgba(0,0,0,0.6)',height:16,marginLeft:12,zIndex:10,width:'100%',position:'absolute',bottom:-20,fontSize:12}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/TextField/TextFieldHelperText/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _TextFieldHelperText.default;}});var _TextFieldHelperText=_interopRequireDefault(require(\"./TextFieldHelperText\"));"
  },
  {
    "path": "dist/Components/TextField/TextFieldLabel/TextFieldLabel.constants.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.nonOutlinedStops=exports.outlinedStopsDense=exports.outlinedStops=void 0;var outlinedStops={initial:18,active:-8};exports.outlinedStops=outlinedStops;var outlinedStopsDense={initial:10,active:-8};exports.outlinedStopsDense=outlinedStopsDense;var nonOutlinedStops={initial:18,active:5};exports.nonOutlinedStops=nonOutlinedStops;"
  },
  {
    "path": "dist/Components/TextField/TextFieldLabel/TextFieldLabel.constants.native.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.nonOutlinedStops=exports.outlinedStopsDense=exports.outlinedStops=void 0;var outlinedStops={initial:20,active:-12};exports.outlinedStops=outlinedStops;var outlinedStopsDense={initial:8,active:-12};exports.outlinedStopsDense=outlinedStopsDense;var nonOutlinedStops={initial:20,active:5};exports.nonOutlinedStops=nonOutlinedStops;"
  },
  {
    "path": "dist/Components/TextField/TextFieldLabel/TextFieldLabel.constants.web.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.nonOutlinedStops=exports.outlinedStopsDense=exports.outlinedStops=void 0;var outlinedStops={initial:18,active:-8};exports.outlinedStops=outlinedStops;var outlinedStopsDense={initial:10,active:-8};exports.outlinedStopsDense=outlinedStopsDense;var nonOutlinedStops={initial:18,active:5};exports.nonOutlinedStops=nonOutlinedStops;"
  },
  {
    "path": "dist/Components/TextField/TextFieldLabel/TextFieldLabel.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _TextFieldLabel=_interopRequireDefault(require(\"./TextFieldLabel.styles\"));var _TextFieldLabel2=require(\"./TextFieldLabel.constants\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/TextField/TextFieldLabel/TextFieldLabel.js\";var TextFieldLabel=function(_Component){(0,_inherits2.default)(TextFieldLabel,_Component);function TextFieldLabel(props){var _this;(0,_classCallCheck2.default)(this,TextFieldLabel);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(TextFieldLabel).call(this,props));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{translateYAnimation:new _reactNative.Animated.Value(_this.props.type==='outlined'?_TextFieldLabel2.outlinedStops.initial:_TextFieldLabel2.nonOutlinedStops.initial),fontSizeAnimation:new _reactNative.Animated.Value(_this.props.value||_this.props.focused?1:0),animationDuration:200,animationEasing:_reactNative.Easing.ease,canAnimate:true});return _this;}(0,_createClass2.default)(TextFieldLabel,[{key:\"componentDidMount\",value:function componentDidMount(){var _this$props=this.props,type=_this$props.type,dense=_this$props.dense,prefix=_this$props.prefix,value=_this$props.value;if(type=='outlined'&&dense){this.setState({translateYAnimation:new _reactNative.Animated.Value(_TextFieldLabel2.outlinedStopsDense.initial)});}if(prefix)this._handlePrefix();if(value){if(type=='outlined'){this._handleLabelOutlinedAnimation();}else{this._handleLabelAnimation();}}}},{key:\"componentDidUpdate\",value:function componentDidUpdate(prevProps){var _this$props2=this.props,focused=_this$props2.focused,type=_this$props2.type,value=_this$props2.value;if(focused!==prevProps.focused||value!==prevProps.value){if(type=='outlined'){this._handleLabelOutlinedAnimation();}else{this._handleLabelAnimation();}}}},{key:\"_handlePrefix\",value:function _handlePrefix(){var _this$props3=this.props,type=_this$props3.type,dense=_this$props3.dense;var translateYAnimation=_TextFieldLabel2.nonOutlinedStops.active;if(type=='outlined'){translateYAnimation=dense?_TextFieldLabel2.outlinedStopsDense.active:_TextFieldLabel2.outlinedStops.active;}this.setState({canAnimate:false,translateYAnimation:new _reactNative.Animated.Value(translateYAnimation),fontSizeAnimation:new _reactNative.Animated.Value(1)});}},{key:\"_handleLabelAnimation\",value:function _handleLabelAnimation(){var _this$props4=this.props,focused=_this$props4.focused,value=_this$props4.value;var _this$state=this.state,translateYAnimation=_this$state.translateYAnimation,animationEasing=_this$state.animationEasing,animationDuration=_this$state.animationDuration,canAnimate=_this$state.canAnimate,fontSizeAnimation=_this$state.fontSizeAnimation;if(!canAnimate)return;var position=focused||value?_TextFieldLabel2.nonOutlinedStops.active:_TextFieldLabel2.nonOutlinedStops.initial;var fontVal=focused||value?1:0;_reactNative.Animated.parallel([_reactNative.Animated.timing(translateYAnimation,{toValue:position,duration:animationDuration,easing:animationEasing}),_reactNative.Animated.timing(fontSizeAnimation,{toValue:fontVal,duration:animationDuration,easing:animationEasing})]).start();}},{key:\"_handleLabelOutlinedAnimation\",value:function _handleLabelOutlinedAnimation(){var _this$props5=this.props,focused=_this$props5.focused,value=_this$props5.value,dense=_this$props5.dense;var _this$state2=this.state,translateYAnimation=_this$state2.translateYAnimation,animationEasing=_this$state2.animationEasing,animationDuration=_this$state2.animationDuration,fontSizeAnimation=_this$state2.fontSizeAnimation,canAnimate=_this$state2.canAnimate;if(!canAnimate)return;var position=focused||value?_TextFieldLabel2.outlinedStops.active:_TextFieldLabel2.outlinedStops.initial;var fontVal=focused||value?1:0;if(dense)position=focused||value?_TextFieldLabel2.outlinedStopsDense.active:_TextFieldLabel2.outlinedStopsDense.initial;_reactNative.Animated.parallel([_reactNative.Animated.timing(translateYAnimation,{toValue:position,duration:animationDuration,easing:animationEasing}),_reactNative.Animated.timing(fontSizeAnimation,{toValue:fontVal,duration:animationDuration,easing:animationEasing})]).start();}},{key:\"render\",value:function render(){var _this$props6=this.props,error=_this$props6.error,labelColor=_this$props6.labelColor,label=_this$props6.label,focused=_this$props6.focused,type=_this$props6.type,leadingIcon=_this$props6.leadingIcon,prefix=_this$props6.prefix,theme=_this$props6.theme,style=_this$props6.style,dense=_this$props6.dense,focusedLabelColor=_this$props6.focusedLabelColor,_onLayout=_this$props6.onLayout;var _this$state3=this.state,translateYAnimation=_this$state3.translateYAnimation,fontSizeAnimation=_this$state3.fontSizeAnimation;var translateX=12;if(type==='flat'){translateX=-1;}else if(type==='outlined'){translateX=10;}if(!labelColor)labelColor='rgba(0, 0, 0, 0.54)';if(focused)labelColor=focusedLabelColor||theme.primary.main;if(error){labelColor='red';}var marginLeft=leadingIcon?32:0;if(type=='flat'&&leadingIcon){marginLeft=42;}else if(type=='filled'&&prefix){marginLeft=6;}var baseFontSize=(_reactNative.StyleSheet.flatten(style)||{}).fontSize||theme.subtitleOne.fontSize||16;var fontStyle={fontSize:fontSizeAnimation.interpolate({inputRange:[0,1],outputRange:[baseFontSize,baseFontSize*(dense?0.65:0.75)]})};return _react.default.createElement(_reactNative.Animated.View,{style:[_TextFieldLabel.default.container,{marginLeft:marginLeft}],onLayout:function onLayout(e){return _onLayout&&_onLayout(e);},pointerEvents:\"none\",__source:{fileName:_jsxFileName,lineNumber:211}},_react.default.createElement(_reactNative.Animated.Text,{style:[_TextFieldLabel.default.label,{color:labelColor,backgroundColor:type=='outlined'?'white':'transparent',paddingHorizontal:type=='outlined'?4:0,transform:[{translateY:translateYAnimation},{translateX:_reactNative.I18nManager.isRTL?-translateX:translateX}]},style,fontStyle],__source:{fileName:_jsxFileName,lineNumber:220}},label));}}]);return TextFieldLabel;}(_react.Component);(0,_defineProperty2.default)(TextFieldLabel,\"propTypes\",{style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),error:_propTypes.default.bool,labelColor:_propTypes.default.string,focused:_propTypes.default.bool,label:_propTypes.default.string,type:_propTypes.default.string,value:_propTypes.default.string,leadingIcon:_propTypes.default.bool,dense:_propTypes.default.bool,prefix:_propTypes.default.bool,theme:_propTypes.default.object,focusedLabelColor:_propTypes.default.string,onLayout:_propTypes.default.func});var _default=(0,_withTheme.default)(TextFieldLabel);exports.default=_default;"
  },
  {
    "path": "dist/Components/TextField/TextFieldLabel/TextFieldLabel.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({container:{position:'absolute',zIndex:10},label:{}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/TextField/TextFieldOutline/TextFieldOutline.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _objectWithoutProperties2=_interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutProperties\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _TextFieldLabel=_interopRequireDefault(require(\"../TextFieldLabel/TextFieldLabel\"));var _TextFieldHelperText=_interopRequireDefault(require(\"../TextFieldHelperText/TextFieldHelperText\"));var _TextFieldOutline=_interopRequireWildcard(require(\"./TextFieldOutline.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/TextField/TextFieldOutline/TextFieldOutline.js\";var TextFieldOutlined=function(_Component){(0,_inherits2.default)(TextFieldOutlined,_Component);function TextFieldOutlined(props){var _this;(0,_classCallCheck2.default)(this,TextFieldOutlined);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(TextFieldOutlined).call(this,props));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{height:56});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"_updateTextInputHeight\",function(e){if(!_this.props.multiline)return;var nativeHeight=e.nativeEvent.contentSize.height;_this.setState({height:nativeHeight});});return _this;}(0,_createClass2.default)(TextFieldOutlined,[{key:\"componentDidUpdate\",value:function componentDidUpdate(prevProps){var _this$props=this.props,value=_this$props.value,multiline=_this$props.multiline;if(value&&value.length<1&&prevProps.value.length>0&&multiline){this.setState({height:56});}}},{key:\"_renderLeadingIcon\",value:function _renderLeadingIcon(){var leadingIcon=this.props.leadingIcon;var isFunc=typeof leadingIcon==='function';return _react.default.createElement(_reactNative.View,{style:{position:'absolute',left:8,top:16},__source:{fileName:_jsxFileName,lineNumber:58}},isFunc?leadingIcon():leadingIcon);}},{key:\"_renderTrailingIcon\",value:function _renderTrailingIcon(){var trailingIcon=this.props.trailingIcon;var isFunc=typeof trailingIcon==='function';return _react.default.createElement(_reactNative.View,{style:{position:'absolute',right:12,top:16},__source:{fileName:_jsxFileName,lineNumber:69}},isFunc?trailingIcon():trailingIcon);}},{key:\"_renderPrefix\",value:function _renderPrefix(){var prefix=this.props.prefix;return _react.default.createElement(_reactNative.View,{style:{position:'absolute',left:16,top:20},__source:{fileName:_jsxFileName,lineNumber:78}},_react.default.cloneElement(prefix,{color:prefix.props.color?prefix.props.color:'rgba(0, 0, 0, .57)',fontSize:prefix.props.fontSize?prefix.props.fontSize:16}));}},{key:\"_renderSuffix\",value:function _renderSuffix(){var suffix=this.props.suffix;return _react.default.createElement(_reactNative.View,{style:{position:'absolute',right:16,top:28},__source:{fileName:_jsxFileName,lineNumber:91}},_react.default.cloneElement(suffix,{color:suffix.props.color?suffix.props.color:'rgba(0, 0, 0, .57)',fontSize:suffix.props.fontSize?suffix.props.fontSize:12}));}},{key:\"render\",value:function render(){var _this2=this;var _this$props2=this.props,style=_this$props2.style,containerStyle=_this$props2.containerStyle,error=_this$props2.error,label=_this$props2.label,labelColor=_this$props2.labelColor,labelStyle=_this$props2.labelStyle,handleFocus=_this$props2.handleFocus,handleBlur=_this$props2.handleBlur,focused=_this$props2.focused,helperText=_this$props2.helperText,helperVisible=_this$props2.helperVisible,helperTextStyle=_this$props2.helperTextStyle,leadingIcon=_this$props2.leadingIcon,trailingIcon=_this$props2.trailingIcon,dense=_this$props2.dense,suffix=_this$props2.suffix,prefix=_this$props2.prefix,testID=_this$props2.testID,focusedLabelColor=_this$props2.focusedLabelColor,rest=(0,_objectWithoutProperties2.default)(_this$props2,[\"style\",\"containerStyle\",\"error\",\"label\",\"labelColor\",\"labelStyle\",\"handleFocus\",\"handleBlur\",\"focused\",\"helperText\",\"helperVisible\",\"helperTextStyle\",\"leadingIcon\",\"trailingIcon\",\"dense\",\"suffix\",\"prefix\",\"testID\",\"focusedLabelColor\"]);var borderColor=focused?'rgba(33, 150, 243, 1)':'rgb(192, 192, 192)';if(error)borderColor='red';var height=rest.multiline||rest.numberOfLines>1?this.state.height:56;if(dense){height=40;}var paddingLeft=leadingIcon?44:_TextFieldOutline.OUTLINED_LEFT_PADDING;if(prefix)paddingLeft=32;var platformStyles=_reactNative.Platform.OS=='web'?{outlineWidth:0}:{};return _react.default.createElement(_reactNative.View,{style:[_TextFieldOutline.default.containerStyle,{marginBottom:helperText&&helperVisible?20:0,marginTop:8},containerStyle],__source:{fileName:_jsxFileName,lineNumber:149}},label?_react.default.createElement(_TextFieldLabel.default,{label:label,focused:focused,error:error,value:rest.value,type:'outlined',labelColor:labelColor,style:labelStyle,leadingIcon:!!leadingIcon,dense:dense,prefix:prefix,focusedLabelColor:focusedLabelColor,__source:{fileName:_jsxFileName,lineNumber:159}}):null,leadingIcon?this._renderLeadingIcon():null,prefix?this._renderPrefix():null,_react.default.createElement(_reactNative.TextInput,(0,_extends2.default)({style:[_TextFieldOutline.default.textField,_TextFieldOutline.default.outlinedInput,platformStyles,{borderWidth:focused?2:1,borderColor:borderColor,minHeight:dense?40:56,height:height,paddingBottom:rest.multiline?8:0,paddingTop:rest.multiline?20:0,paddingLeft:paddingLeft,paddingRight:trailingIcon||suffix?36:0},style],testID:testID,onContentSizeChange:function onContentSizeChange(e){return _this2._updateTextInputHeight(e);}},rest,{onFocus:handleFocus,onBlur:handleBlur,__source:{fileName:_jsxFileName,lineNumber:175}})),trailingIcon?this._renderTrailingIcon():null,suffix?this._renderSuffix():null,_react.default.createElement(_TextFieldHelperText.default,{error:error,visible:helperVisible||error,style:helperTextStyle,__source:{fileName:_jsxFileName,lineNumber:202}},helperText));}}]);return TextFieldOutlined;}(_react.Component);(0,_defineProperty2.default)(TextFieldOutlined,\"propTypes\",{style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),containerStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),error:_propTypes.default.bool,label:_propTypes.default.string,labelColor:_propTypes.default.string,labelStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),handleFocus:_propTypes.default.func,handleBlur:_propTypes.default.func,focused:_propTypes.default.bool,helperText:_propTypes.default.string,helperVisible:_propTypes.default.bool,helperTextStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),leadingIcon:_propTypes.default.oneOfType([_propTypes.default.func,_propTypes.default.node]),trailingIcon:_propTypes.default.oneOfType([_propTypes.default.func,_propTypes.default.node]),dense:_propTypes.default.bool,value:_propTypes.default.string,multiline:_propTypes.default.bool,suffix:_propTypes.default.node,prefix:_propTypes.default.node,testID:_propTypes.default.string,focusedLabelColor:_propTypes.default.string});(0,_defineProperty2.default)(TextFieldOutlined,\"defaultProps\",{helperVisible:true});var _default=(0,_withTheme.default)(TextFieldOutlined);exports.default=_default;"
  },
  {
    "path": "dist/Components/TextField/TextFieldOutline/TextFieldOutline.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _storybookState=require(\"@sambego/storybook-state\");var _Header=_interopRequireDefault(require(\"../../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../../storybook/components/Container\"));var _storiesOf=require(\"../../../storybook/helpers/storiesOf\");var _=require(\"../../../\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/TextField/TextFieldOutline/TextFieldOutline.stories.js\";var store=new _storybookState.Store({outlinedOne:'',outlinedTwo:'',outlinedThree:''});var _default=(0,_storiesOf.storiesOf)('Components|TextField/Outlined',module).addParameters({jest:['TextFieldOutlined']}).add('simple',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:20}},_react.default.createElement(_Header.default,{title:'Outlined TextField',__source:{fileName:_jsxFileName,lineNumber:21}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:22}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:24}},_react.default.createElement(_.TextField,{type:'outlined',containerStyle:{marginTop:20},label:'Label',value:state.outlinedOne,onChangeText:function onChangeText(value){return store.set({outlinedOne:value});},__source:{fileName:_jsxFileName,lineNumber:25}}),_react.default.createElement(_.TextField,{type:'outlined',containerStyle:{marginTop:20},label:'Label',error:true,value:state.outlinedhree,onChangeText:function onChangeText(value){return store.set({outlinedhree:value});},helperText:'There is an error',__source:{fileName:_jsxFileName,lineNumber:33}}));}));}).add('multiline',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:48}},_react.default.createElement(_Header.default,{title:'Outlined TextField',__source:{fileName:_jsxFileName,lineNumber:49}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:50}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:52}},_react.default.createElement(_.TextField,{type:'outlined',containerStyle:{marginTop:20},label:'Multiline',multiline:true,value:state.outlinedTwo,onChangeText:function onChangeText(value){return store.set({outlinedTwo:value});},__source:{fileName:_jsxFileName,lineNumber:53}}));}));}).add('with leadingIcon',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:67}},_react.default.createElement(_Header.default,{title:'Outlined TextField',__source:{fileName:_jsxFileName,lineNumber:68}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:69}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:71}},_react.default.createElement(_.TextField,{type:'outlined',containerStyle:{marginTop:20},label:'Icon',leadingIcon:_react.default.createElement(_.Icon,{name:'date-range',size:24,color:'#6e6e6e',__source:{fileName:_jsxFileName,lineNumber:77}}),value:state.outlinedOne,onChangeText:function onChangeText(value){return store.set({outlinedOne:value});},__source:{fileName:_jsxFileName,lineNumber:72}}));}));}).add('with trailingIcon',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:88}},_react.default.createElement(_Header.default,{title:'Outlined TextField',__source:{fileName:_jsxFileName,lineNumber:89}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:90}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:92}},_react.default.createElement(_.TextField,{type:'outlined',containerStyle:{marginTop:20},label:'Icon',trailingIcon:_react.default.createElement(_.Icon,{name:'date-range',size:24,color:'#6e6e6e',__source:{fileName:_jsxFileName,lineNumber:98}}),value:state.outlinedOne,onChangeText:function onChangeText(value){return store.set({outlinedOne:value});},__source:{fileName:_jsxFileName,lineNumber:93}}));}));}).add('with prefix',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:109}},_react.default.createElement(_Header.default,{title:'Outlined TextField',__source:{fileName:_jsxFileName,lineNumber:110}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:111}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:113}},_react.default.createElement(_.TextField,{type:'outlined',containerStyle:{marginTop:20},label:'Pounds',prefix:_react.default.createElement(_.BodyText,{text:\"$\",__source:{fileName:_jsxFileName,lineNumber:118}}),value:state.outlinedOne,onChangeText:function onChangeText(value){return store.set({outlinedOne:value});},__source:{fileName:_jsxFileName,lineNumber:114}}));}));}).add('with suffix',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:128}},_react.default.createElement(_Header.default,{title:'Outlined TextField',__source:{fileName:_jsxFileName,lineNumber:129}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:130}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:132}},_react.default.createElement(_.TextField,{type:'outlined',containerStyle:{marginTop:20},label:'Pounds',suffix:_react.default.createElement(_.Caption,{text:\"lbs\",__source:{fileName:_jsxFileName,lineNumber:137}}),value:state.outlinedOne,onChangeText:function onChangeText(value){return store.set({outlinedOne:value});},__source:{fileName:_jsxFileName,lineNumber:133}}));}));}).add('with helperText',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:147}},_react.default.createElement(_Header.default,{title:'Outlined TextField',__source:{fileName:_jsxFileName,lineNumber:148}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:149}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:151}},_react.default.createElement(_.TextField,{type:'outlined',containerStyle:{marginTop:20},label:'Label',value:state.outlinedOne,onChangeText:function onChangeText(value){return store.set({outlinedOne:value});},helperText:'This is some helper text',__source:{fileName:_jsxFileName,lineNumber:152}}),_react.default.createElement(_.TextField,{type:'outlined',containerStyle:{marginTop:20},label:'Label',error:true,value:state.outlinedhree,onChangeText:function onChangeText(value){return store.set({outlinedhree:value});},helperText:'There is an error',__source:{fileName:_jsxFileName,lineNumber:161}}));}));}).add('dense',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:176}},_react.default.createElement(_Header.default,{title:'Outlined TextField',__source:{fileName:_jsxFileName,lineNumber:177}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:178}},function(state){return _react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:180}},_react.default.createElement(_.TextField,{type:'outlined',containerStyle:{marginTop:20},label:'Label',value:state.outlinedOne,onChangeText:function onChangeText(value){return store.set({outlinedOne:value});},dense:true,__source:{fileName:_jsxFileName,lineNumber:181}}),_react.default.createElement(_.TextField,{type:'outlined',containerStyle:{marginTop:20},error:true,value:state.outlinedhree,onChangeText:function onChangeText(value){return store.set({outlinedhree:value});},dense:true,__source:{fileName:_jsxFileName,lineNumber:190}}));}));});exports.default=_default;"
  },
  {
    "path": "dist/Components/TextField/TextFieldOutline/TextFieldOutline.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=exports.OUTLINED_LEFT_PADDING=void 0;var _reactNative=require(\"react-native\");var OUTLINED_LEFT_PADDING=14;exports.OUTLINED_LEFT_PADDING=OUTLINED_LEFT_PADDING;var styles=_reactNative.StyleSheet.create({containerStyle:{},textField:{height:56,paddingHorizontal:OUTLINED_LEFT_PADDING},outlinedInput:{borderRadius:4}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/TextField/TextFieldUnderline/TextFieldUnderline.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _TextFieldUnderline=_interopRequireDefault(require(\"./TextFieldUnderline.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/TextField/TextFieldUnderline/TextFieldUnderline.js\";var TextFieldUnderline=function(_Component){(0,_inherits2.default)(TextFieldUnderline,_Component);function TextFieldUnderline(props){var _this;(0,_classCallCheck2.default)(this,TextFieldUnderline);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(TextFieldUnderline).call(this,props));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{underLineXAnimation:new _reactNative.Animated.Value(0),animationDuration:200,animationEasing:_reactNative.Easing.bounce});return _this;}(0,_createClass2.default)(TextFieldUnderline,[{key:\"componentDidUpdate\",value:function componentDidUpdate(prevProps){var _this$props=this.props,focused=_this$props.focused,error=_this$props.error;if(focused!==prevProps.focused&&!error){this._handleUnderlineAnimation();}}},{key:\"_handleUnderlineAnimation\",value:function _handleUnderlineAnimation(){var focused=this.props.focused;var _this$state=this.state,underLineXAnimation=_this$state.underLineXAnimation,animationEasing=_this$state.animationEasing,animationDuration=_this$state.animationDuration;var value=focused?1:0;_reactNative.Animated.timing(underLineXAnimation,{toValue:value,duration:animationDuration,easing:animationEasing,useNativeDriver:true}).start();}},{key:\"render\",value:function render(){var _this$props2=this.props,error=_this$props2.error,underlineColor=_this$props2.underlineColor,underlineActiveColor=_this$props2.underlineActiveColor,focused=_this$props2.focused;var underLineXAnimation=this.state.underLineXAnimation;var baseUnderlineScale=0.5;if(!underlineColor)underlineColor='rgba(0, 0, 0, 0.42)';if(!underlineActiveColor)underlineActiveColor='rgba(33, 150, 243, 1)';if(error){underlineColor='red';baseUnderlineScale=1;}return _react.default.createElement(_reactNative.Animated.View,{useNativeDriver:true,style:[_TextFieldUnderline.default.underline,{backgroundColor:underlineColor,transform:[{scaleY:baseUnderlineScale}]}],__source:{fileName:_jsxFileName,lineNumber:66}},_react.default.createElement(_reactNative.Animated.View,{useNativeDriver:true,style:[_TextFieldUnderline.default.underline,{backgroundColor:underlineActiveColor,opacity:focused&&!error?1:0,transform:[{scaleX:underLineXAnimation},{scaleY:focused?2:0}]}],__source:{fileName:_jsxFileName,lineNumber:75}}));}}]);return TextFieldUnderline;}(_react.Component);(0,_defineProperty2.default)(TextFieldUnderline,\"propTypes\",{style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),error:_propTypes.default.bool,underlineColor:_propTypes.default.string,underlineActiveColor:_propTypes.default.string,focused:_propTypes.default.bool});var _default=(0,_withTheme.default)(TextFieldUnderline);exports.default=_default;"
  },
  {
    "path": "dist/Components/TextField/TextFieldUnderline/TextFieldUnderline.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({underline:{position:'absolute',left:0,right:0,bottom:0,height:2}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/TextField/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _TextField.default;}});Object.defineProperty(exports,\"TextFieldHelperText\",{enumerable:true,get:function get(){return _TextFieldHelperText.default;}});var _TextField=_interopRequireDefault(require(\"./TextField\"));var _TextFieldHelperText=_interopRequireDefault(require(\"./TextFieldHelperText\"));"
  },
  {
    "path": "dist/Components/ToggleButton/ToggleButton.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf3=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _Ripple=_interopRequireDefault(require(\"../Ripple/Ripple.js\"));var _ToggleButtonGroup=require(\"./ToggleButtonGroup/ToggleButtonGroup\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/ToggleButton/ToggleButton.js\";var ToggleButton=function(_Component){(0,_inherits2.default)(ToggleButton,_Component);function ToggleButton(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,ToggleButton);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(ToggleButton)).call.apply(_getPrototypeOf2,[this].concat(args)));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{isActive:false});return _this;}(0,_createClass2.default)(ToggleButton,[{key:\"componentDidMount\",value:function componentDidMount(){var active=this.props.active;if(active){this.setState({isActive:true});}}},{key:\"componentDidUpdate\",value:function componentDidUpdate(prevProps){var active=this.props.active;if(active!=prevProps.active){this.setState({isActive:active});}}},{key:\"handleToggle\",value:function handleToggle(){var onPress=this.props.onPress;var isActive=this.state.isActive;this.setState({isActive:!isActive});if(onPress)onPress();}},{key:\"render\",value:function render(){var _this2=this;var _this$props=this.props,style=_this$props.style,size=_this$props.size,rippleColor=_this$props.rippleColor,value=_this$props.value,activeNode=_this$props.activeNode,inActiveNode=_this$props.inActiveNode,rippleContainerBorderRadius=_this$props.rippleContainerBorderRadius,testID=_this$props.testID;var isActive=this.state.isActive;return _react.default.createElement(_ToggleButtonGroup.ToggleButtonContext.Consumer,{__source:{fileName:_jsxFileName,lineNumber:65}},function(context){return _react.default.createElement(_Ripple.default,{rippleContainerBorderRadius:rippleContainerBorderRadius||rippleContainerBorderRadius==0?rippleContainerBorderRadius:100,rippleColor:rippleColor?rippleColor:'rgb(0, 0, 0)',onPress:function onPress(){if(context&&context.updateActive){return context.updateActive(value);}else{return _this2.handleToggle();}},testID:testID,style:[style,{height:size*1.2,width:size*1.2,justifyContent:'center',alignItems:'center'}],__source:{fileName:_jsxFileName,lineNumber:67}},isActive||context.active==value?activeNode:inActiveNode);});}}]);return ToggleButton;}(_react.Component);(0,_defineProperty2.default)(ToggleButton,\"propTypes\",{style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),active:_propTypes.default.bool,onPress:_propTypes.default.func,value:_propTypes.default.string,activeNode:_propTypes.default.node,inActiveNode:_propTypes.default.node,rippleColor:_propTypes.default.string,size:_propTypes.default.number,rippleContainerBorderRadius:_propTypes.default.number,testID:_propTypes.default.string});(0,_defineProperty2.default)(ToggleButton,\"defaultProps\",{size:30});var _default=(0,_withTheme.default)(ToggleButton);exports.default=_default;"
  },
  {
    "path": "dist/Components/ToggleButton/ToggleButton.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../../\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/ToggleButton/ToggleButton.stories.js\";var _default=(0,_storiesOf.storiesOf)('Components|Toggle Button',module).addParameters({jest:['ToggleButton']}).add('Single',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:12}},_react.default.createElement(_Header.default,{title:'Toggle Button',__source:{fileName:_jsxFileName,lineNumber:13}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row'},__source:{fileName:_jsxFileName,lineNumber:14}},_react.default.createElement(_.ToggleButton,{activeNode:_react.default.createElement(_.Icon,{name:\"alarm\",size:32,__source:{fileName:_jsxFileName,lineNumber:16}}),inActiveNode:_react.default.createElement(_.Icon,{name:\"alarm\",size:32,style:{opacity:0.5},__source:{fileName:_jsxFileName,lineNumber:18}}),size:32,__source:{fileName:_jsxFileName,lineNumber:15}}),_react.default.createElement(_.ToggleButton,{activeNode:_react.default.createElement(_.Icon,{name:\"face\",size:32,color:'purple',__source:{fileName:_jsxFileName,lineNumber:23}}),inActiveNode:_react.default.createElement(_.Icon,{name:\"face\",size:32,style:{opacity:0.5},color:'purple',__source:{fileName:_jsxFileName,lineNumber:25}}),size:32,__source:{fileName:_jsxFileName,lineNumber:22}}),_react.default.createElement(_.ToggleButton,{activeNode:_react.default.createElement(_.Icon,{name:\"arrow-back\",size:32,color:'orange',__source:{fileName:_jsxFileName,lineNumber:35}}),inActiveNode:_react.default.createElement(_.Icon,{name:\"arrow-back\",size:32,style:{opacity:0.5},color:'orange',__source:{fileName:_jsxFileName,lineNumber:37}}),size:32,__source:{fileName:_jsxFileName,lineNumber:34}})),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row'},__source:{fileName:_jsxFileName,lineNumber:47}},_react.default.createElement(_.ToggleButton,{activeNode:_react.default.createElement(_.Icon,{name:\"favorite\",size:32,__source:{fileName:_jsxFileName,lineNumber:49}}),inActiveNode:_react.default.createElement(_.Icon,{name:\"favorite-border\",size:32,__source:{fileName:_jsxFileName,lineNumber:50}}),size:32,__source:{fileName:_jsxFileName,lineNumber:48}}),_react.default.createElement(_.ToggleButton,{activeNode:_react.default.createElement(_.Icon,{name:\"brightness-1\",size:32,color:'purple',__source:{fileName:_jsxFileName,lineNumber:54}}),inActiveNode:_react.default.createElement(_.Icon,{name:\"adjust\",size:32,color:'purple',__source:{fileName:_jsxFileName,lineNumber:55}}),size:32,__source:{fileName:_jsxFileName,lineNumber:53}}),_react.default.createElement(_.ToggleButton,{activeNode:_react.default.createElement(_.Icon,{name:\"label\",size:32,color:'orange',__source:{fileName:_jsxFileName,lineNumber:59}}),inActiveNode:_react.default.createElement(_.Icon,{name:\"label-outline\",size:32,style:{opacity:0.5},color:'orange',__source:{fileName:_jsxFileName,lineNumber:61}}),size:32,__source:{fileName:_jsxFileName,lineNumber:58}})));}).add('Custom',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:74}},_react.default.createElement(_Header.default,{title:'Toggle Button',__source:{fileName:_jsxFileName,lineNumber:75}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row'},__source:{fileName:_jsxFileName,lineNumber:76}},_react.default.createElement(_.ToggleButton,{activeNode:_react.default.createElement(_reactNative.View,{style:{backgroundColor:'rgba(0,0,0,.12)',borderWidth:1,borderColor:'rgba(0,0,0,.12)',padding:8},__source:{fileName:_jsxFileName,lineNumber:79}},_react.default.createElement(_.Icon,{name:\"format-italic\",size:20,__source:{fileName:_jsxFileName,lineNumber:86}})),inActiveNode:_react.default.createElement(_reactNative.View,{style:{backgroundColor:'white',borderWidth:1,borderColor:'rgba(0,0,0,.12)',padding:8},__source:{fileName:_jsxFileName,lineNumber:90}},_react.default.createElement(_.Icon,{name:\"format-italic\",size:20,__source:{fileName:_jsxFileName,lineNumber:97}})),rippleContainerBorderRadius:0,__source:{fileName:_jsxFileName,lineNumber:77}}),_react.default.createElement(_.ToggleButton,{activeNode:_react.default.createElement(_reactNative.View,{style:{backgroundColor:'rgba(0,0,0,.12)',borderWidth:1,borderRightWidth:0,borderLeftWidth:0,borderColor:'rgba(0,0,0,.12)',padding:8},__source:{fileName:_jsxFileName,lineNumber:104}},_react.default.createElement(_.Icon,{name:\"format-bold\",size:20,__source:{fileName:_jsxFileName,lineNumber:113}})),inActiveNode:_react.default.createElement(_reactNative.View,{style:{backgroundColor:'white',borderWidth:1,borderRightWidth:0,borderLeftWidth:0,borderColor:'rgba(0,0,0,.12)',padding:8},__source:{fileName:_jsxFileName,lineNumber:117}},_react.default.createElement(_.Icon,{name:\"format-bold\",size:20,__source:{fileName:_jsxFileName,lineNumber:126}})),rippleContainerBorderRadius:0,__source:{fileName:_jsxFileName,lineNumber:102}}),_react.default.createElement(_.ToggleButton,{activeNode:_react.default.createElement(_reactNative.View,{style:{backgroundColor:'rgba(0,0,0,.12)',borderWidth:1,borderColor:'rgba(0,0,0,.12)',padding:8},__source:{fileName:_jsxFileName,lineNumber:133}},_react.default.createElement(_.Icon,{name:\"format-underlined\",size:20,__source:{fileName:_jsxFileName,lineNumber:140}})),inActiveNode:_react.default.createElement(_reactNative.View,{style:{backgroundColor:'white',borderWidth:1,borderColor:'rgba(0,0,0,.12)',padding:8},__source:{fileName:_jsxFileName,lineNumber:144}},_react.default.createElement(_.Icon,{name:\"format-underlined\",size:20,__source:{fileName:_jsxFileName,lineNumber:151}})),rippleContainerBorderRadius:0,__source:{fileName:_jsxFileName,lineNumber:131}})));}).add('Group',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:160}},_react.default.createElement(_Header.default,{title:'Toggle Button Group',__source:{fileName:_jsxFileName,lineNumber:161}}),_react.default.createElement(_.ToggleButtonGroup,{__source:{fileName:_jsxFileName,lineNumber:162}},_react.default.createElement(_reactNative.View,{style:{flexDirection:'row'},__source:{fileName:_jsxFileName,lineNumber:163}},_react.default.createElement(_.ToggleButton,{activeNode:_react.default.createElement(_reactNative.View,{style:{backgroundColor:'rgba(0,0,0,.12)',borderWidth:1,borderColor:'rgba(0,0,0,.12)',padding:8},__source:{fileName:_jsxFileName,lineNumber:166}},_react.default.createElement(_.Icon,{name:\"format-align-center\",size:20,__source:{fileName:_jsxFileName,lineNumber:173}})),inActiveNode:_react.default.createElement(_reactNative.View,{style:{backgroundColor:'white',borderWidth:1,borderColor:'rgba(0,0,0,.12)',padding:8},__source:{fileName:_jsxFileName,lineNumber:177}},_react.default.createElement(_.Icon,{name:\"format-align-center\",size:20,__source:{fileName:_jsxFileName,lineNumber:184}})),rippleContainerBorderRadius:0,value:'center',__source:{fileName:_jsxFileName,lineNumber:164}}),_react.default.createElement(_.ToggleButton,{value:'bold',activeNode:_react.default.createElement(_reactNative.View,{style:{backgroundColor:'rgba(0,0,0,.12)',borderWidth:1,borderRightWidth:0,borderLeftWidth:0,borderColor:'rgba(0,0,0,.12)',padding:8},__source:{fileName:_jsxFileName,lineNumber:193}},_react.default.createElement(_.Icon,{name:\"format-align-left\",size:20,__source:{fileName:_jsxFileName,lineNumber:202}})),inActiveNode:_react.default.createElement(_reactNative.View,{style:{backgroundColor:'white',borderWidth:1,borderRightWidth:0,borderLeftWidth:0,borderColor:'rgba(0,0,0,.12)',padding:8},__source:{fileName:_jsxFileName,lineNumber:206}},_react.default.createElement(_.Icon,{name:\"format-align-left\",size:20,__source:{fileName:_jsxFileName,lineNumber:215}})),rippleContainerBorderRadius:0,__source:{fileName:_jsxFileName,lineNumber:190}}),_react.default.createElement(_.ToggleButton,{value:'underlined',activeNode:_react.default.createElement(_reactNative.View,{style:{backgroundColor:'rgba(0,0,0,.12)',borderWidth:1,borderColor:'rgba(0,0,0,.12)',padding:8},__source:{fileName:_jsxFileName,lineNumber:223}},_react.default.createElement(_.Icon,{name:\"format-align-right\",size:20,__source:{fileName:_jsxFileName,lineNumber:230}})),inActiveNode:_react.default.createElement(_reactNative.View,{style:{backgroundColor:'white',borderWidth:1,borderColor:'rgba(0,0,0,.12)',padding:8},__source:{fileName:_jsxFileName,lineNumber:234}},_react.default.createElement(_.Icon,{name:\"format-align-right\",size:20,__source:{fileName:_jsxFileName,lineNumber:241}})),rippleContainerBorderRadius:0,__source:{fileName:_jsxFileName,lineNumber:220}}))));});exports.default=_default;"
  },
  {
    "path": "dist/Components/ToggleButton/ToggleButton.styles.js",
    "content": ""
  },
  {
    "path": "dist/Components/ToggleButton/ToggleButtonGroup/ToggleButtonGroup.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=exports.ToggleButtonContext=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf3=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/ToggleButton/ToggleButtonGroup/ToggleButtonGroup.js\";var ToggleButtonContext=_react.default.createContext({updateActive:'',active:''});exports.ToggleButtonContext=ToggleButtonContext;var ToggleButtonGroup=function(_Component){(0,_inherits2.default)(ToggleButtonGroup,_Component);function ToggleButtonGroup(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,ToggleButtonGroup);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(ToggleButtonGroup)).call.apply(_getPrototypeOf2,[this].concat(args)));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{active:''});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"updateActive\",function(value){_this.setState({active:value});if(_this.props.onPress)_this.props.onPress(value);});return _this;}(0,_createClass2.default)(ToggleButtonGroup,[{key:\"render\",value:function render(){var children=this.props.children;return _react.default.createElement(ToggleButtonContext.Provider,{value:{updateActive:this.updateActive,active:this.state.active},__source:{fileName:_jsxFileName,lineNumber:27}},children);}}]);return ToggleButtonGroup;}(_react.Component);(0,_defineProperty2.default)(ToggleButtonGroup,\"propTypes\",{onPress:_propTypes.default.func,children:_propTypes.default.node});var _default=(0,_withTheme.default)(ToggleButtonGroup);exports.default=_default;"
  },
  {
    "path": "dist/Components/ToggleButton/ToggleButtonGroup/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _ToggleButtonGroup.default;}});var _ToggleButtonGroup=_interopRequireDefault(require(\"./ToggleButtonGroup\"));"
  },
  {
    "path": "dist/Components/ToggleButton/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _ToggleButton.default;}});Object.defineProperty(exports,\"ToggleButtonGroup\",{enumerable:true,get:function get(){return _ToggleButtonGroup.default;}});var _ToggleButton=_interopRequireDefault(require(\"./ToggleButton\"));var _ToggleButtonGroup=_interopRequireDefault(require(\"./ToggleButtonGroup\"));"
  },
  {
    "path": "dist/Components/Tooltip/Tooltip.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf3=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _Paper=_interopRequireDefault(require(\"../Paper/Paper.js\"));var _Menu=_interopRequireDefault(require(\"../Menu/Menu.js\"));var _shadow=_interopRequireDefault(require(\"../../Utils/Shadow/shadow.js\"));var _Hoverable=_interopRequireDefault(require(\"../../Utils/Hoverable/Hoverable.js\"));var _withTheme=_interopRequireDefault(require(\"../../Theme/withTheme\"));var _Tooltip=_interopRequireDefault(require(\"./Tooltip.styles\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Tooltip/Tooltip.js\";function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}var Tooltip=function(_Component){(0,_inherits2.default)(Tooltip,_Component);function Tooltip(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,Tooltip);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(Tooltip)).call.apply(_getPrototypeOf2,[this].concat(args)));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{visible:false});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"show\",function(){_this.setState({visible:true});});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"hide\",function(){_this.setState({visible:false});});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"_toggle\",function(){var visible=_this.state.visible;_this.setState({visible:!visible});});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"_hide\",function(){_this.setState({visible:false});});return _this;}(0,_createClass2.default)(Tooltip,[{key:\"render\",value:function render(){var _this2=this;var _this$props=this.props,children=_this$props.children,content=_this$props.content,style=_this$props.style,tooltipPosition=_this$props.tooltipPosition,testID=_this$props.testID;var visible=this.state.visible;var platformTextStyles=_reactNative.Platform.OS=='web'?{whiteSpace:'noWrap',fontSize:10}:{fontSize:14};var platformPaperStyles=_reactNative.Platform.OS=='web'?{height:24,paddingHoriztonal:8}:{height:32,paddingHoriztonal:16};return _react.default.createElement(_Menu.default,{tooltip:true,visible:visible,testID:testID,button:_react.default.createElement(_Hoverable.default,{onHoverIn:this._toggle,onHoverOut:this._hide,__source:{fileName:_jsxFileName,lineNumber:68}},_react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:this._toggle,__source:{fileName:_jsxFileName,lineNumber:69}},_react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:70}},_react.default.cloneElement(children,{onPress:function onPress(){_this2._toggle();if(children.props.onPress)children.props.onPress();}})))),onBackdropPress:this._hide,noBackDrop:true,tooltipPosition:tooltipPosition,contentContainerStyle:{backgroundColor:'transparent',paddingTop:0,paddingBottom:0},menuStyle:_objectSpread({width:'auto',minWidth:'auto',marginBottom:40},(0,_shadow.default)(0)),__source:{fileName:_jsxFileName,lineNumber:63}},_react.default.createElement(_Paper.default,{style:[_Tooltip.default.card,platformPaperStyles,style],__source:{fileName:_jsxFileName,lineNumber:95}},_react.default.createElement(_reactNative.Text,{style:[_Tooltip.default.text,platformTextStyles],__source:{fileName:_jsxFileName,lineNumber:96}},content)));}}]);return Tooltip;}(_react.Component);(0,_defineProperty2.default)(Tooltip,\"propTypes\",{children:_propTypes.default.node,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),content:_propTypes.default.string,tooltipPosition:_propTypes.default.string,testID:_propTypes.default.string});var _default=(0,_withTheme.default)(Tooltip);exports.default=_default;"
  },
  {
    "path": "dist/Components/Tooltip/Tooltip.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../../\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Tooltip/Tooltip.stories.js\";var _default=(0,_storiesOf.storiesOf)('Components|Tooltip',module).addParameters({jest:['Tooltip']}).add('Tooltip',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:12}},_react.default.createElement(_Header.default,{title:'Tooltip',__source:{fileName:_jsxFileName,lineNumber:13}}),_react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:14}},_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',marginBottom:30},__source:{fileName:_jsxFileName,lineNumber:15}},_react.default.createElement(_.Tooltip,{content:\"I'm a tooltip\",__source:{fileName:_jsxFileName,lineNumber:16}},_react.default.createElement(_.Button,{type:\"outlined\",text:'Top',__source:{fileName:_jsxFileName,lineNumber:17}}))),_react.default.createElement(_reactNative.View,{style:{marginBottom:30},__source:{fileName:_jsxFileName,lineNumber:20}},_react.default.createElement(_.Tooltip,{content:\"I'm a tooltip\",tooltipPosition:'bottom',__source:{fileName:_jsxFileName,lineNumber:21}},_react.default.createElement(_.Button,{type:\"outlined\",text:'Bottom',__source:{fileName:_jsxFileName,lineNumber:22}}))),_react.default.createElement(_reactNative.View,{style:{marginBottom:30},__source:{fileName:_jsxFileName,lineNumber:25}},_react.default.createElement(_.Tooltip,{content:\"I'm a tooltip\",tooltipPosition:'right',__source:{fileName:_jsxFileName,lineNumber:26}},_react.default.createElement(_.Button,{type:\"outlined\",text:'Right',__source:{fileName:_jsxFileName,lineNumber:27}}))),_react.default.createElement(_reactNative.View,{style:{marginLeft:100},__source:{fileName:_jsxFileName,lineNumber:30}},_react.default.createElement(_.Tooltip,{content:\"I'm a tooltip\",tooltipPosition:'left',__source:{fileName:_jsxFileName,lineNumber:31}},_react.default.createElement(_.Button,{type:\"outlined\",text:'Left',__source:{fileName:_jsxFileName,lineNumber:32}})))));});exports.default=_default;"
  },
  {
    "path": "dist/Components/Tooltip/Tooltip.styles.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({container:{flex:1,width:'100%',justifyContent:'center',alignItems:'center'},card:{borderRadius:4,backgroundColor:'#323232',flexDirection:'row',justifyContent:'center',alignItems:'center',height:24,paddingHorizontal:8,width:'100%'},text:{color:'white',fontSize:10}});var _default=styles;exports.default=_default;"
  },
  {
    "path": "dist/Components/Tooltip/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"default\",{enumerable:true,get:function get(){return _Tooltip.default;}});var _Tooltip=_interopRequireDefault(require(\"./Tooltip\"));"
  },
  {
    "path": "dist/Components/Typography/BaseText/BaseText.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _objectWithoutProperties2=_interopRequireDefault(require(\"@babel/runtime/helpers/objectWithoutProperties\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Typography/BaseText/BaseText.js\";var BaseText=function(_Component){(0,_inherits2.default)(BaseText,_Component);function BaseText(){(0,_classCallCheck2.default)(this,BaseText);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(BaseText).apply(this,arguments));}(0,_createClass2.default)(BaseText,[{key:\"render\",value:function render(){var _this$props=this.props,style=_this$props.style,typographyStyles=_this$props.typographyStyles,align=_this$props.align,color=_this$props.color,gutterBottom=_this$props.gutterBottom,children=_this$props.children,theme=_this$props.theme,_this$props$themeColo=_this$props.themeColor,themeColor=_this$props$themeColo===void 0?'primary':_this$props$themeColo,props=(0,_objectWithoutProperties2.default)(_this$props,[\"style\",\"typographyStyles\",\"align\",\"color\",\"gutterBottom\",\"children\",\"theme\",\"themeColor\"]);return _react.default.createElement(_reactNative.Text,(0,_extends2.default)({style:[theme.text,typographyStyles,{textAlign:align?align:'left',color:color?color:theme.textColor[themeColor],marginBottom:gutterBottom?10:0},style]},props,{__source:{fileName:_jsxFileName,lineNumber:31}}),children);}}]);return BaseText;}(_react.Component);exports.default=BaseText;(0,_defineProperty2.default)(BaseText,\"propTypes\",{style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),children:_propTypes.default.node,typographyStyles:_propTypes.default.object,align:_propTypes.default.string,color:_propTypes.default.string,gutterBottom:_propTypes.default.bool,theme:_propTypes.default.object,themeColor:_propTypes.default.string});"
  },
  {
    "path": "dist/Components/Typography/BodyText/BodyText.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _BaseText=_interopRequireDefault(require(\"../BaseText/BaseText\"));var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Typography/BodyText/BodyText.js\";var BodyText=function(_Component){(0,_inherits2.default)(BodyText,_Component);function BodyText(){(0,_classCallCheck2.default)(this,BodyText);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(BodyText).apply(this,arguments));}(0,_createClass2.default)(BodyText,[{key:\"render\",value:function render(){var _this$props=this.props,type=_this$props.type,theme=_this$props.theme,style=_this$props.style,children=_this$props.children,text=_this$props.text;var textStyle=type==2?theme.bodyTextTwo:theme.bodyText;return _react.default.createElement(_BaseText.default,(0,_extends2.default)({typographyStyles:textStyle,style:style,theme:theme},this.props,{__source:{fileName:_jsxFileName,lineNumber:20}}),children?children:text);}}]);return BodyText;}(_react.Component);(0,_defineProperty2.default)(BodyText,\"propTypes\",{type:_propTypes.default.number,children:_propTypes.default.node,theme:_propTypes.default.object,style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),text:_propTypes.default.string});var _default=(0,_withTheme.default)(BodyText);exports.default=_default;"
  },
  {
    "path": "dist/Components/Typography/Caption/Caption.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _BaseText=_interopRequireDefault(require(\"../BaseText/BaseText\"));var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Typography/Caption/Caption.js\";var Caption=function(_Component){(0,_inherits2.default)(Caption,_Component);function Caption(){(0,_classCallCheck2.default)(this,Caption);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(Caption).apply(this,arguments));}(0,_createClass2.default)(Caption,[{key:\"render\",value:function render(){var _this$props=this.props,theme=_this$props.theme,children=_this$props.children,text=_this$props.text;return _react.default.createElement(_BaseText.default,(0,_extends2.default)({typographyStyles:theme.caption,theme:theme},this.props,{__source:{fileName:_jsxFileName,lineNumber:15}}),children?children:text);}}]);return Caption;}(_react.Component);(0,_defineProperty2.default)(Caption,\"propTypes\",{children:_propTypes.default.node,theme:_propTypes.default.object,text:_propTypes.default.string});var _default=(0,_withTheme.default)(Caption);exports.default=_default;"
  },
  {
    "path": "dist/Components/Typography/Heading/Heading.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _BaseText=_interopRequireDefault(require(\"../BaseText/BaseText\"));var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Typography/Heading/Heading.js\";var Heading=function(_Component){(0,_inherits2.default)(Heading,_Component);function Heading(){(0,_classCallCheck2.default)(this,Heading);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(Heading).apply(this,arguments));}(0,_createClass2.default)(Heading,[{key:\"numberToStyle\",value:function numberToStyle(num){var theme=this.props.theme;var numArray=[theme.headingOne,theme.headingTwo,theme.headingThree,theme.headingFour,theme.headingFive,theme.headingSix];return numArray[num-1];}},{key:\"render\",value:function render(){var _this$props=this.props,type=_this$props.type,theme=_this$props.theme,children=_this$props.children,text=_this$props.text;var textStyle;if(type<1&&type>6){textStyle=theme.headingOne;}textStyle=this.numberToStyle(type);return _react.default.createElement(_BaseText.default,(0,_extends2.default)({typographyStyles:textStyle,theme:theme},this.props,{__source:{fileName:_jsxFileName,lineNumber:37}}),children?children:text);}}]);return Heading;}(_react.Component);(0,_defineProperty2.default)(Heading,\"propTypes\",{type:_propTypes.default.number,children:_propTypes.default.node,theme:_propTypes.default.object,text:_propTypes.default.string});var _default=(0,_withTheme.default)(Heading);exports.default=_default;"
  },
  {
    "path": "dist/Components/Typography/Overline/Overline.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _BaseText=_interopRequireDefault(require(\"../BaseText/BaseText\"));var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Typography/Overline/Overline.js\";var Overline=function(_Component){(0,_inherits2.default)(Overline,_Component);function Overline(){(0,_classCallCheck2.default)(this,Overline);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(Overline).apply(this,arguments));}(0,_createClass2.default)(Overline,[{key:\"render\",value:function render(){var _this$props=this.props,theme=_this$props.theme,children=_this$props.children,text=_this$props.text;return _react.default.createElement(_BaseText.default,(0,_extends2.default)({typographyStyles:theme.overline,theme:theme},this.props,{__source:{fileName:_jsxFileName,lineNumber:16}}),children?children:text);}}]);return Overline;}(_react.Component);(0,_defineProperty2.default)(Overline,\"propTypes\",{children:_propTypes.default.node,theme:_propTypes.default.object,text:_propTypes.default.string});var _default=(0,_withTheme.default)(Overline);exports.default=_default;"
  },
  {
    "path": "dist/Components/Typography/Subtitle/Subtitle.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _BaseText=_interopRequireDefault(require(\"../BaseText/BaseText\"));var _withTheme=_interopRequireDefault(require(\"../../../Theme/withTheme\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Typography/Subtitle/Subtitle.js\";var Subtitle=function(_Component){(0,_inherits2.default)(Subtitle,_Component);function Subtitle(){(0,_classCallCheck2.default)(this,Subtitle);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(Subtitle).apply(this,arguments));}(0,_createClass2.default)(Subtitle,[{key:\"numberToStyle\",value:function numberToStyle(num){var theme=this.props.theme;var numArray=[theme.subtitleOne,theme.subtitleTwo];return numArray[num-1];}},{key:\"render\",value:function render(){var _this$props=this.props,type=_this$props.type,theme=_this$props.theme,children=_this$props.children,text=_this$props.text;var textStyle;if(type<1&&type>2){textStyle=theme.subtitleOne;}textStyle=this.numberToStyle(type);return _react.default.createElement(_BaseText.default,(0,_extends2.default)({typographyStyles:textStyle,theme:theme},this.props,{__source:{fileName:_jsxFileName,lineNumber:29}}),children?children:text);}}]);return Subtitle;}(_react.Component);(0,_defineProperty2.default)(Subtitle,\"propTypes\",{type:_propTypes.default.number,children:_propTypes.default.node,theme:_propTypes.default.object,text:_propTypes.default.string});var _default=(0,_withTheme.default)(Subtitle);exports.default=_default;"
  },
  {
    "path": "dist/Components/Typography/Typography.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _reactNative=require(\"react-native\");var _=require(\"../..\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Components/Typography/Typography.stories.js\";var _default=(0,_storiesOf.storiesOf)('Components|Typography',module).addParameters({jest:['BodyText','Caption','Heading','Overline','Subtitle']}).add('Components',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:14}},_react.default.createElement(_Header.default,{title:'Typography',__source:{fileName:_jsxFileName,lineNumber:15}}),_react.default.createElement(_reactNative.View,{style:{marginTop:50},__source:{fileName:_jsxFileName,lineNumber:16}},_react.default.createElement(_.Heading,{type:1,text:\"h1\",__source:{fileName:_jsxFileName,lineNumber:17}}),_react.default.createElement(_.Heading,{type:2,text:\"h2\",__source:{fileName:_jsxFileName,lineNumber:18}}),_react.default.createElement(_.Heading,{type:3,text:\"h3\",__source:{fileName:_jsxFileName,lineNumber:19}}),_react.default.createElement(_.Heading,{type:4,text:\"h4\",__source:{fileName:_jsxFileName,lineNumber:20}}),_react.default.createElement(_.Heading,{type:5,text:\"h5\",__source:{fileName:_jsxFileName,lineNumber:21}}),_react.default.createElement(_.Heading,{type:6,text:\"h6\",__source:{fileName:_jsxFileName,lineNumber:22}}),_react.default.createElement(_.Subtitle,{type:1,text:\"Subtitle 1\",__source:{fileName:_jsxFileName,lineNumber:23}}),_react.default.createElement(_.Subtitle,{type:2,text:\"Subtitle 2\",__source:{fileName:_jsxFileName,lineNumber:24}}),_react.default.createElement(_.BodyText,{type:1,text:\"Body 1\",__source:{fileName:_jsxFileName,lineNumber:25}}),_react.default.createElement(_.BodyText,{type:1,text:\"Body 1 secondary\",themeColor:\"secondary\",__source:{fileName:_jsxFileName,lineNumber:26}}),_react.default.createElement(_.BodyText,{type:2,text:\"Body 2\",__source:{fileName:_jsxFileName,lineNumber:27}}),_react.default.createElement(_.BodyText,{type:2,text:\"Body 2 secondary\",themeColor:\"secondary\",__source:{fileName:_jsxFileName,lineNumber:28}}),_react.default.createElement(_.Caption,{text:\"Caption\",__source:{fileName:_jsxFileName,lineNumber:29}}),_react.default.createElement(_.Overline,{text:\"Overline\",__source:{fileName:_jsxFileName,lineNumber:30}})));});exports.default=_default;"
  },
  {
    "path": "dist/Components/Typography/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"BodyText\",{enumerable:true,get:function get(){return _BodyText.default;}});Object.defineProperty(exports,\"Caption\",{enumerable:true,get:function get(){return _Caption.default;}});Object.defineProperty(exports,\"Heading\",{enumerable:true,get:function get(){return _Heading.default;}});Object.defineProperty(exports,\"Overline\",{enumerable:true,get:function get(){return _Overline.default;}});Object.defineProperty(exports,\"Subtitle\",{enumerable:true,get:function get(){return _Subtitle.default;}});var _BodyText=_interopRequireDefault(require(\"./BodyText/BodyText.js\"));var _Caption=_interopRequireDefault(require(\"./Caption/Caption.js\"));var _Heading=_interopRequireDefault(require(\"./Heading/Heading.js\"));var _Overline=_interopRequireDefault(require(\"./Overline/Overline.js\"));var _Subtitle=_interopRequireDefault(require(\"./Subtitle/Subtitle.js\"));"
  },
  {
    "path": "dist/Core/BreadProvider.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _ThemeContext=_interopRequireDefault(require(\"../Theme/ThemeContext\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Core/BreadProvider.js\";var BreadProvider=function(_Component){(0,_inherits2.default)(BreadProvider,_Component);function BreadProvider(){(0,_classCallCheck2.default)(this,BreadProvider);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(BreadProvider).apply(this,arguments));}(0,_createClass2.default)(BreadProvider,[{key:\"render\",value:function render(){var _this$props=this.props,children=_this$props.children,value=_this$props.value;return _react.default.createElement(_ThemeContext.default.Provider,{value:value,__source:{fileName:_jsxFileName,lineNumber:18}},children);}}]);return BreadProvider;}(_react.Component);exports.default=BreadProvider;(0,_defineProperty2.default)(BreadProvider,\"propTypes\",{children:_propTypes.default.node.isRequired,value:_propTypes.default.object});(0,_defineProperty2.default)(BreadProvider,\"defaultProps\",{value:{}});"
  },
  {
    "path": "dist/Core/colors/amber.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var amber={50:'#fff8e1',100:'#ffecb3',200:'#ffe082',300:'#ffd54f',400:'#ffca28',500:'#ffc107',600:'#ffb300',700:'#ffa000',800:'#ff8f00',900:'#ff6f00',A100:'#ffe57f',A200:'#ffd740',A400:'#ffc400',A700:'#ffab00'};var _default=amber;exports.default=_default;"
  },
  {
    "path": "dist/Core/colors/blue.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var blue={50:'#e3f2fd',100:'#bbdefb',200:'#90caf9',300:'#64b5f6',400:'#42a5f5',500:'#2196f3',600:'#1e88e5',700:'#1976d2',800:'#1565c0',900:'#0d47a1',A100:'#82b1ff',A200:'#448aff',A400:'#2979ff',A700:'#2962ff'};var _default=blue;exports.default=_default;"
  },
  {
    "path": "dist/Core/colors/blueGrey.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var blueGrey={50:'#eceff1',100:'#cfd8dc',200:'#b0bec5',300:'#90a4ae',400:'#78909c',500:'#607d8b',600:'#546e7a',700:'#455a64',800:'#37474f',900:'#263238',A100:'#cfd8dc',A200:'#b0bec5',A400:'#78909c',A700:'#455a64'};var _default=blueGrey;exports.default=_default;"
  },
  {
    "path": "dist/Core/colors/brown.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var brown={50:'#efebe9',100:'#d7ccc8',200:'#bcaaa4',300:'#a1887f',400:'#8d6e63',500:'#795548',600:'#6d4c41',700:'#5d4037',800:'#4e342e',900:'#3e2723',A100:'#d7ccc8',A200:'#bcaaa4',A400:'#8d6e63',A700:'#5d4037'};var _default=brown;exports.default=_default;"
  },
  {
    "path": "dist/Core/colors/cyan.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var cyan={50:'#e0f7fa',100:'#b2ebf2',200:'#80deea',300:'#4dd0e1',400:'#26c6da',500:'#00bcd4',600:'#00acc1',700:'#0097a7',800:'#00838f',900:'#006064',A100:'#84ffff',A200:'#18ffff',A400:'#00e5ff',A700:'#00b8d4'};var _default=cyan;exports.default=_default;"
  },
  {
    "path": "dist/Core/colors/deepOrange.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var deepOrange={50:'#fbe9e7',100:'#ffccbc',200:'#ffab91',300:'#ff8a65',400:'#ff7043',500:'#ff5722',600:'#f4511e',700:'#e64a19',800:'#d84315',900:'#bf360c',A100:'#ff9e80',A200:'#ff6e40',A400:'#ff3d00',A700:'#dd2c00'};var _default=deepOrange;exports.default=_default;"
  },
  {
    "path": "dist/Core/colors/deepPurple.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var deepPurple={50:'#ede7f6',100:'#d1c4e9',200:'#b39ddb',300:'#9575cd',400:'#7e57c2',500:'#673ab7',600:'#5e35b1',700:'#512da8',800:'#4527a0',900:'#311b92',A100:'#b388ff',A200:'#7c4dff',A400:'#651fff',A700:'#6200ea'};var _default=deepPurple;exports.default=_default;"
  },
  {
    "path": "dist/Core/colors/green.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var green={50:'#e8f5e9',100:'#c8e6c9',200:'#a5d6a7',300:'#81c784',400:'#66bb6a',500:'#4caf50',600:'#43a047',700:'#388e3c',800:'#2e7d32',900:'#1b5e20',A100:'#b9f6ca',A200:'#69f0ae',A400:'#00e676',A700:'#00c853'};var _default=green;exports.default=_default;"
  },
  {
    "path": "dist/Core/colors/grey.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var grey={50:'#fafafa',100:'#f5f5f5',200:'#eeeeee',300:'#e0e0e0',400:'#bdbdbd',500:'#9e9e9e',600:'#757575',700:'#616161',800:'#424242',900:'#212121',A100:'#d5d5d5',A200:'#aaaaaa',A400:'#303030',A700:'#616161'};var _default=grey;exports.default=_default;"
  },
  {
    "path": "dist/Core/colors/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _amber=_interopRequireDefault(require(\"./amber\"));var _blue=_interopRequireDefault(require(\"./blue\"));var _blueGrey=_interopRequireDefault(require(\"./blueGrey\"));var _brown=_interopRequireDefault(require(\"./brown\"));var _cyan=_interopRequireDefault(require(\"./cyan\"));var _deepOrange=_interopRequireDefault(require(\"./deepOrange\"));var _deepPurple=_interopRequireDefault(require(\"./deepPurple\"));var _green=_interopRequireDefault(require(\"./green\"));var _grey=_interopRequireDefault(require(\"./grey\"));var _indigo=_interopRequireDefault(require(\"./indigo\"));var _lightBlue=_interopRequireDefault(require(\"./lightBlue\"));var _lightGreen=_interopRequireDefault(require(\"./lightGreen\"));var _lime=_interopRequireDefault(require(\"./lime\"));var _orange=_interopRequireDefault(require(\"./orange\"));var _pink=_interopRequireDefault(require(\"./pink\"));var _purple=_interopRequireDefault(require(\"./purple\"));var _red=_interopRequireDefault(require(\"./red\"));var _teal=_interopRequireDefault(require(\"./teal\"));var _yellow=_interopRequireDefault(require(\"./yellow\"));var Colors={amber:_amber.default,blue:_blue.default,blueGrey:_blueGrey.default,brown:_brown.default,cyan:_cyan.default,deepOrange:_deepOrange.default,deepPurple:_deepPurple.default,green:_green.default,grey:_grey.default,indigo:_indigo.default,lightBlue:_lightBlue.default,lightGreen:_lightGreen.default,lime:_lime.default,orange:_orange.default,pink:_pink.default,purple:_purple.default,red:_red.default,teal:_teal.default,yellow:_yellow.default};var _default=Colors;exports.default=_default;"
  },
  {
    "path": "dist/Core/colors/indigo.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var indigo={50:'#e8eaf6',100:'#c5cae9',200:'#9fa8da',300:'#7986cb',400:'#5c6bc0',500:'#3f51b5',600:'#3949ab',700:'#303f9f',800:'#283593',900:'#1a237e',A100:'#8c9eff',A200:'#536dfe',A400:'#3d5afe',A700:'#304ffe'};var _default=indigo;exports.default=_default;"
  },
  {
    "path": "dist/Core/colors/lightBlue.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var lightBlue={50:'#e1f5fe',100:'#b3e5fc',200:'#81d4fa',300:'#4fc3f7',400:'#29b6f6',500:'#03a9f4',600:'#039be5',700:'#0288d1',800:'#0277bd',900:'#01579b',A100:'#80d8ff',A200:'#40c4ff',A400:'#00b0ff',A700:'#0091ea'};var _default=lightBlue;exports.default=_default;"
  },
  {
    "path": "dist/Core/colors/lightGreen.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var lightGreen={50:'#f1f8e9',100:'#dcedc8',200:'#c5e1a5',300:'#aed581',400:'#9ccc65',500:'#8bc34a',600:'#7cb342',700:'#689f38',800:'#558b2f',900:'#33691e',A100:'#ccff90',A200:'#b2ff59',A400:'#76ff03',A700:'#64dd17'};var _default=lightGreen;exports.default=_default;"
  },
  {
    "path": "dist/Core/colors/lime.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var lime={50:'#f9fbe7',100:'#f0f4c3',200:'#e6ee9c',300:'#dce775',400:'#d4e157',500:'#cddc39',600:'#c0ca33',700:'#afb42b',800:'#9e9d24',900:'#827717',A100:'#f4ff81',A200:'#eeff41',A400:'#c6ff00',A700:'#aeea00'};var _default=lime;exports.default=_default;"
  },
  {
    "path": "dist/Core/colors/orange.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var orange={50:'#fff3e0',100:'#ffe0b2',200:'#ffcc80',300:'#ffb74d',400:'#ffa726',500:'#ff9800',600:'#fb8c00',700:'#f57c00',800:'#ef6c00',900:'#e65100',A100:'#ffd180',A200:'#ffab40',A400:'#ff9100',A700:'#ff6d00'};var _default=orange;exports.default=_default;"
  },
  {
    "path": "dist/Core/colors/pink.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var pink={50:'#fce4ec',100:'#f8bbd0',200:'#f48fb1',300:'#f06292',400:'#ec407a',500:'#e91e63',600:'#d81b60',700:'#c2185b',800:'#ad1457',900:'#880e4f',A100:'#ff80ab',A200:'#ff4081',A400:'#f50057',A700:'#c51162'};var _default=pink;exports.default=_default;"
  },
  {
    "path": "dist/Core/colors/purple.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var purple={50:'#f3e5f5',100:'#e1bee7',200:'#ce93d8',300:'#ba68c8',400:'#ab47bc',500:'#9c27b0',600:'#8e24aa',700:'#7b1fa2',800:'#6a1b9a',900:'#4a148c',A100:'#ea80fc',A200:'#e040fb',A400:'#d500f9',A700:'#aa00ff'};var _default=purple;exports.default=_default;"
  },
  {
    "path": "dist/Core/colors/red.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var red={50:'#ffebee',100:'#ffcdd2',200:'#ef9a9a',300:'#e57373',400:'#ef5350',500:'#f44336',600:'#e53935',700:'#d32f2f',800:'#c62828',900:'#b71c1c',A100:'#ff8a80',A200:'#ff5252',A400:'#ff1744',A700:'#d50000'};var _default=red;exports.default=_default;"
  },
  {
    "path": "dist/Core/colors/teal.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var teal={50:'#e0f2f1',100:'#b2dfdb',200:'#80cbc4',300:'#4db6ac',400:'#26a69a',500:'#009688',600:'#00897b',700:'#00796b',800:'#00695c',900:'#004d40',A100:'#a7ffeb',A200:'#64ffda',A400:'#1de9b6',A700:'#00bfa5'};var _default=teal;exports.default=_default;"
  },
  {
    "path": "dist/Core/colors/yellow.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var yellow={50:'#fffde7',100:'#fff9c4',200:'#fff59d',300:'#fff176',400:'#ffee58',500:'#ffeb3b',600:'#fdd835',700:'#fbc02d',800:'#f9a825',900:'#f57f17',A100:'#ffff8d',A200:'#ffff00',A400:'#ffea00',A700:'#ffd600'};var _default=yellow;exports.default=_default;"
  },
  {
    "path": "dist/Theme/ThemeContext.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _defaultTheme=_interopRequireDefault(require(\"./defaultTheme\"));var ThemeContext=_react.default.createContext(_defaultTheme.default);var _default=ThemeContext;exports.default=_default;"
  },
  {
    "path": "dist/Theme/defaultTheme.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _reactNative=require(\"react-native\");var _shadow=_interopRequireDefault(require(\"../Utils/Shadow/shadow\"));function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}var _default={primary:{main:'#1e88e5',dark:'#005cb2',light:'#6ab7ff'},secondary:{main:'#f50057',dark:'#c51162',light:'#ff4081'},error:{main:'#f44336',light:'#e57373',dark:'#d32f2f'},textColor:{primary:'rgba(0, 0, 0, 0.87)',secondary:'rgba(0, 0, 0, 0.54)',disabled:'rgba(0, 0, 0, 0.38)',hint:'rgba(0, 0, 0, 0.38)'},text:{},background:{default:'#fafafa'},action:{active:'rgba(0, 0, 0, 0.54)',hover:'rgba(0, 0, 0, 0.08)',hoverOpacity:0.08,selected:'rgba(0, 0, 0, 0.14)',disabled:'rgba(0, 0, 0, 0.26)',disabledBackground:'rgba(0, 0, 0, 0.12)'},paper:{backgroundColor:'white',borderRadius:2},divider:{width:'100%',backgroundColor:'rgba(0,0,0,.12)'},drawer:{position:'absolute',zIndex:100,borderRightWidth:1,borderRightColor:'rgba(0,0,0,.12)',borderStyle:'solid',backgroundColor:'white'},drawerHeader:{borderBottomWidth:_reactNative.StyleSheet.hairlineWidth,borderBottomColor:'rgba(0,0,0,.12)',paddingHorizontal:16,paddingVertical:18},drawerHeaderAvatarContainer:{marginBottom:20},drawerHeaderTitle:{fontSize:20,fontWeight:'500',color:'rgba(0,0,0,.87)'},drawerHeaderSubtitle:{marginTop:4,fontSize:12,color:'rgba(0,0,0,.67)'},drawerItem:{flexDirection:'row',alignItems:'center',backgroundColor:'transparent',height:40,borderRadius:4,paddingHorizontal:8,zIndex:10},drawerItemActive:{backgroundColor:'rgba(30, 136, 229, .2)',color:'#1e88e5'},drawerItemText:{fontSize:14,color:'rgba(0,0,0,.87)',fontWeight:'500',zIndex:10},drawerItemIcon:{color:'grey',size:20},button:{borderRadius:4,alignItems:'center',textAlign:'center',letterSpacing:1.25,textTransform:'uppercase',height:36,fontSize:14,fontWeight:'500',lineHeight:16,display:'flex'},buttonText:{fontStyle:'normal',letterSpacing:0.5,color:'#2196f3'},outlinedButton:{borderColor:'rgba(0,0,0,.29)',borderWidth:_reactNative.StyleSheet.hairlineWidth,paddingHorizontal:16,boxSizing:'border-box'},containedButton:{paddingHorizontal:16,backgroundColor:'#2196f3'},bodyText:{fontSize:16,lineHeight:16,letterSpacing:0.5},bodyTextTwo:{fontSize:14,lineHeight:14,letterSpacing:0.25},caption:{fontSize:12,lineHeight:12,letterSpacing:0.4},headingOne:{fontWeight:'300',fontSize:96,lineHeight:96,letterSpacing:-1.5},headingTwo:{fontWeight:'300',fontSize:60,lineHeight:60,letterSpacing:-0.5},headingThree:{fontSize:48,lineHeight:48},headingFour:{fontSize:34,lineHeight:34,letterSpacing:0.25},headingFive:{fontSize:24,lineHeight:24},headingSix:{fontSize:20,lineHeight:20,letterSpacing:0.15,fontWeight:'500'},overline:{fontSize:10,lineHeight:10,letterSpacing:1.5,textTransform:'uppercase'},searchBar:{flexDirection:'row',alignItems:'center',width:'100%',backgroundColor:'rgba(255,255,255,1)',height:56,paddingHorizontal:16},searchBarNavigationIcon:{color:'black',size:24},searchBarcloseIcon:{color:'black',size:24},searchInput:_objectSpread({fontSize:16,flex:1,marginLeft:8,height:30},(0,_shadow.default)(0)),subtitleOne:{fontSize:16,lineHeight:16,letterSpacing:0.15},subtitleTwo:{fontSize:14,lineHeight:14,letterSpacing:0.1,fontWeight:'500'}};exports.default=_default;"
  },
  {
    "path": "dist/Theme/mergeTheme.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _defaultTheme=_interopRequireDefault(require(\"./defaultTheme\"));function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}function mergeTheme(userTheme){var mergedTheme=_objectSpread({},_defaultTheme.default);if(userTheme){Object.keys(mergedTheme).forEach(function(key){if(userTheme[key]){mergedTheme[key]=_objectSpread({},_defaultTheme.default[key],{},userTheme[key]);}});}return mergedTheme;}var _default=mergeTheme;exports.default=_default;"
  },
  {
    "path": "dist/Theme/withTheme.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _react=_interopRequireDefault(require(\"react\"));var _ThemeContext=_interopRequireDefault(require(\"./ThemeContext\"));var _mergeTheme=_interopRequireDefault(require(\"./mergeTheme\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Theme/withTheme.js\";function withTheme(Component){return function(_React$Component){(0,_inherits2.default)(_class,_React$Component);function _class(){(0,_classCallCheck2.default)(this,_class);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(_class).apply(this,arguments));}(0,_createClass2.default)(_class,[{key:\"render\",value:function render(){var _this=this;return _react.default.createElement(_ThemeContext.default.Consumer,{__source:{fileName:_jsxFileName,lineNumber:9}},function(theme){return _react.default.createElement(Component,(0,_extends2.default)({theme:(0,_mergeTheme.default)(theme)},_this.props,{__source:{fileName:_jsxFileName,lineNumber:11}}));});}}]);return _class;}(_react.default.Component);}var _default=withTheme;exports.default=_default;"
  },
  {
    "path": "dist/Utils/Anchor/Anchor.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf3=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Utils/Anchor/Anchor.js\";var Anchor=function(_Component){(0,_inherits2.default)(Anchor,_Component);function Anchor(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,Anchor);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(Anchor)).call.apply(_getPrototypeOf2,[this].concat(args)));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"handlePress\",function(){_reactNative.Linking.openURL(_this.props.url);});return _this;}(0,_createClass2.default)(Anchor,[{key:\"render\",value:function render(){var _this$props=this.props,url=_this$props.url,children=_this$props.children,target=_this$props.target,testID=_this$props.testID;if(_reactNative.Platform.OS==='web'){return _react.default.createElement(_reactNative.TouchableWithoutFeedback,{href:url,accessibilityRole:\"link\",target:target?target:'_self',testID:testID,__source:{fileName:_jsxFileName,lineNumber:27}},_react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:32}},children));}return _react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:this.handlePress,__source:{fileName:_jsxFileName,lineNumber:38}},children);}}]);return Anchor;}(_react.Component);exports.default=Anchor;(0,_defineProperty2.default)(Anchor,\"propTypes\",{url:_propTypes.default.string,children:_propTypes.default.node,target:_propTypes.default.string,testID:_propTypes.default.string});"
  },
  {
    "path": "dist/Utils/Anchor/Anchor.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../../\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Utils/Anchor/Anchor.stories.js\";var _default=(0,_storiesOf.storiesOf)('Utils|Anchor',module).addParameters({jest:['Anchor']}).add('Simple',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:13}},_react.default.createElement(_Header.default,{title:'Anchor',subtitle:'Cross Platform Anchor to link to other pages',__source:{fileName:_jsxFileName,lineNumber:14}}),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row'},__source:{fileName:_jsxFileName,lineNumber:18}},_react.default.createElement(_.Anchor,{url:'http://material-bread.org/',target:'_parent',__source:{fileName:_jsxFileName,lineNumber:19}},_react.default.createElement(_.Button,{text:'Documentation',type:'outlined',textColor:'rgb(233, 30, 99)',__source:{fileName:_jsxFileName,lineNumber:20}})),_react.default.createElement(_.Anchor,{url:'https://github.com/codypearce/material-bread',target:'_parent',__source:{fileName:_jsxFileName,lineNumber:27}},_react.default.createElement(_.Button,{text:'Github',type:'outlined',textColor:'#666',style:{marginLeft:10},__source:{fileName:_jsxFileName,lineNumber:30}}))),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',marginTop:20},__source:{fileName:_jsxFileName,lineNumber:38}},_react.default.createElement(_.Anchor,{url:'https://www.nasa.gov/',target:'_parent',__source:{fileName:_jsxFileName,lineNumber:39}},_react.default.createElement(_.Button,{text:'NASA',__source:{fileName:_jsxFileName,lineNumber:40}})),_react.default.createElement(_.Anchor,{url:'https://www.wikipedia.org/',target:'_parent',__source:{fileName:_jsxFileName,lineNumber:43}},_react.default.createElement(_.Button,{style:{marginLeft:40},text:'Wikipedia',__source:{fileName:_jsxFileName,lineNumber:44}}))),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',marginTop:20},__source:{fileName:_jsxFileName,lineNumber:47}},_react.default.createElement(_.Anchor,{url:'https://www.pbs.org/',target:'_blank',__source:{fileName:_jsxFileName,lineNumber:48}},_react.default.createElement(_.Heading,{style:{color:'blue'},__source:{fileName:_jsxFileName,lineNumber:49}},\"PBS\")),_react.default.createElement(_.Anchor,{url:'https://www.bbc.com/',target:'_blank',__source:{fileName:_jsxFileName,lineNumber:51}},_react.default.createElement(_.Heading,{style:{color:'blue',marginLeft:20},__source:{fileName:_jsxFileName,lineNumber:52}},\"BBC\"))),_react.default.createElement(_reactNative.View,{style:{flexDirection:'row',marginTop:20},__source:{fileName:_jsxFileName,lineNumber:55}},_react.default.createElement(_.Anchor,{url:'https://www.google.com',target:'_blank',__source:{fileName:_jsxFileName,lineNumber:56}},_react.default.createElement(_.IconButton,{size:24,name:\"search\",__source:{fileName:_jsxFileName,lineNumber:57}})),_react.default.createElement(_.Anchor,{url:'https://www.google.com/maps',target:'_blank',__source:{fileName:_jsxFileName,lineNumber:59}},_react.default.createElement(_.IconButton,{size:24,style:{marginLeft:20},name:\"map\",__source:{fileName:_jsxFileName,lineNumber:60}}))));});exports.default=_default;"
  },
  {
    "path": "dist/Utils/Hoverable/HoverState.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _ExecutionEnvironment=require(\"fbjs/lib/ExecutionEnvironment\");var createHoverMonitor=function createHoverMonitor(){var isHoverEnabled=false;var lastTouchTime=0;function enableHover(){if(isHoverEnabled||Date.now()-lastTouchTime<500){return;}isHoverEnabled=true;}function disableHover(){lastTouchTime=new Date();if(isHoverEnabled){isHoverEnabled=false;}}if(_ExecutionEnvironment.canUseDOM){document.addEventListener('touchstart',disableHover,true);document.addEventListener('mousemove',enableHover,true);}return{get isEnabled(){return isHoverEnabled;}};};var _default=createHoverMonitor;exports.default=_default;"
  },
  {
    "path": "dist/Utils/Hoverable/Hoverable.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _assertThisInitialized2=_interopRequireDefault(require(\"@babel/runtime/helpers/assertThisInitialized\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _reactNative=require(\"react-native\");var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _jsxFileName=\"/Users/cody/projects/material-bread/src/Utils/Hoverable/Hoverable.js\";var Hoverable=function(_Component){(0,_inherits2.default)(Hoverable,_Component);function Hoverable(props){var _this;(0,_classCallCheck2.default)(this,Hoverable);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(Hoverable).call(this,props));(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"state\",{isHovered:false,width:_reactNative.Dimensions.get('window').width});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"handleWindowWidth\",function(event){_this.setState({width:event.window.width});});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"_handleMouseEnter\",function(){if(!_this.state.isHovered){var onHoverIn=_this.props.onHoverIn;if(onHoverIn){onHoverIn();}_this.setState(function(){return{isHovered:true};});}});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"_handleMouseLeave\",function(){if(_this.state.isHovered){var onHoverOut=_this.props.onHoverOut;if(onHoverOut){onHoverOut();}_this.setState(function(){return{isHovered:false};});}});(0,_defineProperty2.default)((0,_assertThisInitialized2.default)(_this),\"_toggle\",function(){if(_this.state.isHovered){_this._handleMouseLeave();}else{_this._handleMouseEnter();}});return _this;}(0,_createClass2.default)(Hoverable,[{key:\"componentDidMount\",value:function componentDidMount(){_reactNative.Dimensions.addEventListener('change',this.handleWindowWidth);var width=_reactNative.Dimensions.get('window').width;this.setState({width:width});}},{key:\"componentWillUnmount\",value:function componentWillUnmount(){_reactNative.Dimensions.removeEventListener('change',this.handleWindowWidth);}},{key:\"render\",value:function render(){var _this$props=this.props,children=_this$props.children,testID=_this$props.testID;var child=typeof children==='function'?children(this.state.isHovered):children;if(_reactNative.Platform.OS=='web'){return _react.default.cloneElement(_react.default.Children.only(child),{onMouseEnter:this._handleMouseEnter,onMouseLeave:this._handleMouseLeave});}else{return _react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:this._toggle,testID:testID,__source:{fileName:_jsxFileName,lineNumber:82}},_react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:83}},_react.default.cloneElement(_react.default.Children.only(child),{onMouseEnter:this._handleMouseEnter,onMouseLeave:this._handleMouseLeave})));}}}]);return Hoverable;}(_react.Component);(0,_defineProperty2.default)(Hoverable,\"displayName\",'Hoverable');(0,_defineProperty2.default)(Hoverable,\"propTypes\",{children:_propTypes.default.oneOfType([_propTypes.default.node,_propTypes.default.func]),onHoverIn:_propTypes.default.func,onHoverOut:_propTypes.default.func,testID:_propTypes.default.string});var _default=Hoverable;exports.default=_default;"
  },
  {
    "path": "dist/Utils/Hoverable/Hoverable.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../../\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _storybookState=require(\"@sambego/storybook-state\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Utils/Hoverable/Hoverable.stories.js\";var store=new _storybookState.Store({color:'#00BCD4',left:new _reactNative.Animated.Value(0)});var _default=(0,_storiesOf.storiesOf)('Utils|Hoverable',module).addParameters({jest:['Hoverable']}).add('Simple',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:18}},_react.default.createElement(_Header.default,{title:'Hoverable',subtitle:'Cross Platform Hover Component',__source:{fileName:_jsxFileName,lineNumber:19}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:20}},function(state){return _react.default.createElement(_reactNative.View,{style:{flexDirection:'row'},__source:{fileName:_jsxFileName,lineNumber:22}},_react.default.createElement(_.Hoverable,{onHoverIn:function onHoverIn(){return store.set({color:'#009688'});},onHoverOut:function onHoverOut(){return store.set({color:'#00BCD4'});},__source:{fileName:_jsxFileName,lineNumber:23}},_react.default.createElement(_reactNative.View,{style:{width:200,height:125,backgroundColor:state.color},__source:{fileName:_jsxFileName,lineNumber:26}})));}));}).add('Animation',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:40}},_react.default.createElement(_Header.default,{title:'Hoverable',subtitle:'Cross Platform Hover Component',__source:{fileName:_jsxFileName,lineNumber:41}}),_react.default.createElement(_storybookState.State,{store:store,style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:42}},function(state){return _react.default.createElement(_reactNative.View,{style:{flexDirection:'row'},__source:{fileName:_jsxFileName,lineNumber:44}},_react.default.createElement(_.Hoverable,{onHoverIn:function onHoverIn(){_reactNative.Animated.timing(state.left,{toValue:1,duration:500,useNativeDriver:true}).start();},onHoverOut:function onHoverOut(){_reactNative.Animated.timing(state.left,{toValue:0,duration:500,useNativeDriver:true}).start();},__source:{fileName:_jsxFileName,lineNumber:45}},_react.default.createElement(_reactNative.Animated.View,{useNativeDriver:true,style:{width:200,height:125,backgroundColor:state.color,transform:[{rotate:state.left.interpolate({inputRange:[0,1],outputRange:['0deg','360deg']})}]},__source:{fileName:_jsxFileName,lineNumber:60}})));}));});exports.default=_default;"
  },
  {
    "path": "dist/Utils/Shadow/Shadow.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _=require(\"../../\");var _Header=_interopRequireDefault(require(\"../../storybook/components/Header\"));var _Container=_interopRequireDefault(require(\"../../storybook/components/Container\"));var _storiesOf=require(\"../../storybook/helpers/storiesOf\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/Utils/Shadow/Shadow.stories.js\";function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}var pageWidth=_reactNative.Platform.OS=='web'?window.innerWidth:_reactNative.Dimensions.get('window').width;var shadowTypeNum=24;var maxItemPerRow=shadowTypeNum/4;var itemWidth=pageWidth<1200?pageWidth/10:100;var styles=_reactNative.StyleSheet.create({container:{position:'relative',display:'flex',flexDirection:'row',justifyContent:'space-evenly',marginHorizontal:'8%',marginBottom:30},shadowItem:{padding:8,height:itemWidth,width:itemWidth,alignItems:'center',justifyContent:'center',backgroundColor:'white',borderRadius:100,fontSize:itemWidth/3}});var shadowItems=[];for(var i=1;i<=shadowTypeNum;i++){shadowItems.push(_react.default.createElement(_reactNative.View,{key:i,style:[styles.shadowItem,_objectSpread({},(0,_.shadow)(i))],__source:{fileName:_jsxFileName,lineNumber:41}},_react.default.createElement(_reactNative.Text,{__source:{fileName:_jsxFileName,lineNumber:42}},i,\" \")));}var shadowDividedItems=[];for(var _i=0;_i<maxItemPerRow;_i++){shadowDividedItems.push(_react.default.createElement(_reactNative.View,{style:styles.container,key:_i,__source:{fileName:_jsxFileName,lineNumber:49}},shadowItems.slice(maxItemPerRow*_i,maxItemPerRow*(_i+1))));}var _default=(0,_storiesOf.storiesOf)('Utils|Shadows',module).addParameters({jest:['Shadows']}).add('Simple',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:58}},_react.default.createElement(_Header.default,{title:'Shadows',subtitle:'Use the shadow() function to add platform shadow to the style of any component',__source:{fileName:_jsxFileName,lineNumber:59}}),_react.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:66}},shadowDividedItems));});exports.default=_default;"
  },
  {
    "path": "dist/Utils/Shadow/shadow.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");function shadow(elevation){return _reactNative.Platform.OS!=='android'?shadowConversion[elevation]:{elevation:elevation};}var _default=shadow;exports.default=_default;var shadowConversion=[{shadowColor:'#000',shadowOffset:{width:0,height:0},shadowOpacity:0,shadowRadius:1.0},{shadowColor:'#000',shadowOffset:{width:0,height:1},shadowOpacity:0.18,shadowRadius:1.0},{shadowColor:'#000',shadowOffset:{width:0,height:1},shadowOpacity:0.2,shadowRadius:1.41},{shadowColor:'#000',shadowOffset:{width:0,height:1},shadowOpacity:0.22,shadowRadius:2.22},{shadowColor:'#000',shadowOffset:{width:0,height:2},shadowOpacity:0.23,shadowRadius:2.62},{shadowColor:'#000',shadowOffset:{width:0,height:2},shadowOpacity:0.25,shadowRadius:3.84},{shadowColor:'#000',shadowOffset:{width:0,height:3},shadowOpacity:0.27,shadowRadius:4.65},{shadowColor:'#000',shadowOffset:{width:0,height:3},shadowOpacity:0.29,shadowRadius:4.65},{shadowColor:'#000',shadowOffset:{width:0,height:4},shadowOpacity:0.3,shadowRadius:4.65},{shadowColor:'#000',shadowOffset:{width:0,height:4},shadowOpacity:0.32,shadowRadius:5.46},{shadowColor:'#000',shadowOffset:{width:0,height:5},shadowOpacity:0.34,shadowRadius:6.27},{shadowColor:'#000',shadowOffset:{width:0,height:5},shadowOpacity:0.36,shadowRadius:6.68},{shadowColor:'#000',shadowOffset:{width:0,height:6},shadowOpacity:0.37,shadowRadius:7.49},{shadowColor:'#000',shadowOffset:{width:0,height:6},shadowOpacity:0.39,shadowRadius:8.3},{shadowColor:'#000',shadowOffset:{width:0,height:7},shadowOpacity:0.41,shadowRadius:9.11},{shadowColor:'#000',shadowOffset:{width:0,height:7},shadowOpacity:0.43,shadowRadius:9.51},{shadowColor:'#000',shadowOffset:{width:0,height:8},shadowOpacity:0.44,shadowRadius:10.32},{shadowColor:'#000',shadowOffset:{width:0,height:8},shadowOpacity:0.46,shadowRadius:11.14},{shadowColor:'#000',shadowOffset:{width:0,height:9},shadowOpacity:0.48,shadowRadius:11.95},{shadowColor:'#000',shadowOffset:{width:0,height:9},shadowOpacity:0.5,shadowRadius:12.35},{shadowColor:'#000',shadowOffset:{width:0,height:10},shadowOpacity:0.51,shadowRadius:13.16},{shadowColor:'#000',shadowOffset:{width:0,height:10},shadowOpacity:0.53,shadowRadius:13.97},{shadowColor:'#000',shadowOffset:{width:0,height:11},shadowOpacity:0.55,shadowRadius:14.78},{shadowColor:'#000',shadowOffset:{width:0,height:11},shadowOpacity:0.57,shadowRadius:15.19},{shadowColor:'#000',shadowOffset:{width:0,height:12},shadowOpacity:0.58,shadowRadius:16.0}];"
  },
  {
    "path": "dist/helpers/hasNotch.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=exports.hasNotch=void 0;var _reactNative=require(\"react-native\");var IPHONE_XS_HEIGHT=812;var IPHONE_XR_HEIGHT=896;var _Dimensions$get=_reactNative.Dimensions.get('window'),WINDOW_WIDTH=_Dimensions$get.width,WINDOW_HEIGHT=_Dimensions$get.height;var hasNotch=_reactNative.Platform.OS==='ios'&&!_reactNative.Platform.isPad&&!_reactNative.Platform.isTVOS&&(WINDOW_HEIGHT===IPHONE_XS_HEIGHT||WINDOW_WIDTH===IPHONE_XS_HEIGHT||WINDOW_HEIGHT===IPHONE_XR_HEIGHT||WINDOW_WIDTH===IPHONE_XR_HEIGHT);exports.hasNotch=hasNotch;var _default=hasNotch;exports.default=_default;"
  },
  {
    "path": "dist/helpers/statusBarHeight.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var _hasNotch=_interopRequireDefault(require(\"./hasNotch\"));var androidStatusBarHeight=0;var getStatusBarHeight=function getStatusBarHeight(){if(_reactNative.Platform.OS==='ios'){return _hasNotch.default?44:20;}else if(_reactNative.Platform.OS==='android')return androidStatusBarHeight;else return 0;};var _default=getStatusBarHeight;exports.default=_default;"
  },
  {
    "path": "dist/index.d.ts",
    "content": "import React, { RefObject } from 'react'\nimport {\n  StyleProp,\n  TextStyle,\n  View,\n  StyleSheet,\n  StyleSheetProperties,\n  Image,\n  GestureResponderEvent,\n  TextProps,\n  TouchableWithoutFeedbackProps,\n  ViewPropTypes,\n  ViewProps,\n  Animated,\n  ScrollViewProps,\n} from 'react-native'\n\ntype Color = string\n\nexport interface Theme {\n  primary: {\n    main: Color\n    dark: Color\n    light: Color\n  }\n  secondary: {\n    main: Color\n    dark: Color\n    light: Color\n  }\n  textColor: {\n    primary: Color\n    secondary: Color\n    disabled: Color\n    hint: Color\n  }\n  text: {}\n  background: {\n    default: Color\n  }\n  action: {\n    active: Color\n    hover: Color\n    hoverOpacity: number\n    selected: Color\n    disabled: Color\n    disabledBackground: Color\n    paper: {\n      backgroundColor: Color\n      borderRadius: number\n    }\n    divider: {\n      width: string\n      backgroundColor: Color\n    }\n    buttonText: {\n      fontSize: number\n      fontWight: string\n      letterSpacing: number\n      color: Color\n    }\n    outlinedButton: {\n      borderColor: Color\n      borderWidth: StyleSheetProperties['hairlineWidth']\n      paddingOrizontal: number\n    }\n    containedButton: {\n      paddingHorizontal: number\n      backgroundColor: Color\n    }\n    bodyText: {\n      fontSize: number\n      lineHeight: number\n      letterSpacing: number\n    }\n    bodyTextTwo: {\n      fontSize: number\n      lineHeight: number\n      letterSpacing: number\n    }\n    caption: {\n      fontSize: number\n      lineHeight: number\n      letterSpacing: number\n    }\n    headingOne: {\n      fontWeight: string\n      fontSize: number\n      lineHeight: number\n      letterSpacing: number\n    }\n    headingTwo: {\n      fontWeight: string\n      fontSize: number\n      lineHeight: number\n      letterSpacing: number\n    }\n    headingThree: {\n      fontSize: number\n      lineHeight: number\n    }\n    headingFour: {\n      fontSize: number\n      lineHeight: number\n      letterSpacing: number\n    }\n    headingFive: {\n      fontSize: number\n      lineHeight: number\n    }\n    headingSix: {\n      fontSize: number\n      lineHeight: number\n      letterSpacing: number\n      fontWeight: string\n    }\n    overline: {\n      fontSize: number\n      lineHeight: number\n      letterSpacing: number\n      textTransform: string\n    }\n    subtitleOne: {\n      fontSize: number\n      lineHeight: number\n      letterSpacing: number\n    }\n    subtitleTwo: {\n      fontSize: number\n      lineHeight: number\n      letterSpacing: number\n      fontWeight: string\n    }\n  }\n}\n\nexport const ThemeContext: React.Context<Theme>\n\nexport const defaultTheme: Theme\n\nexport type WithThemeProps = {\n  theme: Theme\n}\n\ntype WithTheme = <P extends object>(\n  Component: React.ElementType<P>,\n) => React.ElementType<Omit<P, keyof WithThemeProps>>\n\nexport const withTheme: WithTheme\n\nexport interface BreadProviderProps {\n  children: React.ReactNode\n  value?: Theme\n}\n\nexport class BreadProvider extends React.Component<BreadProviderProps> {\n  render(): React.ReactElement\n}\n\nexport interface AnchorProps {\n  url?: string\n  children?: React.ReactNode\n  target?: string\n  testID?: string\n}\n\nexport class Anchor extends React.Component<AnchorProps> {\n  render(): React.ReactElement\n}\n\nexport interface HoverableProps {\n  children?: React.ReactNode | ((...args: any[]) => any)\n  onHoverIn?: (...args: any[]) => void\n  onHoverOut?: (...args: any[]) => void\n  testID?: string\n}\n\nexport class Hoverable extends React.Component<HoverableProps> {\n  render(): React.ReactElement\n}\n\nexport type ShadowElevation =\n  | 0\n  | 1\n  | 2\n  | 3\n  | 4\n  | 5\n  | 6\n  | 7\n  | 8\n  | 9\n  | 10\n  | 11\n  | 12\n  | 13\n  | 14\n  | 15\n  | 16\n  | 17\n  | 18\n  | 19\n  | 20\n  | 21\n  | 22\n  | 23\n  | 24\n\nexport type ShadowAndroidReturn = {\n  elevation: ShadowElevation\n}\n\nexport type ShadowDefaultReturn = {\n  shadowColor: Color\n  shadowOffset: {\n    width: number\n    height: number\n  }\n  shadowOpacity: number\n  shadowRadius: number\n}\n\nexport const shadow: (\n  elevation: ShadowElevation,\n) => ShadowAndroidReturn | ShadowDefaultReturn\n\nexport type ColorRange = {\n  50: Color\n  100: Color\n  200: Color\n  300: Color\n  400: Color\n  500: Color\n  600: Color\n  700: Color\n  800: Color\n  900: Color\n  A100: Color\n  A200: Color\n  A400: Color\n  A700: Color\n}\n\nexport const Colors: {\n  amber: ColorRange\n  blue: ColorRange\n  blueGrey: ColorRange\n  brown: ColorRange\n  cyan: ColorRange\n  deepOrange: ColorRange\n  deepPurple: ColorRange\n  green: ColorRange\n  grey: ColorRange\n  indigo: ColorRange\n  lightBlue: ColorRange\n  lightGreen: ColorRange\n  lime: ColorRange\n  orange: ColorRange\n  pink: ColorRange\n  purple: ColorRange\n  red: ColorRange\n  teal: ColorRange\n  yellow: ColorRange\n}\n\nexport interface AvatarProps {\n  style?: StyleProp<any>\n  theme?: Theme\n  color?: Color\n  type?: 'image' | 'icon' | 'text'\n  size?: number\n  contentSize?: number\n  contentColor?: Color\n  contentStyles?: StyleProp<any>\n  content?: string\n  image?: React.ReactNode\n  onPress?: (e: GestureResponderEvent) => void\n  ripple?: boolean\n  rippleProps?: RippleProps\n  testID?: string\n  children?: React.ReactNode\n}\n\nexport class Avatar extends React.Component<AvatarProps> {\n  render(): React.ReactElement\n}\n\nexport interface BadgeProps {\n  color?: Color\n  textColor?: Color\n  content?: string | number\n  maxValue?: number\n  children?: React.ReactNode\n  size?: number\n  style?: StyleProp<any>\n  position?: 'right' | 'left'\n  onPress?: (e: GestureResponderEvent) => void\n\n  theme?: Theme\n  containerStyle?: StyleProp<any>\n  right?: number | string\n  left?: number | string\n  top?: number | string\n\n  visible?: boolean\n  testID?: string\n}\n\nexport class Badge extends React.Component<BadgeProps> {\n  render(): React.ReactElement\n}\n\nexport interface BaseButtonProps {\n  text?: string\n  icon?: React.ReactNode\n  iconPosition?: 'left' | 'right'\n  textStyle?: StyleProp<TextStyle>\n\n  theme?: Theme\n  style?: StyleProp<any>\n  children?: React.ReactNode\n\n  type?: 'outlined' | 'contained' | 'flat' | 'text'\n  onPress?: (e: GestureResponderEvent) => void\n\n  loading?: boolean\n  loader?: React.ReactNode\n  hideLabel?: boolean\n\n  color?: Color\n  radius?: number\n\n  fullWidth?: boolean\n  density?: boolean\n\n  disabled?: boolean\n  disableRipple?: boolean\n\n  useInputCasing?: boolean\n\n  textColor?: Color\n  buttonStyles?: StyleProp<any>\n  rippleColor?: Color\n  onPressIn?: (e: GestureResponderEvent) => void\n  onPressOut?: (e: GestureResponderEvent) => void\n\n  testID?: string\n}\n\nexport interface ContainedButtonProps {\n  disabled?: boolean\n  color?: Color\n  textColor?: Color\n  rippleColor?: Color\n  theme?: Theme\n  onPressIn?: (e: GestureResponderEvent) => void\n  onPressOut?: (e: GestureResponderEvent) => void\n  containerStyle?: StyleProp<any>\n  radius?: number\n  fullWidth?: boolean\n}\n\nexport interface FlatButtonProps {\n  disabled?: boolean\n  color?: Color\n  textColor?: Color\n  rippleColor?: Color\n  theme?: Theme\n  onPressIn?: (e: GestureResponderEvent) => void\n  onPressOut?: (e: GestureResponderEvent) => void\n  containerStyle?: StyleProp<any>\n}\n\nexport interface OutlinedButtonProps {\n  disabled?: boolean\n  color?: Color\n  textColor?: Color\n  rippleColor?: Color\n  theme?: Theme\n  borderSize?: number\n  containerStyle?: StyleProp<any>\n}\n\nexport interface TextButtonProps {\n  disabled?: boolean\n  color?: Color\n  textColor?: Color\n  rippleColor?: Color\n  theme?: Theme\n  containerStyle?: StyleProp<any>\n}\n\ntype SpecificButtonProps =\n  | ContainedButtonProps\n  | FlatButtonProps\n  | OutlinedButtonProps\n  | TextButtonProps\n\nexport type ButtonProps = BaseButtonProps & SpecificButtonProps\n\nexport class Button extends React.Component<ButtonProps> {\n  render(): React.ReactElement\n}\n\nexport interface CheckboxProps {\n  checked: boolean\n\n  disabled?: boolean\n  onPress?: (e: GestureResponderEvent) => void\n  rippleColor?: Color\n  checkboxColor?: Color\n  unCheckedColor?: Color\n  style?: StyleProp<any>\n  checkboxStyle?: StyleProp<any>\n  theme?: Theme\n  rippleMatchesCheckbox?: boolean\n  indeterminate?: boolean\n\n  label?: string\n  labelStyle?: StyleProp<any>\n  labelPos?: string\n\n  icon?: React.ReactNode | string\n  size?: number\n  checkedIcon?: React.ReactNode | string\n\n  ios?: boolean\n\n  error?: boolean\n  testID?: string\n}\n\nexport class Checkbox extends React.Component<CheckboxProps> {\n  render(): React.ReactElement\n}\n\nexport interface ChipProps {\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  theme?: Theme\n\n  chipStyle?: StyleProp<any>\n\n  color?: Color\n  themeColor?: Color\n  radius?: number\n\n  onPress?: (e: GestureResponderEvent) => void\n  onDelete?: (...args: any[]) => void\n  visible?: boolean\n\n  text?: string\n  textStyles?: StyleProp<any>\n\n  leftIcon?: React.ReactNode\n  rightIcon?: React.ReactNode\n\n  selected?: boolean\n  disabled?: boolean\n  testID?: string | (() => any)\n}\n\nexport class Chip extends React.Component<ChipProps> {\n  render(): React.ReactElement\n}\n\nexport interface DividerProps {\n  style?: StyleProp<any>\n  theme?: Theme\n  marginVertical?: number\n  subheader?: string\n  insetHeader?: number\n  insetLeft?: number\n  testID?: string\n}\n\nexport class Divider extends React.Component<DividerProps> {\n  render(): React.ReactElement\n}\n\nexport interface FabProps {\n  style?: StyleProp<any>\n  backgroundColor?: Color\n  onPress?: (e: GestureResponderEvent) => void\n  disabled?: boolean\n  rippleColor?: Color\n  icon?: React.ReactNode | string\n  shadow?: number\n  mini?: boolean\n  theme?: Theme\n  children?: React.ReactNode\n  visible?: boolean\n  initialScale?: number\n  animated?: boolean\n  label?: string\n  testID?: string\n  containerStyle?: StyleProp<any>\n}\n\nexport class Fab extends React.Component<FabProps> {\n  render(): React.ReactElement\n}\n\nexport interface IconProps {\n  name: string\n\n  style?: StyleProp<any>\n  theme?: Theme\n  color?: Color\n  size?: number\n  testID?: string\n  iconComponent?: React.Component\n}\n\nexport class Icon extends React.Component<IconProps> {\n  render(): React.ReactElement\n}\n\nexport interface IconButtonProps {\n  name: string\n  style?: StyleProp<any>\n  theme?: Theme\n  color?: Color\n  size?: number\n  onPress?: (e: GestureResponderEvent) => void\n  rippleColor?: Color\n  disabled?: boolean\n  testID?: string\n  iconComponent?: React.Component\n}\n\nexport class IconButton extends React.Component<IconButtonProps> {\n  render(): React.ReactElement\n}\n\nexport interface ListExpandProps {\n  expanded?: boolean\n  onPress?: (e: GestureResponderEvent) => void\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  title?: string\n  titleStyle?: StyleProp<any>\n  theme?: Theme\n  icon?: React.ReactNode\n  expandIconStyle?: StyleProp<any>\n  rippleProps?: RippleProps\n}\n\nexport class ListExpand extends React.Component<ListExpandProps> {\n  render(): React.ReactElement\n}\n\nexport interface ListItemProps {\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  onPress?: (e: GestureResponderEvent) => void\n  disabled?: boolean\n  selected?: boolean\n  text?: string\n  textProps?: StyleProp<TextProps>\n  secondaryText?: string | React.ReactElement\n  secondaryTextProps?: StyleProp<TextProps>\n  media?: React.ReactNode\n  icon?: React.ReactNode\n  actionItem?: React.ReactNode\n  leadingActionItem?: React.ReactNode\n  textStyle?: StyleProp<TextStyle>\n  secondaryTextStyle?: StyleProp<TextProps>\n  rippleProps?: RippleProps\n  backgroundColor?: Color\n}\n\nexport class ListItem extends React.Component<ListItemProps> {\n  render(): React.ReactElement\n}\n\nexport interface ListSectionProps {\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  label?: string\n  labelStyle?: StyleProp<any>\n  topDivider?: boolean\n  bottomDivider?: boolean\n  inset?: boolean\n  contentStyle?: StyleProp<any>\n  theme?: Theme\n}\n\nexport class ListSection extends React.Component<ListSectionProps> {\n  render(): React.ReactElement\n}\n\nexport interface ListProps {\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  shadow?: number\n  subheader?: string\n  testID?: string\n}\n\nexport class List extends React.Component<ListProps> {\n  render(): React.ReactElement\n}\n\nexport interface ModalProps {\n  buttons: React.ReactElement\n  visible: boolean\n  onRequestClose: (...args: any[]) => void\n  onShow: (...args: any[]) => void\n  onTouchOutside: (e: GestureResponderEvent) => void\n  containerStyle: StyleProp<any>\n  NativeModalProps: StyleProp<any>\n  children: React.ReactNode\n}\n\nexport class Modal extends React.Component<ModalProps> {\n  render(): React.ReactElement\n}\n\nexport interface PaperProps {\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  theme?: Theme\n  shadow?: number\n  radius?: number\n  testID?: string\n  elevation?: number\n}\n\nexport class Paper extends React.Component<PaperProps> {\n  render(): React.ReactElement\n}\n\nexport interface ProgressBarProps {\n  visible: boolean\n\n  color?: Color\n  height?: number\n  trackStyle?: StyleProp<any>\n  determinate?: boolean\n  indicatorStartPosition?: number\n  animationEasing?: (...args: any[]) => any\n  animationDuration?: number\n  value?: number\n  style?: StyleProp<any>\n  theme?: Theme\n  testID?: string\n}\n\nexport class ProgressBar extends React.Component<ProgressBarProps> {\n  render(): React.ReactElement\n}\n\nexport interface ProgressCircleProps {\n  color?: Color\n  size?: number\n  style?: StyleProp<any>\n  animationDuration?: number\n  animationEasing?: (...args: any[]) => any\n  visible?: boolean\n  determinate?: boolean\n  widthOfBorder?: number\n  testID?: string\n}\n\nexport interface ProgressCircleDeterminateProps {\n  value?: number\n  size?: number\n  thickness?: number\n  color?: Color\n  unfilledColor?: Color\n  style?: StyleProp<any>\n  children?: React.ReactNode\n  animationMethod?: string\n  animationConfig?: {}\n  shouldAnimateFirstValue?: boolean\n  onChange?: (...args: any[]) => void\n  onChangeAnimationEnd?: (...args: any[]) => void\n  noTrackColor?: boolean\n}\n\nexport class ProgressCircle extends React.Component<\n  ProgressCircleProps | ProgressCircleDeterminateProps\n> {\n  render(): React.ReactElement\n}\n\nexport interface RadioButtonProps {\n  checked: boolean\n\n  disabled?: boolean\n  onPress?: (e: GestureResponderEvent) => void\n  rippleColor?: Color\n  radioButtonColor?: Color\n  uncheckedBorderColor?: Color\n  style?: StyleProp<any>\n\n  label?: string\n  labelStyle?: StyleProp<any>\n  labelPos?: string\n\n  error?: boolean\n  theme?: Theme\n  testID?: string\n}\n\nexport class RadioButton extends React.Component<RadioButtonProps> {\n  render(): React.ReactElement\n}\n\nexport interface RippleProps\n  extends ViewProps,\n    TouchableWithoutFeedbackProps {\n  rippleColor?: Color\n  rippleOpacity?: number\n  rippleDuration?: number\n  rippleSize?: number\n  rippleContainerBorderRadius?: number\n  rippleCentered?: boolean\n  rippleSequential?: boolean\n  rippleFades?: boolean\n  disabled?: boolean\n  displayUntilPressOut?: boolean\n\n  onRippleAnimation?: (...args: any[]) => void\n  testID?: string\n}\n\nexport class Ripple extends React.Component<RippleProps> {\n  render(): React.ReactElement\n}\n\nexport interface SliderProps {\n  value?: number\n  values?: number[]\n  sliderLength?: number\n  min?: number\n  max?: number\n  step?: number\n  disableOne?: boolean\n  disableTwo?: boolean\n  onValueChange?: (...args: any[]) => void\n  onValueChangeEnd?: (...args: any[]) => void\n  onValuesChange?: (...args: any[]) => void\n  onValuesChangeEnd?: (...args: any[]) => void\n  trackColor?: Color\n  markerColor?: Color\n  allowOverlap?: boolean\n  style?: StyleProp<any>\n  testID?: string\n  markerSize?: number\n  trackHeight?: number\n  trackStyle?: StyleProp<any>\n}\n\nexport class Slider extends React.Component<SliderProps> {\n  render(): React.ReactElement\n}\n\nexport interface SwitchProps {\n  checked: boolean\n\n  onPress?: (e: GestureResponderEvent) => void\n  style?: StyleProp<any>\n  trackStyle?: StyleProp<any>\n  thumbStyle?: StyleProp<any>\n  label?: React.ReactNode\n  labelPos?: string\n  theme?: Theme\n  color?: Color\n  loading?: boolean\n  testID?: string\n  width?: number\n}\n\nexport class Switch extends React.Component<SwitchProps> {\n  render(): React.ReactElement\n}\n\nexport interface SearchfieldProps {\n  color?: Color\n  iconProps?: IconProps\n  inputRef?: (...args: any[]) => any\n  onBlur?: (...args: any[]) => void\n  onChangeText?: (text: string) => void\n  onCloseIcon?: (...args: any[]) => void\n  onFocus?: (...args: any[]) => void\n  placeholder?: string\n  style?: StyleProp<any>\n  textStyle?: StyleProp<TextStyle>\n  value?: string\n}\n\nexport class Searchfield extends React.Component<SearchfieldProps> {\n  render(): React.ReactElement\n}\n\nexport interface TextFieldFilledProps {\n  style?: StyleProp<any>\n  containerStyle?: StyleProp<any>\n  error?: boolean\n  label?: string\n  labelColor?: Color\n  labelStyle?: StyleProp<any>\n  handleFocus?: (...args: any[]) => void\n  handleBlur?: (...args: any[]) => void\n  focused?: boolean\n  helperText?: string\n  helperVisible?: boolean\n  helperTextStyle?: StyleProp<any>\n  underlineColor?: Color\n  underlineActiveColor?: Color\n  leadingIcon?: React.ReactNode\n  trailingIcon?: React.ReactNode\n  dense?: boolean\n  value?: string\n  multiline?: boolean\n  suffix?: React.ReactNode\n  prefix?: React.ReactNode\n  testID?: string\n  focusedLabelColor?: string\n}\n\nexport interface TextFieldFlatProps {\n  style?: StyleProp<any>\n  containerStyle?: StyleProp<any>\n  error?: boolean\n  label?: string\n  labelColor?: string\n  labelStyle?: StyleProp<any>\n  handleFocus?: (...args: any[]) => void\n  handleBlur?: (...args: any[]) => void\n  focused?: boolean\n  helperText?: string\n  helperVisible?: boolean\n  helperTextStyle?: StyleProp<any>\n  underlineColor?: string\n  underlineActiveColor?: StyleProp<any> | Color\n  leadingIcon?: React.ReactNode\n  trailingIcon?: React.ReactNode\n  dense?: boolean\n  value?: string\n  multiline?: boolean\n  suffix?: React.ReactNode\n  prefix?: React.ReactNode\n  testID?: string\n  focusedLabelColor?: string\n}\n\nexport interface TextFieldOutlineProps {\n  style?: StyleProp<any>\n  containerStyle?: StyleProp<any>\n  error?: boolean\n  label?: string\n  labelColor?: string\n  labelStyle?: StyleProp<any>\n  handleFocus?: (...args: any[]) => void\n  handleBlur?: (...args: any[]) => void\n  focused?: boolean\n  helperText?: string\n  helperVisible?: boolean\n  helperTextStyle?: StyleProp<any>\n  leadingIcon?: React.ReactNode\n  trailingIcon?: React.ReactNode\n  dense?: boolean\n  value?: string\n  multiline?: boolean\n  suffix?: React.ReactNode\n  prefix?: React.ReactNode\n  testID?: string\n  focusedLabelColor?: Color\n}\n\nexport interface TextFieldPropsBase {\n  type?: 'outlined' | 'filled' | 'flat'\n  onFocus?: (...args: any[]) => void\n  onBlur?: (...args: any[]) => void\n  disabled?: boolean\n  placeholder?: string\n  onChangeText?: (text: string) => void\n}\n\ntype TextFieldSpecialProps =\n  | TextFieldFilledProps\n  | TextFieldOutlineProps\n  | TextFieldFlatProps\nexport type TextFieldProps = TextFieldPropsBase & TextFieldSpecialProps\n\nexport class TextField extends React.Component<TextFieldProps> {\n  render(): React.ReactElement\n}\n\nexport interface TextFieldHelperTextProps {\n  error?: boolean\n  children?: React.ReactNode\n  visible?: boolean\n  style?: StyleProp<any>\n}\n\nexport class TextFieldHelperText extends React.Component<TextFieldProps> {\n  render(): React.ReactElement\n}\n\nexport interface ToggleButtonProps {\n  style?: StyleProp<any>\n  active?: boolean\n  onPress?: (e: GestureResponderEvent) => void\n  value?: string\n  activeNode?: React.ReactNode\n  inActiveNode?: React.ReactNode\n  rippleColor?: Color\n  size?: number\n  rippleContainerBorderRadius?: number\n  testID?: string\n}\n\nexport class ToggleButton extends React.Component<ToggleButtonProps> {\n  render(): React.ReactElement\n}\n\nexport interface ToggleButtonGroupProps {\n  onPress?: (e: GestureResponderEvent) => void\n  children?: React.ReactNode\n}\n\nexport class ToggleButtonGroup extends React.Component<\n  ToggleButtonGroupProps\n> {\n  render(): React.ReactElement\n}\n\nexport interface TooltipProps {\n  content: string\n\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  tooltipPosition?: MenuProps['tooltipPosition']\n  testID?: string\n}\n\nexport class Tooltip extends React.Component<TooltipProps> {\n  render(): React.ReactElement\n}\n\nexport interface BaseTextProps {\n  style?: StyleProp<any>\n  children?: React.ReactNode\n  typographyStyles?: StyleProp<TextStyle>\n  align?: 'center' | 'left' | 'right'\n  color?: Color\n  gutterBottom?: boolean\n  theme?: Theme\n  themeColor?: string\n}\n\nexport class BaseText extends React.Component<BaseTextProps> {\n  render(): React.ReactElement\n}\n\nexport interface BodyTextProps extends BaseTextProps {\n  text?: string\n  type?: number\n  children?: React.ReactNode\n  theme?: Theme\n  style?: StyleProp<any>\n}\n\nexport class BodyText extends React.Component<BodyTextProps> {\n  render(): React.ReactElement\n}\n\nexport interface CaptionProps extends BaseTextProps {\n  text?: string\n  children?: React.ReactNode\n  theme?: Theme\n}\n\nexport class Caption extends React.Component<CaptionProps> {\n  render(): React.ReactElement\n}\n\nexport interface HeadingProps extends BaseTextProps {\n  text?: string\n  type?: 1 | 2 | 3 | 4 | 5 | 6\n  children?: React.ReactNode\n  theme?: Theme\n}\n\nexport class Heading extends React.Component<HeadingProps> {\n  render(): React.ReactElement\n}\n\nexport interface OverlineProps extends BaseTextProps {\n  text?: string\n  children?: React.ReactNode\n  theme?: Theme\n}\n\nexport class Overline extends React.Component<OverlineProps> {\n  render(): React.ReactElement\n}\n\nexport interface SubtitleProps extends BaseTextProps {\n  text?: string\n  type?: number\n  children?: React.ReactNode\n  theme?: Theme\n}\n\nexport class Subtitle extends React.Component<SubtitleProps> {\n  render(): React.ReactElement\n}\n\nexport interface AppbarProps {\n  color?: Color\n  style?: StyleProp<any>\n  theme?: Theme\n  barType?: 'normal' | 'simple' | 'prominent' | 'dense' | 'prominent dense'\n  backgroundImage?: React.ReactNode\n  position?: string\n  elevation?: number\n\n  navigation?: string | React.ReactNode\n  onNavigation?: (...args: any[]) => void\n\n  title?: string\n  titleStyles?: StyleProp<any>\n  onTitle?: (...args: any[]) => void\n  subtitle?: string\n  subtitleStyles?: StyleProp<TextStyle>\n  textContainerStyles?: StyleProp<TextStyle>\n\n  actionItems?: React.ReactNode\n\n  children?: React.ReactNode\n}\n\nexport class Appbar extends React.Component<AppbarProps> {\n  render(): React.ReactElement\n}\n\nexport interface AppbarBottomProps {\n  color?: Color\n  style?: StyleProp<any>\n  theme?: Theme\n\n  fab?: React.ReactNode | string\n  fabStyles?: StyleProp<any>\n  fabPosition?: string\n  fabCutout?: boolean\n\n  navigation?: React.ReactNode | string\n  onNavigation?: (...args: any[]) => void\n\n  actionItems?: React.ReactNode\n\n  children?: React.ReactNode\n  appbarStyles?: StyleProp<any>\n}\n\nexport class AppbarBottom extends React.Component<AppbarBottomProps> {\n  render(): React.ReactElement\n}\n\nexport interface BackdropProps {\n  backLayerConcealed: React.ReactNode\n  backLayerRevealed: React.ReactNode\n\n  backLayerStyle?: StyleProp<any>\n  frontLayerStyle?: StyleProp<any>\n  headerButtonStyle?: StyleProp<any>\n  style?: StyleProp<any>\n  offset?: number\n  initialOffset?: number\n  children?: React.ReactNode\n  theme?: Theme\n  subheader?: string\n  testID?: string\n}\n\nexport class Backdrop extends React.Component<BackdropProps> {\n  render(): React.ReactElement\n}\n\nexport interface BannerProps {\n  mobileLayout?: boolean\n  style?: StyleProp<any>\n  actionItems?: any[]\n  singleLine?: boolean\n  media?: React.ReactNode\n  visible?: boolean\n\n  message?: string\n  position?: string\n  testID?: string\n}\n\nexport class Banner extends React.Component<BannerProps> {\n  render(): React.ReactElement\n}\n\nexport interface BottomNavigationProps {\n  value: string | number\n  actionItems: any[]\n\n  backgroundColor?: Color\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  showLabels?: boolean\n  handleChange?: (...args: any[]) => void\n  horizontalWhenLandscape?: boolean\n  testID?: string\n}\n\nexport class BottomNavigation extends React.Component<BottomNavigationProps> {\n  render(): React.ReactElement\n}\n\nexport interface BottomNavigationItemProps {\n  children?: React.ReactNode\n  active?: boolean\n  icon?: string\n  label?: string\n  showLabel?: boolean\n  onPress?: (e: GestureResponderEvent) => void\n  handleChange?: (...args: any[]) => void\n  value?: number | string\n  showLabels?: boolean\n  style?: StyleProp<any>\n  badgeProps?: BadgeProps\n  rippleProps?: RippleProps\n  testID?: string\n  isLandscape?: boolean\n  onItemLayout?: (...args: any[]) => void\n  maxWidth?: number\n  horizontal?: boolean\n}\n\nexport class BottomNavigationItem extends React.Component<\n  BottomNavigationItemProps\n> {\n  render(): React.ReactElement\n}\n\nexport interface CardActionsProps {\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  leftActionItems?: any[]\n  rightActionItems?: any[]\n}\n\nexport class CardActions extends React.Component<CardActionsProps> {\n  render(): React.ReactElement\n}\n\nexport interface CardContentProps {\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  rippleProps?: RippleProps\n  onPress?: (e: GestureResponderEvent) => void\n}\n\nexport class CardContent extends React.Component<CardContentProps> {\n  render(): React.ReactElement\n}\n\nexport interface CardHeaderProps {\n  children?: React.ReactNode\n  thumbnail?: React.ReactNode\n  action?: React.ReactNode\n  title?: string\n  titleStyles?: StyleProp<TextStyle>\n  subtitle?: string\n  subtitleStyles?: StyleProp<TextStyle>\n  style?: StyleProp<any>\n}\n\nexport class CardHeader extends React.Component<CardHeaderProps> {\n  render(): React.ReactElement\n}\n\nexport interface CardMediaProps {\n  children?: React.ReactNode\n  image?: React.ReactNode\n  style?: StyleProp<any>\n  title?: string\n  titleStyles?: StyleProp<TextStyle>\n  subtitle?: string\n  subtitleStyles?: StyleProp<TextStyle>\n  height?: number\n}\n\nexport class CardMedia extends React.Component<CardMediaProps> {\n  render(): React.ReactElement\n}\n\nexport interface CardProps {\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  outlined?: boolean\n  shadow?: number\n  radius?: number\n  onPress?: (e: GestureResponderEvent) => void\n  rippleProps?: RippleProps\n  testID?: string\n}\n\nexport class Card extends React.Component<CardProps> {\n  render(): React.ReactElement\n}\n\nexport interface DataTableCellProps {\n  text: string\n\n  type?: 'up' | 'header'\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  right?: boolean\n  borderRight?: boolean\n  borderLeft?: boolean\n  minWidth?: number\n  onPress?: (e: GestureResponderEvent) => void\n  sortingIcon?: string\n  relativeWidth?: number\n  textStyle?: StyleProp<any>\n}\n\nexport class DataTableCell extends React.Component<DataTableCellProps> {\n  render(): React.ReactElement\n}\n\nexport interface DataTableHeaderProps {\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  rightActions?: React.ReactNode\n  leftActions?: React.ReactNode\n  title?: string\n}\n\nexport class DataTableHeader extends React.Component<DataTableHeaderProps> {\n  render(): React.ReactElement\n}\n\nexport interface DataTablePaginationProps {\n  page: number\n  numberOfPages: number\n  numberOfRows: number\n  perPage: number\n\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  possibleNumberPerPage?: number\n  onChangePage?: (page: number) => void\n  onChangeRowsPerPage?: (perPage: number) => void\n}\n\nexport class DataTablePagination extends React.Component<\n  DataTablePaginationProps\n> {\n  render(): React.ReactElement\n}\n\nexport interface DataTableRowProps {\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  borderBottomColor?: Color\n  selected?: boolean\n  onPressCheckbox?: (...args: any[]) => void\n  showCheckbox?: boolean\n  checkboxOffset?: boolean\n  onPress?: (e: GestureResponderEvent) => void\n  hover?: boolean\n  type?: string\n}\n\nexport class DataTableRow extends React.Component<DataTableRowProps> {\n  render(): React.ReactElement\n}\n\nexport interface DataTableProps {\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  testID?: string\n}\n\nexport class DataTable extends React.Component<DataTableProps> {\n  render(): React.ReactElement\n}\n\nexport interface DialogProps {\n  visible: boolean\n\n  actionItems?: React.ReactNode[]\n  style?: StyleProp<any>\n  children?: React.ReactNode\n  onRequestClose?: (...args: any[]) => void\n  onShow?: (...args: any[]) => void\n  onTouchOutside?: (...args: any[]) => void\n  title?: string\n  titleStyle?: StyleProp<any>\n  supportingText?: string\n  supportingTextStyle?: StyleProp<any>\n  contentStyle?: StyleProp<any>\n  testID?: string\n}\n\nexport class Dialog extends React.Component<DialogProps> {\n  render(): React.ReactElement\n}\n\nexport interface DrawerHeaderProps {\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  title?: string\n  subtitle?: string\n  avatar?: React.ReactNode\n}\n\nexport class DrawerHeader extends React.Component<DrawerHeaderProps> {\n  render(): React.ReactElement\n}\n\nexport interface DrawerItemProps {\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  text?: string\n  icon?: string\n  onPress?: (e: GestureResponderEvent) => void\n  active?: boolean\n}\n\nexport class DrawerItem extends React.Component<DrawerItemProps> {\n  render(): React.ReactElement\n}\n\nexport interface DrawerSectionProps {\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  label?: string\n  topDivider?: boolean\n  bottomDivider?: boolean\n  fullWidth?: boolean\n}\n\nexport class DrawerSection extends React.Component<DrawerSectionProps> {\n  render(): React.ReactElement\n}\n\nexport interface DrawerProps {\n  open: boolean\n  drawerContent: React.ReactNode\n  onClose: (...args: any[]) => void\n\n  type?: 'push' | 'permanent'\n  children?: React.ReactNode\n  animationTime?: number\n\n  pageHeight?: number\n  pageWidth?: number\n  widthPercentage?: number\n  width?: number\n  fullHeight?: boolean\n  position?: string\n\n  appbar?: React.ReactNode\n  scrim?: boolean\n  scrimColor?: string\n  scrimOpacity?: number\n\n  style?: StyleProp<any>\n  contentContainerStyle?: StyleProp<any>\n  drawerStyle?: StyleProp<any>\n  scrimStyles?: StyleProp<any>\n  testID?: string\n}\n\nexport class Drawer extends React.Component<DrawerProps> {\n  render(): React.ReactElement\n}\n\nexport interface DrawerBottomProps extends SheetBottomProps {\n  children?: React.ReactNode\n  style?: StyleProp<any>\n}\n\nexport class DrawerBottom extends React.Component<DrawerBottomProps> {\n  render(): React.ReactElement\n}\n\nexport interface FabSpeedDialProps {\n  fab?: React.ReactNode | string\n  actions?: React.ReactNode\n  extended?: boolean\n  style?: StyleProp<any>\n  onPress?: (e: GestureResponderEvent) => void\n  testID?: string\n}\n\nexport class FabSpeedDial extends React.Component<FabSpeedDialProps> {\n  render(): React.ReactElement\n}\n\nexport interface MenuItemProps {\n  text?: string\n  children?: React.ReactNode\n  disabled?: boolean\n  onPress?: (e: GestureResponderEvent) => void\n  style?: StyleProp<any>\n  textStyle?: StyleProp<TextStyle>\n  icon?: React.ReactNode\n  keyboardCommand?: React.ReactNode\n}\n\nexport class MenuItem extends React.Component<MenuItemProps> {\n  render(): React.ReactElement\n}\n\nexport interface MenuProps {\n  button?: React.ReactNode\n  children?: React.ReactNode\n  onHidden?: (...args: any[]) => void\n  style?: StyleProp<any>\n  visible?: boolean\n  menuStyle?: StyleProp<any>\n  sameWidth?: boolean\n  onBackdropPress?: (...args: any[]) => void\n  modalMenuStyle?: StyleProp<any>\n  contentContainerStyle?: StyleProp<any>\n  noBackDrop?: boolean\n  tooltip?: boolean\n  tooltipPosition?: string\n  testID?: string\n}\n\nexport class Menu extends React.Component<MenuProps> {\n  render(): React.ReactElement\n}\n\nexport interface SearchbarProps {\n  value?: string\n  style?: StyleProp<any>\n  onChangeText?: (text: string) => void\n  onCloseIcon?: (...args: any[]) => void\n  onNavigation?: (...args: any[]) => void\n  placeholder?: string\n}\n\nexport class Searchbar extends React.Component<SearchbarProps> {\n  render(): React.ReactElement\n}\n\nexport interface SelectProps {\n  onSelect?: (...args: any[]) => void\n  buttonStyle?: StyleProp<any>\n  label?: string\n  selectedItem?: React.ReactNode\n  menuItems?: any[]\n  visible?: boolean\n  textFieldProps?: TextFieldProps\n  menuProps?: MenuProps\n  type?: TextFieldProps['type']\n  onBackdropPress?: (e: GestureResponderEvent) => void\n  theme?: Theme\n  testID?: string\n}\n\nexport class Select extends React.Component<SelectProps> {\n  render(): React.ReactElement\n}\n\nexport interface SheetBottomProps {\n  visible: boolean\n  duration?: number\n  onBackdropPress?: (...args: any[]) => void\n  onSwipeDown?: (...args: any[]) => void\n  onSwipeUp?: (...args: any[]) => void\n  children?: React.ReactNode\n  wrapperStyles?: StyleProp<any>\n  style?: StyleProp<any>\n  cardVerticalPadding?: number\n  pageHeight?: number\n  testID?: string\n}\n\nexport class SheetBottom extends React.Component<SheetBottomProps> {\n  render(): React.ReactElement\n}\n\nexport interface SheetSideProps {\n  duration?: number\n  onBackdropPress?: (...args: any[]) => void\n  onSwipeLeft?: (...args: any[]) => void\n  onSwipeRight?: (...args: any[]) => void\n  children?: React.ReactNode\n  wrapperStyles?: StyleProp<any>\n  style?: StyleProp<any>\n  visible?: boolean\n  pageWidth?: number\n  pageHeight?: number\n  widthPercentage?: number\n  side?: string\n  testID?: string\n}\n\nexport class SheetSide extends React.Component<SheetSideProps> {\n  render(): React.ReactElement\n}\n\nexport interface SnackbarProps {\n  visible?: boolean\n  animationDuration?: number\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  onButtonPress?: (e: GestureResponderEvent) => void\n  buttonLabel?: string\n  buttonTextColor?: Color\n  testID?: string\n}\n\nexport class Snackbar extends React.Component<SnackbarProps> {\n  render(): React.ReactElement\n}\n\nexport interface SwipeNavProps {\n  header?: React.ReactNode\n  footer?: React.ReactNode\n  scrollViewProps?: ScrollViewProps\n  scrollComponent?: React.ReactNode\n  style?: StyleProp<any>\n  headerContainerStyle?: StyleProp<any>\n  footerContainerStyle?: StyleProp<any>\n  scrollViewStyle?: StyleProp<any>\n  children?: React.ReactNode\n}\n\nexport class SwipeNav extends React.Component<SwipeNavProps> {\n  render(): React.ReactElement\n}\n\nexport interface TabsProps {\n  actionItems?: string | React.ReactNode\n  selectedIndex?: number\n  backgroundColor?: string\n  underlineColor?: string\n  scrollEnabled?: boolean\n  handleChange?: (...args: any[]) => void\n  style?: StyleProp<any>\n  theme?: Theme\n  testID?: string\n}\n\nexport class Tabs extends React.Component<TabsProps> {\n  render(): React.ReactElement\n}\n\nexport interface TabProps {\n  label?: string\n  active?: boolean\n  activeTextColor?: string\n  inActiveTextColor?: string\n  textStyle?: StyleProp<any>\n  iconStyles?: StyleProp<any>\n  onPress?: (e: GestureResponderEvent) => void\n  tabWidth?: number\n  style?: StyleProp<any>\n  icon?: string\n  rippleProps?: RippleProps\n}\n\nexport class Tab extends React.Component<TabProps> {\n  render(): React.ReactElement\n}\n"
  },
  {
    "path": "dist/index.js",
    "content": "var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"Hoverable\",{enumerable:true,get:function get(){return _Hoverable.default;}});Object.defineProperty(exports,\"shadow\",{enumerable:true,get:function get(){return _shadow.default;}});Object.defineProperty(exports,\"Anchor\",{enumerable:true,get:function get(){return _Anchor.default;}});Object.defineProperty(exports,\"Appbar\",{enumerable:true,get:function get(){return _Appbar.default;}});Object.defineProperty(exports,\"AppbarBottom\",{enumerable:true,get:function get(){return _AppbarBottom.default;}});Object.defineProperty(exports,\"Avatar\",{enumerable:true,get:function get(){return _Avatar.default;}});Object.defineProperty(exports,\"Backdrop\",{enumerable:true,get:function get(){return _Backdrop.default;}});Object.defineProperty(exports,\"Badge\",{enumerable:true,get:function get(){return _Badge.default;}});Object.defineProperty(exports,\"Banner\",{enumerable:true,get:function get(){return _Banner.default;}});Object.defineProperty(exports,\"BottomNavigation\",{enumerable:true,get:function get(){return _BottomNavigation.default;}});Object.defineProperty(exports,\"BottomNavigationItem\",{enumerable:true,get:function get(){return _BottomNavigation.BottomNavigationItem;}});Object.defineProperty(exports,\"Button\",{enumerable:true,get:function get(){return _Button.default;}});Object.defineProperty(exports,\"Card\",{enumerable:true,get:function get(){return _Card.default;}});Object.defineProperty(exports,\"CardActions\",{enumerable:true,get:function get(){return _Card.CardActions;}});Object.defineProperty(exports,\"CardContent\",{enumerable:true,get:function get(){return _Card.CardContent;}});Object.defineProperty(exports,\"CardHeader\",{enumerable:true,get:function get(){return _Card.CardHeader;}});Object.defineProperty(exports,\"CardMedia\",{enumerable:true,get:function get(){return _Card.CardMedia;}});Object.defineProperty(exports,\"Checkbox\",{enumerable:true,get:function get(){return _Checkbox.default;}});Object.defineProperty(exports,\"Chip\",{enumerable:true,get:function get(){return _Chip.default;}});Object.defineProperty(exports,\"DataTable\",{enumerable:true,get:function get(){return _DataTable.default;}});Object.defineProperty(exports,\"DataTableHeader\",{enumerable:true,get:function get(){return _DataTable.DataTableHeader;}});Object.defineProperty(exports,\"DataTableCell\",{enumerable:true,get:function get(){return _DataTable.DataTableCell;}});Object.defineProperty(exports,\"DataTablePagination\",{enumerable:true,get:function get(){return _DataTable.DataTablePagination;}});Object.defineProperty(exports,\"DataTableRow\",{enumerable:true,get:function get(){return _DataTable.DataTableRow;}});Object.defineProperty(exports,\"Dialog\",{enumerable:true,get:function get(){return _Dialog.default;}});Object.defineProperty(exports,\"Drawer\",{enumerable:true,get:function get(){return _Drawer.default;}});Object.defineProperty(exports,\"DrawerHeader\",{enumerable:true,get:function get(){return _Drawer.DrawerHeader;}});Object.defineProperty(exports,\"DrawerItem\",{enumerable:true,get:function get(){return _Drawer.DrawerItem;}});Object.defineProperty(exports,\"DrawerSection\",{enumerable:true,get:function get(){return _Drawer.DrawerSection;}});Object.defineProperty(exports,\"DrawerBottom\",{enumerable:true,get:function get(){return _DrawerBottom.default;}});Object.defineProperty(exports,\"Divider\",{enumerable:true,get:function get(){return _Divider.default;}});Object.defineProperty(exports,\"Fab\",{enumerable:true,get:function get(){return _Fab.default;}});Object.defineProperty(exports,\"FabSpeedDial\",{enumerable:true,get:function get(){return _Fab.FabSpeedDial;}});Object.defineProperty(exports,\"Icon\",{enumerable:true,get:function get(){return _Icon.default;}});Object.defineProperty(exports,\"IconButton\",{enumerable:true,get:function get(){return _IconButton.default;}});Object.defineProperty(exports,\"List\",{enumerable:true,get:function get(){return _List.default;}});Object.defineProperty(exports,\"ListSection\",{enumerable:true,get:function get(){return _List.ListSection;}});Object.defineProperty(exports,\"ListExpand\",{enumerable:true,get:function get(){return _List.ListExpand;}});Object.defineProperty(exports,\"ListItem\",{enumerable:true,get:function get(){return _List.ListItem;}});Object.defineProperty(exports,\"Menu\",{enumerable:true,get:function get(){return _Menu.default;}});Object.defineProperty(exports,\"MenuItem\",{enumerable:true,get:function get(){return _Menu.MenuItem;}});Object.defineProperty(exports,\"Paper\",{enumerable:true,get:function get(){return _Paper.default;}});Object.defineProperty(exports,\"ProgressBar\",{enumerable:true,get:function get(){return _ProgressBar.default;}});Object.defineProperty(exports,\"ProgressCircle\",{enumerable:true,get:function get(){return _ProgressCircle.default;}});Object.defineProperty(exports,\"RadioButton\",{enumerable:true,get:function get(){return _RadioButton.default;}});Object.defineProperty(exports,\"Ripple\",{enumerable:true,get:function get(){return _Ripple.default;}});Object.defineProperty(exports,\"Select\",{enumerable:true,get:function get(){return _Select.default;}});Object.defineProperty(exports,\"Searchfield\",{enumerable:true,get:function get(){return _Searchfield.default;}});Object.defineProperty(exports,\"Searchbar\",{enumerable:true,get:function get(){return _Searchbar.default;}});Object.defineProperty(exports,\"SheetBottom\",{enumerable:true,get:function get(){return _SheetBottom.default;}});Object.defineProperty(exports,\"SheetSide\",{enumerable:true,get:function get(){return _SheetSide.default;}});Object.defineProperty(exports,\"Slider\",{enumerable:true,get:function get(){return _Slider.default;}});Object.defineProperty(exports,\"Snackbar\",{enumerable:true,get:function get(){return _Snackbar.default;}});Object.defineProperty(exports,\"SwipeNav\",{enumerable:true,get:function get(){return _SwipeNav.default;}});Object.defineProperty(exports,\"Switch\",{enumerable:true,get:function get(){return _Switch.default;}});Object.defineProperty(exports,\"Tabs\",{enumerable:true,get:function get(){return _Tabs.default;}});Object.defineProperty(exports,\"Tab\",{enumerable:true,get:function get(){return _Tabs.Tab;}});Object.defineProperty(exports,\"TextField\",{enumerable:true,get:function get(){return _TextField.default;}});Object.defineProperty(exports,\"TextFieldHelperText\",{enumerable:true,get:function get(){return _TextField.TextFieldHelperText;}});Object.defineProperty(exports,\"ToggleButton\",{enumerable:true,get:function get(){return _ToggleButton.default;}});Object.defineProperty(exports,\"ToggleButtonGroup\",{enumerable:true,get:function get(){return _ToggleButton.ToggleButtonGroup;}});Object.defineProperty(exports,\"Tooltip\",{enumerable:true,get:function get(){return _Tooltip.default;}});Object.defineProperty(exports,\"Heading\",{enumerable:true,get:function get(){return _Typography.Heading;}});Object.defineProperty(exports,\"Subtitle\",{enumerable:true,get:function get(){return _Typography.Subtitle;}});Object.defineProperty(exports,\"BodyText\",{enumerable:true,get:function get(){return _Typography.BodyText;}});Object.defineProperty(exports,\"Caption\",{enumerable:true,get:function get(){return _Typography.Caption;}});Object.defineProperty(exports,\"Overline\",{enumerable:true,get:function get(){return _Typography.Overline;}});Object.defineProperty(exports,\"ThemeContext\",{enumerable:true,get:function get(){return _ThemeContext.default;}});Object.defineProperty(exports,\"withTheme\",{enumerable:true,get:function get(){return _withTheme.default;}});Object.defineProperty(exports,\"defaultTheme\",{enumerable:true,get:function get(){return _defaultTheme.default;}});Object.defineProperty(exports,\"BreadProvider\",{enumerable:true,get:function get(){return _BreadProvider.default;}});Object.defineProperty(exports,\"Colors\",{enumerable:true,get:function get(){return _index.default;}});Object.defineProperty(exports,\"VueMaterialBread\",{enumerable:true,get:function get(){return _vueNative.default;}});var _Hoverable=_interopRequireDefault(require(\"./Utils/Hoverable/Hoverable.js\"));var _shadow=_interopRequireDefault(require(\"./Utils/Shadow/shadow.js\"));var _Anchor=_interopRequireDefault(require(\"./Utils/Anchor/Anchor.js\"));var _Appbar=_interopRequireDefault(require(\"./Components/Appbar\"));var _AppbarBottom=_interopRequireDefault(require(\"./Components/AppbarBottom\"));var _Avatar=_interopRequireDefault(require(\"./Components/Avatar\"));var _Backdrop=_interopRequireDefault(require(\"./Components/Backdrop\"));var _Badge=_interopRequireDefault(require(\"./Components/Badge\"));var _Banner=_interopRequireDefault(require(\"./Components/Banner\"));var _BottomNavigation=_interopRequireWildcard(require(\"./Components/BottomNavigation\"));var _Button=_interopRequireDefault(require(\"./Components/Button\"));var _Card=_interopRequireWildcard(require(\"./Components/Card\"));var _Checkbox=_interopRequireDefault(require(\"./Components/Checkbox\"));var _Chip=_interopRequireDefault(require(\"./Components/Chip\"));var _DataTable=_interopRequireWildcard(require(\"./Components/DataTable\"));var _Dialog=_interopRequireDefault(require(\"./Components/Dialog\"));var _Drawer=_interopRequireWildcard(require(\"./Components/Drawer\"));var _DrawerBottom=_interopRequireDefault(require(\"./Components/DrawerBottom\"));var _Divider=_interopRequireDefault(require(\"./Components/Divider\"));var _Fab=_interopRequireWildcard(require(\"./Components/Fab\"));var _Icon=_interopRequireDefault(require(\"./Components/Icon\"));var _IconButton=_interopRequireDefault(require(\"./Components/IconButton\"));var _List=_interopRequireWildcard(require(\"./Components/List\"));var _Menu=_interopRequireWildcard(require(\"./Components/Menu\"));var _Paper=_interopRequireDefault(require(\"./Components/Paper/Paper.js\"));var _ProgressBar=_interopRequireDefault(require(\"./Components/Progress/ProgressBar\"));var _ProgressCircle=_interopRequireDefault(require(\"./Components/Progress/ProgressCircle\"));var _RadioButton=_interopRequireDefault(require(\"./Components/RadioButton\"));var _Ripple=_interopRequireDefault(require(\"./Components/Ripple\"));var _Select=_interopRequireDefault(require(\"./Components/Select\"));var _Searchfield=_interopRequireDefault(require(\"./Components/TextField/Searchfield/Searchfield.js\"));var _Searchbar=_interopRequireDefault(require(\"./Components/Appbar/Searchbar/Searchbar.js\"));var _SheetBottom=_interopRequireDefault(require(\"./Components/SheetBottom\"));var _SheetSide=_interopRequireDefault(require(\"./Components/SheetSide\"));var _Slider=_interopRequireDefault(require(\"./Components/Slider\"));var _Snackbar=_interopRequireDefault(require(\"./Components/Snackbar\"));var _SwipeNav=_interopRequireDefault(require(\"./Components/SwipeNav\"));var _Switch=_interopRequireDefault(require(\"./Components/Switch\"));var _Tabs=_interopRequireWildcard(require(\"./Components/Tabs\"));var _TextField=_interopRequireWildcard(require(\"./Components/TextField\"));var _ToggleButton=_interopRequireWildcard(require(\"./Components/ToggleButton\"));var _Tooltip=_interopRequireDefault(require(\"./Components/Tooltip\"));var _Typography=require(\"./Components/Typography\");var _ThemeContext=_interopRequireDefault(require(\"./Theme/ThemeContext.js\"));var _withTheme=_interopRequireDefault(require(\"./Theme/withTheme.js\"));var _defaultTheme=_interopRequireDefault(require(\"./Theme/defaultTheme.js\"));var _BreadProvider=_interopRequireDefault(require(\"./Core/BreadProvider.js\"));var _index=_interopRequireDefault(require(\"./Core/colors/index.js\"));var _vueNative=_interopRequireDefault(require(\"./vue-native.js\"));"
  },
  {
    "path": "dist/storybook/components/Container.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _=require(\"../..\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/storybook/components/Container.js\";var Container=function(_Component){(0,_inherits2.default)(Container,_Component);function Container(){(0,_classCallCheck2.default)(this,Container);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(Container).apply(this,arguments));}(0,_createClass2.default)(Container,[{key:\"render\",value:function render(){var _this$props=this.props,style=_this$props.style,scroll=_this$props.scroll,children=_this$props.children;if(scroll){return _react.default.createElement(_reactNative.ScrollView,{__source:{fileName:_jsxFileName,lineNumber:17}},_react.default.createElement(_reactNative.View,{style:[styles.container,style],__source:{fileName:_jsxFileName,lineNumber:18}},_react.default.createElement(_.BreadProvider,{value:{},__source:{fileName:_jsxFileName,lineNumber:19}},children)));}return _react.default.createElement(_reactNative.View,{style:[styles.container,style],__source:{fileName:_jsxFileName,lineNumber:25}},_react.default.createElement(_.BreadProvider,{value:{},__source:{fileName:_jsxFileName,lineNumber:26}},children));}}]);return Container;}(_react.Component);exports.default=Container;(0,_defineProperty2.default)(Container,\"propTypes\",{style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),children:_propTypes.default.node,scroll:_propTypes.default.bool});var styles=_reactNative.StyleSheet.create({container:{padding:16}});"
  },
  {
    "path": "dist/storybook/components/Header.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _defineProperty2=_interopRequireDefault(require(\"@babel/runtime/helpers/defineProperty\"));var _react=_interopRequireWildcard(require(\"react\"));var _propTypes=_interopRequireDefault(require(\"prop-types\"));var _reactNative=require(\"react-native\");var _=require(\"../..\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/storybook/components/Header.js\";var Header=function(_Component){(0,_inherits2.default)(Header,_Component);function Header(){(0,_classCallCheck2.default)(this,Header);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(Header).apply(this,arguments));}(0,_createClass2.default)(Header,[{key:\"render\",value:function render(){var _this$props=this.props,title=_this$props.title,subtitle=_this$props.subtitle;return _react.default.createElement(_reactNative.View,{style:styles.container,__source:{fileName:_jsxFileName,lineNumber:15}},_react.default.createElement(_.Heading,{align:\"center\",type:4,__source:{fileName:_jsxFileName,lineNumber:16}},title),subtitle?_react.default.createElement(_.Subtitle,{type:1,style:[styles.subtitle],__source:{fileName:_jsxFileName,lineNumber:20}},subtitle):null);}}]);return Header;}(_react.Component);exports.default=Header;(0,_defineProperty2.default)(Header,\"propTypes\",{title:_propTypes.default.string,subtitle:_propTypes.default.string});var styles=_reactNative.StyleSheet.create({container:{marginBottom:60},subtitle:{marginTop:40}});"
  },
  {
    "path": "dist/storybook/helpers/storiesOf/index.android.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"storiesOf\",{enumerable:true,get:function get(){return _reactNative.storiesOf;}});var _reactNative=require(\"@storybook/react-native\");"
  },
  {
    "path": "dist/storybook/helpers/storiesOf/index.ios.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"storiesOf\",{enumerable:true,get:function get(){return _reactNative.storiesOf;}});var _reactNative=require(\"@storybook/react-native\");"
  },
  {
    "path": "dist/storybook/helpers/storiesOf/index.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"storiesOf\",{enumerable:true,get:function get(){return _react.storiesOf;}});var _react=require(\"@storybook/react\");"
  },
  {
    "path": "dist/storybook/index.android.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var _storybook=_interopRequireDefault(require(\"./storybook\"));_reactNative.AppRegistry.registerComponent('ReactNativeBread',function(){return _storybook.default;});var _default=_storybook.default;exports.default=_default;"
  },
  {
    "path": "dist/storybook/index.ios.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var _storybook=_interopRequireDefault(require(\"./storybook\"));_reactNative.AppRegistry.registerComponent('ReactNativeBread',function(){return _storybook.default;});var _default=_storybook.default;exports.default=_default;"
  },
  {
    "path": "dist/storybook/index.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"@storybook/react-native\");require(\"./rn-addons\");(0,_reactNative.configure)(function(){require('./stories');},module);var StorybookUIRoot=(0,_reactNative.getStorybookUI)({port:7007,host:'localhost'});var _default=StorybookUIRoot;exports.default=_default;"
  },
  {
    "path": "dist/storybook/rn-addons.js",
    "content": ""
  },
  {
    "path": "dist/storybook/stories/Home.stories.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _storiesOf=require(\"../helpers/storiesOf\");var _Container=_interopRequireDefault(require(\"../components/Container\"));var _=require(\"../..\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/storybook/stories/Home.stories.js\";var styles=_reactNative.StyleSheet.create({top:{flexDirection:'column',alignItems:'center'},header:{fontSize:48,textAlign:'center',fontWeight:'600'},subtitle:{fontSize:16,color:'rgba(10, 10, 10, 0.67)',fontWeight:'400',marginTop:6},bodyText:{fontSize:14,lineHeight:22},initialText:{flexDirection:'row',flexWrap:'wrap',marginTop:40,marginHorizontal:'auto',maxWidth:780},textRow:{marginTop:20,flexWrap:'wrap',maxWidth:780},buttonRow:{marginTop:20,flexDirection:'row'},secondButton:{marginLeft:20},logo:{width:300.502,height:250.398,resizeMode:'cover'}});var _default=(0,_storiesOf.storiesOf)('Docs|Start Here',module).add('Home',function(){return _react.default.createElement(_Container.default,{__source:{fileName:_jsxFileName,lineNumber:52}},_react.default.createElement(_reactNative.View,{style:styles.top,__source:{fileName:_jsxFileName,lineNumber:53}},_react.default.createElement(_reactNative.Image,{source:{uri:'http://material-bread.org/logo-shadow.svg'},style:styles.logo,__source:{fileName:_jsxFileName,lineNumber:54}}),_react.default.createElement(_.Heading,{style:styles.header,__source:{fileName:_jsxFileName,lineNumber:58}},\"Material Bread\"),_react.default.createElement(_.BodyText,{style:styles.subtitle,__source:{fileName:_jsxFileName,lineNumber:59}},\"One Component Library, Six Platforms\")),_react.default.createElement(_reactNative.View,{style:styles.initialText,__source:{fileName:_jsxFileName,lineNumber:64}},_react.default.createElement(_.BodyText,{style:styles.bodyText,__source:{fileName:_jsxFileName,lineNumber:65}},\"This is the Storybook environment for Material Bread which is a highly customizable cross-platform React Native Material Library. Visit the docs to see the full component API.\"),_react.default.createElement(_reactNative.View,{style:styles.buttonRow,__source:{fileName:_jsxFileName,lineNumber:70}},_react.default.createElement(_.Anchor,{url:'http://material-bread.org/',target:'_parent',__source:{fileName:_jsxFileName,lineNumber:71}},_react.default.createElement(_.Button,{text:'Documentation',type:'outlined',textColor:'rgb(233, 30, 99)',__source:{fileName:_jsxFileName,lineNumber:72}})),_react.default.createElement(_.Anchor,{url:'https://github.com/codypearce/material-bread',target:'_parent',__source:{fileName:_jsxFileName,lineNumber:79}},_react.default.createElement(_.Button,{text:'Github',type:'outlined',textColor:'#666',style:styles.secondButton,__source:{fileName:_jsxFileName,lineNumber:82}})))));});exports.default=_default;"
  },
  {
    "path": "dist/storybook/stories/index.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});Object.defineProperty(exports,\"Home\",{enumerable:true,get:function get(){return _HomeStories.default;}});Object.defineProperty(exports,\"Appbar\",{enumerable:true,get:function get(){return _Appbar.default;}});Object.defineProperty(exports,\"AppbarBottom\",{enumerable:true,get:function get(){return _AppbarBottomStories.default;}});Object.defineProperty(exports,\"Avatar\",{enumerable:true,get:function get(){return _AvatarStories.default;}});Object.defineProperty(exports,\"Backdrop\",{enumerable:true,get:function get(){return _BackdropStories.default;}});Object.defineProperty(exports,\"Badge\",{enumerable:true,get:function get(){return _BadgeStories.default;}});Object.defineProperty(exports,\"Banner\",{enumerable:true,get:function get(){return _BannerStories.default;}});Object.defineProperty(exports,\"BottomNavigation\",{enumerable:true,get:function get(){return _BottomNavigationStories.default;}});Object.defineProperty(exports,\"BottomNavigationItem\",{enumerable:true,get:function get(){return _BottomNavigationItemStories.default;}});Object.defineProperty(exports,\"Button\",{enumerable:true,get:function get(){return _ButtonStories.default;}});Object.defineProperty(exports,\"TextButton\",{enumerable:true,get:function get(){return _TextButtonStories.default;}});Object.defineProperty(exports,\"FlatButton\",{enumerable:true,get:function get(){return _FlatButtonStories.default;}});Object.defineProperty(exports,\"OutlinedButton\",{enumerable:true,get:function get(){return _OutlinedButtonStories.default;}});Object.defineProperty(exports,\"ContainedButton\",{enumerable:true,get:function get(){return _ContainedButtonStories.default;}});Object.defineProperty(exports,\"Card\",{enumerable:true,get:function get(){return _CardStories.default;}});Object.defineProperty(exports,\"Checkbox\",{enumerable:true,get:function get(){return _CheckboxStories.default;}});Object.defineProperty(exports,\"Chip\",{enumerable:true,get:function get(){return _ChipStories.default;}});Object.defineProperty(exports,\"DataTable\",{enumerable:true,get:function get(){return _DataTableStories.default;}});Object.defineProperty(exports,\"DataTableCell\",{enumerable:true,get:function get(){return _DataTableCellStories.default;}});Object.defineProperty(exports,\"DataTableHeader\",{enumerable:true,get:function get(){return _DataTableHeaderStories.default;}});Object.defineProperty(exports,\"DataTableRow\",{enumerable:true,get:function get(){return _DataTableRowStories.default;}});Object.defineProperty(exports,\"DataTablePagination\",{enumerable:true,get:function get(){return _DataTablePaginationStories.default;}});Object.defineProperty(exports,\"Dialog\",{enumerable:true,get:function get(){return _DialogStories.default;}});Object.defineProperty(exports,\"Drawer\",{enumerable:true,get:function get(){return _DrawerStories.default;}});Object.defineProperty(exports,\"DrawerHeader\",{enumerable:true,get:function get(){return _DrawerHeaderStories.default;}});Object.defineProperty(exports,\"DrawerSection\",{enumerable:true,get:function get(){return _DrawerSectionStories.default;}});Object.defineProperty(exports,\"DrawerItem\",{enumerable:true,get:function get(){return _DrawerItemStories.default;}});Object.defineProperty(exports,\"DrawerBottom\",{enumerable:true,get:function get(){return _DrawerBottomStories.default;}});Object.defineProperty(exports,\"Divider\",{enumerable:true,get:function get(){return _DividerStories.default;}});Object.defineProperty(exports,\"Fab\",{enumerable:true,get:function get(){return _FabStories.default;}});Object.defineProperty(exports,\"FabSpeedDial\",{enumerable:true,get:function get(){return _FabSpeedDialStories.default;}});Object.defineProperty(exports,\"Icons\",{enumerable:true,get:function get(){return _IconsStories.default;}});Object.defineProperty(exports,\"IconButton\",{enumerable:true,get:function get(){return _IconButtonStories.default;}});Object.defineProperty(exports,\"List\",{enumerable:true,get:function get(){return _ListStories.default;}});Object.defineProperty(exports,\"ListExpand\",{enumerable:true,get:function get(){return _ListExpandStories.default;}});Object.defineProperty(exports,\"ListItem\",{enumerable:true,get:function get(){return _ListItemStories.default;}});Object.defineProperty(exports,\"ListSection\",{enumerable:true,get:function get(){return _ListSectionStories.default;}});Object.defineProperty(exports,\"Menu\",{enumerable:true,get:function get(){return _MenuStories.default;}});Object.defineProperty(exports,\"MenuItem\",{enumerable:true,get:function get(){return _MenuItemStories.default;}});Object.defineProperty(exports,\"Paper\",{enumerable:true,get:function get(){return _PaperStories.default;}});Object.defineProperty(exports,\"ProgressBar\",{enumerable:true,get:function get(){return _ProgressBarStories.default;}});Object.defineProperty(exports,\"ProgressCircle\",{enumerable:true,get:function get(){return _ProgressCircleStories.default;}});Object.defineProperty(exports,\"RadioButton\",{enumerable:true,get:function get(){return _RadioButtonStories.default;}});Object.defineProperty(exports,\"Ripple\",{enumerable:true,get:function get(){return _RippleStories.default;}});Object.defineProperty(exports,\"Searchbar\",{enumerable:true,get:function get(){return _SearchbarStories.default;}});Object.defineProperty(exports,\"Searchfield\",{enumerable:true,get:function get(){return _SearchfieldStories.default;}});Object.defineProperty(exports,\"SelectFilled\",{enumerable:true,get:function get(){return _SelectFilledStories.default;}});Object.defineProperty(exports,\"SelectFlat\",{enumerable:true,get:function get(){return _SelectFlatStories.default;}});Object.defineProperty(exports,\"SelectOutlined\",{enumerable:true,get:function get(){return _SelectOutlinedStories.default;}});Object.defineProperty(exports,\"SheetBottom\",{enumerable:true,get:function get(){return _SheetBottomStories.default;}});Object.defineProperty(exports,\"SheetSide\",{enumerable:true,get:function get(){return _SheetSideStories.default;}});Object.defineProperty(exports,\"Slider\",{enumerable:true,get:function get(){return _SliderStories.default;}});Object.defineProperty(exports,\"Snackbar\",{enumerable:true,get:function get(){return _SnackbarStories.default;}});Object.defineProperty(exports,\"SwipeNav\",{enumerable:true,get:function get(){return _SwipeNavStories.default;}});Object.defineProperty(exports,\"Switch\",{enumerable:true,get:function get(){return _SwitchStories.default;}});Object.defineProperty(exports,\"Tab\",{enumerable:true,get:function get(){return _TabStories.default;}});Object.defineProperty(exports,\"Tabs\",{enumerable:true,get:function get(){return _TabsStories.default;}});Object.defineProperty(exports,\"TextFieldFilled\",{enumerable:true,get:function get(){return _TextFieldFilledStories.default;}});Object.defineProperty(exports,\"TextFieldFlat\",{enumerable:true,get:function get(){return _TextFieldFlatStories.default;}});Object.defineProperty(exports,\"TextFieldOutline\",{enumerable:true,get:function get(){return _TextFieldOutlineStories.default;}});Object.defineProperty(exports,\"ToggleButton\",{enumerable:true,get:function get(){return _ToggleButtonStories.default;}});Object.defineProperty(exports,\"Tooltip\",{enumerable:true,get:function get(){return _TooltipStories.default;}});Object.defineProperty(exports,\"Typography\",{enumerable:true,get:function get(){return _TypographyStories.default;}});Object.defineProperty(exports,\"Anchor\",{enumerable:true,get:function get(){return _AnchorStories.default;}});Object.defineProperty(exports,\"Hoverable\",{enumerable:true,get:function get(){return _HoverableStories.default;}});Object.defineProperty(exports,\"Shadows\",{enumerable:true,get:function get(){return _ShadowStories.default;}});var _HomeStories=_interopRequireDefault(require(\"./Home.stories.js\"));var _Appbar=_interopRequireDefault(require(\"../../Components/Appbar/Appbar.stories\"));var _AppbarBottomStories=_interopRequireDefault(require(\"../../Components/AppbarBottom/AppbarBottom.stories.js\"));var _AvatarStories=_interopRequireDefault(require(\"../../Components/Avatar/Avatar.stories.js\"));var _BackdropStories=_interopRequireDefault(require(\"../../Components/Backdrop/Backdrop.stories.js\"));var _BadgeStories=_interopRequireDefault(require(\"../../Components/Badge/Badge.stories.js\"));var _BannerStories=_interopRequireDefault(require(\"../../Components/Banner/Banner.stories.js\"));var _BottomNavigationStories=_interopRequireDefault(require(\"../../Components/BottomNavigation/BottomNavigation.stories.js\"));var _BottomNavigationItemStories=_interopRequireDefault(require(\"../../Components/BottomNavigation/BottomNavigationItem/BottomNavigationItem.stories.js\"));var _ButtonStories=_interopRequireDefault(require(\"../../Components/Button/Button.stories.js\"));var _TextButtonStories=_interopRequireDefault(require(\"../../Components/Button/TextButton/TextButton.stories.js\"));var _FlatButtonStories=_interopRequireDefault(require(\"../../Components/Button/FlatButton/FlatButton.stories.js\"));var _OutlinedButtonStories=_interopRequireDefault(require(\"../../Components/Button/OutlinedButton/OutlinedButton.stories.js\"));var _ContainedButtonStories=_interopRequireDefault(require(\"../../Components/Button/ContainedButton/ContainedButton.stories.js\"));var _CardStories=_interopRequireDefault(require(\"../../Components/Card/Card.stories.js\"));var _CheckboxStories=_interopRequireDefault(require(\"../../Components/Checkbox/Checkbox.stories.js\"));var _ChipStories=_interopRequireDefault(require(\"../../Components/Chip/Chip.stories.js\"));var _DataTableStories=_interopRequireDefault(require(\"../../Components/DataTable/DataTable.stories.js\"));var _DataTableCellStories=_interopRequireDefault(require(\"../../Components/DataTable/DataTableCell/DataTableCell.stories.js\"));var _DataTableHeaderStories=_interopRequireDefault(require(\"../../Components/DataTable/DataTableHeader/DataTableHeader.stories.js\"));var _DataTableRowStories=_interopRequireDefault(require(\"../../Components/DataTable/DataTableRow/DataTableRow.stories.js\"));var _DataTablePaginationStories=_interopRequireDefault(require(\"../../Components/DataTable/DataTablePagination/DataTablePagination.stories.js\"));var _DialogStories=_interopRequireDefault(require(\"../../Components/Dialog/Dialog.stories.js\"));var _DrawerStories=_interopRequireDefault(require(\"../../Components/Drawer/Drawer.stories.js\"));var _DrawerHeaderStories=_interopRequireDefault(require(\"../../Components/Drawer/DrawerHeader/DrawerHeader.stories.js\"));var _DrawerSectionStories=_interopRequireDefault(require(\"../../Components/Drawer/DrawerSection/DrawerSection.stories.js\"));var _DrawerItemStories=_interopRequireDefault(require(\"../../Components/Drawer/DrawerItem/DrawerItem.stories.js\"));var _DrawerBottomStories=_interopRequireDefault(require(\"../../Components/DrawerBottom/DrawerBottom.stories.js\"));var _DividerStories=_interopRequireDefault(require(\"../../Components/Divider/Divider.stories.js\"));var _FabStories=_interopRequireDefault(require(\"../../Components/Fab/Fab.stories.js\"));var _FabSpeedDialStories=_interopRequireDefault(require(\"../../Components/Fab/FabSpeedDial/FabSpeedDial.stories.js\"));var _IconsStories=_interopRequireDefault(require(\"../../Components/Icon/Icons.stories.js\"));var _IconButtonStories=_interopRequireDefault(require(\"../../Components/IconButton/IconButton.stories.js\"));var _ListStories=_interopRequireDefault(require(\"../../Components/List/List.stories.js\"));var _ListExpandStories=_interopRequireDefault(require(\"../../Components/List/ListExpand/ListExpand.stories.js\"));var _ListItemStories=_interopRequireDefault(require(\"../../Components/List/ListItem/ListItem.stories.js\"));var _ListSectionStories=_interopRequireDefault(require(\"../../Components/List/ListSection/ListSection.stories.js\"));var _MenuStories=_interopRequireDefault(require(\"../../Components/Menu/Menu.stories.js\"));var _MenuItemStories=_interopRequireDefault(require(\"../../Components/Menu/MenuItem/MenuItem.stories.js\"));var _PaperStories=_interopRequireDefault(require(\"../../Components/Paper/Paper.stories.js\"));var _ProgressBarStories=_interopRequireDefault(require(\"../../Components/Progress/ProgressBar/ProgressBar.stories.js\"));var _ProgressCircleStories=_interopRequireDefault(require(\"../../Components/Progress/ProgressCircle/ProgressCircle.stories.js\"));var _RadioButtonStories=_interopRequireDefault(require(\"../../Components/RadioButton/RadioButton.stories.js\"));var _RippleStories=_interopRequireDefault(require(\"../../Components/Ripple/Ripple.stories.js\"));var _SearchbarStories=_interopRequireDefault(require(\"../../Components/Appbar/Searchbar/Searchbar.stories.js\"));var _SearchfieldStories=_interopRequireDefault(require(\"../../Components/TextField/Searchfield/Searchfield.stories.js\"));var _SelectFilledStories=_interopRequireDefault(require(\"../../Components/Select/SelectFilled/SelectFilled.stories.js\"));var _SelectFlatStories=_interopRequireDefault(require(\"../../Components/Select/SelectFlat/SelectFlat.stories.js\"));var _SelectOutlinedStories=_interopRequireDefault(require(\"../../Components/Select/SelectOutlined/SelectOutlined.stories.js\"));var _SheetBottomStories=_interopRequireDefault(require(\"../../Components/SheetBottom/SheetBottom.stories.js\"));var _SheetSideStories=_interopRequireDefault(require(\"../../Components/SheetSide/SheetSide.stories.js\"));var _SliderStories=_interopRequireDefault(require(\"../../Components/Slider/Slider.stories.js\"));var _SnackbarStories=_interopRequireDefault(require(\"../../Components/Snackbar/Snackbar.stories.js\"));var _SwipeNavStories=_interopRequireDefault(require(\"../../Components/SwipeNav/SwipeNav.stories.js\"));var _SwitchStories=_interopRequireDefault(require(\"../../Components/Switch/Switch.stories.js\"));var _TabStories=_interopRequireDefault(require(\"../../Components/Tabs/Tab/Tab.stories.js\"));var _TabsStories=_interopRequireDefault(require(\"../../Components/Tabs/Tabs.stories.js\"));var _TextFieldFilledStories=_interopRequireDefault(require(\"../../Components/TextField/TextFieldFilled/TextFieldFilled.stories.js\"));var _TextFieldFlatStories=_interopRequireDefault(require(\"../../Components/TextField/TextFieldFlat/TextFieldFlat.stories.js\"));var _TextFieldOutlineStories=_interopRequireDefault(require(\"../../Components/TextField/TextFieldOutline/TextFieldOutline.stories.js\"));var _ToggleButtonStories=_interopRequireDefault(require(\"../../Components/ToggleButton/ToggleButton.stories.js\"));var _TooltipStories=_interopRequireDefault(require(\"../../Components/Tooltip/Tooltip.stories.js\"));var _TypographyStories=_interopRequireDefault(require(\"../../Components/Typography/Typography.stories.js\"));var _AnchorStories=_interopRequireDefault(require(\"../../Utils/Anchor/Anchor.stories.js\"));var _HoverableStories=_interopRequireDefault(require(\"../../Utils/Hoverable/Hoverable.stories.js\"));var _ShadowStories=_interopRequireDefault(require(\"../../Utils/Shadow/Shadow.stories.js\"));"
  },
  {
    "path": "dist/storybook/storybook.js",
    "content": "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");var _interopRequireWildcard=require(\"@babel/runtime/helpers/interopRequireWildcard\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require(\"@babel/runtime/helpers/classCallCheck\"));var _createClass2=_interopRequireDefault(require(\"@babel/runtime/helpers/createClass\"));var _possibleConstructorReturn2=_interopRequireDefault(require(\"@babel/runtime/helpers/possibleConstructorReturn\"));var _getPrototypeOf2=_interopRequireDefault(require(\"@babel/runtime/helpers/getPrototypeOf\"));var _inherits2=_interopRequireDefault(require(\"@babel/runtime/helpers/inherits\"));var _react=_interopRequireWildcard(require(\"react\"));var _reactNative=require(\"react-native\");var _reactNative2=require(\"@storybook/react-native\");var _jsxFileName=\"/Users/cody/projects/material-bread/src/storybook/storybook.js\";(0,_reactNative2.configure)(function(){require('./stories');},module);var StorybookUIRoot=(0,_reactNative2.getStorybookUI)({port:7007,onDeviceUI:true});var StorybookUIHMRRoot=function(_Component){(0,_inherits2.default)(StorybookUIHMRRoot,_Component);function StorybookUIHMRRoot(){(0,_classCallCheck2.default)(this,StorybookUIHMRRoot);return(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf2.default)(StorybookUIHMRRoot).apply(this,arguments));}(0,_createClass2.default)(StorybookUIHMRRoot,[{key:\"render\",value:function render(){return _react.default.createElement(StorybookUIRoot,{__source:{fileName:_jsxFileName,lineNumber:19}});}}]);return StorybookUIHMRRoot;}(_react.Component);_reactNative.AppRegistry.registerComponent('MaterialBread',function(){return StorybookUIHMRRoot;});var _default=StorybookUIHMRRoot;exports.default=_default;"
  },
  {
    "path": "dist/vue-native.js",
    "content": "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _index=require(\"./index\");var VueMaterialBread={install:function install(Vue){Vue.component('mb-hoverable',_index.Hoverable);Vue.component('mb-shadow',_index.shadow);Vue.component('mb-anchor',_index.Anchor);Vue.component('mb-appbar',_index.Appbar);Vue.component('mb-AppbarBottom',_index.AppbarBottom);Vue.component('mb-avatar',_index.Avatar);Vue.component('mb-backdrop',_index.Backdrop);Vue.component('mb-badge',_index.Badge);Vue.component('mb-banner',_index.Banner);Vue.component('mb-bottom-navigation',_index.BottomNavigation);Vue.component('mb-bottom-navigation-item',_index.BottomNavigationItem);Vue.component('mb-button',_index.Button);Vue.component('mb-card',_index.Card);Vue.component('mb-card-actions',_index.CardActions);Vue.component('mb-card-content',_index.CardContent);Vue.component('mb-card-header',_index.CardHeader);Vue.component('mb-card-media',_index.CardMedia);Vue.component('mb-checkbox',_index.Checkbox);Vue.component('mb-chip',_index.Chip);Vue.component('mb-data-table',_index.DataTable);Vue.component('mb-data-table-header',_index.DataTableHeader);Vue.component('mb-data-table-cell',_index.DataTableCell);Vue.component('mb-data-table-pagination',_index.DataTablePagination);Vue.component('mb-data-table-row',_index.DataTableRow);Vue.component('mb-dialog',_index.Dialog);Vue.component('mb-drawer',_index.Drawer);Vue.component('mb-drawer-header',_index.DrawerHeader);Vue.component('mb-drawer-item',_index.DrawerItem);Vue.component('mb-drawer-section',_index.DrawerSection);Vue.component('mb-drawer-bottom',_index.DrawerBottom);Vue.component('mb-divider',_index.Divider);Vue.component('mb-fab',_index.Fab);Vue.component('mb-fab-speed-dial',_index.FabSpeedDial);Vue.component('mb-icon',_index.Icon);Vue.component('mb-icon-button',_index.IconButton);Vue.component('mb-list',_index.List);Vue.component('mb-list-section',_index.ListSection);Vue.component('mb-list-expand',_index.ListExpand);Vue.component('mb-list-item',_index.ListItem);Vue.component('mb-menu',_index.Menu);Vue.component('mb-menu-item',_index.MenuItem);Vue.component('mb-progress-bar',_index.ProgressBar);Vue.component('mb-progress-circle',_index.ProgressCircle);Vue.component('mb-radio-button',_index.RadioButton);Vue.component('mb-ripple',_index.Ripple);Vue.component('mb-select',_index.Select);Vue.component('mb-search-field',_index.Searchfield);Vue.component('mb-search-bar',_index.Searchbar);Vue.component('mb-sheet-bottom',_index.SheetBottom);Vue.component('mb-sheet-side',_index.SheetSide);Vue.component('mb-slider',_index.Slider);Vue.component('mb-snackbar',_index.Snackbar);Vue.component('mb-swipe-nav',_index.SwipeNav);Vue.component('mb-switch',_index.Switch);Vue.component('mb-tabs',_index.Tabs);Vue.component('mb-tab',_index.Tab);Vue.component('mb-text-field',_index.TextField);Vue.component('mb-text-field-helper-text',_index.TextFieldHelperText);Vue.component('mb-toggle-button',_index.ToggleButton);Vue.component('mb-toggle-button-group',_index.ToggleButtonGroup);Vue.component('mb-tooltip',_index.Tooltip);Vue.component('mb-heading',_index.Heading);Vue.component('mb-subtitle',_index.Subtitle);Vue.component('mb-body-text',_index.BodyText);Vue.component('mb-caption',_index.Caption);Vue.component('mb-overline',_index.Overline);Vue.component('mb-bread-provider',_index.BreadProvider);Vue.component('mb-colors',_index.Colors);Vue.component('mb-theme-context',_index.ThemeContext);}};var _default=VueMaterialBread;exports.default=_default;"
  },
  {
    "path": "docs/.babelrc",
    "content": "{\n  \"presets\": [\n    [\n      \"babel-preset-gatsby\",\n      {\n        \"targets\": {\n          \"browsers\": [\">0.25%\", \"not dead\"]\n        }\n      }\n    ]\n  ],\n  \"plugins\": [\n    \"@babel/plugin-transform-flow-strip-types\",\n    [\"@babel/plugin-proposal-class-properties\", { \"loose\": true }],\n    \"@babel/plugin-proposal-object-rest-spread\",\n    \"@babel/plugin-proposal-export-namespace-from\",\n    \"@babel/plugin-proposal-export-default-from\"\n  ]\n}\n"
  },
  {
    "path": "docs/.eslintrc",
    "content": "{\n  \"env\": {\n    \"node\": true,\n    \"browser\": true,\n    \"es6\": true,\n    \"jest\": true\n  },\n  \"extends\": [\n    \"eslint:recommended\",\n    \"plugin:react/recommended\",\n    \"plugin:prettier/recommended\"\n  ],\n  \"parser\": \"babel-eslint\",\n  \"rules\": {\n    \"no-useless-constructor\": 0,\n    \"import/no-extraneous-dependencies\": 0,\n    \"import/named\": 1,\n    \"import/no-unresolved\": [1, { \"caseSensitive\": false }],\n    \"react/display-name\": 0,\n    \"react/no-typos\": 0\n  },\n  \"plugins\": [\"prettier\", \"react\", \"import\"],\n  \"settings\": {\n    \"import/resolver\": {\n      \"alias\": {\n        \"map\": [\n          [\"babel-polyfill\", \"babel-polyfill/dist/polyfill.min.js\"],\n          [\"@components\", \"./components\"],\n          [\"@content\", \"./content\"],\n          [\"@utls\", \"./utils\"]\n        ],\n        \"extensions\": [\".ts\", \".js\", \".jsx\", \".json\"]\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "docs/README.md",
    "content": "# Material Bread\n"
  },
  {
    "path": "docs/gatsby-browser.js",
    "content": "/**\n * Implement Gatsby's Browser APIs in this file.\n *\n * See: https://www.gatsbyjs.org/docs/browser-apis/\n */\n\n// You can delete this file if you're not using it\n"
  },
  {
    "path": "docs/gatsby-config.js",
    "content": "module.exports = {\n  siteMetadata: {\n    title: `Material Bread | React Material Design Components`,\n    description: `Highly Customizable React Native Material Design Components`,\n    author: `codypearce`,\n    favicon: 'src/assets/favicon.ico',\n    legacy: false,\n    siteUrl: 'https://material-bread.org/',\n  },\n  plugins: [\n    `gatsby-plugin-react-helmet`,\n\n    {\n      resolve: `gatsby-source-filesystem`,\n      options: {\n        name: `images`,\n        path: `${__dirname}/src/images`,\n      },\n    },\n    {\n      resolve: `gatsby-source-filesystem`,\n      options: {\n        name: `images`,\n        path: `${__dirname}/src/blog`,\n      },\n    },\n    {\n      resolve: 'gatsby-source-filesystem',\n      options: {\n        path: `${__dirname}/src/pages`,\n        name: 'pages',\n      },\n    },\n    {\n      resolve: `gatsby-plugin-alias-imports`,\n      options: {\n        alias: {\n          '@components': `${__dirname}/src/components`,\n          '@content': `${__dirname}/src/content`,\n          '@utils': `${__dirname}/src/utils`,\n        },\n        extensions: [],\n      },\n    },\n\n    `gatsby-plugin-react-native-web`,\n    {\n      resolve: `gatsby-plugin-compile-es6-packages`,\n      options: {\n        modules: [`react-native-vector-icons`],\n      },\n    },\n    {\n      resolve: `gatsby-plugin-manifest`,\n      options: {\n        name: `gatsby-starter-default`,\n        short_name: `starter`,\n        start_url: `/`,\n        background_color: `#663399`,\n        theme_color: `#663399`,\n        display: `minimal-ui`,\n        favicon: 'src/assets/favicon.ico',\n        legacy: false,\n      },\n    },\n    {\n      resolve: `gatsby-plugin-layout`,\n      options: {\n        component: require.resolve(`./src/components/Layout/PageLayout`),\n      },\n    },\n    'gatsby-plugin-sharp',\n    'gatsby-transformer-sharp',\n    {\n      resolve: 'gatsby-transformer-remark',\n      options: {\n        plugins: [\n          {\n            resolve: 'gatsby-remark-images',\n            options: {\n              linkImagesToOriginal: false,\n            },\n          },\n          {\n            resolve: 'gatsby-remark-normalize-paths',\n            options: {\n              pathFields: ['thumbnail'],\n            },\n          },\n          {\n            resolve: `gatsby-remark-prismjs`,\n            options: {\n              classPrefix: 'language-',\n              inlineCodeMarker: null,\n              aliases: {},\n              showLineNumbers: false,\n            },\n          },\n        ],\n      },\n    },\n\n    `gatsby-plugin-sitemap`,\n    {\n      resolve: `gatsby-plugin-google-analytics`,\n      options: {\n        trackingId: 'UA-72995758-2',\n      },\n    },\n  ],\n};\n"
  },
  {
    "path": "docs/gatsby-node.js",
    "content": "/**\n * Implement Gatsby's Node APIs in this file.\n *\n * See: https://www.gatsbyjs.org/docs/node-apis/\n */\n// const path = require(`path`);\n\nconst { createFilePath } = require(`gatsby-source-filesystem`);\nexports.onCreateNode = ({ node, actions, getNode }) => {\n  const { createNodeField } = actions;\n\n  if (node.internal.type === `MarkdownRemark`) {\n    const value = createFilePath({ node, getNode });\n\n    const slug = node.frontmatter.slug;\n    createNodeField({\n      name: `slug`,\n      node,\n      value: slug,\n    });\n  }\n};\n\nexports.createPages = async ({ graphql, actions }) => {\n  const { createPage } = actions;\n\n  const blogPost = path.resolve(`./src/templates/blog-post.js`);\n  const result = await graphql(\n    `\n      {\n        allMarkdownRemark(\n          sort: { fields: [frontmatter___date], order: DESC }\n          limit: 1000\n        ) {\n          edges {\n            node {\n              fields {\n                slug\n              }\n              frontmatter {\n                title\n                slug\n              }\n            }\n          }\n        }\n      }\n    `,\n  );\n\n  if (result.errors) {\n    throw result.errors;\n  }\n\n  // Create blog posts pages.\n  const posts = result.data.allMarkdownRemark.edges;\n\n  posts.forEach((post, index) => {\n    const previous = index === posts.length - 1 ? null : posts[index + 1].node;\n    const next = index === 0 ? null : posts[index - 1].node;\n    createPage({\n      path: post.node.fields.slug,\n      component: blogPost,\n      context: {\n        slug: post.node.fields.slug,\n        previous,\n        next,\n      },\n    });\n  });\n};\n\nexports.onCreatePage = ({ page, actions }) => {\n  const { createPage } = actions;\n  if (page.path === '/') {\n    page.context.layout = 'home';\n    createPage(page);\n  }\n};\n\nexports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {\n  if (stage === 'build-html') {\n    actions.setWebpackConfig({\n      module: {\n        rules: [\n          {\n            test: /react-scrollspy/,\n            use: loaders.null(),\n          },\n          { test: /react-window/, use: loaders.null() },\n        ],\n      },\n    });\n  }\n};\n\nconst fs = require('fs'); // native\nconst zlib = require('zlib'); // native\nconst path = require('path'); // native\nconst glob = require('glob'); // native\n\nexports.onPostBuild = ({ pages, callback }) => {\n  const publicPath = path.join(__dirname, 'public');\n  const gzippable = glob.sync(`${publicPath}/**/?(*.html|*.js|*.css)`);\n  gzippable.forEach(file => {\n    try {\n      const content = fs.readFileSync(file);\n      const zipped = zlib.gzipSync(content);\n      fs.writeFileSync(`${file}.gz`, zipped);\n    } catch (err) {\n      console.log(err); // eslint-disable\n    }\n  });\n  // callback();\n};\n"
  },
  {
    "path": "docs/gatsby-ssr.js",
    "content": "/**\n * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.\n *\n * See: https://www.gatsbyjs.org/docs/ssr-apis/\n */\n\n// You can delete this file if you're not using it\n"
  },
  {
    "path": "docs/package.json",
    "content": "{\n  \"name\": \"material-bread-docs\",\n  \"private\": true,\n  \"description\": \"React and React Native Material Design Components\",\n  \"version\": \"0.1.0\",\n  \"dependencies\": {\n    \"@babel/plugin-transform-flow-strip-types\": \"^7.9.0\",\n    \"babel-plugin-react-native-web\": \"^0.10.1\",\n    \"color\": \"^3.1.2\",\n    \"flexboxgrid\": \"^6.3.1\",\n    \"gatsby\": \"^2.19.17\",\n    \"gatsby-image\": \"^2.2.41\",\n    \"gatsby-plugin-alias-imports\": \"^1.0.5\",\n    \"gatsby-plugin-compile-es6-packages\": \"^1.2.0\",\n    \"gatsby-plugin-google-analytics\": \"^2.1.35\",\n    \"gatsby-plugin-layout\": \"^1.1.22\",\n    \"gatsby-plugin-manifest\": \"^2.3.3\",\n    \"gatsby-plugin-offline\": \"^2.2.10\",\n    \"gatsby-plugin-react-helmet\": \"^3.1.22\",\n    \"gatsby-plugin-react-native-web\": \"^2.0.0-beta.0\",\n    \"gatsby-plugin-sharp\": \"^2.4.5\",\n    \"gatsby-plugin-sitemap\": \"^2.2.27\",\n    \"gatsby-remark-images\": \"^3.1.44\",\n    \"gatsby-remark-normalize-paths\": \"^1.0.0\",\n    \"gatsby-remark-prismjs\": \"^3.3.31\",\n    \"gatsby-source-filesystem\": \"^2.1.48\",\n    \"gatsby-transformer-remark\": \"^2.6.51\",\n    \"gatsby-transformer-sharp\": \"^2.3.14\",\n    \"prismjs\": \"^1.19.0\",\n    \"prop-types\": \"^15.7.2\",\n    \"react\": \"^16.12.0\",\n    \"react-dom\": \"^16.12.0\",\n    \"react-github-btn\": \"^1.1.1\",\n    \"react-helmet\": \"^5.2.1\",\n    \"react-live\": \"^1.12.0\",\n    \"react-native-vector-icons\": \"^6.6.0\",\n    \"react-native-web\": \"^0.11.7\",\n    \"react-responsive\": \"8.0.0-beta.1\",\n    \"react-scrollspy\": \"^3.4.2\",\n    \"react-tooltip\": \"^3.11.6\",\n    \"react-window\": \"^1.8.5\"\n  },\n  \"devDependencies\": {\n    \"@babel/plugin-proposal-export-default-from\": \"^7.8.3\",\n    \"@babel/plugin-proposal-export-namespace-from\": \"^7.8.3\",\n    \"babel-preset-gatsby\": \"^0.1.11\",\n    \"eslint-import-resolver-alias\": \"^1.1.2\",\n    \"eslint-plugin-import\": \"^2.20.1\",\n    \"prettier\": \"^1.19.1\"\n  },\n  \"keywords\": [\n    \"gatsby\"\n  ],\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"build\": \"gatsby build\",\n    \"develop\": \"gatsby develop\",\n    \"build-deploy\": \"gatsby build && rm -r ../gh && mv public ../gh\",\n    \"format\": \"prettier --write src/**/*.{js,jsx}\",\n    \"production\": \"gatsby serve -H 0.0.0.0 -p 80\",\n    \"start\": \"gatsby serve -H 0.0.0.0 -p 80\",\n    \"serve\": \"gatsby serve\",\n    \"test\": \"echo \\\"Write tests! -> https://gatsby.dev/unit-testing\\\"\"\n  }\n}\n"
  },
  {
    "path": "docs/src/blog/baking-material/1-appbar-bottom.md",
    "content": "---\ntitle: 'Baking Material Bread 1: Material Appbar Bottom'\ndate: '2020-01-03'\nslug: /post/material-appbar-bottom-react-native\ndescription: 'How to build a Material Appbar Bottom in React Native'\ntags: ['baking-material', 'react-native', 'components']\ncategories: ['components']\n---\n\n## Test\n"
  },
  {
    "path": "docs/src/components/BackgroundColors/BackgroundColors.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nclass BackgroundColors extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    href: PropTypes.string,\n    children: PropTypes.node,\n    style: PropTypes.object,\n  };\n\n  render() {\n    const { children, style, isAppbar } = this.props;\n    return (\n      <div style={{}}>\n        <div\n          style={{\n            position: 'absolute',\n            top: isAppbar ? 40 : 0,\n            right: 0,\n            width: 0,\n            height: 0,\n            borderStyle: 'solid',\n            borderWidth: '0 660px 220px 0',\n            borderColor: 'transparent #2196F3 transparent transparent',\n          }}\n        />\n        <div\n          style={{\n            position: 'absolute',\n            top: isAppbar ? 40 : 0,\n            right: 0,\n            width: 0,\n            height: 0,\n            borderStyle: 'solid',\n            borderWidth: '0 600px 200px 0',\n            borderColor: 'transparent #66BB6A transparent transparent',\n          }}\n        />\n      </div>\n    );\n  }\n}\n\nexport default BackgroundColors;\n"
  },
  {
    "path": "docs/src/components/BrowserCSS.js",
    "content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport IphoneX from './Iphonex';\nimport Pixel3xl from './Pixel3xl';\n\nconst BrowserCSS = ({ children, preview }) => {\n  if (preview == 'web') {\n    return (\n      <div\n        style={{\n          height: 550,\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n        }}>\n        <div\n          className=\"browser\"\n          style={{ height: 475, margin: 0, overflow: 'hidden' }}>\n          <div className=\"browser_bar\">\n            <div className=\"browser_bar_btns\">\n              <div className=\"browser_bar_btn browser_bar_btn--close\" />\n              <div className=\"browser_bar_btn browser_bar_btn--mini\" />\n              <div className=\"browser_bar_btn browser_bar_btn--resize\" />\n            </div>\n            <div className=\"browser__bar__search\" />\n\n            <i className=\"fa fa-plus browser__bar__plus\" />\n\n            {/* <div className=\"browser_bar_tabs\">\n              <div className=\"browser_bar_tab\" />\n              <div className=\"browser_bar_tab active\">\n                <span>Bread</span>\n              </div>\n              <div className=\"browser_bar_tab\" />\n            </div> */}\n          </div>\n          <div className=\"browser_body\">{children}</div>\n        </div>\n      </div>\n    );\n  } else if (preview == 'ios') {\n    return (\n      <div\n        style={{\n          height: 550,\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n        }}>\n        <IphoneX>{children}</IphoneX>\n      </div>\n    );\n  } else if (preview == 'android') {\n    return (\n      <div\n        style={{\n          height: 550,\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n        }}>\n        <Pixel3xl>{children}</Pixel3xl>\n      </div>\n    );\n  } else if (preview == 'desktop') {\n    return (\n      <div\n        style={{\n          height: 550,\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n        }}>\n        <div className=\"browser\" style={{ height: 475, margin: 0 }}>\n          <div className=\"browser_bar browser__desktop__bar\">\n            <div className=\"browser_bar_btns\">\n              <div className=\"browser_bar_btn browser_bar_btn--close\" />\n              <div className=\"browser_bar_btn browser_bar_btn--mini\" />\n              <div className=\"browser_bar_btn browser_bar_btn--resize\" />\n            </div>\n            <span className=\"browser__desktop__title\">Desktop App</span>\n          </div>\n          <div className=\"browser_body\">{children}</div>\n        </div>\n      </div>\n    );\n  }\n  return <div>{children}</div>;\n};\n\nBrowserCSS.propTypes = {\n  children: PropTypes.node,\n  preview: PropTypes.string,\n};\n\nexport default BrowserCSS;\n"
  },
  {
    "path": "docs/src/components/CodeBlock.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Prismjs from 'prismjs';\nimport '../styles/components/CodeBlock.css';\n\nclass CodeBlock extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    code: PropTypes.string,\n    canCopy: PropTypes.bool,\n    language: PropTypes.string,\n    small: PropTypes.bool,\n    style: PropTypes.object,\n    fontSize: PropTypes.number,\n  };\n\n  state = {\n    copySuccess: false,\n  };\n\n  componentDidMount() {\n    Prismjs.highlightAll();\n  }\n\n  copyToClipboard = () => {\n    var textField = document.createElement('textarea');\n    textField.innerHTML = this.props.code;\n    document.body.appendChild(textField);\n    textField.select();\n    document.execCommand('copy');\n    textField.remove();\n\n    this.setState({ copySuccess: true }, () => {\n      setTimeout(() => this.setState({ copySuccess: false }), 1000);\n    });\n  };\n\n  render() {\n    const { code, canCopy, language, small, style, fontSize } = this.props;\n    const { copySuccess } = this.state;\n    return (\n      <pre\n        className={'CodeBlock'}\n        style={{\n          width: small ? 'auto' : 'auto',\n          paddingRight: small ? 44 : 16,\n          boxShadow: '2px 2px 8px 0px rgba(46, 61, 73, 0.15)',\n          ...style,\n        }}>\n        <code\n          ref={codeArea => (this.codeArea = codeArea)}\n          className={language || 'language-jsx'}\n          style={{\n            fontSize: fontSize ? fontSize : 14,\n          }}>\n          {code}\n        </code>\n\n        {canCopy ? (\n          <button\n            onClick={this.copyToClipboard}\n            className={'copy__button'}\n            style={{ fontSize: small ? 11 : 14, padding: small ? 5 : 8 }}>\n            {copySuccess ? 'Copied' : 'Copy'}\n          </button>\n        ) : null}\n      </pre>\n    );\n  }\n}\n\nexport default CodeBlock;\n"
  },
  {
    "path": "docs/src/components/CodeInline.js",
    "content": "import React, { Component, Fragment } from 'react';\nimport PropTypes from 'prop-types';\n\nclass CodeInline extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    code: PropTypes.node,\n    type: PropTypes.string,\n  };\n\n  render() {\n    const { type } = this.props;\n    let color = 'black';\n    if (type == 'prop') {\n      color = '#00897B';\n    } else if (type == 'value') {\n      color = '#8E24AA';\n    } else if (type == 'element') {\n      color = '#E91E63';\n    } else if (type == 'file') {\n      color = '#0288D1';\n    }\n    return (\n      <Fragment>\n        {' '}\n        <code\n          style={{\n            backgroundColor: '#f1f1f1',\n            color: color,\n            fontFamily: 'monospace',\n            padding: 5,\n            borderRadius: 4,\n            whiteSpace: 'nowrap',\n            fontSize: 11,\n            letterSpacing: 0.6,\n          }}>\n          {this.props.code}\n        </code>{' '}\n      </Fragment>\n    );\n  }\n}\n\nexport default CodeInline;\n"
  },
  {
    "path": "docs/src/components/ColorPalette/ColorBlock/ColorBlock.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { default as ColorTool } from 'color';\nimport { Ripple } from '../../../../../src';\nimport { View, Text } from 'react-native';\nimport styles from './ColorBlock.styles';\n\nexport default class ColorBlock extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    color: PropTypes.string,\n    children: PropTypes.node,\n    header: PropTypes.string,\n  };\n\n  copyToClipboard = () => {\n    var textField = document.createElement('textarea');\n    textField.innerHTML = this.props.color;\n    document.body.appendChild(textField);\n    textField.select();\n    document.execCommand('copy');\n    textField.remove();\n  };\n\n  render() {\n    const { name, color, header } = this.props;\n    const textColor = ColorTool(color).isLight() ? 'black' : 'white';\n\n    return (\n      <Ripple\n        key={name}\n        onClick={this.copyToClipboard}\n        style={[\n          styles.ripple,\n          {\n            height: header ? 130 : 50,\n            backgroundColor: color,\n          },\n        ]}>\n        <View>\n          {header ? <Text style={{ color: textColor }}>{header}</Text> : null}\n        </View>\n        <View style={styles.textRow}>\n          <Text style={{ color: textColor }}>{name}</Text>\n          <Text style={{ color: textColor }}>{color}</Text>\n        </View>\n      </Ripple>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/components/ColorPalette/ColorBlock/ColorBlock.styles.js",
    "content": "const styles = {\n  ripple: {\n    padding: 16,\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'space-between',\n    cursor: 'pointer',\n    width: '100%',\n  },\n  textRow: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  },\n};\n\nexport default styles;\n"
  },
  {
    "path": "docs/src/components/ColorPalette/ColorBlock/index.js",
    "content": "export default from './ColorBlock';\n"
  },
  {
    "path": "docs/src/components/ColorPalette/ColorPalette.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport ColorBlock from './ColorBlock';\nimport { Colors } from '../../../../src/index';\n\nconst palleteList = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];\nconst palleteListExtra = ['A100', 'A200', 'A400', 'A700'];\n\nexport default class ColorPalette extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    color: PropTypes.string,\n    name: PropTypes.string,\n    hasExtra: PropTypes.bool,\n    style: PropTypes.object,\n  };\n\n  render() {\n    const { color, name, hasExtra, style } = this.props;\n    return (\n      <div style={style}>\n        <ColorBlock\n          key={500}\n          name={500}\n          color={Colors[color][500]}\n          header={name}\n        />\n        {palleteList.map(item => {\n          return (\n            <ColorBlock\n              key={item.name}\n              name={item}\n              color={Colors[color][item]}\n            />\n          );\n        })}\n        {hasExtra\n          ? palleteListExtra.map(item => {\n              return (\n                <ColorBlock\n                  key={item.name}\n                  name={item}\n                  color={Colors[color][item]}\n                />\n              );\n            })\n          : null}\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/components/ColorPalette/FullPalette.js",
    "content": "import React, { Component } from 'react';\nimport ColorPallete from './ColorPalette';\n\nconst colorList = [\n  { name: 'Red', color: 'red', hasExtra: true },\n  { name: 'Pink', color: 'pink', hasExtra: true },\n  { name: 'Purple', color: 'purple', hasExtra: true },\n  { name: 'Deep Purple', color: 'deepPurple', hasExtra: true },\n  { name: 'Indigo', color: 'indigo', hasExtra: true },\n  { name: 'Blue', color: 'blue', hasExtra: true },\n  { name: 'Light Blue', color: 'lightBlue', hasExtra: true },\n  { name: 'Cyan', color: 'cyan', hasExtra: true },\n  { name: 'Teal', color: 'teal', hasExtra: true },\n  { name: 'Green', color: 'green', hasExtra: true },\n  { name: 'Light Green', color: 'lightGreen', hasExtra: true },\n  { name: 'Lime', color: 'lime', hasExtra: true },\n  { name: 'Yellow', color: 'yellow', hasExtra: true },\n  { name: 'Amber', color: 'amber', hasExtra: true },\n  { name: 'Orange', color: 'orange', hasExtra: true },\n  { name: 'Brown', color: 'brown' },\n  { name: 'Grey', color: 'grey' },\n  { name: 'Blue Grey', color: 'blueGrey' },\n];\n\nclass FullPalette extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  render() {\n    return (\n      <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>\n        {colorList.map(item => {\n          return (\n            <ColorPallete\n              key={item.name}\n              color={item.color}\n              name={item.name}\n              hasExtra={item.hasExtra}\n              style={{\n                marginBottom: 16,\n                marginRight: 16,\n                flexGrow: 0,\n                flexShrink: 0,\n                flexBasis: 'calc(30% - 16)',\n                minWidth: 250,\n              }}\n            />\n          );\n        })}\n      </div>\n    );\n  }\n}\n\nexport default FullPalette;\n"
  },
  {
    "path": "docs/src/components/ComponentPage/ComponentDemo.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { LiveEdit, ComponentDescription, Section } from '@components';\n\nclass ComponentDemo extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    sectionName: PropTypes.string,\n    sectionHref: PropTypes.string,\n    sectionId: PropTypes.string,\n    description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n    code: PropTypes.string,\n    scope: PropTypes.object,\n    noInline: PropTypes.bool,\n  };\n\n  render() {\n    const {\n      sectionName,\n      sectionHref,\n      sectionId,\n      description,\n      code,\n      scope,\n      noInline,\n      livePreviewBackground,\n    } = this.props;\n    return (\n      <Section name={sectionName} href={sectionHref} id={sectionId}>\n        <ComponentDescription text={description} />\n        <LiveEdit\n          code={code}\n          scope={scope}\n          noInline={noInline}\n          livePreviewBackground={livePreviewBackground}\n        />\n      </Section>\n    );\n  }\n}\n\nexport default ComponentDemo;\n"
  },
  {
    "path": "docs/src/components/ComponentPage/ComponentDemoHeader.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Section, ComponentDescription, Link } from '@components';\n\nclass ComponentDemoHeader extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n    pageHref: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n  };\n\n  _defaultDemoHeader() {\n    return (\n      <div>\n        You can see even more examples in the{' '}\n        <Link href=\"https://codypearce.github.io/material-bread/\">\n          Storybook environment.\n        </Link>\n      </div>\n    );\n  }\n\n  render() {\n    const { pageHref, description } = this.props;\n    return (\n      <Section name=\"Demos\" href={`${pageHref}#demos`} id=\"demos\">\n        <ComponentDescription\n          text={description ? description : this._defaultDemoHeader()}\n        />\n      </Section>\n    );\n  }\n}\n\nexport default ComponentDemoHeader;\n"
  },
  {
    "path": "docs/src/components/ComponentPage/ComponentDescription.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nclass ComponentDescription extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  };\n\n  render() {\n    const { text } = this.props;\n    return (\n      <div\n        style={{\n          color: 'rgba(0, 0, 0, 0.57)',\n          fontSize: 14,\n          lineHeight: 1.6,\n          marginBottom: 16,\n        }}>\n        {text}\n      </div>\n    );\n  }\n}\n\nexport default ComponentDescription;\n"
  },
  {
    "path": "docs/src/components/ComponentPage/ComponentHeader.js",
    "content": "import React, { Component, Fragment } from 'react';\nimport PropTypes from 'prop-types';\n\nimport PageTitle from '../PageTitle';\nimport ComponentSubtitle from './ComponentSubtitle';\nimport CodeBlock from '../CodeBlock';\n\nclass ComponentHeader extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    description: PropTypes.string,\n    docsLink: PropTypes.string,\n    title: PropTypes.string,\n    code: PropTypes.string,\n  };\n\n  render() {\n    const { title, description, docsLink, code } = this.props;\n    return (\n      <Fragment>\n        <PageTitle>{title}</PageTitle>\n        <ComponentSubtitle description={description} docsLink={docsLink} />\n        <div className=\"row\">\n          <CodeBlock code={code} canCopy small />\n        </div>\n      </Fragment>\n    );\n  }\n}\n\nexport default ComponentHeader;\n"
  },
  {
    "path": "docs/src/components/ComponentPage/ComponentMainDemo.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { LiveEdit, ComponentDescription, Section } from '@components';\n\nclass ComponentDemo extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    pageHref: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n    description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n    code: PropTypes.string,\n    scope: PropTypes.object,\n    noInline: PropTypes.bool,\n    livePreviewBackground: PropTypes.string,\n  };\n\n  render() {\n    const {\n      pageHref,\n      description,\n      code,\n      scope,\n      noInline,\n      livePreviewBackground,\n    } = this.props;\n    return (\n      <Section name=\"Component\" href={`${pageHref}#usage`} id=\"component\">\n        <ComponentDescription text={description} />\n        <LiveEdit\n          code={code}\n          scope={scope}\n          noInline={noInline}\n          livePreviewBackground={livePreviewBackground}\n        />\n      </Section>\n    );\n  }\n}\n\nexport default ComponentDemo;\n"
  },
  {
    "path": "docs/src/components/ComponentPage/ComponentPageLayout.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport ComponentHeader from './ComponentHeader';\nimport SideScrollMenu from '../SideScrollMenu';\nimport { Helmet } from '@components';\nimport Prism from 'prismjs';\n\nrequire('prismjs/components/prism-jsx.min');\nrequire('prismjs/themes/prism-tomorrow.css');\n\nclass ComponentPageLayout extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    description: PropTypes.string,\n    docsLink: PropTypes.string,\n    title: PropTypes.string,\n    componentName: PropTypes.string,\n    importCode: PropTypes.string,\n    sideScrollMenuItems: PropTypes.array,\n    children: PropTypes.node,\n  };\n\n  componentDidMount() {\n    Prism.highlightAll();\n  }\n\n  render() {\n    const {\n      title,\n      description,\n      docsLink,\n      importCode,\n      children,\n      sideScrollMenuItems,\n    } = this.props;\n\n    return (\n      <div style={{ marginBottom: 24, position: 'relative' }}>\n        <Helmet title={title} description={description} />\n        <SideScrollMenu items={sideScrollMenuItems} />\n        <ComponentHeader\n          title={title}\n          description={description}\n          docsLink={docsLink}\n          code={importCode}\n        />\n\n        {children}\n      </div>\n    );\n  }\n}\n\nexport default ComponentPageLayout;\n"
  },
  {
    "path": "docs/src/components/ComponentPage/ComponentProps.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { PropsTable, ComponentDescription, Section } from '@components';\n\nclass ComponentProps extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    pageHref: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n    description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n    propData: PropTypes.array,\n  };\n\n  render() {\n    const { pageHref, description, propData } = this.props;\n    return (\n      <Section name=\"Props\" href={`${pageHref}#props`} id=\"props\">\n        <ComponentDescription text={description} />\n        <div\n          style={{\n            width: 'auto',\n            overflowX: 'auto',\n            backgroundColor: 'transparent',\n            boxShadow:\n              '0 2px 4px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.08)',\n            borderBottomRightRadius: 6,\n            borderBottomLeftRadius: 6,\n          }}>\n          <PropsTable data={propData} />\n        </div>\n      </Section>\n    );\n  }\n}\n\nexport default ComponentProps;\n"
  },
  {
    "path": "docs/src/components/ComponentPage/ComponentSubtitle.js",
    "content": "import React, { Component, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport Link from '../Link';\nclass ComponentSubtitle extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    description: PropTypes.string,\n    docsLink: PropTypes.string,\n  };\n\n  _renderDocsLink() {\n    const { docsLink } = this.props;\n    return (\n      <Fragment>\n        {'  - '}\n        <Link href={docsLink}>Material Docs</Link>\n      </Fragment>\n    );\n  }\n\n  render() {\n    const { description, docsLink } = this.props;\n    return (\n      <p style={{ color: 'rgba(0, 0, 0, 0.67)', marginTop: 16 }}>\n        {description}\n        {docsLink ? this._renderDocsLink() : null}\n      </p>\n    );\n  }\n}\n\nexport default ComponentSubtitle;\n"
  },
  {
    "path": "docs/src/components/ComponentPage/ComponentUsage.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { CodeBlock, ComponentDescription, Section } from '@components';\n\nclass ComponentUsage extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    pageHref: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n    description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n    propData: PropTypes.array,\n    code: PropTypes.string,\n  };\n\n  render() {\n    const { pageHref, code, description } = this.props;\n    return (\n      <Section name=\"Usage\" href={`${pageHref}#usage`} id=\"usage\">\n        <ComponentDescription text={description} />\n        <CodeBlock code={code} canCopy />\n      </Section>\n    );\n  }\n}\n\nexport default ComponentUsage;\n"
  },
  {
    "path": "docs/src/components/Drawer/DrawerContent.js",
    "content": "import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport DrawerItem from './DrawerItem';\nimport DrawerItemExpand from './DrawerItemExpand';\nimport {\n  gettingStartedPages,\n  componentPages,\n  utilsPages,\n  stylePages,\n  contributingPages,\n} from '../../navigation';\nimport DrawerHeader from './DrawerHeader';\n\nexport default class DrawerContent extends React.PureComponent {\n  static propTypes = {\n    posts: PropTypes.array,\n  };\n\n  state = {\n    itemSelected: '',\n    sectionExpanded: '',\n  };\n\n  componentDidMount() {\n    if (typeof window !== `undefined`) {\n      const pathName = window.location.pathname;\n      const pathArray = pathName.split('/');\n\n      this.handleSectionExanded(pathArray);\n      this.handleSelectedItem(pathArray, pathName);\n    }\n  }\n\n  handleSectionExanded(pathArray) {\n    let sectionExpanded = '';\n    let arrayOfExpandedSections = [\n      'getting-started',\n      'style',\n      'components',\n      'utils',\n    ];\n\n    for (let i = 0; i < arrayOfExpandedSections.length; i++) {\n      if (pathArray.includes(arrayOfExpandedSections[i])) {\n        sectionExpanded = arrayOfExpandedSections[i];\n      }\n    }\n\n    this.selectSection(sectionExpanded);\n  }\n\n  handleSelectedItem(pathArray, pathName) {\n    var name = 'home';\n    if (pathName !== '/') {\n      name = pathArray[pathArray.length - 2];\n    }\n\n    const formatString = name.replace(/-/g, ' ');\n\n    this.selectItem(formatString);\n  }\n\n  selectItem = name => {\n    this.setState({\n      itemSelected: name,\n    });\n  };\n\n  selectSection = name => {\n    this.setState({\n      sectionExpanded: name,\n    });\n  };\n\n  render() {\n    const { itemSelected, sectionExpanded } = this.state;\n\n    return (\n      <div\n        style={{\n          background:\n            'linear-gradient(176deg, rgba(5,2,65,1) 0%, rgba(1,1,31,1) 100%)',\n\n          paddingLeft: 16,\n          paddingRight: 16,\n          overflow: 'overlay',\n          height: '100%',\n        }}>\n        <DrawerHeader />\n        <div>\n          <DrawerItem\n            label=\"Home\"\n            icon=\"home\"\n            link=\"/\"\n            selected={itemSelected == 'home'}\n            selectItem={this.selectItem}\n          />\n\n          <DrawerItemExpand\n            label=\"Getting Started\"\n            icon=\"rocket\"\n            reactPageMenuItems={gettingStartedPages}\n            itemSelected={itemSelected}\n            selectItem={this.selectItem}\n            selectSection={this.selectSection}\n            sectionExpanded={sectionExpanded == 'getting-started'}\n          />\n          <DrawerItemExpand\n            label=\"Style\"\n            icon=\"tint\"\n            reactPageMenuItems={stylePages}\n            selectItem={this.selectItem}\n            itemSelected={itemSelected}\n            selectSection={this.selectSection}\n            sectionExpanded={sectionExpanded == 'style'}\n          />\n          <DrawerItemExpand\n            label=\"Components\"\n            icon=\"cube\"\n            reactPageMenuItems={componentPages}\n            selectItem={this.selectItem}\n            itemSelected={itemSelected}\n            selectSection={this.selectSection}\n            sectionExpanded={sectionExpanded == 'components'}\n          />\n          <DrawerItemExpand\n            label=\"Utils\"\n            icon=\"wrench\"\n            reactPageMenuItems={utilsPages}\n            selectItem={this.selectItem}\n            itemSelected={itemSelected}\n            selectSection={this.selectSection}\n            sectionExpanded={sectionExpanded == 'utils'}\n          />\n          <DrawerItem\n            label=\"Storybook\"\n            icon=\"book\"\n            link=\"https://codypearce.github.io/material-bread/\"\n            selectItem={this.selectItem}\n          />\n          <DrawerItem\n            label=\"Showcase\"\n            icon=\"tablet-alt\"\n            link=\"/showcase\"\n            selectItem={this.selectItem}\n            selected={itemSelected == 'showcase'}\n          />\n          <DrawerItemExpand\n            label=\"Contributing\"\n            icon=\"handshake\"\n            reactPageMenuItems={contributingPages}\n            selectItem={this.selectItem}\n            itemSelected={itemSelected}\n            selectSection={this.selectSection}\n            sectionExpanded={sectionExpanded == 'contributing'}\n          />\n\n          {/* <DrawerItem\n            label=\"Baking Material\"\n            icon=\"bread-slice\"\n            link=\"/baking-material\"\n            selectItem={this.selectItem}\n            selected={itemSelected == 'baking-material'}\n          /> */}\n\n          <DrawerItem\n            label=\"About\"\n            icon=\"id-card\"\n            link=\"/about\"\n            selectItem={this.selectItem}\n            selected={itemSelected == 'about'}\n          />\n        </div>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/components/Drawer/DrawerHeader.js",
    "content": "import React from 'react';\n\nimport { Logo } from '@components';\nimport { BodyText } from '../../../../src';\n\nexport default class DrawerContent extends React.PureComponent {\n  render() {\n    return (\n      <div style={styles.container}>\n        <Logo width={77} height={64} style={{ width: 77 }} />\n        <BodyText style={styles.title}>Material Bread</BodyText>\n        <BodyText style={styles.version}>v0.2.10</BodyText>\n      </div>\n    );\n  }\n}\n\nconst styles = {\n  container: {\n    padding: '12px 6px',\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n    alignItems: 'center',\n    marginBottom: 10,\n    marginTop: 30,\n  },\n\n  title: {\n    color: 'rgba(255,255,255,1)',\n    fontWeight: '500',\n    margin: 0,\n    marginTop: 20,\n    letterSpacing: 1,\n  },\n  version: {\n    margin: 0,\n    color: 'rgba(255,255,255,.7)',\n    fontSize: 12,\n    marginTop: 8,\n  },\n};\n"
  },
  {
    "path": "docs/src/components/Drawer/DrawerItem.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Text } from 'react-native';\nimport { navigate } from '@reach/router';\nimport { ListItem } from '../../../../src';\n\nexport class DrawerItem extends Component {\n  static propTypes = {\n    classes: PropTypes.object,\n    label: PropTypes.string,\n    link: PropTypes.string,\n    selectItem: PropTypes.func,\n    selected: PropTypes.bool,\n    subItem: PropTypes.bool,\n    subsubItem: PropTypes.bool,\n    icon: PropTypes.string,\n  };\n\n  handleClick = () => {\n    const { selectItem, label, link } = this.props;\n    selectItem(label.toLowerCase());\n    navigate(link);\n  };\n\n  render() {\n    const { label, selected, subItem, subsubItem, icon } = this.props;\n    let marginLeft = subItem ? -6 : 0;\n    if (subsubItem) marginLeft = 8;\n    return (\n      <ListItem\n        onPress={this.handleClick}\n        selected={selected}\n        media={\n          icon ? (\n            <i\n              className={`fa fa-${icon}`}\n              style={{ fontSize: 20, width: 20, color: 'white' }}\n            />\n          ) : null\n        }\n        style={{\n          marginLeft,\n          paddingTop: subItem || subsubItem ? 12 : 16,\n          paddingBottom: subItem || subsubItem ? 12 : 16,\n          width: subsubItem ? 'calc(100% - 8)' : '100%',\n          borderRadius: 4,\n        }}\n        rippleProps={{ rippleColor: '#fff', rippleContainerBorderRadius: 4 }}>\n        <Text\n          style={{\n            fontSize: 11,\n            fontWeight: '400',\n            // paddingLeft,\n            color: '#fff',\n          }}>\n          {label}\n        </Text>\n      </ListItem>\n    );\n  }\n}\n\nexport default DrawerItem;\n"
  },
  {
    "path": "docs/src/components/Drawer/DrawerItemExpand.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ListExpand } from '../../../../src';\nimport DrawerItem from './DrawerItem';\n\nclass DrawerItemExpand extends Component {\n  static propTypes = {\n    classes: PropTypes.object,\n    label: PropTypes.string,\n    selectItem: PropTypes.func,\n    itemSelected: PropTypes.string,\n    sectionExpanded: PropTypes.bool,\n    markdownMenuItems: PropTypes.array,\n    reactPageMenuItems: PropTypes.array,\n    icon: PropTypes.string,\n  };\n  state = {\n    open: false,\n  };\n\n  componentDidMount() {\n    if (this.props.sectionExpanded) {\n      this.setState({ open: true });\n    }\n  }\n\n  componentDidUpdate(prevProps) {\n    if (this.props.sectionExpanded && !prevProps.sectionExpanded) {\n      this.setState({ open: true });\n    }\n  }\n\n  handleClick = () => {\n    this.setState(state => ({ open: !state.open }));\n  };\n\n  handleSubItemClick = name => {\n    const { selectItem } = this.props;\n    selectItem(name);\n  };\n\n  renderMarkdownMenuItems() {\n    const { markdownMenuItems, itemSelected } = this.props;\n    if (!markdownMenuItems) return null;\n    return markdownMenuItems.map(({ node: post }) => {\n      return (\n        <DrawerItem\n          key={post.id}\n          label={post.frontmatter.title}\n          link={post.frontmatter.path}\n          selected={post.frontmatter.title.toLowerCase() == itemSelected}\n          selectItem={() => this.handleSubItemClick(post.title.toLowerCase())}\n          subItem\n        />\n      );\n    });\n  }\n  renderReactMenuItems() {\n    const { reactPageMenuItems, itemSelected } = this.props;\n    if (!reactPageMenuItems) return null;\n    return reactPageMenuItems.map(post => {\n      return (\n        <DrawerItem\n          key={post.title}\n          label={post.title}\n          link={post.path}\n          selected={post.title.toLowerCase() == itemSelected}\n          selectItem={() => this.handleSubItemClick(post.title.toLowerCase())}\n          subItem\n          subsubItem={post.subsubItem}\n        />\n      );\n    });\n  }\n  render() {\n    const { label, icon } = this.props;\n\n    return (\n      <ListExpand\n        title={label}\n        titleStyle={{ fontSize: 11, fontWeight: '400', color: '#fff' }}\n        expandIconStyle={{ color: '#fff', fontSize: 16 }}\n        icon={\n          icon ? (\n            <i\n              className={`fa fa-${icon}`}\n              style={{ fontSize: 20, width: 20, color: 'white' }}\n            />\n          ) : null\n        }\n        rippleProps={{ rippleColor: '#fff', rippleContainerBorderRadius: 4 }}\n        style={{ paddingTop: 16, paddingBottom: 16, borderRadius: 4 }}>\n        {this.renderMarkdownMenuItems()}\n        {this.renderReactMenuItems()}\n      </ListExpand>\n    );\n  }\n}\n\nexport default DrawerItemExpand;\n"
  },
  {
    "path": "docs/src/components/Helmet.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Helmet } from 'react-helmet';\n\nclass HemletHelper extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    title: PropTypes.string,\n    description: PropTypes.string,\n    keywords: PropTypes.string,\n  };\n\n  render() {\n    const { title, description, keywords } = this.props;\n    return (\n      <Helmet>\n        <title>{title} | Material Bread </title>\n        <meta\n          name=\"description\"\n          content={\n            description ||\n            'Highly Customizable React Native Material Design Components'\n          }\n        />\n        <meta\n          name=\"keywords\"\n          content={keywords || 'react react native material design components'}\n        />\n      </Helmet>\n    );\n  }\n}\n\nexport default HemletHelper;\n"
  },
  {
    "path": "docs/src/components/HomeLiveEdit/HomeLiveEdit.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { LiveProvider, LiveError, LivePreview } from 'react-live';\n// import HomeLiveEditToolTip from './HomeLiveEditToolTip';\nimport BrowserCSS from '../BrowserCSS';\nimport { View, Image, Text } from 'react-native';\nimport {\n  Backdrop,\n  List,\n  ListItem,\n  Icon,\n  IconButton,\n  Avatar,\n  Heading,\n} from '../../../../src';\n\nconst thiscode = `\nclass Page extends React.Component {\n  render() {\n    const styles = {\n      backdropHeader: {\n        height: 56,\n        flexDirection: 'row',\n        alignItems: 'center',\n        borderRadius: 10\n      },\n      backdropHeaderTitle: {\n        fontSize: 18,\n        color: 'white',\n        marginLeft: 72,\n      },\n    };\n\n    const NavItem = ({ text, icon, selected }) => {\n      return (\n        <ListItem\n          text={text}\n          textStyle={{ color: 'white' }}\n          selected={selected}\n          style={{ backgroundColor: 'transparent' }}\n          icon={<Icon name={icon} size={24} color={'white'} />}\n        />\n      )\n    }\n\n    const backLayerRevealed = (\n      <View>\n        <View style={styles.backdropHeader}>\n          <Text style={styles.backdropHeaderTitle}>Navigation</Text>\n        </View>\n        <List style={{ backgroundColor: 'transparent' }}>\n          <NavItem text={'Home'} icon={'home'} selected />\n          <NavItem text={'Music'} icon={'music-note'} />\n          <NavItem text={'Favorites'} icon={'favorite'} />\n          <NavItem text={'Settings'} icon={'settings'} />\n        </List>\n      </View>\n    );\n\n    const backLayerConcealed = (\n      <View style={styles.backdropHeader}>\n        <Text style={styles.backdropHeaderTitle}>App</Text>\n      </View>\n    );\n\n    const album = (\n      <Avatar\n        type=\"icon\"\n        content=\"album\"\n        contentColor={'#ececec'}\n        color={'#a3a3a3'}\n        size={30}\n      />\n    );\n    const iconFav = <IconButton name=\"favorite\" size={24} color=\"#6e6e6e\" />\n    \n    const AlbumItem = ({ text, secondaryText }) => ( \n        <ListItem \n          text={text}\n          secondaryText={secondaryText} \n          media={album} \n          actionItem={iconFav} \n          textStyle={{fontSize: 12, flex: 1}}\n          secondaryTextStyle={{fontSize: 10}}\n          style={{width: '100%', paddingLeft: 12, paddingRight: 12}}\n        /> \n    );\n\n    return (\n      <View style={{marginBottom: 80}}>\n        <Backdrop backLayerConcealed={backLayerConcealed} backLayerRevealed={backLayerRevealed} offset={249} >\n            <Heading text={'Albums'} style={{ marginLeft: 20, fontSize: 14,}} />\n            <AlbumItem text={'Back in Black'} secondaryText={'AC/DC'} />\n            <AlbumItem text={'Hotel California'} secondaryText={'Eagles'} />\n            <AlbumItem text={'Paranoid'} secondaryText={'Black Sabbath'} />\n            <AlbumItem text={'Led Zeppelin IV'} secondaryText={'Led Zeppelin'} />\n        </Backdrop>\n      </View>\n    );\n  }\n}\n`;\nclass LiveEdit extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    code: PropTypes.string,\n    scope: PropTypes.object,\n    syntax: PropTypes.string,\n    noInline: PropTypes.bool,\n    preview: PropTypes.string,\n  };\n\n  render() {\n    const { noInline, preview } = this.props;\n    if (typeof window == 'undefined') {\n      return null;\n    }\n    return (\n      <LiveProvider\n        code={thiscode}\n        scope={{\n          Backdrop,\n          List,\n          ListItem,\n          Icon,\n          IconButton,\n          Avatar,\n          Heading,\n          View,\n          Image,\n          Text,\n        }}\n        mountStylesheet={false}\n        noInline={noInline}\n        style={{\n          borderRadius: 6,\n          backgroundColor: 'transparent',\n          maxWidth: 800,\n          margin: '0 auto',\n          width: '100%',\n        }}>\n        <BrowserCSS preview={preview}>\n          <LivePreview\n            style={{\n              width: '100%',\n              borderTopRightRadius: 6,\n              borderTopLeftRadius: 6,\n              backgroundColor: 'transparent',\n              height: '100%',\n            }}\n          />\n        </BrowserCSS>\n\n        <LiveError\n          style={{\n            backgroundColor: '#ffebeb',\n            color: '#EF5350',\n            padding: 24,\n            borderBottomLeftRadius: 6,\n            borderBottomRightRadius: 6,\n          }}\n        />\n      </LiveProvider>\n    );\n  }\n}\n\nexport default LiveEdit;\n"
  },
  {
    "path": "docs/src/components/HomeLiveEdit/HomeLiveEditToolTip.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport ReactTooltip from 'react-tooltip';\nclass LiveEditToolTip extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    children: PropTypes.node,\n  };\n\n  render() {\n    const { children } = this.props;\n    return (\n      <div\n        style={{\n          position: 'relative',\n        }}>\n        <span\n          data-tip={\n            'You can edit/add props, elements, or components. Errors will show below.'\n          }\n          style={{\n            color: '#00a2b1',\n            position: 'absolute',\n            right: 0,\n            padding: 10,\n            marginRight: 8,\n            fontSize: 12,\n            cursor: 'pointer',\n          }}>\n          Live Editing\n        </span>\n        <ReactTooltip place={'top'} effect={'solid'} />\n        {children}\n      </div>\n    );\n  }\n}\n\nexport default LiveEditToolTip;\n"
  },
  {
    "path": "docs/src/components/IconDirectory/IconBlock.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Text } from 'react-native';\nimport { Icon, Ripple, Hoverable } from '../../../../src/index';\n\nexport default class IconBlock extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    name: PropTypes.string,\n  };\n\n  state = {\n    backgroundColor: 'rgba(0,0,0,0)',\n  };\n\n  handleHover(toggle) {\n    this.setState({\n      backgroundColor: toggle ? 'rgba(0,0,0,.18)' : 'rgba(0,0,0,0)',\n    });\n  }\n\n  copyToClipboard = () => {\n    var textField = document.createElement('textarea');\n    textField.innerHTML = this.props.name;\n    document.body.appendChild(textField);\n    textField.select();\n    document.execCommand('copy');\n    textField.remove();\n  };\n\n  render() {\n    const { name } = this.props;\n    return (\n      <Hoverable\n        onHoverIn={() => this.handleHover(true)}\n        onHoverOut={() => this.handleHover(false)}\n        key={name}>\n        {() => (\n          <Ripple\n            rippleContainerBorderRadius={6}\n            style={[\n              styles.iconBlock,\n              { backgroundColor: this.state.backgroundColor },\n            ]}\n            onClick={this.copyToClipboard}>\n            <Icon\n              name={name}\n              color={'rgba(0,0,0,.87)'}\n              size={48}\n              style={styles.icon}\n            />\n            <Text style={styles.iconName}>{name}</Text>\n          </Ripple>\n        )}\n      </Hoverable>\n    );\n  }\n}\n\nconst styles = {\n  iconBlock: {\n    display: 'flex',\n    flexDirection: 'column',\n    width: 116,\n    height: 116,\n    borderRadius: 6,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  icon: {\n    marginBottom: 16,\n  },\n  iconName: {\n    fontSize: 12,\n    color: 'rgba(0,0,0,.6)',\n    textAlign: 'center',\n  },\n};\n"
  },
  {
    "path": "docs/src/components/IconDirectory/IconDirectory.js",
    "content": "import React, { Component } from 'react';\nimport icons from 'react-native-vector-icons/glyphmaps/MaterialIcons.json';\nimport IconBlock from './IconBlock';\n\nimport { FixedSizeGrid as Grid } from 'react-window';\nimport { Searchfield } from '../../../../src/index';\n\nexport default class IconDirectory extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  state = {\n    search: '',\n  };\n\n  _getResults = () => {\n    const { search } = this.state;\n\n    const iconNames = Object.keys(icons);\n\n    if (search) {\n      const query = search.toLowerCase();\n\n      return iconNames.filter(\n        item =>\n          item.includes(query.replace(/\\s/g, '-')) ||\n          item.replace(/-/g, '').includes(query),\n      );\n    }\n\n    return iconNames;\n  };\n\n  _handleInputChange = value => {\n    this.setState({ search: value });\n  };\n\n  renderRow = ({ columnIndex, rowIndex, style }) => {\n    const searchResults = this._getResults();\n\n    const name = searchResults[columnIndex + rowIndex * 5];\n    return (\n      <div style={style}>\n        <IconBlock name={name} />\n      </div>\n    );\n  };\n  render() {\n    const searchResults = this._getResults();\n    if (typeof window == 'undefined') {\n      return null;\n    }\n    return (\n      <div style={styles.container}>\n        <Searchfield\n          color={'rgb(38, 50, 56)'}\n          value={this.state.search}\n          onChangeText={this._handleInputChange}\n          onCloseIcon={() => this.setState({ search: '' })}\n          placeholder=\"Search Icons\"\n          style={{ height: 50, width: '100%', maxWidth: 820, marginBottom: 20 }}\n        />\n        <div style={styles.results}>\n          <Grid\n            columnCount={5}\n            columnWidth={158}\n            height={600}\n            rowCount={searchResults.length / 5}\n            rowHeight={116}\n            width={820}>\n            {this.renderRow}\n          </Grid>\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = {\n  container: {\n    marginBottom: 40,\n  },\n  results: {\n    display: 'flex',\n    flexWrap: 'wrap',\n  },\n  searchBar: {\n    border: 0,\n    display: 'block',\n    width: '100%',\n    padding: 12,\n    backgroundColor: '#f0f0f0',\n    borderRadius: 3,\n  },\n};\n"
  },
  {
    "path": "docs/src/components/Iphonex.js",
    "content": "import React from 'react';\nimport PropTypes from 'prop-types';\n\nfunction IphoneX({ children }) {\n  return (\n    <div className=\"iphonex\">\n      <div className=\"iphonex__case\">\n        <div className=\"iphonex__top\">\n          <div className=\"iphonex__time\">10:30</div>\n          <i className=\"fa fa-wifi iphonex__wifi\" />\n          <i className=\"fa fa-battery-quarter iphonex__battery\" />\n        </div>\n        <div className=\"iphonex__notch\">\n          <div className=\"iphonex__speaker\" />\n          <div className=\"iphonex__camera\" />\n        </div>\n        <div className=\"iphonex__screen\">{children}</div>\n      </div>\n\n      <div className=\"iphonex__power\" />\n      <div className=\"iphonex__volume iphonex__volume--up\" />\n      <div className=\"iphonex__volume iphonex__volume--down\" />\n    </div>\n  );\n}\n\nIphoneX.propTypes = {\n  children: PropTypes.node,\n};\nexport default IphoneX;\n"
  },
  {
    "path": "docs/src/components/Layout/Header.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { IconButton, Ripple } from '../../../../src';\nimport github from '../../assets/github.svg';\nimport githubWhite from '../../assets/github--white.svg';\nimport { Appbar } from '../../../../src';\nimport MediaQuery from 'react-responsive';\n\nclass Header extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    classes: PropTypes.object,\n    handleDrawerToggle: PropTypes.func,\n    isTemporary: PropTypes.bool,\n  };\n\n  state = {\n    backgroundOverride: false,\n    isMobile: false,\n  };\n\n  componentDidMount() {\n    const location = window && window.location;\n    const pathName = location.pathname;\n    if (pathName == '/') {\n      this.setState({ backgroundOverride: true });\n    }\n\n    const mediaQuery = window.matchMedia('(min-width: 1000px)');\n\n    if (mediaQuery.matches) {\n      this.setState({ isMobile: false });\n    } else {\n      this.setState({ isMobile: true });\n    }\n    mediaQuery.addListener(mq => {\n      if (mq.matches) {\n        this.setState({ isMobile: false });\n      } else {\n        this.setState({ isMobile: true });\n      }\n    });\n  }\n\n  componentDidUpdate(prevProps, prevState) {\n    const location = window && window.location;\n    const pathName = location.pathname;\n\n    if (!prevState.backgroundOverride && pathName == '/') {\n      this.setState({ backgroundOverride: true });\n    } else if (prevState.backgroundOverride && pathName !== '/') {\n      this.setState({ backgroundOverride: false });\n    }\n  }\n\n  render() {\n    const { handleDrawerToggle, isTemporary } = this.props;\n    const { backgroundOverride, isMobile } = this.state;\n\n    let backgroundColor = isTemporary\n      ? 'linear-gradient(176deg, rgb(5, 2, 65) 0%, rgb(1, 1, 31) 100%)'\n      : 'transparent';\n\n    backgroundColor =\n      backgroundOverride && !isMobile ? 'transparent' : backgroundColor;\n\n    return (\n      <div>\n        <Appbar\n          position={'fixed'}\n          color={backgroundColor}\n          style={{\n            boxShadow: 'none',\n            zIndex: 10,\n            paddingHorizontal: 34,\n          }}\n          navigation={\n            <IconButton\n              color={backgroundOverride || isTemporary ? 'white' : '#263238'}\n              size={28}\n              name={'menu'}\n              onPress={handleDrawerToggle}\n            />\n          }\n          actionItems={[\n            <a\n              key={1}\n              href={'https://github.com/codypearce/material-bread'}\n              style={{ color: 'black' }}>\n              <Ripple\n                rippleContainerBorderRadius={100}\n                style={{\n                  width: 40,\n                  height: 40,\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                }}>\n                <MediaQuery maxWidth={1000}>\n                  {backgroundOverride && (\n                    <img style={{ width: 28, height: 28 }} src={githubWhite} />\n                  )}\n                </MediaQuery>\n\n                <MediaQuery minWidth={1000}>\n                  {backgroundOverride && (\n                    <img style={{ width: 28, height: 28 }} src={github} />\n                  )}\n                </MediaQuery>\n\n                <MediaQuery maxWidth={1180}>\n                  {isTemporary && !backgroundOverride && (\n                    <img style={{ width: 28, height: 28 }} src={githubWhite} />\n                  )}\n                </MediaQuery>\n\n                {!backgroundOverride && !isTemporary && (\n                  <img style={{ width: 28, height: 28 }} src={github} />\n                )}\n              </Ripple>\n            </a>,\n          ]}\n        />\n      </div>\n    );\n  }\n}\n\nexport default Header;\n"
  },
  {
    "path": "docs/src/components/Layout/PageLayout.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Helmet } from 'react-helmet';\n\nimport '../../../node_modules/flexboxgrid/css/flexboxgrid.min.css';\nimport '../../styles/global/global.css';\nimport Header from './Header';\nimport Prism from 'prismjs';\nimport favicon from '../../assets/favicon.ico';\nimport { Drawer } from '../../../../src/';\nimport DrawerContent from '../Drawer/DrawerContent';\n\nrequire('prismjs/components/prism-jsx.min');\nrequire('prismjs/themes/prism-tomorrow.css');\n\nexport default class PageLayout extends Component {\n  static propTypes = {\n    theme: PropTypes.object,\n    children: PropTypes.node,\n    posts: PropTypes.array,\n    pageContext: PropTypes.object,\n  };\n  state = {\n    mobileOpen: false,\n    isTemporary: true,\n    firstLoaded: false,\n    isMobile: false,\n  };\n\n  componentDidMount() {\n    Prism.highlightAll();\n    const location = window && window.location;\n    const hash = location.hash;\n    if (hash) {\n      const id = hash.split('#')[1].toString();\n      const el = document.getElementById(id);\n      if (el) {\n        el.scrollIntoView({\n          behavior: 'smooth',\n        });\n      }\n    }\n    const pathName = location.pathname;\n    if (pathName !== '/') {\n      this.setLarge();\n    } else if (pathName == '/') {\n      this.setSmall();\n    }\n\n    const mediaQuery = window.matchMedia('(min-width: 1180px)');\n\n    if (mediaQuery.matches && pathName != '/') {\n      this.setLarge();\n    } else {\n      this.setSmall();\n    }\n    mediaQuery.addListener(mq => {\n      if (mq.matches && pathName != '/') {\n        this.setLarge();\n      } else {\n        this.setSmall();\n      }\n    });\n\n    this.setState({ firstLoaded: true });\n  }\n\n  componentDidUpdate(prevProps, prevState) {\n    Prism.highlightAll();\n    this.handleDifferentLayouts(prevState);\n  }\n\n  setSmall = () => {\n    this.setState({ isTemporary: true, mobileOpen: false });\n  };\n\n  setLarge = () => {\n    this.setState({ isTemporary: false, mobileOpen: true });\n  };\n\n  handleDifferentLayouts = () => {\n    if (typeof window !== `undefined`) {\n      const location = window && window.location;\n      const pathName = location.pathname;\n      const width = window.innerWidth;\n      const { isTemporary } = this.state;\n\n      if (isTemporary && pathName !== '/' && width >= 1180) {\n        this.setLarge();\n      } else if (pathName == '/' && !isTemporary) {\n        this.setSmall();\n      }\n    }\n  };\n\n  handleDrawerToggle = () => {\n    this.setState(state => ({ mobileOpen: !state.mobileOpen }));\n  };\n\n  _renderMain() {\n    const { children, pageContext } = this.props;\n    const { isTemporary } = this.state;\n    if (pageContext.layout === 'home') {\n      return (\n        <main\n          style={{\n            padding: 0,\n            marginTop: 0,\n            minHeight: '100vh',\n          }}\n          className={`${\n            isTemporary ? 'main--temporaryDrawer' : 'main--permanentDrawer'\n          }`}>\n          {children}\n        </main>\n      );\n    }\n\n    return (\n      <main\n        className={`${\n          isTemporary ? 'main--temporaryDrawer' : 'main--permanentDrawer'\n        }`}>\n        {children}\n      </main>\n    );\n  }\n\n  render() {\n    const { posts, pageContext } = this.props;\n    const { isTemporary, isMobile } = this.state;\n    if (!this.state.firstLoaded)\n      return (\n        <div\n          style={{ width: '100vw', height: '100vh', backgroundColor: 'white' }}\n        />\n      );\n\n    return (\n      <div style={{ width: '100%', height: '100%' }}>\n        <Helmet\n          google-site-verification={\n            'pnInoKlqzLFjeCNTW6F-BnibL8xE4qnA7Tghks5dLwo'\n          }>\n          <title>Material Bread</title>\n          <meta charSet=\"utf-8\" />\n          <meta\n            name=\"description\"\n            content=\"Highly Customizable React Native Material Design Components\"\n          />\n          <meta\n            name=\"keywords\"\n            content=\"react react native material design components\"\n          />\n\n          <meta\n            name=\"google-site-verification\"\n            content=\"pnInoKlqzLFjeCNTW6F-BnibL8xE4qnA7Tghks5dLwo\"\n          />\n\n          <link rel=\"shortcut icon\" href={favicon} />\n\n          <link\n            rel=\"stylesheet\"\n            href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,900\"\n          />\n          <link\n            rel=\"stylesheet\"\n            href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css\"\n          />\n          <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n        </Helmet>\n\n        <Drawer\n          open={this.state.mobileOpen}\n          onClose={this.handleDrawerToggle}\n          type={isTemporary ? 'modal' : 'permanent'}\n          drawerContent={<DrawerContent posts={posts} />}\n          position={'fixed'}\n          style={{\n            height: 'auto',\n            minHeight: '100%',\n            backgroundColor: '#f7f9fc',\n          }}\n          drawerStyle={{\n            borderRightWidth: 0,\n            height: '100%',\n          }}\n          scrimStyles={{ height: '100%' }}\n          width={250}>\n          <Header\n            handleDrawerToggle={this.handleDrawerToggle}\n            isTemporary={isTemporary}\n            isMobile={isMobile}\n          />\n          {this._renderMain()}\n        </Drawer>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/components/Link.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Hoverable } from '../../../src/index';\n\nclass Link extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    href: PropTypes.string,\n    children: PropTypes.node,\n    style: PropTypes.object,\n  };\n\n  state = {\n    color: '#060443',\n  };\n\n  handleHover(toggle) {\n    this.setState({ color: toggle ? '#1712b9' : '#060443' });\n  }\n\n  render() {\n    const { href, children, style } = this.props;\n    return (\n      <Hoverable\n        onHoverIn={() => this.handleHover(true)}\n        onHoverOut={() => this.handleHover(false)}>\n        <a\n          href={href}\n          style={{\n            color: this.state.color,\n            textDecoration: 'none',\n            ...style,\n          }}>\n          {children}\n        </a>\n      </Hoverable>\n    );\n  }\n}\n\nexport default Link;\n"
  },
  {
    "path": "docs/src/components/LiveEdit/LiveEdit.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';\nimport LiveEditToolTip from './LiveEditToolTip';\n\nclass LiveEdit extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    code: PropTypes.string,\n    scope: PropTypes.object,\n    syntax: PropTypes.string,\n    noInline: PropTypes.bool,\n    livePreviewBackground: PropTypes.string,\n  };\n\n  render() {\n    const { scope, code, syntax, noInline, livePreviewBackground } = this.props;\n    if (typeof window == 'undefined') {\n      return null;\n    }\n    return (\n      <LiveProvider\n        code={code}\n        scope={scope}\n        mountStylesheet={false}\n        noInline={noInline}\n        style={{\n          borderRadius: 6,\n          backgroundColor: '#fafafa',\n          boxShadow: '2px 2px 8px 0px rgba(46, 61, 73, 0.15)',\n          overflowX: 'auto',\n        }}>\n        <LivePreview\n          style={{\n            padding: 24,\n            minWidth: 450,\n\n            borderTopRightRadius: 6,\n            borderTopLeftRadius: 6,\n            backgroundColor: livePreviewBackground\n              ? livePreviewBackground\n              : '#fff',\n          }}\n        />\n        <LiveEditToolTip>\n          <LiveEditor\n            className={syntax || 'language-jsx'}\n            style={{\n              margin: 0,\n              fontSize: 14,\n              borderBottomLeftRadius: 6,\n              borderBottomRightRadius: 6,\n              paddingTop: 24,\n              paddingBottom: 20,\n              outline: 'none',\n              minWidth: 450,\n            }}\n          />\n        </LiveEditToolTip>\n\n        <LiveError\n          style={{\n            backgroundColor: '#ffebeb',\n            color: '#EF5350',\n            padding: 24,\n            borderBottomLeftRadius: 6,\n            borderBottomRightRadius: 6,\n            minWidth: 450,\n          }}\n        />\n      </LiveProvider>\n    );\n  }\n}\n\nexport default LiveEdit;\n"
  },
  {
    "path": "docs/src/components/LiveEdit/LiveEditToolTip.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport ReactTooltip from 'react-tooltip';\nclass LiveEditToolTip extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    children: PropTypes.node,\n  };\n\n  render() {\n    const { children } = this.props;\n    return (\n      <div\n        style={{\n          position: 'relative',\n        }}>\n        <span\n          data-tip={\n            'You can edit/add props, elements, or components. Errors will show below.'\n          }\n          style={{\n            color: '#00a2b1',\n            position: 'absolute',\n            right: 0,\n            padding: 10,\n            marginRight: 8,\n            fontSize: 12,\n            cursor: 'pointer',\n          }}>\n          Live Editing\n        </span>\n        <ReactTooltip place={'top'} effect={'solid'} />\n        {children}\n      </div>\n    );\n  }\n}\n\nexport default LiveEditToolTip;\n"
  },
  {
    "path": "docs/src/components/Logo/Logo.js",
    "content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport '../../styles/components/Logo.css';\n\nfunction Logo({ animated, width, height, style }) {\n  return (\n    <svg\n      width={width ? width : '387.502'}\n      height={height ? height : '320.398'}\n      viewBox=\"0 0 363.28359 300.3731\"\n      id=\"svg5967\"\n      style={{\n        filter: 'drop-shadow(rgba(0, 0, 0, 0.3) 6px 6px 8px)',\n        ...style,\n      }}\n      className={`Logo ${animated ? 'Logo--animated' : ''}`}>\n      <g id=\"layer1\" transform=\"translate(26.837 -286.146)\">\n        <g\n          id=\"g4186\"\n          color=\"#000\"\n          fontWeight=\"400\"\n          fontFamily=\"Open Sans\"\n          letterSpacing=\"0\"\n          wordSpacing=\"0\"\n          fillRule=\"evenodd\">\n          <path\n            d=\"m 154.92453,347.02574 -7.48868,-4.9532 -15.7818,-9.9066 -31.56367,-19.8132 -74.9862,23.0455 -24.31982983,68.45971 23.30650983,66.5185 0,115.6424 69.56348,0 34.78159,0 17.39095,0 9.09765,0 z\"\n            id=\"rect4160-1-5-8-49-1-6\"\n            overflow=\"visible\"\n            fill=\"#dcd09d\"\n            stroke=\"#dcd09d\"\n            className={`Logo__middle Logo__middle--1 `}\n          />\n          <path\n            d=\"m 154.68318,586.01885 9.09765,0 17.39095,0 34.78172,0 69.56334,0 0,-115.6424 23.30657,-66.5185 -24.31985,-68.45971 -74.98621,-23.0455 -31.56369,19.8132 -15.7818,9.9066 -7.48868,4.9532 z\"\n            id=\"path4882-6-1\"\n            overflow=\"visible\"\n            fill=\"#dac589\"\n            stroke=\"#dac589\"\n            className=\"Logo__middle Logo__middle--2\"\n          />\n          <path\n            id=\"path4930-1-5\"\n            d=\"m 311.29316,473.99195 0,112.0266 -42.01706,0 0,-114.7336 z\"\n            overflow=\"visible\"\n            fill=\"#bd986f\"\n            stroke=\"#bd986f\"\n            strokeLinejoin=\"round\"\n            className=\"Logo__crust Logo__crust--10\"\n          />\n          <path\n            id=\"path4928-1-0\"\n            d=\"m 335.94619,396.40095 -24.65303,77.591 -42.01706,-2.7071 21.18385,-65.3275 z\"\n            overflow=\"visible\"\n            fill=\"#a9845b\"\n            stroke=\"#a9845b\"\n            strokeLinejoin=\"round\"\n            className=\"Logo__crust Logo__crust--9\"\n          />\n          <path\n            id=\"path4926-2-2\"\n            d=\"m 303.4691,313.61814 32.47709,82.78281 -45.48624,9.5559 -19.09121,-56.37941 z\"\n            overflow=\"visible\"\n            fill=\"#8f6a41\"\n            stroke=\"#8f6a41\"\n            strokeLinejoin=\"round\"\n            className=\"Logo__crust Logo__crust--8\"\n          />\n          <path\n            id=\"path4924-1-9\"\n            d=\"m 215.99198,286.64574 87.47712,26.9724 -32.10036,35.9596 -53.85116,-16.6967 z\"\n            overflow=\"visible\"\n            fill=\"#7a552c\"\n            stroke=\"#7a552c\"\n            strokeLinejoin=\"round\"\n            className=\"Logo__crust Logo__crust--7\"\n          />\n          <path\n            id=\"path4930-5-6-3\"\n            d=\"m -1.6844798,473.99195 0,112.0266 42.0170598,0 0,-114.7336 z\"\n            overflow=\"visible\"\n            fill=\"#d0ab82\"\n            stroke=\"#d0ab82\"\n            strokeLinejoin=\"round\"\n            className=\"Logo__crust Logo__crust--1\"\n          />\n          <path\n            id=\"path4928-7-9-9\"\n            d=\"m -26.33744,396.40095 24.6529602,77.591 42.0170598,-2.7071 -21.18385,-65.3275 z\"\n            overflow=\"visible\"\n            fill=\"#bd986f\"\n            stroke=\"#bd986f\"\n            strokeLinejoin=\"round\"\n            className=\"Logo__crust Logo__crust--2\"\n          />\n          <path\n            id=\"path4926-7-9-6\"\n            d=\"m 6.1395802,313.61814 -32.4770202,82.78281 45.48617,9.5559 19.09121,-56.37941 z\"\n            overflow=\"visible\"\n            fill=\"#a9845b\"\n            stroke=\"#a9845b\"\n            strokeLinejoin=\"round\"\n            className=\"Logo__crust Logo__crust--3\"\n          />\n          <path\n            id=\"path4924-5-4-7\"\n            d=\"M 93.6167,286.64574 6.1395802,313.61814 38.23994,349.57774 92.0911,332.88104 Z\"\n            overflow=\"visible\"\n            fill=\"#8f6a41\"\n            stroke=\"#8f6a41\"\n            strokeLinejoin=\"round\"\n            className=\"Logo__crust Logo__crust--4\"\n          />\n          <path\n            id=\"rect4160-1-5-8-6-0-2\"\n            d=\"m 92.0911,332.88104 62.83343,39.71811 0,-45.41961 -61.30783,-40.5338 z\"\n            overflow=\"visible\"\n            fill=\"#7a552c\"\n            stroke=\"#7a552c\"\n            strokeLinejoin=\"round\"\n            className=\"Logo__crust Logo__crust--5\"\n          />\n          <path\n            id=\"rect4160-1-5-8-2-4\"\n            d=\"m 217.51758,332.88104 -62.83345,39.71811 0,-45.41961 61.30785,-40.5338 z\"\n            overflow=\"visible\"\n            fill=\"#694423\"\n            stroke=\"#694423\"\n            strokeLinejoin=\"round\"\n            className=\"Logo__crust Logo__crust--6\"\n          />\n        </g>\n      </g>\n    </svg>\n  );\n}\n\nLogo.propTypes = {\n  animated: PropTypes.bool,\n  width: PropTypes.number,\n  height: PropTypes.number,\n  style: PropTypes.object,\n};\nexport default Logo;\n"
  },
  {
    "path": "docs/src/components/Logo/LogoWithText.js",
    "content": "import React from 'react';\nimport Logo from './Logo';\nimport PropTypes from 'prop-types';\n\nfunction LogoWithText({ subtitle, style, height, width }) {\n  return (\n    <div style={styles.container}>\n      <Logo\n        animated\n        height={height}\n        width={width}\n        style={{ width: '100%', ...style }}\n      />\n      <div style={{ alignSelf: 'center', textAlign: 'center' }}>\n        <h1 style={styles.title} className={'Logo__title'}>\n          Material Bread\n        </h1>\n        {subtitle ? (\n          <h4 style={styles.subtitle}>One Component Library, Six Platforms</h4>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n\nconst styles = {\n  container: {\n    // maxWidth: 387,\n    marginBottom: 20,\n    alignItems: 'center',\n    justifyContent: 'center',\n    // display: 'flex',\n    display: 'inline-block',\n  },\n  title: {\n    fontSize: 48,\n    marginTop: 10,\n    marginBottom: 0,\n    color: 'white',\n    textAlign: 'center',\n  },\n  subtitle: {\n    fontSize: 16,\n    // color: 'rgba(10, 10, 10, 0.67)',\n    fontWeight: 400,\n    margin: 0,\n    marginTop: 6,\n    marginBottom: 0,\n    color: 'white',\n  },\n};\n\nLogoWithText.propTypes = {\n  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  style: PropTypes.object,\n  height: PropTypes.number,\n  width: PropTypes.number,\n};\n\nexport default LogoWithText;\n"
  },
  {
    "path": "docs/src/components/P.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nclass P extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    href: PropTypes.string,\n    children: PropTypes.node,\n    style: PropTypes.object,\n  };\n\n  render() {\n    const { children, style } = this.props;\n    return (\n      <p\n        style={{\n          color: 'rgba(0, 0, 0, 0.67)',\n          marginTop: 16,\n          lineHeight: 1.5,\n          ...style,\n        }}>\n        {children}\n      </p>\n    );\n  }\n}\n\nexport default P;\n"
  },
  {
    "path": "docs/src/components/PageTitle.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nclass PageTitle extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    children: PropTypes.node,\n  };\n\n  render() {\n    return (\n      <h1\n        style={{\n          fontSize: 42,\n          letterSpacing: 1.2,\n          marginBottom: 0,\n          wordBreak: 'break-all',\n          color: '#5a6484',\n        }}>\n        {this.props.children}\n      </h1>\n    );\n  }\n}\n\nexport default PageTitle;\n"
  },
  {
    "path": "docs/src/components/Pixel3xl.js",
    "content": "import React from 'react';\nimport PropTypes from 'prop-types';\n\nfunction Pixel3xl({ children }) {\n  return (\n    <div className=\"pixel\">\n      <div className=\"pixel__notch--background\" />\n      <div className=\"pixel__notch--hole--left\" />\n      <div className=\"pixel__notch--hole--right\" />\n      <div className=\"pixel__notch--fill\" />\n      <div className=\"pixel__notch\">\n        <div className=\"pixel__camera--left\" />\n        <div className=\"pixel__camera--right\" />\n        <div className=\"pixel__speaker--top\" />\n      </div>\n      <div className=\"pixel__screen\">{children}</div>\n      <div className=\"pixel__chin\">\n        <div className=\"pixel__speaker--bottom\" />\n      </div>\n    </div>\n  );\n}\n\nPixel3xl.propTypes = {\n  children: PropTypes.node,\n};\nexport default Pixel3xl;\n"
  },
  {
    "path": "docs/src/components/PlatformButton.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Link } from '@components';\n\nimport { Ripple, Hoverable } from '../../../src';\nclass Section extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    name: PropTypes.string,\n    href: PropTypes.string,\n    children: PropTypes.node,\n    id: PropTypes.string,\n  };\n\n  state = {\n    color: 'transparent',\n  };\n\n  handleHover(toggle) {\n    this.setState({\n      backgroundColor: toggle ? 'rgba(0,0,0,.12)' : 'transparent',\n    });\n  }\n\n  render() {\n    const { text, img, href, imgWidth, width, height, platforms } = this.props;\n    const { backgroundColor } = this.state;\n    return (\n      <Hoverable\n        onHoverIn={() => this.handleHover(true)}\n        onHoverOut={() => this.handleHover(false)}>\n        <a href={href} style={{ textDecoration: 'none', color: 'black' }}>\n          <Ripple\n            style={{\n              display: 'flex',\n              flexDirection: 'column',\n              alignItems: 'center',\n              justifyContent: 'center',\n              marginLeft: 16,\n              marginRight: 16,\n              height: height ? height : 175,\n              width: width ? width : 175,\n              backgroundColor,\n              borderRadius: 10,\n              marginBottom: 16,\n              padding: 16,\n            }}\n            rippleContainerBorderRadius={10}>\n            <img\n              src={img}\n              style={{\n                maxHeight: 120,\n                maxWidth: '100%',\n                margin: 'auto',\n                marginBottom: 8,\n              }}\n            />\n            <h4\n              style={{\n                margin: 0,\n                marginTop: 4,\n                letterSpacing: 1,\n                fontWeight: 500,\n                textAlign: 'center',\n                color: 'black',\n                fontSize: 18,\n              }}>\n              {text}\n            </h4>\n            <p style={{ fontSize: 14 }}>\n              {platforms &&\n                platforms.map((platform, index) => (\n                  <span key={index} style={{ color: '#666666' }}>\n                    {platform}\n                  </span>\n                ))}\n            </p>\n          </Ripple>\n        </a>\n      </Hoverable>\n    );\n  }\n}\n\nexport default Section;\n"
  },
  {
    "path": "docs/src/components/PropsTable/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { DataTable, DataTableRow, DataTableCell } from '../../../../src';\n\nexport default class PropsTable extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    data: PropTypes.array,\n    classes: PropTypes.object,\n  };\n\n  render() {\n    const { data } = this.props;\n    return (\n      <DataTable\n        style={{ boxShadow: '2px 2px 16px 0px rgba(46, 61, 73, 0.10)' }}>\n        <DataTableRow\n          style={{\n            backgroundColor: '#050342',\n            borderTopRightRadius: 6,\n            borderTopLeftRadius: 6,\n          }}>\n          <DataTableCell\n            text={'Name'}\n            type={'header'}\n            textStyle={{ color: 'white' }}\n          />\n          <DataTableCell\n            text={'Description'}\n            type={'header'}\n            flex={2}\n            textStyle={{ color: 'white' }}\n          />\n          <DataTableCell\n            text={'Type'}\n            type={'header'}\n            textStyle={{ color: 'white' }}\n          />\n          <DataTableCell\n            text={'Default'}\n            type={'header'}\n            textStyle={{ color: 'white', borderTopRightRadius: 6 }}\n          />\n        </DataTableRow>\n        {data.map(row => (\n          <DataTableRow key={row.name}>\n            <DataTableCell text={row.name} />\n            <DataTableCell text={row.description} flex={2} />\n            <DataTableCell text={row.type} />\n            <DataTableCell text={row.defaultValue} right />\n          </DataTableRow>\n        ))}\n      </DataTable>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/components/Section.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport SectionHeader from './SectionHeader';\n\nclass Section extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    name: PropTypes.string,\n    href: PropTypes.string,\n    children: PropTypes.node,\n    id: PropTypes.string,\n    style: PropTypes.object,\n  };\n\n  render() {\n    const { name, href, children, id, style } = this.props;\n    return (\n      <section\n        className=\"CardSection\"\n        style={{\n          marginTop: 60,\n          background: '#fefefe',\n          boxShadow: '2px 2px 15px 0px rgba(46, 61, 73, 0.15)',\n          borderRadius: 6,\n\n          ...style,\n        }}\n        id={id}>\n        <SectionHeader name={name} href={href} />\n        {children}\n      </section>\n    );\n  }\n}\n\nexport default Section;\n"
  },
  {
    "path": "docs/src/components/SectionHeader.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nclass PageTitle extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    name: PropTypes.string,\n    href: PropTypes.string,\n  };\n\n  render() {\n    const { name, href } = this.props;\n    return (\n      <h3\n        style={{\n          fontWeight: 600,\n          fontSize: 32,\n          marginBottom: 16,\n          marginTop: 0,\n          color: '#5a6484',\n        }}\n        className=\"Section__header\">\n        <span>{name}</span>{' '}\n        <a style={{ color: '#5a6484' }} className=\"HashLink\" href={href}>\n          #\n        </a>\n      </h3>\n    );\n  }\n}\n\nexport default PageTitle;\n"
  },
  {
    "path": "docs/src/components/SideScrollMenu/index.js",
    "content": "import React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport Scrollspy from 'react-scrollspy';\n\nclass SideScrollMenu extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    items: PropTypes.array,\n  };\n\n  state = {\n    slideTop: 0,\n    height: 60,\n  };\n\n  componentDidMount() {\n    const { items } = this.props;\n    this.setState({ height: items.length * 30 });\n  }\n\n  formatLinkFromName(str) {\n    str = str.replace(/\\s+/g, '-').toLowerCase();\n    return str.toString();\n  }\n\n  handleLinks() {\n    const { items } = this.props;\n    const sections = items.map(item => {\n      return this.formatLinkFromName(item.name);\n    });\n    return sections;\n  }\n\n  renderMenuItems(item, index) {\n    const link = this.formatLinkFromName(item.name);\n    return (\n      <a className=\"SideMenu__Link\" href={`#${link}`} key={index}>\n        <li\n          className={`SideMenu__ListItem ${\n            item.sub ? 'SideMenu__ListItem--sub' : ''\n          }`}>\n          {item.name}\n        </li>\n      </a>\n    );\n  }\n\n  animateSlideItem(id) {\n    if (!id) return;\n    const items = this.handleLinks();\n    const index = items.findIndex(item => item == id);\n    this.setState({ slideTop: 30 * index });\n  }\n\n  render() {\n    const { items } = this.props;\n    if (typeof window == 'undefined') {\n      return null;\n    }\n    return ReactDOM.createPortal(\n      <div className=\"SideMenuWrapper\">\n        <li\n          className=\"sliding-wrapper\"\n          style={{ height: `${this.state.height}px` }}\n        />\n        <li\n          className=\"sliding-border\"\n          style={{ transform: `translateY(${this.state.slideTop}px)` }}\n        />\n\n        <Scrollspy\n          onUpdate={stuff => this.animateSlideItem(stuff && stuff.id)}\n          items={this.handleLinks()}\n          currentClassName=\"is-current\"\n          className=\"SideMenu\">\n          {items &&\n            items.map((item, index) => this.renderMenuItems(item, index))}\n        </Scrollspy>\n      </div>,\n      document.body,\n    );\n  }\n}\n\nexport default SideScrollMenu;\n"
  },
  {
    "path": "docs/src/components/Sponsored.js",
    "content": "import React from 'react'\n\nconst Sponsored = ({ }) => (\n    <div style={{ position: 'absolute', bottom: 10, right: 20, fontSize: 12 }}>Sponsored By <a href=\"https://www.fullstacklabs.co/\" style={{ textDecoration: 'none' }}>FullStack Labs</a></div>\n)\n\nexport default Sponsored"
  },
  {
    "path": "docs/src/components/blog/Layout.js",
    "content": "import React from 'react';\n\nclass Layout extends React.Component {\n  render() {\n    const { location, title, children } = this.props;\n    const rootPath = `${__PATH_PREFIX__}/`;\n\n    return (\n      <div>\n        <div\n          style={{\n            marginLeft: `auto`,\n            marginRight: `auto`,\n          }}>\n          <main>{children}</main>\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default Layout;\n"
  },
  {
    "path": "docs/src/components/blog/seo.js",
    "content": "/**\n * SEO component that queries for data with\n *  Gatsby's useStaticQuery React hook\n *\n * See: https://www.gatsbyjs.org/docs/use-static-query/\n */\n\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Helmet from 'react-helmet';\nimport { useStaticQuery, graphql } from 'gatsby';\n\nfunction SEO({ description, lang, meta, title, thumbnail }) {\n  const { site } = useStaticQuery(\n    graphql`\n      query {\n        site {\n          siteMetadata {\n            title\n            description\n            author\n          }\n        }\n      }\n    `,\n  );\n\n  const metaDescription = description || site.siteMetadata.description;\n\n  const imageSrc = thumbnail && thumbnail.childImageSharp.sizes.src;\n  let origin = 'https://material-bread.org/';\n  if (typeof window !== 'undefined') {\n    origin = window.location.origin;\n  }\n  const image = origin + imageSrc;\n\n  return (\n    <Helmet\n      htmlAttributes={{\n        lang,\n      }}\n      title={title}\n      titleTemplate={`%s | ${site.siteMetadata.title}`}\n      meta={[\n        {\n          name: `description`,\n          content: metaDescription,\n        },\n        {\n          property: `og:title`,\n          content: title,\n        },\n        {\n          property: `og:description`,\n          content: metaDescription,\n        },\n        {\n          property: `og:image`,\n          content: image,\n        },\n        {\n          property: `og:image:width`,\n          content: 1200,\n        },\n        {\n          property: `og:image:height`,\n          content: 630,\n        },\n        {\n          property: `og:type`,\n          content: `website`,\n        },\n        {\n          name: `twitter:card`,\n          content: `summary_large_image`,\n        },\n        {\n          name: `twitter:image`,\n          content: image,\n        },\n        {\n          name: `twitter:creator`,\n          content: site.siteMetadata.author,\n        },\n        {\n          name: `twitter:title`,\n          content: title,\n        },\n        {\n          name: `twitter:description`,\n          content: metaDescription,\n        },\n        {\n          name: 'google-site-verification',\n          content: 'pnInoKlqzLFjeCNTW6F-BnibL8xE4qnA7Tghks5dLwo',\n        },\n      ].concat(meta)}\n    />\n  );\n}\n\nSEO.defaultProps = {\n  lang: `en`,\n  meta: [],\n  description: ``,\n};\n\nSEO.propTypes = {\n  description: PropTypes.string,\n  lang: PropTypes.string,\n  meta: PropTypes.arrayOf(PropTypes.object),\n  title: PropTypes.string.isRequired,\n};\n\nexport default SEO;\n"
  },
  {
    "path": "docs/src/components/image.js",
    "content": "// import React from \"react\"\n// import { StaticQuery, graphql } from \"gatsby\"\n// import Img from \"gatsby-image\"\n\n/*\n * This component is built using `gatsby-image` to automatically serve optimized\n * images with lazy loading and reduced file sizes. The image is loaded using a\n * `StaticQuery`, which allows us to load the image from directly within this\n * component, rather than having to pass the image data down from pages.\n *\n * For more information, see the docs:\n * - `gatsby-image`: https://gatsby.dev/gatsby-image\n * - `StaticQuery`: https://gatsby.dev/staticquery\n */\n\n// const Image = () => (\n//   <StaticQuery\n//     query={graphql`\n//       query {\n//         placeholderImage: file(relativePath: { eq: \"gatsby-astronaut.png\" }) {\n//           childImageSharp {\n//             fluid(maxWidth: 300) {\n//               ...GatsbyImageSharpFluid\n//             }\n//           }\n//         }\n//       }\n//     `}\n//     render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} />}\n//   />\n// )\n// export default Image\n"
  },
  {
    "path": "docs/src/components/index.js",
    "content": "// COMPONENTS\nexport { default as P } from './P';\nexport { default as Link } from './Link';\nexport { default as PageTitle } from './PageTitle';\nexport { default as Section } from './Section';\nexport { default as SectionHeader } from './SectionHeader';\nexport { default as CodeInline } from './CodeInline';\nexport { default as CodeBlock } from './CodeBlock';\nexport { default as Helmet } from './Helmet';\n\n// COLOR PALLETE\nexport { default as ColorPalette } from './ColorPalette/ColorPalette';\n\n// COMOPNENT PAGE\nexport {\n  default as ComponentDescription,\n} from './ComponentPage/ComponentDescription';\nexport { default as ComponentHeader } from './ComponentPage/ComponentHeader';\nexport {\n  default as ComponentPageLayout,\n} from './ComponentPage/ComponentPageLayout';\nexport {\n  default as ComponentSubtitle,\n} from './ComponentPage/ComponentSubtitle';\nexport { default as ComponentDemo } from './ComponentPage/ComponentDemo';\nexport {\n  default as ComponentDemoHeader,\n} from './ComponentPage/ComponentDemoHeader';\nexport {\n  default as ComponentMainDemo,\n} from './ComponentPage/ComponentMainDemo';\nexport { default as ComponentUsage } from './ComponentPage/ComponentUsage';\nexport { default as ComponentProps } from './ComponentPage/ComponentProps';\n\n// ICON DIRECTORY\nexport { default as IconDirectory } from './IconDirectory/IconDirectory';\n\n// LAYOUT\nexport { default as Header } from './Layout/Header';\nexport { default as PageLayout } from './Layout/PageLayout';\n\n// LOGO\nexport { default as Logo } from './Logo/Logo';\nexport { default as LogoWithText } from './Logo/LogoWithText';\n\n// LIVE EDIT\nexport { default as LiveEdit } from './LiveEdit/LiveEdit';\nexport { default as LiveEditToolTip } from './LiveEdit/LiveEditToolTip';\n\n// PROPSTABLE\nexport { default as PropsTable } from './PropsTable';\n\n// SIDESCROLL\nexport { default as SideScrollMenu } from './SideScrollMenu';\n\nexport { default as PlatformButton } from './PlatformButton';\n"
  },
  {
    "path": "docs/src/content/components/appbar/Demos/CustomDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { CodeInline, ComponentDemo } from '@components';\nimport { Appbar, Button } from '../../../../../../src/index';\n\nexport const code = `const styles = {\n  appbar: {\n    alignItems: 'center', \n    justifyContent:'space-between', \n    height: 60, \n    paddingVertical: 0, \n    paddingHorizontal: 8,\n    backgroundColor: 'black',\n    overflowX: 'auto'\n  },\n  left: {\n    flexDirection: 'row', \n    alignItems: 'center', \n    justifyContent:'flex-start',\n  },\n  button: {\n    height: 30, \n    alignSelf: 'center', \n    marginRight: 16\n  },\n}\n  \nrender(\n  <Appbar style={styles.appbar}>\n  <View style={styles.left}>\n    <Button text={'Home'} textColor=\"white\" style={styles.button} />\n    <Button text={'Install'} textColor=\"white\" style={styles.button} />\n    <Button text={'Docs'} textColor=\"white\" style={styles.button} />\n    <Button text={'About'} textColor=\"white\" style={[styles.button, {marginRight: 0}]} />\n  </View>\n  <Button text={'Buy'} type={'contained'} textColor=\"white\" containerStyle={[styles.button, {marginRight: 0}]} />\n  </Appbar>\n)`;\n\nconst CustomDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Custom'}\n    sectionHref={`${pageHref}#custom`}\n    sectionId={'custom'}\n    description={\n      <div>\n        Adding <CodeInline code=\"children\" type={'prop'} /> will replace all\n        internal components with the provided components.\n      </div>\n    }\n    code={code}\n    scope={{ Appbar, Button, View }}\n    noInline\n  />\n);\nexport default CustomDemo;\n"
  },
  {
    "path": "docs/src/content/components/appbar/Demos/ImageDemo.js",
    "content": "import React from 'react';\nimport { Image } from 'react-native';\nimport { Link, CodeInline, ComponentDemo } from '@components';\nimport { Appbar, IconButton } from '../../../../../../src/index';\n\nexport const withImageCode = `<Appbar\n  barType={'prominent'}\n  title={'Background image'}\n  color={'#9C27B0'}\n  navigation={'menu'}\n  backgroundImage={\n    <Image\n      source={{\n        uri:\n          \"https://images.pexels.com/photos/355465/pexels-photo-355465.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260\"\n      }}/>\n    }\n/>`;\n\nconst WithImage = () => (\n  <ComponentDemo\n    sectionName={'Background image'}\n    sectionHref={'/components/appbar#bg-image'}\n    sectionId={'bg-image'}\n    description={\n      <div>\n        You must pass in an <CodeInline code=\"Image\" type={'element'} />\n        component, please read the React Native{' '}\n        <Link href=\"https://facebook.github.io/react-native/docs/images\">\n          docs on Images\n        </Link>{' '}\n        to get a better idea of how to pass in images. Generally they are only\n        used for <CodeInline code=\"prominent\" type={'value'} /> bars, but can be\n        used on other types.\n      </div>\n    }\n    code={withImageCode}\n    scope={{ Appbar, IconButton, Image }}\n  />\n);\nexport default WithImage;\n"
  },
  {
    "path": "docs/src/content/components/appbar/Demos/MenuDemo.js",
    "content": "import React from 'react';\nimport { CodeInline, ComponentDemo } from '@components';\nimport {\n  Appbar,\n  IconButton,\n  Menu,\n  MenuItem,\n  Button,\n} from '../../../../../../src/index';\n\nexport const code = ` \nclass AppbarDemo extends React.Component {\n  constructor() {\n    super();\n    this.state = {\n      visibleOne: false\n    };\n  }\n\n  render() {\n\n    return (\n      <Appbar\n        barType={'normal'}\n        navigation={'menu'}\n        color={'#00BCD4'}\n        style={{ marginBottom: 20 }}\n        actionItems={[\n          { name: 'search', onPress: () => console.log('onSearch') },\n          <Menu\n            visible={this.state.visibleOne}\n            onBackdropPress={() => {\n              console.log('called')\n              this.setState({visibleOne: false})\n            }\n            }\n            button={\n              <Button\n                textColor={'white'}\n                text={'Show menu'}\n                onPress={() => this.setState({ visibleOne: !this.state.visibleOne })}\n                type=\"text\"\n              />\n          }>\n            <MenuItem text={'Menu item 1'} onPress={() => this.setState({ visible: false })} />\n            <MenuItem text={'Menu item 2'} onPress={() => this.setState({ visible: false })} />\n            <MenuItem text={'Menu item 3'} onPress={() => this.setState({ visible: false })} />\n          </Menu>,\n        ]}\n      />\n    );\n  }\n}`;\n\nconst MenuDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Menu'}\n    sectionHref={`${pageHref}#menu`}\n    sectionId={'menu'}\n    description={\n      <div>\n        You can add a <CodeInline code=\"Menu\" type={'element'} /> to the{' '}\n        <CodeInline code=\"Appbar\" type={'element'} />\n        as shown below.\n      </div>\n    }\n    code={code}\n    scope={{ Appbar, IconButton, Menu, MenuItem, Button }}\n  />\n);\nexport default MenuDemo;\n"
  },
  {
    "path": "docs/src/content/components/appbar/Demos/SearchBarDemo.js",
    "content": "import React from 'react';\nimport { CodeInline, ComponentDemo } from '@components';\nimport { Appbar, IconButton, Searchbar } from '../../../../../../src/index';\n\nexport const code = `class Header extends React.Component {\n  constructor() {\n    super();\n    this.state = {\n      value: '',\n      isSearching: true\n    };\n  }\n  \n  render() {\n    return (\n      <Appbar\n        title={'Page Title'} \n        navigation={'menu'}\n        actionItems={[ \n          {name: 'search', onPress: () => this.setState({isSearching: true})},\n          {name: 'favorite'},\n          <IconButton name=\"more-vert\" size={24} color={'white'} />, \n        ]}\n        style={{paddingHorizontal: this.state.isSearching ? 0 : 16}}\n      >\n      {this.state.isSearching ?  \n        <Searchbar\n          style={{height: 56, width: '100%', paddingHorizontal: 16, backgroundColor: 'white'}}\n          value={this.state.value}\n          onChangeText={(value) => this.setState({value})}\n          onNavigation={() => this.setState({isSearching: false})}\n          onCloseIcon={() => this.setState({value: ''})}\n        /> : null}\n      </Appbar>\n    );\n  }\n}`;\n\nconst WithSearchBar = pageHref => (\n  <ComponentDemo\n    sectionName={'Search Bar'}\n    sectionHref={`${pageHref}#search-bar`}\n    sectionId={'search-bar'}\n    description={\n      <div>\n        The ability to replace components provides various ways to display\n        contextual <CodeInline code=\"Appbar\" type={'element'} />\n        s. The following demonstrates how one might set up a full search bar.\n        Click the back button to return to a regular\n        <CodeInline code=\"Appbar\" type={'element'} />, click the search icon to\n        open the contextual search appbar.\n      </div>\n    }\n    code={code}\n    scope={{ Appbar, IconButton, Searchbar }}\n  />\n);\nexport default WithSearchBar;\n"
  },
  {
    "path": "docs/src/content/components/appbar/Demos/SearchFieldDemo.js",
    "content": "import React from 'react';\nimport { CodeInline, ComponentDemo } from '@components';\nimport { Appbar, IconButton, Searchfield } from '../../../../../../src/index';\n\nexport const code = ` \nclass Header extends React.Component {\n  constructor() {\n    super();\n    this.state = {\n      isSearching: false,\n      value: ''\n    };\n  }\n\n  render() {\n    return (\n      <Appbar\n        title={'Page Title'} \n        navigation={'menu'}\n        actionItems={[\n          <Searchfield \n            style={{\n              marginHorizontal: 24, \n              flexGrow: this.state.isSearching ? 1 : 0,\n              flexShrink: 0\n            }}\n            primary\n            value={this.state.value}\n            onChangeText={(value) => this.setState({value})}\n            onFocus={() => this.setState({isSearching: true})}\n            onBlur={() => this.setState({isSearching: false})}\n            onCloseIcon={() => this.setState({value: ''})}\n          />,\n\n          {name: 'favorite'},\n          <IconButton name=\"more-vert\" size={24} color={'white'} />, \n        ]}\n        navigation={'close'}\n      />\n    );\n  }\n}`;\n\nconst WithSearchField = pageHref => (\n  <ComponentDemo\n    sectionName={'Searchfield'}\n    sectionHref={`${pageHref}#search-field`}\n    sectionId={'search-field'}\n    description={\n      <div>\n        You can add a <CodeInline code=\"Searchfield\" type={'element'} /> or any\n        other component directly in the{' '}\n        <CodeInline code=\"Appbar\" type={'element'} />\n      </div>\n    }\n    code={code}\n    scope={{ Appbar, IconButton, Searchfield }}\n  />\n);\nexport default WithSearchField;\n"
  },
  {
    "path": "docs/src/content/components/appbar/Demos/SubtitleDemo.js",
    "content": "import React from 'react';\nimport { CodeInline, ComponentDemo } from '@components';\nimport { Appbar, IconButton } from '../../../../../../src/index';\n\nexport const code = `<Appbar\n  barType={'prominent'}\n  title={'Page Title'} \n  subtitle={'Subtitle'}\n  navigation={'menu'}\n  actionItems={[\n    {name: 'favorite'},\n    {name: 'search', onPress: () => console.log('onSearch')},\n    <IconButton name=\"more-vert\" size={24} color={'white'} />, \n  ]}\n/>`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Subtitle'}\n    sectionHref={`${pageHref}#subtitle`}\n    sectionId={'subtitle'}\n    description={\n      <div>\n        Subtitles can be used on <CodeInline code=\"normal\" type={'value'} /> or{' '}\n        <CodeInline code=\"prominent\" type={'value'} />{' '}\n        <CodeInline code=\"barType\" type={'prop'} />\n        s, but not <CodeInline code=\"dense\" type={'value'} />. Try changing\n        <CodeInline code=\"barType\" type={'prop'} /> to{' '}\n        <CodeInline code=\"normal\" type={'value'} /> to see how it will display\n      </div>\n    }\n    code={code}\n    scope={{ Appbar, IconButton }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/appbar/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport ImageDemo from './ImageDemo';\nimport SearchFieldDemo from './SearchFieldDemo';\nimport SearchBarDemo from './SearchBarDemo';\nimport SubtitleDemo from './SubtitleDemo';\nimport MenuDemo from './MenuDemo';\nimport CustomDemo from './CustomDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n\n        <ImageDemo pageHref={pageHref} />\n        <SearchFieldDemo pageHref={pageHref} />\n        <SearchBarDemo pageHref={pageHref} />\n        <SubtitleDemo pageHref={pageHref} />\n        <MenuDemo paageHref={pageHref} />\n        <CustomDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/appbar/MainDemo.js",
    "content": "import React from 'react';\nimport { Image } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { Appbar, IconButton, Badge } from '../../../../../src/index';\n\nexport const code = ` <Appbar\n    barType={\"normal\"}\n    title={'Page Title'} \n    navigation={'menu'}\n    onNavigation={() => console.log('onNavigation!')}\n    actionItems={[\n    <Badge\n        containerStyle={{marginRight: 16, flex: 1}}\n        color={'#e10050'}\n        textColor={'white'}\n        size={14}\n        content={77}>\n        <IconButton name=\"favorite\" size={24} color={'white'} />\n    </Badge>,\n    {name: 'search', onPress: () => console.log('onSearch')},\n    {name: 'more-vert'},\n    ]}\n/>`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        <CodeInline code=\"Appbar\" type={'element'} />s are essentially broken\n        into three parts: <CodeInline code=\"navigation\" type={'prop'} />,{' '}\n        <CodeInline code=\"title\" type={'prop'} />, and\n        <CodeInline code=\"actionItems\" type={'prop'} />. Many combinations are\n        possible using these sections, but if you need more customization you\n        can replace all of them by passing{' '}\n        <CodeInline code=\"children\" type={'prop'} />.\n      </div>\n    }\n    code={code}\n    scope={{ Appbar, IconButton, Image, Badge }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/appbar/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps, CodeInline, Link } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps\n    pageHref={pageHref}\n    description={\n      <div>\n        Usage depends entirely on what kind of navigation you are using in your\n        app. For example, in <CodeInline code=\"react-navigation\" /> you can\n        replace the entire header with a{' '}\n        <Link href=\"https://hackernoon.com/how-to-use-a-custom-header-and-custom-bottom-tab-bar-for-react-native-with-react-navigation-969a5d3cabb1\">\n          custom appbar\n        </Link>\n        .\n      </div>\n    }\n    propData={propData}\n  />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/appbar/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage, CodeInline, Link } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { Appbar } from 'material-bread';\n\nexport default class Header extends Component {\n  render() {\n    return (\n      <View style={styles.header}>\n        <Appbar title={'Page Title'} />\n      <View>\n    );\n  }\n}`;\n\nconst Usage = pageHref => (\n  <ComponentUsage\n    pageHref={pageHref}\n    description={\n      <div>\n        Usage depends entirely on what kind of navigation you are using in your\n        app. For example, in <CodeInline code=\"react-navigation\" /> you can\n        replace the entire header with a{' '}\n        <Link href=\"  https://hackernoon.com/how-to-use-a-custom-header-and-custom-bottom-tab-bar-for-react-native-with-react-navigation-969a5d3cabb1\">\n          custom appbar\n        </Link>\n        .\n      </div>\n    }\n    code={code}\n  />\n);\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/appbar/index.js",
    "content": "import React, { Component } from 'react';\nimport { ComponentPageLayout } from '@components';\n\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'bg image', sub: true },\n  { name: 'search field', sub: true },\n  { name: 'search bar', sub: true },\n  { name: 'subtitle', sub: true },\n  { name: 'menu', sub: true },\n  { name: 'custom', sub: true },\n];\n\nexport default class AppbarPage extends Component {\n  render() {\n    return (\n      <ComponentPageLayout\n        componentName={'appbar'}\n        title={'Appbar Top'}\n        description={\n          'The top app bar displays information and actions relating to the current screen.'\n        }\n        docsLink={'https://material.io/design/components/app-bars-top.html'}\n        importCode={`import { Appbar } from 'material-bread';`}\n        sideScrollMenuItems={sections}>\n        <MainDemo pageHref={'/components/appbar'} />\n        <Usage pageHref={'/components/appbar'} />\n        <Props pageHref={'/components/appbar'} />\n        <Demos pageHref={'/components/appbar'} />\n      </ComponentPageLayout>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/appbar/propData.js",
    "content": "import { createTableData } from '@utils/createPropData';\nconst propData = [\n  [\n    'actionItems',\n    'Each can be an object or node, renders on the right',\n    'array',\n    '',\n  ],\n  [\n    'actionItemsStyle',\n    'Styles the container around the actionItems',\n    'object || array',\n    '',\n  ],\n  [\n    'barType',\n    `Type of appbar, other components change based on type`,\n    'string: regular, prominent, dense, prominent dense',\n    'regular',\n  ],\n\n  ['backgroundImage', `Renders image element as background`, 'node', ''],\n\n  ['color', `Component's background color`, 'string', 'primary'],\n  ['elevation', `Shadow on container appbar`, 'number', '8'],\n  [\n    'onNavigation',\n    'OnPress for navigation IconButton if provided.',\n    'func',\n    '',\n  ],\n  ['onTitle', 'OnPress for title string if provided.', 'func', ''],\n  [\n    'navigation',\n    'Renders IconButton if string, or renders custom node on left of title',\n    'node || string',\n    '',\n  ],\n\n  [\n    'position',\n    'CSS position values applied to root appbar',\n    'string: fixed, relative, absolute',\n    'relative',\n  ],\n  [\n    'subtitle',\n    'Only displays on barType prominent, under the Title',\n    'string',\n    '',\n  ],\n  ['subtitleStyles', 'Styles Subtitle', 'object', ''],\n  [\n    'title',\n    'Displays on the left after navigation. If string it follows guidelines',\n    'string || node',\n    '',\n  ],\n  ['titleStyles', 'Styles title if provided as string', 'object', ''],\n  ['style', 'Styles root element', 'object', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/appbar-bottom/Demos/CustomDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\n\nimport { CodeInline, ComponentDemo } from '@components';\nimport { AppbarBottom, Button, Fab } from '../../../../../../src/index';\n\nexport const code = `const styles = {\n    appbar: {\n      backgroundColor: '#009688',\n      overflowX: 'auto',\n    },\n    left: {\n      flexDirection: 'row', \n      alignItems: 'center', \n      justifyContent:'flex-start',\n      minWidth: 'auto'\n    },\n    button: {\n      height: 30, \n      alignSelf: 'center', \n      marginRight: 16\n    },\n    fabStyle: {\n      backgroundColor: '#00BCD4'\n    }\n  }\n  \n  render(\n  <AppbarBottom appbarStyles={styles.appbar} fab={<Fab />} fabPosition=\"end\" fabStyles={styles.fabStyle} style={{marginTop: 16}} >\n    <View style={styles.left}>\n      <Button type=\"contained\" containerStyle={[styles.button, {height: 34}]} text={'menu'}  style={{height:30}}/>\n      <Button textColor=\"white\" style={styles.button} text={'install'} />\n      <Button textColor=\"white\" style={[styles.button, {marginRight: 0}]} text=\"About\" />\n    </View>\n  </AppbarBottom>\n  )`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Custom'}\n    sectionHref={`${pageHref}#custom`}\n    sectionId={'custom'}\n    description={\n      <div>\n        Adding <CodeInline code=\"children\" type={'prop'} /> will replace all\n        internal components with the provided components. This allows for full\n        customization.\n      </div>\n    }\n    code={code}\n    scope={{ AppbarBottom, View, Button, Fab }}\n    noInline\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/appbar-bottom/Demos/EndFabDemo.js",
    "content": "import React from 'react';\nimport { CodeInline, ComponentDemo } from '@components';\nimport { AppbarBottom, Fab } from '../../../../../../src/index';\n\nexport const code = `<AppbarBottom \n    fab={<Fab backgroundColor={'black'} />}\n    fabPosition={'end'} \n    fabIcon={'reply'}\n    actionItems={[\n        {name: 'archive', onPress: () => console.log('onArchive')},\n        {name: 'mail'},\n        {name: 'label'},\n        {name: 'delete'},\n    ]}\n    style={{marginTop: 16}}\n/>`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'End Fab'}\n    sectionHref={`${pageHref}#end-fab`}\n    sectionId={'end-fab'}\n    description={\n      <div>\n        Changing <CodeInline code=\"fabPosition\" type={'prop'} /> to{' '}\n        <CodeInline code=\"end\" type={'value'} /> will move{' '}\n        <CodeInline code=\"actionItems\" type={'prop'} />\n        to the left after the <CodeInline code=\"navigation\" type={'prop'} />\n        . Add the\n        <CodeInline code=\"fabCutout\" type={'prop'} /> prop to see how spacing is\n        effected.\n      </div>\n    }\n    code={code}\n    scope={{ AppbarBottom, Fab }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/appbar-bottom/Demos/NoFabDemo.js",
    "content": "import React from 'react';\nimport { CodeInline, ComponentDemo } from '@components';\nimport { AppbarBottom } from '../../../../../../src/index';\n\nexport const code = `<AppbarBottom\n    navigation={'menu'} \n    actionItems={[\n        {name: 'archive', onPress: () => console.log('onArchive')},\n        {name: 'mail'},\n        {name: 'label'},\n        {name: 'delete'},\n    ]}\n    style={{marginTop: 16}}\n/>`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'No Fab'}\n    sectionHref={`${pageHref}#no-fab`}\n    sectionId={'no-fab'}\n    description={\n      <div>\n        If you do not provide the <CodeInline code=\"fab\" type={'prop'} /> prop\n        then the component will function like a normal appbar with{' '}\n        <CodeInline code=\"actionItems\" type={'prop'} />.\n      </div>\n    }\n    code={code}\n    scope={{ AppbarBottom }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/appbar-bottom/Demos/SpeedDialDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\n\nimport { ComponentDemo } from '@components';\nimport { AppbarBottom, Fab, FabSpeedDial } from '../../../../../../src/index';\n\nexport const code = `\nclass Page extends React.Component {\n    constructor(props) {\n      super(props)\n    }\n    render() {\n      const actions = [\n        <Fab backgroundColor={'#E91E63'} icon={'archive'} />,\n        <Fab backgroundColor={'#F44336'} icon={'delete'} />,\n        <Fab backgroundColor={'#009688'} icon={'edit'} />,\n        <Fab backgroundColor={'black'} icon={'attach-money'} />,\n      ];\n      return (\n        <View style={{ marginTop: 300 }}>\n          <AppbarBottom\n              fab={\n                <FabSpeedDial\n                  actions={actions}\n                  fab={<Fab backgroundColor={'black'} />}\n                />\n              }\n              fabCutout\n              fabPosition={'end'}\n              navigation={'arrow-back'}\n              actionItems={[\n              { name: 'search', onPress: () => console.log('onSearch') },\n              { name: 'more-vert' },\n              ]}\n\n          />\n        </View>\n      );\n    }\n  }\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'SpeedDial'}\n    sectionHref={`${pageHref}#speeddial`}\n    sectionId={'speeddial'}\n    code={code}\n    scope={{ AppbarBottom, Fab, FabSpeedDial, View }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/appbar-bottom/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport EndFabDemo from './EndFabDemo';\nimport NoFabDemo from './NoFabDemo';\nimport SpeedDialDemo from './SpeedDialDemo';\nimport CustomDemo from './CustomDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n\n        <EndFabDemo pageHref={pageHref} />\n        <NoFabDemo pageHref={pageHref} />\n        <SpeedDialDemo pageHref={pageHref} />\n        <CustomDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/appbar-bottom/MainDemo.js",
    "content": "import React from 'react';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { AppbarBottom, Fab } from '../../../../../src/index';\n\nexport const code = `<AppbarBottom \n    fab={<Fab backgroundColor={'black'} />}\n    fabPosition={'center'} \n    fabCutout\n    navigation={'menu'}\n    actionItems={[\n        {name: 'search', onPress: () => console.log('onSearch')},\n        {name: 'more-vert'},\n    ]}\n    style={{marginTop: 16}}\n/>`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        <CodeInline code={'AppbarBottom'} type={'element'} /> is made up of\n        three separate parts: <CodeInline code={'navgiation'} type={'prop'} />,{' '}\n        <CodeInline code={'prop'} type={'prop'} />, and{' '}\n        <CodeInline code={'actionItems'} type={'prop'} />. Many combinations can\n        be created with these props, however you can replace them with anything\n        you want.\n      </div>\n    }\n    code={code}\n    scope={{ AppbarBottom, Fab }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/appbar-bottom/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/appbar-bottom/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage, CodeInline, Link } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { AppbarBottom, Fab } from 'material-bread';\n\nexport default class Page extends Component {\n  render() {\n    return (\n      <View style={{position: 'relative'}}>\n        <AppbarBottom \n            fab={<Fab />}\n            fabPosition={'center'} \n            fabCutout\n            navigation={'menu'}\n            actionItems={[\n                {name: 'search', onPress: () => console.log('onSearch')},\n                {name: 'more-vert'},\n            ]}\n            style={{position: 'absolute', bottom: 0}}\n        />\n      <View>\n    );\n  }\n}`;\n\nconst Usage = pageHref => (\n  <ComponentUsage\n    pageHref={pageHref}\n    description={\n      <div>\n        {`Usage depends on what navigation package you're using.`} For\n        <CodeInline code=\"react-navigation\" /> you can follow their{' '}\n        <Link href=\"https://reactnavigation.org/docs/en/tab-based-navigation.html\">\n          guide on TabNavigation\n        </Link>\n      </div>\n    }\n    code={code}\n  />\n);\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/appbar-bottom/index.js",
    "content": "import React, { Component } from 'react';\nimport { ComponentPageLayout } from '@components';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'end fab', sub: true },\n  { name: 'no fab', sub: true },\n  { name: 'speeddial', sub: true },\n  { name: 'custom', sub: true },\n];\n\nexport default class AppbarPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'appbar-bottom'}\n          title={'Appbar Bottom'}\n          description={\n            'A bottom app bar displays navigation and key actions at the bottom of mobile screens.'\n          }\n          docsLink={\n            'https://material.io/design/components/app-bars-bottom.html#'\n          }\n          importCode={`import { AppbarBottom } from 'material-bread';`}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/appbar-bottom'} />\n          <Usage pageHref={'/components/appbar-bottom'} />\n          <Props pageHref={'/components/appbar-bottom'} />\n          <Demos pageHref={'/components/appbar-bottom'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/appbar-bottom/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  [\n    'actionItems',\n    'Each can be an object or node, renders on the right',\n    'array',\n    '',\n  ],\n  ['appbarStyles', 'Styles appbar around content', 'object', ''],\n  ['color', `Component's background color`, 'string', 'primary'],\n  [\n    'fab',\n    `Renders an arbitrary Fab node where the position is indicated`,\n    'node',\n    '',\n  ],\n  ['fabCutout', `Displays cutout on appbar for fab`, 'bool', 'false'],\n  ['fabPosition', `Describes position of fab`, 'string: center, end', 'center'],\n  [\n    'onNavigation',\n    'OnPress for navigation IconButton if provided.',\n    'func',\n    '',\n  ],\n  [\n    'navigation',\n    'Name of IconButton if string or node, renders on the far left before Title',\n    'node || string',\n    '',\n  ],\n\n  ['style', 'Styles root element wrapping fab and appbar', 'object', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/avatar/Demos/CustomDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { CodeInline, ComponentDemo } from '@components';\nimport { Avatar } from '../../../../../../src/index';\n\nexport const code = `<Avatar \n    style={{borderRadius: 10}}\n    size={40}\n    type={'icon'}\n    content={'face'}\n/>\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Custom'}\n    sectionHref={`${pageHref}#custom`}\n    sectionId={'custom'}\n    description={\n      <div>\n        You can style any part or add{' '}\n        <CodeInline code=\"children\" type={'prop'} /> to replace all the inner\n        content to create something more custom.\n      </div>\n    }\n    code={code}\n    scope={{ View, Avatar }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/avatar/Demos/IconDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { Avatar } from '../../../../../../src/index';\n\nexport const code = `<View style={{flexDirection: 'row', alignItems: 'center'}}>\n    <Avatar\n        type=\"icon\"\n        content=\"face\"\n        contentColor={'white'}\n        size={64}\n        color={'#42a5f5'}\n    />\n    <Avatar\n        type=\"icon\"\n        content=\"alarm\"\n        size={48}\n        color={'#c2185b'}\n    />\n    <Avatar\n        type=\"icon\"\n        content=\"arrow-back\"\n        contentColor={'#c2185b'}\n        color={'#f4511e'}\n    />\n</View>\n`;\n\nconst IconDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Avatar Icons'}\n    sectionHref={`${pageHref}#icons`}\n    sectionId={'icons'}\n    code={code}\n    scope={{ View, Avatar }}\n  />\n);\nexport default IconDemo;\n"
  },
  {
    "path": "docs/src/content/components/avatar/Demos/TextDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { Avatar } from '../../../../../../src/index';\n\nexport const code = `<View style={{flexDirection: 'row', alignItems: 'center'}}>\n    <Avatar\n        type=\"text\"\n        content=\"CP\"\n        contentColor={'white'}\n        size={64}\n        color={'#42a5f5'}\n    />\n    <Avatar\n        type=\"text\"\n        content=\"MB\"\n        size={48}\n        color={'#c2185b'}\n    />\n    <Avatar\n        type=\"text\"\n        content=\"NP\"\n        contentColor={'#c2185b'}\n        color={'#f4511e'}\n    />\n</View>\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Avatar Text'}\n    sectionHref={`${pageHref}#text`}\n    sectionId={'text'}\n    description={\n      \"Text is usually two letters for a person's initial, but it can be anything you want.\"\n    }\n    code={code}\n    scope={{ View, Avatar }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/avatar/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport IconDemo from './IconDemo';\nimport TextDemo from './TextDemo';\nimport CustomDemo from './CustomDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n\n        <IconDemo pageHref={pageHref} />\n        <TextDemo pageHref={pageHref} />\n        <CustomDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/avatar/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { Avatar } from '../../../../../src/index';\n\nexport const code = `<View style={{flexDirection: 'row', alignItems: 'center'}}>\n    <Avatar \n        type=\"image\" \n        image={<Image source={{uri: 'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4'}} /> } \n        size={64} \n    />\n    <Avatar \n        type=\"image\" \n        image={<Image source={{uri: 'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4'}} /> } \n        size={48} \n        onPress={() => console.log('avatar')}\n        ripple\n    />\n    <Avatar \n        type=\"image\" \n        image={<Image source={{uri: 'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4'}} /> } \n    /> \n</View>`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        Avatars can be images, letters, or icons. First provide the{' '}\n        <CodeInline code=\"type\" type=\"prop\" />\n        of avatar, then either provide the{' '}\n        <CodeInline code=\"content\" type=\"prop\" /> prop for icons and letters or{' '}\n        <CodeInline code=\"image\" type=\"prop\" /> prop for images. A simple image\n        example is shown below.\n      </div>\n    }\n    code={code}\n    scope={{ View, Avatar, Image }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/avatar/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/avatar/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage, CodeInline, Link } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { Avatar } from 'material-bread';\n\nexport default class UserAvatar extends Component {\n  render() {\n    return (\n        <Avatar \n            type=\"icon\"\n            content=\"face\"\n            contentColor={'white'}\n        />\n    );\n  }\n}`;\n\nconst Usage = pageHref => (\n  <ComponentUsage\n    pageHref={pageHref}\n    description={\n      <div>\n        {`Usage depends on what navigation package you're using.`} For\n        <CodeInline code=\"react-navigation\" /> you can follow their{' '}\n        <Link href=\"https://reactnavigation.org/docs/en/tab-based-navigation.html\">\n          guide on TabNavigation\n        </Link>\n      </div>\n    }\n    code={code}\n  />\n);\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/avatar/index.js",
    "content": "import React, { Component } from 'react';\nimport { ComponentPageLayout } from '@components';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'icons', sub: true },\n  { name: 'text', sub: true },\n  { name: 'custom', sub: true },\n];\n\nexport default class AvatarPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'avatar'}\n          title={'Avatar'}\n          description={\n            'Avatars are used to represent the user, other users, or contextual icons.'\n          }\n          importCode={`import { Avatar } from 'material-bread';`}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/avatar'} />\n          <Usage pageHref={'/components/avatar'} />\n          <Props pageHref={'/components/avatar'} />\n          <Demos pageHref={'/components/avatar'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/avatar/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  [\n    'color',\n    'Background color for avatar, applies to text and icon',\n    'string',\n    'primary',\n  ],\n  ['content', 'Name of icon or string to be rendered', 'string', ''],\n  ['contentColor', 'Color of icon or text', 'string', 'white'],\n  ['contentSize', 'Custom size that is not relative to avatar', 'number', ''],\n  ['contentStyles', 'Styles applied to content', 'object', ''],\n\n  ['image', 'Display image element as avatar', 'node', ''],\n\n  ['onPress', 'Onpress callback', 'func', ''],\n  ['ripple', 'enables ripple if onPress is provided', 'bool', 'false'],\n  ['rippleProps', 'Spreads ripple props to Ripple Component', 'object', ''],\n  ['size', 'Size of avatar, content scales with size', 'number', '24'],\n\n  ['type', 'Indicates which type of avatar', 'string: image, icon, text', ''],\n\n  ['style', 'Styles root element', 'object', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/backdrop/Demos/SubheaderDemo.js",
    "content": "import React from 'react';\nimport { View, Image, Text } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport {\n  Backdrop,\n  List,\n  ListItem,\n  Icon,\n  IconButton,\n  Avatar,\n  Heading,\n} from '../../../../../../src/index';\n\nexport const code = `\nclass Page extends React.Component {\n  render() {\n    const styles = {\n      container: {\n        flex: 1,\n        paddingTop: 30,\n\n      },\n      backdropHeader: {\n        height: 56,\n        flexDirection: 'row',\n        alignItems: 'center',\n      },\n      backdropHeaderTitle: {\n        fontSize: 18,\n        color: 'white',\n        fontWeight: '500',\n        marginLeft: 72,\n      },\n    };\n\n    const backLayerRevealed = (\n      <View style={{ flex: 1, width: '100%' }}>\n        <View style={styles.backdropHeader}>\n          <Text style={styles.backdropHeaderTitle}>Navigation</Text>\n        </View>\n\n        <List\n          style={{\n            width: '100%',\n            backgroundColor: 'transparent',\n          }}>\n          <ListItem\n            text={'Home'}\n            textStyle={{ color: 'white' }}\n            selected\n            style={{ backgroundColor: 'transparent' }}\n            icon={<Icon name={'home'} size={24} color={'white'} />}\n          />\n          <ListItem\n            text={'Music'}\n            textStyle={{ color: 'white' }}\n            style={{ backgroundColor: 'transparent' }}\n            icon={<Icon name={'music-note'} size={24} color={'white'} />}\n          />\n          <ListItem\n            text={'Favorites'}\n            textStyle={{ color: 'white' }}\n            style={{ backgroundColor: 'transparent' }}\n            icon={<Icon name={'favorite'} size={24} color={'white'} />}\n          />\n          <ListItem\n            text={'Settings'}\n            textStyle={{ color: 'white' }}\n            style={{ backgroundColor: 'transparent' }}\n            icon={<Icon name={'settings'} size={24} color={'white'} />}\n          />\n        </List>\n      </View>\n    )\n\n    const album = (\n      <Avatar\n        type=\"icon\"\n        content=\"album\"\n        contentColor={'#ececec'}\n        color={'#a3a3a3'}\n        size={40}\n      />\n    )\n    const iconFav = <IconButton name=\"favorite\" size={24} color=\"#6e6e6e\" />\n    \n    return (\n      <View style={{marginBottom: 80}} >\n        <Backdrop\n          subheader={'Music'}\n          backLayerConcealed={\n            <View style={styles.backdropHeader}>\n              <Text style={styles.backdropHeaderTitle}>App</Text>\n            </View>\n          }\n          backLayerRevealed={backLayerRevealed}\n          offset={260}>\n          <View style={styles.container}>\n            <Heading\n              text={'Albums'}\n              style={{\n                alignSelf: 'flex-start',\n                marginLeft: 20,\n                fontSize: 20,\n              }}\n            />\n            <ListItem\n              text={'Back in Black'}\n              secondaryText={'AC/DC'}\n              media={album}\n              actionItem={iconFav}\n            />\n            <ListItem\n              text={'Hotel California'}\n              secondaryText={'Eagles'}\n              media={album}\n              actionItem={iconFav}\n            />\n            <ListItem\n              text={'Dark Side of the Moon'}\n              secondaryText={'Pink Floyd '}\n              media={album}\n              actionItem={iconFav}\n            />\n            <ListItem\n              text={'Led Zeppelin IV'}\n              secondaryText={'Led Zeppelin'}\n              media={album}\n              actionItem={iconFav}\n            />\n          </View>\n        </Backdrop>\n      </View>\n    );\n  }\n}`;\n\nconst DotDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Subheader'}\n    sectionHref={`${pageHref}#subheader`}\n    sectionId={'subheader'}\n    code={code}\n    scope={{\n      Backdrop,\n      List,\n      ListItem,\n      Icon,\n      IconButton,\n      Avatar,\n      Heading,\n      View,\n      Image,\n      Text,\n    }}\n  />\n);\nexport default DotDemo;\n"
  },
  {
    "path": "docs/src/content/components/backdrop/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport SubheaderDemo from './SubheaderDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n        <SubheaderDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/backdrop/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image, Text } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport {\n  Backdrop,\n  List,\n  ListItem,\n  Icon,\n  IconButton,\n  Avatar,\n  Heading,\n} from '../../../../../src/index';\n\nexport const code = `\nclass Page extends React.Component {\n  render() {\n    const styles = {\n      backdropHeader: {\n        height: 56,\n        flexDirection: 'row',\n        alignItems: 'center',\n        borderRadius: 10\n      },\n      backdropHeaderTitle: {\n        fontSize: 18,\n        color: 'white',\n        marginLeft: 72,\n      },\n    };\n\n    const NavItem = ({ text, icon, selected }) => {\n      return (\n        <ListItem\n          text={text}\n          textStyle={{ color: 'white' }}\n          selected={selected}\n          style={{ backgroundColor: 'transparent' }}\n          icon={<Icon name={icon} size={24} color={'white'} />}\n        />\n      )\n    }\n\n    const backLayerRevealed = (\n      <View>\n        <View style={styles.backdropHeader}>\n          <Text style={styles.backdropHeaderTitle}>Navigation</Text>\n        </View>\n        <List style={{ backgroundColor: 'transparent' }}>\n          <NavItem text={'Home'} icon={'home'} selected />\n          <NavItem text={'Music'} icon={'music-note'} />\n          <NavItem text={'Favorites'} icon={'favorite'} />\n          <NavItem text={'Settings'} icon={'settings'} />\n        </List>\n      </View>\n    );\n\n    const backLayerConcealed = (\n      <View style={styles.backdropHeader}>\n        <Text style={styles.backdropHeaderTitle}>App</Text>\n      </View>\n    );\n\n    const album = (\n      <Avatar\n        type=\"icon\"\n        content=\"album\"\n        contentColor={'#ececec'}\n        color={'#a3a3a3'}\n        size={30}\n      />\n    );\n    const iconFav = <IconButton name=\"favorite\" size={24} color=\"#6e6e6e\" />\n    \n    const AlbumItem = ({ text, secondaryText }) => ( \n        <ListItem \n          text={text}\n          secondaryText={secondaryText} \n          media={album} \n          actionItem={iconFav} \n        /> \n    );\n\n    return (\n      <View style={{marginBottom: 80}}>\n        <Backdrop backLayerConcealed={backLayerConcealed} backLayerRevealed={backLayerRevealed} offset={249} >\n            <Heading text={'Albums'} style={{ marginLeft: 20, fontSize: 14,}} />\n            <AlbumItem text={'Back in Black'} secondaryText={'AC/DC'} />\n            <AlbumItem text={'Hotel California'} secondaryText={'Eagles'} />\n            <AlbumItem text={'Dark Side of the Moon'} secondaryText={'Pink Floyd'} />\n            <AlbumItem text={'Led Zeppelin IV'} secondaryText={'Led Zeppelin'} />\n        </Backdrop>\n      </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        <div style={{}}>\n          The <CodeInline code=\"Backdrop\" type=\"element\" /> is composed of three\n          main parts: <CodeInline code=\"backLayerConcealed\" type=\"prop\" />,{' '}\n          <CodeInline code=\"backLayerRevealed\" type=\"prop\" />, and the{' '}\n          <CodeInline code=\"frontLayer\" type=\"value\" />.{' '}\n          <CodeInline code=\"backLayerConcealed\" type=\"prop\" /> renders the{' '}\n          backlayer when the <CodeInline code=\"frontLayer\" type=\"value\" /> is\n          showing. <CodeInline code=\"backLayerRevealed\" type=\"prop\" /> renders\n          the full backlayer.\n          <CodeInline code=\"children\" type=\"prop\" /> renders as the{' '}\n          <CodeInline code=\"frontLayer\" type=\"value\" />.\n        </div>\n        <div style={{ marginTop: 20 }}>\n          By default when the <CodeInline code=\"backLayer\" type=\"value\" /> is\n          activated it will take up the full height of the device with the{' '}\n          <CodeInline code=\"frontLayer\" type=\"value\" /> at the bottom. You can\n          customize this by passing a number to the{' '}\n          <CodeInline code=\"offset\" type=\"prop\" /> prop for the size the\n          backlayer should take up.\n        </div>\n      </div>\n    }\n    code={code}\n    scope={{\n      Backdrop,\n      List,\n      ListItem,\n      Icon,\n      IconButton,\n      Avatar,\n      Heading,\n      View,\n      Image,\n      Text,\n    }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/backdrop/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/backdrop/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React from 'react';\nimport { \n  Backdrop,\n  List,\n  ListItem,\n  Icon,\n  IconButton,\n  Avatar,\n  Heading, \n} from 'material-bread';\n\nclass Page extends React.Component {\n  render() {\n    const styles = {\n      backdropHeader: {\n        height: 56,\n        flexDirection: 'row',\n        alignItems: 'center',\n        borderRadius: 10\n      },\n      backdropHeaderTitle: {\n        fontSize: 18,\n        color: 'white',\n        marginLeft: 72,\n      },\n    };\n\n    const NavItem = ({ text, icon, selected }) => {\n      return (\n        <ListItem\n          text={text}\n          textStyle={{ color: 'white' }}\n          selected={selected}\n          style={{ backgroundColor: 'transparent' }}\n          icon={<Icon name={icon} size={24} color={'white'} />}\n        />\n      )\n    }\n\n    const backLayerRevealed = (\n      <View>\n        <View style={styles.backdropHeader}>\n          <Text style={styles.backdropHeaderTitle}>Navigation</Text>\n        </View>\n        <List style={{ backgroundColor: 'transparent' }}>\n          <NavItem text={'Home'} icon={'home'} selected />\n          <NavItem text={'Music'} icon={'music-note'} />\n          <NavItem text={'Favorites'} icon={'favorite'} />\n          <NavItem text={'Settings'} icon={'settings'} />\n        </List>\n      </View>\n    );\n\n    const backLayerConcealed = (\n      <View style={styles.backdropHeader}>\n        <Text style={styles.backdropHeaderTitle}>App</Text>\n      </View>\n    );\n\n    const album = (\n      <Avatar\n        type=\"icon\"\n        content=\"album\"\n        contentColor={'#ececec'}\n        color={'#a3a3a3'}\n        size={30}\n      />\n    );\n    const iconFav = <IconButton name=\"favorite\" size={24} color=\"#6e6e6e\" />\n    \n    const AlbumItem = ({ text, secondaryText }) => ( \n        <ListItem \n          text={text}\n          secondaryText={secondaryText} \n          media={album} \n          actionItem={iconFav} \n        /> \n    );\n\n    return (\n      <View style={{marginBottom: 80}}>\n        <Backdrop backLayerConcealed={backLayerConcealed} backLayerRevealed={backLayerRevealed} offset={249} >\n            <Heading text={'Albums'} style={{ marginLeft: 20, fontSize: 14,}} />\n            <AlbumItem text={'Back in Black'} secondaryText={'AC/DC'} />\n            <AlbumItem text={'Hotel California'} secondaryText={'Eagles'} />\n            <AlbumItem text={'Dark Side of the Moon'} secondaryText={'Pink Floyd'} />\n            <AlbumItem text={'Led Zeppelin IV'} secondaryText={'Led Zeppelin'} />\n        </Backdrop>\n      </View>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/backdrop/index.js",
    "content": "import React, { Component } from 'react';\nimport { ComponentPageLayout } from '@components';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'subheader', sub: true },\n];\n\nexport default class BackdropPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'backdrop'}\n          title={'Backdrop'}\n          description={\n            'A backdrop appears behind all other surfaces in an app, displaying contextual and actionable content.'\n          }\n          importCode={`import { Backdrop } from 'material-bread';`}\n          docsLink={'https://material.io/design/components/backdrop.html#'}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/backdrop'} />\n          <Usage pageHref={'/components/backdrop'} />\n          <Props pageHref={'/components/backdrop'} />\n          <Demos pageHref={'/components/backdrop'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/backdrop/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  [\n    'backLayerConcealed',\n    'Renders the backlayer when frontlayer shows',\n    'node',\n    '',\n  ],\n  ['backLayerRevealed', 'Renders the full backlayer', 'node', ''],\n  ['backLayerStyle', 'Styles the backlayer container element', 'object', ''],\n\n  ['frontLayerStyle', 'Styles the frontlayer container element', 'object', ''],\n  [\n    'headerButtonStyle',\n    'Styles the animated header icon container element',\n    'object',\n    '',\n  ],\n  [\n    'initialOffset',\n    'Height of backLayerConcealed and offset for frontLayer',\n    'number',\n    '56',\n  ],\n  [\n    'offset',\n    'Offset of frontLayer when backLayer is revealed',\n    'number',\n    'window.height',\n  ],\n  ['style', 'Styles root element', 'object', ''],\n  ['subheader', 'Subheader for frontLayer', 'string', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/badge/Demos/AnimatedDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentDemo, CodeInline } from '@components';\nimport { Badge, Icon, IconButton, Button } from '../../../../../../src/index';\n\nexport const code = `class Page extends React.Component {\n    constructor(props) {\n      super(props)\n      this.state = {\n        visible: true,\n      }\n    }\n    render() {\n      return (\n        <View>\n          <View style={{flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap'}}>\n            <Badge size={14} content={4} visible={this.state.visible}>\n                <Icon name=\"favorite\" size={24} />\n            </Badge>\n            <Badge\n                size={16}\n                content={77}\n                color={'red'}\n                visible={this.state.visible}>\n                <IconButton name=\"mail\" size={32} />\n            </Badge>\n            <Badge size={8} position={'left'} visible={this.state.visible}>\n                <IconButton name=\"message\" size={32} color={'#8BC34A'} />\n            </Badge>\n            <Badge\n                size={24}\n                content={99}\n                color={'black'}\n                textColor={'#E91E63'}\n                visible={this.state.visible}\n            />\n            </View>\n            <Button\n                text={'Toggle visibility'}\n                onPress={() => this.setState({ visible: !this.state.visible })}\n            />\n        </View>\n      );\n    }\n  }\n`;\n\nconst DotDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Animated'}\n    sectionHref={`${pageHref}#animated`}\n    sectionId={'animated'}\n    code={code}\n    scope={{ View, Image, Badge, Icon, IconButton, Button }}\n    description={\n      <div>\n        Toggle the <CodeInline code=\"visible\" type=\"prop\" /> prop an the badge\n        with animate out and in.\n      </div>\n    }\n  />\n);\nexport default DotDemo;\n"
  },
  {
    "path": "docs/src/content/components/badge/Demos/DotDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentDemo, CodeInline } from '@components';\nimport { Badge, Icon, IconButton } from '../../../../../../src/index';\n\nexport const code = `<View style={{flexDirection: 'row', alignItems: 'center'}}>\n    <Badge size={7} >\n        <Icon name=\"favorite\" size={32} />\n    </Badge>\n    <Badge size={8} color={'red'}>\n        <IconButton name=\"mail\" size={24} />\n    </Badge>\n    <Badge size={9} color={'pink'} >\n        <IconButton name=\"info\" size={24} />\n    </Badge>\n    <Badge size={10} position={'left'}>\n        <IconButton name=\"message\" size={40} />\n    </Badge>\n</View>\n`;\n\nconst DotDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Dot'}\n    sectionHref={`${pageHref}#dot`}\n    sectionId={'dot'}\n    code={code}\n    scope={{ View, Image, Badge, Icon, IconButton }}\n    description={\n      <div>\n        Simply remove the <CodeInline code=\"content\" type=\"prop\" /> prop and\n        reduce the <CodeInline code=\"size\" type=\"prop\" /> to something small\n        like 7 and you will get a dot\n      </div>\n    }\n  />\n);\nexport default DotDemo;\n"
  },
  {
    "path": "docs/src/content/components/badge/Demos/MaxDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo, CodeInline } from '@components';\nimport { Badge } from '../../../../../../src/index';\n\nexport const code = `\n<View style={{ \n    flexDirection: 'row', \n    alignItems: 'center', \n    marginBottom: 40,\n    }}\n>\n    <Badge size={36} content={'MB'} maxValue={99} />\n    <Badge size={36} content={99} />\n    <Badge size={36} content={100} maxValue={99} />\n    <Badge size={36} content={1000} maxValue={999} />\n</View>\n`;\n\nconst MaxDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Max Value'}\n    sectionHref={`${pageHref}#max`}\n    sectionId={'max'}\n    code={code}\n    scope={{ View, Badge }}\n    description={\n      <div>\n        Numerical Badges can have a <CodeInline code=\"maxvalue\" type=\"prop\" />.\n        If <CodeInline code=\"content\" type=\"prop\" /> exceeds this value, a\n        &quot;+&quot; will be added to the maximum.\n      </div>\n    }\n  />\n);\nexport default MaxDemo;\n"
  },
  {
    "path": "docs/src/content/components/badge/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport DotDemo from './DotDemo';\nimport AnimatedDemo from './AnimatedDemo';\nimport MaxDemo from './MaxDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n        <DotDemo pageHref={pageHref} />\n        <AnimatedDemo pageHref={pageHref} />\n        <MaxDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/badge/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { Badge, IconButton, Icon } from '../../../../../src/index';\n\nexport const code = `<View style={{flexDirection: 'row', alignItems: 'center'}}>\n  <Badge size={14} content={4}>\n      <Icon name=\"favorite\" size={32} />\n  </Badge>\n  <Badge size={14} content={77} color={'red'}>\n      <IconButton name=\"mail\" size={24} />\n  </Badge>\n  <Badge size={14} content={7} position={'left'} textColor={'pink'} >\n      <IconButton name=\"info\" size={24} />\n  </Badge>\n  <Badge size={24} content={1023} position={'left'}>\n      <IconButton name=\"message\" size={40} />\n  </Badge>\n  <Badge size={24} content={24} />\n  <Badge size={16} content={99} />\n  <Badge size={36} content={100} maxValue={99} />\n</View>`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        <CodeInline code=\"Badge\" type=\"element\" />s can be used in two ways:\n        standalone or wrapping a component.\n      </div>\n    }\n    code={code}\n    scope={{ IconButton, View, Image, Badge, Icon }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/badge/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/badge/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { Badge, IconButton } from 'material-bread';\n\nexport default class MessageIcon extends Component {\n  render() {\n    return (\n        <Badge size={24} content={10} position={'left'}>\n            <IconButton name=\"message\" size={40} />\n        </Badge>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/badge/index.js",
    "content": "import React, { Component } from 'react';\nimport { ComponentPageLayout } from '@components';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'dot', sub: true },\n  { name: 'animated', sub: true },\n  { name: 'max', sub: true },\n];\n\nexport default class BadgePage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'badge'}\n          title={'Badge'}\n          description={'Badges display status information.'}\n          importCode={`import { Badge } from 'material-bread';`}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/badge'} />\n          <Usage pageHref={'/components/badge'} />\n          <Props pageHref={'/components/badge'} />\n          <Demos pageHref={'/components/badge'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/badge/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['color', 'Background color for badge', 'string', 'primary'],\n\n  ['containerStyle', 'Styles badge container', 'object', ''],\n\n  ['content', 'Content displayed in badge', 'string || number', ''],\n\n  ['left', 'Left position', 'number', 'auto'],\n\n  ['maxValue', 'Maximum numerial value', 'number', ''],\n\n  ['onPress', 'Onpress callback', 'func', ''],\n\n  [\n    'position',\n    'Positions content on children ',\n    'string: left, right',\n    'right',\n  ],\n  ['right', 'Right position', 'number', '0'],\n\n  ['size', 'Size of badge, text scales with size', 'number', '16'],\n\n  ['textColor', 'Text color for badge', 'string', 'white'],\n  ['top', 'Top position', 'number', '0'],\n\n  ['style', 'Styles badge element', 'object', ''],\n  ['visible', 'Toggle visibility, triggers animation', 'bool', 'true'],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/banner/Demos/SingleLineDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo, CodeInline } from '@components';\nimport { Banner } from '../../../../../../src/index';\n\nexport const code = `<Banner\n  actionItems={[\n    {name: 'Sign in', onPress: () => console.log('sign in')}\n  ]}\n  singleLine\n  message={\n  'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'\n  }\n  visible\n/>\n`;\n\nconst IconDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Single Line'}\n    sectionHref={`${pageHref}#singeline`}\n    sectionId={'singeline'}\n    description={\n      <div>\n        The <CodeInline code=\"singleLine\" type=\"prop\" /> prop forces the banner\n        content to show in a row and aligned to the center.{' '}\n        {`But it\n      doesn't force the text content onto one line.`}{' '}\n        This is so smaller screens will handle the text more gracefully.\n      </div>\n    }\n    code={code}\n    scope={{ View, Banner }}\n  />\n);\nexport default IconDemo;\n"
  },
  {
    "path": "docs/src/content/components/banner/Demos/ThreeLineDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { Banner } from '../../../../../../src/index';\n\nexport const code = `<Banner\n  actionItems={[\n    {name: 'Continue'},\n    {name: 'Sign in', onPress: () => console.log('sign in')}\n  ]}\n  message={\n  'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco'\n  }\n  visible\n/>\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Three Line'}\n    sectionHref={`${pageHref}#threeline`}\n    sectionId={'threeline'}\n    code={code}\n    scope={{ View, Banner }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/banner/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader, Link } from '@components';\n\nimport SingleLineDemo from './SingleLineDemo';\nimport ThreeLineDemo from './ThreeLineDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n\n        <SingleLineDemo pageHref={pageHref} />\n        <ThreeLineDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/banner/MainDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { Avatar, Banner, Button } from '../../../../../src/index';\n\nexport const code = `class Header extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      visible: true\n    }\n  }\n \n  render() {\n    return (\n      <View>\n        <Banner\n          visible={this.state.visible}\n          actionItems={[\n            {name: 'Continue'},\n            {name: 'Sign in', onPress: () => console.log('sign in')}\n          ]}\n          media={\n            <Avatar\n              type=\"icon\"\n              content=\"notifications\"\n              size={40}\n              contentColor={'white'}\n              color={'#42a5f5'}\n            />\n          }\n          message={\n            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'\n            }\n        />\n        <Button text={'Toggle'} type={'contained'} onPress={() => this.setState({visible: !this.state.visible})} containerStyle={{marginTop: 16}} />\n      </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        <CodeInline code=\"Banner\" type=\"element\" />s show important information\n        at the top of a page, you can add an{' '}\n        <CodeInline code=\"icon\" type=\"value\" /> or other{' '}\n        <CodeInline code=\"media\" type=\"props\" />, text, and\n        <CodeInline code=\"actionItems\" type=\"prop\" />. A simple web multiline\n        example is shown below.\n      </div>\n    }\n    code={code}\n    scope={{ View, Banner, Avatar, Button }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/banner/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/banner/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage, CodeInline } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { Banner, Button } from 'material-bread';\n\nclass Header extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      visible: true\n    }\n  }\n \n  render() {\n    return (\n      <View>\n        <Banner\n          visible={this.state.visible}\n          position={'relative'}\n          actionItems={[\n            {name: 'Continue'},\n            {name: 'Sign in', onPress: () => console.log('sign in')}\n          ]}\n          media={\n            <Avatar\n              type=\"icon\"\n              content=\"notifications\"\n              size={40}\n              contentColor={'white'}\n              color={'#42a5f5'}\n            />\n          }\n          message={\n            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'\n            }\n        />\n        <Button text={'Toggle'} type={'outlined'} onPress={() => this.setState({visible: !this.state.visible})} containerStyle={{marginTop: 16}} />\n      </View>\n    );\n  }\n}`;\n\nconst Usage = pageHref => (\n  <ComponentUsage\n    pageHref={pageHref}\n    description={\n      <div>\n        Banners are meant to be dissmissed. Changing the{' '}\n        <CodeInline code=\"visible\" type=\"prop\" /> prop will trigger the\n        animation to show and hide the banner. Additionally, each{' '}\n        <CodeInline code=\"actionItem\" type=\"prop\" />\n        will dismiss the banner, but you can trigger this manually by changing\n        the <CodeInline code=\"visible\" type=\"prop\" /> prop. Usually banners are\n        shown right below the appbar and can be fixed or scrollable. You can\n        toggle this with the <CodeInline code=\"position\" type=\"prop\" /> prop.\n      </div>\n    }\n    code={code}\n  />\n);\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/banner/index.js",
    "content": "import React, { Component } from 'react';\nimport { ComponentPageLayout } from '@components';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'singeline', sub: true },\n  { name: 'threeline', sub: true },\n];\n\nexport default class BadgePage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'banner'}\n          title={'Banner'}\n          description={\n            'A banner displays a prominent message and related optional actions.'\n          }\n          docsLink={'https://material.io/design/components/banners.html#'}\n          importCode={`import { Banner } from 'material-bread';`}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/banner'} />\n          <Usage pageHref={'/components/banner'} />\n          <Props pageHref={'/components/banner'} />\n          <Demos pageHref={'/components/banner'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/banner/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['actionItems', 'Array of objects for displaying actions', 'array', ''],\n  ['media', 'Displays arbitrary component to the left of the text', 'node', ''],\n  ['message', 'Displays banner message', 'string', ''],\n\n  ['mobileLayout', 'Display mobile layout on desktop', 'bool', ''],\n\n  [\n    'position',\n    'Position on root',\n    'string: relative, fixed, absolute',\n    'relative',\n  ],\n  ['singleLine', 'Display banner on one line', 'bool', ''],\n  ['visible', 'Whether the banner is visible', 'bool', ''],\n\n  ['style', 'Styles root banner element', 'object', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/bottom-navigation/Demos/ColoredDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo, CodeInline } from '@components';\nimport {\n  BottomNavigation,\n  BottomNavigationItem,\n} from '../../../../../../src/index';\n\nexport const code = `class BottomTabs extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      value: 0\n    }\n  }\n\n  handleChange(value) {\n      this.setState({value});\n  }\n \n  render() {\n    return (\n      <View style={{alignItems: 'center'}}>\n        <BottomNavigation \n            style={{ maxWidth: 672, width: '100%' }}\n            value={this.state.value}\n            backgroundColor={'#673AB7'}\n            handleChange={(value) => this.handleChange(value)}\n            actionItems={[\n                {icon: 'home', label: 'Home'},\n                {icon: 'favorite', label: 'Favorite'},\n                <BottomNavigationItem icon={'settings'} label={'Settings'} />, \n            ]}\n        />\n      </View>\n    );\n  }\n}\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Colored Background'}\n    sectionHref={`${pageHref}#colored`}\n    sectionId={'colored'}\n    description={\n      <div>\n        Changing the <CodeInline code=\"backgroundColor\" type=\"prop\" /> will\n        change the icons to display as <CodeInline code=\"white\" type=\"value\" />.\n      </div>\n    }\n    code={code}\n    scope={{ View, BottomNavigation, BottomNavigationItem }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/bottom-navigation/Demos/IconsOnly.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport {\n  BottomNavigation,\n  BottomNavigationItem,\n} from '../../../../../../src/index';\n\nexport const code = `class BottomTabs extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      value: 0\n    }\n  }\n\n  handleChange(value) {\n      this.setState({value});\n  }\n \n  render() {\n    return (\n      <View style={{alignItems: 'center'}}>\n        <BottomNavigation \n            style={{ maxWidth: 672, width: '100%' }}\n            showLabels\n            backgroundColor={'white'}\n            value={this.state.value}\n            handleChange={(value) => this.handleChange(value)}\n            actionItems={[\n                {icon: 'home' },\n                {icon: 'attach-money'},\n                {icon: 'favorite'},\n                {icon: 'info'},\n                <BottomNavigationItem icon={'settings'} />, \n            ]}\n        />\n      </View>\n    );\n  }\n}`;\n\nconst IconDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Icons'}\n    sectionHref={`${pageHref}#icons`}\n    sectionId={'icons'}\n    code={code}\n    livePreviewBackground={'#f7f7f7'}\n    scope={{ View, BottomNavigation, BottomNavigationItem }}\n  />\n);\nexport default IconDemo;\n"
  },
  {
    "path": "docs/src/content/components/bottom-navigation/Demos/LabelsDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport {\n  BottomNavigation,\n  BottomNavigationItem,\n} from '../../../../../../src/index';\n\nexport const code = `class BottomTabs extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      value: 0\n    }\n  }\n\n  handleChange(value) {\n      this.setState({value});\n  }\n \n  render() {\n    return (\n      <View style={{alignItems: 'center'}}>\n        <BottomNavigation \n            style={{ maxWidth: 672, width: '100%' }}\n            showLabels\n            backgroundColor={'white'}\n            value={this.state.value}\n            handleChange={(value) => this.handleChange(value)}\n            actionItems={[\n                {icon: 'home', label: 'Home'},\n                {icon: 'favorite', label: 'Favorite'},\n                {icon: 'info', label: 'Info'},\n                <BottomNavigationItem icon={'settings'} label={'Settings'} />, \n            ]}\n        />\n      </View>\n    );\n  }\n}`;\n\nconst IconDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Labels'}\n    sectionHref={`${pageHref}#labels`}\n    sectionId={'labels'}\n    code={code}\n    livePreviewBackground={'#f7f7f7'}\n    scope={{ View, BottomNavigation, BottomNavigationItem }}\n  />\n);\nexport default IconDemo;\n"
  },
  {
    "path": "docs/src/content/components/bottom-navigation/Demos/LandscapeDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo, CodeInline } from '@components';\nimport {\n  BottomNavigation,\n  BottomNavigationItem,\n} from '../../../../../../src/index';\n\nexport const code = `class BottomTabs extends React.Component {\n    constructor(props) {\n      super(props)\n      this.state = {\n        value: 0\n      }\n    }\n  \n    handleChange(value) {\n        this.setState({value});\n    }\n   \n    render() {\n      return (\n        <View style={{alignItems: 'center'}}>\n          <BottomNavigation \n              style={{maxWidth: 672, width: '100%' }}\n              value={this.state.value}\n              horizontalWhenLandscape\n              handleChange={(value) => this.handleChange(value)}\n              actionItems={[\n                  {icon: 'home', label: 'Home'},\n                  {icon: 'favorite', label: 'Favorite'},\n                  {icon: 'info', label: 'Info'},\n                  <BottomNavigationItem icon={'settings'} label={'Settings'} />, \n              ]}\n          />\n        </View>\n      );\n    }\n  }`;\n\nconst IconDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Landscape'}\n    sectionHref={`${pageHref}#landscape`}\n    sectionId={'landscape'}\n    code={code}\n    description={\n      <div>\n        By default items should keep their width and have the same widths on\n        larger width screens. If the{' '}\n        <CodeInline code=\"horizontalWhenLandscape\" type=\"prop\" /> prop is added,\n        the labels and icons will be laid out horizontally and take up the full\n        width of the bar both per Material Design. Check the Storybook demos for\n        examples of both.\n      </div>\n    }\n    scope={{ View, BottomNavigation, BottomNavigationItem }}\n  />\n);\nexport default IconDemo;\n"
  },
  {
    "path": "docs/src/content/components/bottom-navigation/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport LabelsDemo from './LabelsDemo';\nimport ColoredDemo from './ColoredDemo';\nimport IconsOnly from './IconsOnly';\nimport LandscapeDemo from './LandscapeDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n        <LandscapeDemo pageHref={pageHref} />\n        <LabelsDemo pageHref={pageHref} />\n        <ColoredDemo pageHref={pageHref} />\n        <IconsOnly pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/bottom-navigation/MainDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport {\n  BottomNavigation,\n  BottomNavigationItem,\n} from '../../../../../src/index';\n\nexport const code = `class BottomTabs extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      value: 0\n    }\n  }\n\n  handleChange(value) {\n      this.setState({value});\n  }\n \n  render() {\n    return (\n      <View style={{alignItems: 'center'}}>\n        <BottomNavigation \n            style={{maxWidth: 672, width: '100%' }}\n            backgroundColor={'white'}\n            value={this.state.value}\n            handleChange={(value) => this.handleChange(value)}\n            actionItems={[\n                {icon: 'home', label: 'Home'},\n                {icon: 'favorite', label: 'Favorite'},\n                {icon: 'info', label: 'Info'},\n                <BottomNavigationItem icon={'settings'} label={'Settings'} />, \n            ]}\n        />\n      </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        You can pass items either to the{' '}\n        <CodeInline code=\"actionItem\" type=\"prop\" />\n        's prop, or as <CodeInline code=\"children\" type=\"prop\" /> for more\n        customization. If you pass both, the{' '}\n        <CodeInline code=\"children\" type=\"prop\" /> elements will overwrite the{' '}\n        <CodeInline code=\"actionItem\" type=\"prop\" /> elements. The active item\n        is handled by passing in the <CodeInline code=\"index\" type=\"value\" /> of\n        that item to{' '}\n        <CodeInline\n          code=\"Bottom\n              Navigation\"\n          type=\"element\"\n        />{' '}\n        and adding a <CodeInline code=\"handleChange\" type=\"prop\" /> method.{' '}\n        {`A simple example is shown below, more customization\n              options can be seen in the demo's section.`}\n      </div>\n    }\n    code={code}\n    livePreviewBackground={'#f7f7f7'}\n    scope={{ View, BottomNavigation, BottomNavigationItem }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/bottom-navigation/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/bottom-navigation/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage, CodeInline } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { BottomNavigation, BottomNavigationItem } from 'material-bread';\n\nclass BottomTabs extends React.Component {\n    constructor(props) {\n      super(props)\n      this.state = {\n        value: 0\n      }\n    }\n  \n    handleChange(value) {\n        this.setState({value});\n    }\n   \n    render() {\n      return (\n        <BottomNavigation \n            style={{width: 672 }}\n            backgroundColor={'white'}\n            value={this.state.value}\n            handleChange={(value) => this.handleChange(value)}\n            actionItems={[\n                {icon: 'home', label: 'Home', onPress={() => this.props.navigation.navigate('Home')}},\n                {icon: 'favorite', label: 'Favorite',  onPress={() => this.props.navigation.navigate('Favorites')}},\n                {icon: 'info', label: 'Info',  onPress={() => this.props.navigation.navigate('Info')}},\n                <BottomNavigationItem icon={'settings'} label={'Settings'}  onPress={() => this.props.navigation.navigate('Settings')}/>, \n            ]}\n        />\n      );\n    }\n  }`;\n\nconst Usage = pageHref => (\n  <ComponentUsage\n    pageHref={pageHref}\n    description={\n      <div>\n        Follow the instructions on your navigation package of choice for setting\n        up bottom tabs with a custom component. Otherwise you can add{' '}\n        <CodeInline code=\"onPress\" type=\"prop\" /> props to each tab to call your\n        navigate function.\n      </div>\n    }\n    code={code}\n  />\n);\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/bottom-navigation/index.js",
    "content": "import React, { Component } from 'react';\nimport { ComponentPageLayout } from '@components';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'landscape', sub: true },\n  { name: 'labels', sub: true },\n  { name: 'colored', sub: true },\n  { name: 'icons', sub: true },\n];\n\nexport default class BadgePage extends Component {\n  render() {\n    return (\n      <ComponentPageLayout\n        componentName={'bottom-navigation'}\n        title={'Bottom Navigation'}\n        description={\n          'Bottom navigation bars allow movement between primary destinations in an app.'\n        }\n        docsLink={\n          'https://material.io/design/components/bottom-navigation.html#'\n        }\n        importCode={`import { BottomNavigation } from 'material-bread';`}\n        sideScrollMenuItems={sections}>\n        <MainDemo pageHref={'/components/bottom-navigation'} />\n        <Usage pageHref={'/components/bottom-navigation'} />\n        <Props pageHref={'/components/bottom-navigation'} />\n        <Demos pageHref={'/components/bottom-navigation'} />\n      </ComponentPageLayout>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/bottom-navigation/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['actionItems', 'Array of objects displaying tab items', 'array', ''],\n\n  ['backgroundColor', 'Background Color for root component', 'string', 'white'],\n\n  ['handleChange', 'fires when a BottomNavigationItem is clicked', 'func', ''],\n\n  [\n    'horizontalWhenLandscape',\n    'When in landscape mode, layout items horizontally',\n    'bool',\n    'false',\n  ],\n\n  [\n    'showOneItem',\n    'Display one icon + label at a time, sets showOneItem to each BottomNavigationItem',\n    'bool',\n    'false',\n  ],\n\n  [\n    'showLabels',\n    'Sets showLabel true for each BottomNavigationItem',\n    'bool',\n    'true',\n  ],\n\n  ['style', 'Styles root element', 'object', ''],\n\n  ['value', 'Index of currently active Item', 'number', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/bottom-navigation-item/Demos/BadgeDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo, CodeInline, Link } from '@components';\nimport {\n  BottomNavigation,\n  BottomNavigationItem,\n} from '../../../../../../src/index';\n\nexport const code = `class BottomTabs extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      value: 0\n    }\n  }\n\n  handleChange(value) {\n      this.setState({value});\n  }\n \n  render() {\n    return (\n      <View style={{alignItems: 'center'}}>\n        <BottomNavigation \n            style={{  maxWidth: 672, width: '100%' }}\n            backgroundColor={'white'}\n            value={this.state.value}\n            handleChange={(value) => this.handleChange(value)}\n            actionItems={[\n                <BottomNavigationItem icon={'home'} label={'Home'} />,\n                <BottomNavigationItem icon={'favorite'} label={'Favorite'} badgeProps={{\n                  size: 7, color: 'red', right: 1, top: 2\n                }} />,\n                <BottomNavigationItem icon={'info'} label={'Info'} />,\n                <BottomNavigationItem\n                    icon={'settings'}\n                    label={'Settings'}\n                    badgeProps={{\n                        content: 72, size: 14, color: 'red',\n                    }}\n                />, \n            ]}\n        />\n      </View>\n    );\n  }\n}`;\n\nconst BadgeDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Badges'}\n    sectionHref={`${pageHref}#badges`}\n    sectionId={'badges'}\n    description={\n      <div>\n        Adding values to the <CodeInline code=\"badgeProp\" type=\"prop\" /> will\n        display a prop over the icon. See the{' '}\n        <Link href=\"/components/badge/\">Badge</Link> component page for more\n        props.\n      </div>\n    }\n    code={code}\n    livePreviewBackground={'#f7f7f7'}\n    scope={{ View, BottomNavigation, BottomNavigationItem }}\n  />\n);\nexport default BadgeDemo;\n"
  },
  {
    "path": "docs/src/content/components/bottom-navigation-item/Demos/CustomDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { CodeInline, ComponentDemo } from '@components';\nimport {\n  BottomNavigation,\n  BottomNavigationItem,\n  Icon,\n  Avatar,\n} from '../../../../../../src/index';\n\nexport const code = `class BottomTabs extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      value: 'Home'\n    }\n  }\n\n  handleChange(value) {\n      this.setState({value});\n  }\n \n  render() {\n    return (\n      <View style={{alignItems: 'center'}}>\n        <BottomNavigation \n            style={{ maxWidth: 672, width: '100%', height: 42, borderTopRightRadius: 6, borderTopLeftRadius: 6 }}\n            backgroundColor={'black'}\n            actionItems={[\n                <BottomNavigationItem \n                    value={'Home'} \n                    active={this.state.value === 'Home'} \n                    handleChange={(value) => this.handleChange(value)}\n                    style={{height: 42}}\n                >\n                    <Icon name=\"home\" size={30} color={'white'} />\n                </BottomNavigationItem>,\n                <BottomNavigationItem \n                    value={'Favorite'} \n                    active={this.state.value === 'Favorite'} \n                    handleChange={(value) => this.handleChange(value)}\n                    style={{height: 42}}\n                >\n                    <Icon name=\"favorite\" size={30} color={'white'} />\n                </BottomNavigationItem>,\n                <BottomNavigationItem \n                    value={'Info'} \n                    active={this.state.value === 'Info'} \n                    handleChange={(value) => this.handleChange(value)}\n                    style={{height: 42}}\n                >\n                    <Icon name=\"info\" size={30} color={'white'} />\n                </BottomNavigationItem>,\n               \n               \n                <BottomNavigationItem \n                    value={'Settings'} \n                    active={this.state.value === 'Settings'} \n                    handleChange={(value) => this.handleChange(value)}\n                    style={{height: 42, flexDirection: 'row'}}\n                >\n                    <Avatar \n                        type=\"image\" \n                        image={<Image source={{uri: 'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4'}} /> } \n                        size={30}\n                    /> \n                    <Icon\n                        name=\"expand-more\"\n                        size={20}\n                        color={'white'}\n                        style={{alignSelf: 'flex-end', marginBottom: 4}}\n                    />\n                </BottomNavigationItem>, \n            ]}\n        />\n      </View>\n    );\n  }\n}\n`;\n\nconst CustomDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Custom'}\n    sectionHref={`${pageHref}#custom`}\n    sectionId={'custom'}\n    description={\n      <div>\n        Adding <CodeInline code=\"children\" type=\"prop\" /> will replace all{' '}\n        <CodeInline code=\"actionItems\" type=\"prop\" />, but still provide logic\n        for for switching the active item.\n      </div>\n    }\n    code={code}\n    scope={{\n      View,\n      BottomNavigation,\n      BottomNavigationItem,\n      Icon,\n      Avatar,\n      Image,\n    }}\n  />\n);\nexport default CustomDemo;\n"
  },
  {
    "path": "docs/src/content/components/bottom-navigation-item/Demos/StyledDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport {\n  BottomNavigation,\n  BottomNavigationItem,\n} from '../../../../../../src/index';\n\nexport const code = `class BottomTabs extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      value: 0\n    }\n  }\n\n  handleChange(value) {\n      this.setState({value});\n  }\n \n  render() {\n    return (\n      <View style={{alignItems: 'center'}}>\n        <BottomNavigation \n            style={{  maxWidth: 672, width: '100%' }}\n            showLabels\n            value={this.state.value}\n            handleChange={(value) => this.handleChange(value)}\n            backgroundColor={'transparent'}\n            actionItems={[\n              <BottomNavigationItem\n                  icon={'home'}\n                  label={'Home'} \n                  style={{backgroundColor: '#3F51B5'}}\n              />,\n              <BottomNavigationItem\n                  icon={'favorite'}\n                  label={'Favorite'}\n                  style={{backgroundColor: '#009688'}}\n              />,\n              <BottomNavigationItem\n                  icon={'info'}\n                  label={'Info'}\n                  style={{backgroundColor: '#2196F3'}}\n              />,\n              <BottomNavigationItem\n                  icon={'settings'}\n                  label={'Settings'}\n                  style={{backgroundColor: '#F44336'}}\n              />, \n            ]}\n        />\n      </View>\n    );\n  }\n}\n`;\n\nconst IconDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Styled'}\n    sectionHref={`${pageHref}#styled`}\n    sectionId={'styled'}\n    code={code}\n    scope={{ View, BottomNavigationItem, BottomNavigation }}\n  />\n);\nexport default IconDemo;\n"
  },
  {
    "path": "docs/src/content/components/bottom-navigation-item/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport BadgeDemo from './BadgeDemo';\nimport StyledDemo from './StyledDemo';\nimport CustomDemo from './CustomDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n\n        <BadgeDemo pageHref={pageHref} />\n        <StyledDemo pageHref={pageHref} />\n        <CustomDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/bottom-navigation-item/MainDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport {\n  BottomNavigation,\n  BottomNavigationItem,\n  Badge,\n} from '../../../../../src/index';\n\nexport const code = `class BottomTabs extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      value: 'Home'\n    }\n  }\n\n  handleChange(value) {\n      this.setState({value});\n  }\n \n  render() {\n    return (\n      <View style={{alignItems: 'center'}}>\n        <BottomNavigation \n            style={{ maxWidth: 672, width: '100%' }}\n            actionItems={[\n                <BottomNavigationItem \n                    icon={'home'} \n                    value={'Home'} \n                    active={this.state.value === 'Home'} \n                    handleChange={(value) => this.handleChange(value)}\n\n                />,\n                <BottomNavigationItem \n                    icon={'favorite'} \n                    value={'Favorite'} \n                    active={this.state.value === 'Favorite'} \n                    handleChange={(value) => this.handleChange(value)}\n                />,\n                <BottomNavigationItem \n                    icon={'info'} \n                    value={'Info'} \n                    active={this.state.value === 'Info'} \n                    handleChange={(value) => this.handleChange(value)}\n                    label={'Info'}\n                />,\n                <BottomNavigationItem \n                    icon={'settings'} \n                    value={'Settings'} \n                    active={this.state.value === 'Settings'} \n                    handleChange={(value) => this.handleChange(value)}\n                    showLabel\n                    label={'Settings'}\n                />, \n            ]}\n        />\n      </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        You can have only <CodeInline code=\"icon\" type=\"value\" />s or{' '}\n        <CodeInline code=\"label\" type=\"value\" />\n        s, or both together. You can also mix and match components and objects\n        in the array.\n      </div>\n    }\n    code={code}\n    scope={{ View, BottomNavigationItem, BottomNavigation, Badge }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/bottom-navigation-item/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/bottom-navigation-item/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { BottomNavigation, BottomNavigationItem } from 'material-bread';\n\nclass BottomTabs extends Component {\n    constructor(props) {\n      super(props)\n      this.state = {\n        value: 0\n      }\n    }\n  \n    handleChange(value) {\n        this.setState({value});\n    }\n   \n    render() {\n      return (\n        <BottomNavigation \n            style={{width: 672 }}\n            value={this.state.value}\n            handleChange={(value) => this.handleChange(value)}\n            actionItems={[\n                <BottomNavigationItem icon={'home'} label={'Home'} />,\n                <BottomNavigationItem icon={'favorite'} label={'Favorite'} />,\n                <BottomNavigationItem icon={'info'} label={'Info'} />,\n                <BottomNavigationItem icon={'settings'} label={'Settings'} />, \n            ]}\n        />\n      );\n    }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/bottom-navigation-item/index.js",
    "content": "import React, { Component } from 'react';\nimport { ComponentPageLayout } from '@components';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'badges', sub: true },\n  { name: 'styled', sub: true },\n  { name: 'custom', sub: true },\n];\n\nexport default class BadgePage extends Component {\n  render() {\n    return (\n      <ComponentPageLayout\n        componentName={'bottom-navigation-item'}\n        title={'Bottom Navigation Item'}\n        description={\n          'Bottom Navigation Items represent the individual clickable tabs for Bottom Navigation bars.'\n        }\n        importCode={`import { BottomNavigationItem } from 'material-bread';`}\n        sideScrollMenuItems={sections}>\n        <MainDemo pageHref={'/components/bottom-navigation-item'} />\n        <Usage pageHref={'/components/bottom-navigation-item'} />\n        <Props pageHref={'/components/bottom-navigation-item'} />\n        <Demos pageHref={'/components/bottom-navigation-item'} />\n      </ComponentPageLayout>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/bottom-navigation-item/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['actionItems', 'Array of objects displaying tab items', 'array', ''],\n  [\n    'active',\n    'Active item is handled internally with BottomNavigatino, but you can controll it manually with this prop',\n    'bool',\n    '',\n  ],\n\n  [\n    'badgeProps',\n    'Each prop is a key, adding any prop will show the badge over the icon.',\n    'object',\n    '',\n  ],\n\n  [\n    'handleChange',\n    'Is set by BottomNavigation prop, but can be overwritten individually here',\n    'func',\n    '',\n  ],\n\n  ['horizontal', 'Whether to layout an item horizontally', 'bool', ''],\n\n  ['icon', 'Name of material icon displayed', 'string', ''],\n\n  ['isLandscape', 'Is the screen in landscape mode', 'bool', ''],\n\n  ['label', 'Text to display underneath the icon', 'string', ''],\n\n  [\n    'maxWidth',\n    'The maximum width of the item',\n    'number',\n    'Min between {smallest window dimension/# of items} and 168',\n  ],\n\n  ['onItemLayout', 'Called when each item is rendered', 'func', ''],\n  ['onPress', 'callBack to fire when clicking item', 'func', ''],\n\n  [\n    'showOneItem',\n    'Set by BottomNavigation prop, but can be overwritten individually here',\n    'bool',\n    '',\n  ],\n\n  [\n    'showLabel',\n    'Set by BottomNavigation prop, but can be overwritten individually here',\n    'bool',\n    'true',\n  ],\n\n  ['rippleProps', 'Props applied to the ripple', 'object', ''],\n\n  ['style', 'Styles root element', 'object', ''],\n\n  [\n    'value',\n    'Set by BottomNavigation prop as index, but can be overwritten individually here',\n    'number',\n    '',\n  ],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/button/Demos/ContainedDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo, CodeInline } from '@components';\nimport { Button, Icon } from '../../../../../../src/index';\n\nexport const code = `<View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap'}}>\n  <Button text={'contained'} type=\"contained\" />\n  <Button text={'Icon'} type=\"contained\" color={'#E91E63'} icon={<Icon name=\"favorite\" />} />\n  <Button text={'Radius'} type=\"contained\" color={'#FF5722'} radius={20} />\n  <Button text={'Density'} type=\"contained\" color={'#673AB7'} density={-1} />\n  <Button text={'Loading'} type=\"contained\" color={'#009688'} loading />\n  <Button text={'Disabled'} type=\"contained\" disabled />\n</View>\n`;\n\nconst IconDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Contained'}\n    sectionHref={`${pageHref}#contained`}\n    sectionId={'contained'}\n    code={code}\n    scope={{ View, Button, Icon }}\n    description={\n      <div>\n        Contained buttons are raised buttons and raise higher when pressed.\n        Because of the shadow, you need to use{' '}\n        <CodeInline code=\"containerStyle\" type=\"prop\" />\n        to style the root component to add spacing. The style prop will still\n        style the inner <CodeInline code=\"Ripple\" type=\"element\" /> component.\n      </div>\n    }\n  />\n);\nexport default IconDemo;\n"
  },
  {
    "path": "docs/src/content/components/button/Demos/CustomDemo.js",
    "content": "import React from 'react';\nimport { View, Text } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { Button, Icon } from '../../../../../../src/index';\n\nexport const code = `<View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', flexWrap: 'wrap'}}>\n  <Button\n    style={{height: 100, width: 100, flexDirection: \"column\", marginRight: 24}}\n    type={'outlined'}\n    borderSize={4}\n    radius={10}\n  >\n    <Icon name=\"cloud-upload\" size={34} />\n    <Text style={{fontWeight: '600', textAlign: 'center'}}>Upload files</Text>\n  </Button>\n</View>\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Custom'}\n    sectionHref={`${pageHref}#custom`}\n    sectionId={'custom'}\n    description={\n      <div>\n        Adding children will replace the text node, but not icon or loader. This\n        allows for a more customization.\n      </div>\n    }\n    code={code}\n    scope={{ View, Button, Text, Icon }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/button/Demos/FlatDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { Button, Icon } from '../../../../../../src/index';\n\nexport const code = `<View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap'}}>\n  <Button text={'Flat'} type=\"flat\" />\n  <Button text={'Icon'} type=\"flat\" color={'#E91E63'} icon={<Icon name=\"favorite\" />} />\n  <Button text={'Radius'} type=\"flat\" color={'#FF5722'} radius={20} />\n  <Button text={'Density'} type=\"flat\" color={'#673AB7'} density={-1} />\n  <Button text={'Loading'} type=\"flat\" color={'#009688'} loading />\n  <Button text={'Disabled'} type=\"flat\" disabled />\n  <Button text={'Loading'} type=\"flat\" color={'#009688'} loading />\n</View>\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Flat'}\n    sectionHref={`${pageHref}#flat`}\n    sectionId={'flat'}\n    description={'Flat buttons are normal buttons without a shadow.'}\n    code={code}\n    scope={{ View, Button, Icon }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/button/Demos/FullWidthDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo, CodeInline } from '@components';\nimport { Button, Icon } from '../../../../../../src/';\n\nexport const code = `<View style={{flexDirection: 'column'}}>\n    <Button fullWidth text={'Contained'} type=\"contained\"  containerStyle={{marginBottom: 8}} />\n    <Button fullWidth text={'Flat'} type=\"flat\" color={'#E91E63'} style={{marginBottom: 8}} />\n    <Button fullWidth text={'Outlined'} type=\"outlined\" textColor={'#673AB7'} style={{marginBottom: 8}} />\n    <Button fullWidth text={'Text'} textColor={'#009688'}  style={{marginBottom: 8}}/>\n</View>\n`;\n\nconst IconDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Full Width'}\n    sectionHref={`${pageHref}#full-width`}\n    sectionId={'full-width'}\n    code={code}\n    scope={{ View, Button, Icon }}\n    description={\n      <div>\n        Adding <CodeInline code=\"fullWidth\" type=\"prop\" /> will force the\n        component to take up available space.\n      </div>\n    }\n  />\n);\nexport default IconDemo;\n"
  },
  {
    "path": "docs/src/content/components/button/Demos/IconsDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { Button, Icon } from '../../../../../../src/index';\n\nexport const code = `<View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap'}}>\n    <Button text={'Save'} type=\"contained\" color={'#2196F3'} icon={<Icon name=\"save\" />} radius={20} />\n    <Button text={'Delete'} type=\"flat\" icon={<Icon name=\"delete\" />} color={'#F44336'} />\n    <Button text={'Archive'} type=\"outlined\" textColor={'#673AB7'}  icon={<Icon name=\"archive\" />} />\n    <Button text={'Add'} textColor={'#009688'} icon={<Icon name=\"add\" />}  />\n    <Button text={'Notify'} type=\"outlined\" textColor={'#E91E63'}  icon={<Icon name=\"notifications\" />} iconPosition=\"right\" borderSize={2}/>\n    <Button text={'Fav'}  type=\"flat\" icon={<Icon name=\"favorite\" />}  color={'#00BCD4'} iconPosition=\"right\" density={-1}/>\n</View>\n`;\n\nconst IconDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Icons'}\n    sectionHref={`${pageHref}#icons`}\n    sectionId={'icons'}\n    code={code}\n    scope={{ View, Button, Icon }}\n    description={\n      'Icons can appear on the left or right. Icons match the color of the text provided. Icons hide when loading.'\n    }\n  />\n);\nexport default IconDemo;\n"
  },
  {
    "path": "docs/src/content/components/button/Demos/OutlinedDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo, CodeInline } from '@components';\nimport { Button, Icon } from '../../../../../../src/index';\n\nexport const code = `<View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap'}}>\n    <Button text={'Outlined'} type=\"outlined\" />\n    <Button text={'Icon'} type=\"outlined\" textColor={'#E91E63'} borderSize={2} icon={<Icon name=\"favorite\" />} />\n    <Button text={'Radius'} type=\"outlined\" textColor={'#FF5722'} radius={20}  />\n    <Button text={'Density'} type=\"outlined\" textColor={'#673AB7'} density={-1} />\n    <Button text={'Loading'} type=\"outlined\" textColor={'#009688'} loading />\n    <Button text={'Disabled'} type=\"outlined\" disabled  />\n</View>\n`;\n\nconst IconDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Outlined'}\n    sectionHref={`${pageHref}#outlined`}\n    sectionId={'outlined'}\n    code={code}\n    scope={{ View, Button, Icon }}\n    description={\n      <div>\n        Outlined buttons are similiar to Text Buttons but with a border. The\n        border color will match the text color. Changing the{' '}\n        <CodeInline code=\"textColor\" type=\"prop\" /> will change both. Change the{' '}\n        <CodeInline code=\"backgroundColor\" type=\"prop\" /> by using color prop.\n        The default border width is\n        <CodeInline code=\"StyleSheet.hairlineWidth\" type=\"value\" />, but you can\n        customize this with the <CodeInline code=\"borderSize\" type=\"prop\" />{' '}\n        prop.\n      </div>\n    }\n  />\n);\nexport default IconDemo;\n"
  },
  {
    "path": "docs/src/content/components/button/Demos/TextDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { Button, Icon } from '../../../../../../src/index';\n\nexport const code = `<View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap' }}>\n    <Button text={'Text'} />\n    <Button text={'Icon'} textColor={'#E91E63'} borderSize={2} icon={<Icon name=\"favorite\" />} />\n    <Button text={'Radius'} textColor={'#FF5722'} radius={20}  />\n    <Button text={'Density'} ttextColor={'#673AB7'} density={-1} />\n    <Button text={'Loading'} textColor={'#009688'} loading  />\n    <Button text={'Disabled'} disabled />\n</View>\n`;\n\nconst IconDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Text'}\n    sectionHref={`${pageHref}#text`}\n    sectionId={'text'}\n    code={code}\n    scope={{ View, Button, Icon }}\n  />\n);\nexport default IconDemo;\n"
  },
  {
    "path": "docs/src/content/components/button/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport ContainedDemo from './ContainedDemo';\nimport OutlinedDemo from './OutlinedDemo';\nimport FlatDemo from './FlatDemo';\nimport TextDemo from './TextDemo';\nimport IconsDemo from './IconsDemo';\nimport FullWidthDemo from './FullWidthDemo';\nimport CustomDemo from './CustomDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n\n        <ContainedDemo pageHref={pageHref} />\n        <OutlinedDemo pageHref={pageHref} />\n        <FlatDemo pageHref={pageHref} />\n        <TextDemo pageHref={pageHref} />\n        <IconsDemo pageHref={pageHref} />\n        <FullWidthDemo pageHref={pageHref} />\n        <CustomDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/button/MainDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { Button, Icon } from '../../../../../src/index';\n\nexport const code = `<View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap'}}>\n  <Button text={'contained'} type=\"contained\" />\n  <Button text={'flat'} type=\"flat\" color={'#E91E63'} />\n  <Button text={'outlined'} type=\"outlined\" textColor={'#009688'} />\n  <Button text={'text'} type=\"text\" textColor={'#F44336'} />\n  <Button text={'Archive'} type=\"outlined\" textColor={'#673AB7'}  icon={<Icon name=\"archive\" />} />\n  <Button text={'Loading'} type=\"flat\" loading color={'#00BCD4'} />\n</View>`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        The <CodeInline code=\"Button\" type=\"element\" /> component has four\n        variations: <CodeInline code=\"contained\" type=\"value\" />,{' '}\n        <CodeInline code=\"outlined\" type=\"value\" />,\n        <CodeInline code=\"flat\" type=\"value\" /> and,{' '}\n        <CodeInline code=\"text\" type=\"value\" />. Each can have text, icons, or\n        have their children completely replaced. See demos for more variations.\n      </div>\n    }\n    code={code}\n    scope={{ View, Button, Icon }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/button/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps, CodeInline, Link } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps\n    pageHref={pageHref}\n    description={\n      <div>\n        You can add any of the <CodeInline code=\"TouchableProps\" type=\"prop\" />{' '}\n        or <CodeInline code=\"Ripple\" type=\"prop\" /> props to the root component\n        and they will be spread onto the{' '}\n        <CodeInline code=\"Ripple\" type=\"element\" /> component, please see the{' '}\n        <Link href=\"/component/ripple\">Ripple</Link> page to see full list of\n        props.\n      </div>\n    }\n    propData={propData}\n  />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/button/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { Button } from 'material-bread';\n\nexport default class Actions extends Component {\n  render() {\n    return (\n        <View >\n            <Button text=\"Cancel\" type={'text'}  onPress={() => console('onCancel')}  />\n            <Button text=\"Accept\" type={'contained'} onPress={() => console('onAccept')} />\n        </Badge>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/button/index.js",
    "content": "import React, { Component } from 'react';\nimport { ComponentPageLayout } from '@components';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'contained', sub: true },\n  { name: 'outlined', sub: true },\n  { name: 'flat', sub: true },\n  { name: 'text', sub: true },\n  { name: 'icons', sub: true },\n  { name: 'fullwidth', sub: true },\n  { name: 'custom', sub: true },\n];\n\nexport default class ButtonPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'button'}\n          title={'Button'}\n          description={\n            'Buttons allow users to take actions, and make choices, with a single tap.'\n          }\n          docsLink={'https://material.io/design/components/buttons.html'}\n          importCode={`import { Button } from 'material-bread';`}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/button'} />\n          <Usage pageHref={'/components/button'} />\n          <Props pageHref={'/components/button'} />\n          <Demos pageHref={'/components/button'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/button/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  [\n    'borderSize',\n    'Size of border for outlined buttons',\n    'number',\n    'StyleSheet.hairlineWidth',\n  ],\n  [\n    'color',\n    'Background color for each buttontype',\n    'string',\n    'theme.primary.main',\n  ],\n  ['containerStyle', 'Styles container of the button', 'object', ''],\n\n  ['density', 'Density scale. Supported scale values (-3, -2, -1, 0).', 'number', '0'],\n  ['disabled', 'Toggle disabled styles', 'bool', ''],\n  ['fullWidth', 'Forces button to to take up 100% width', 'bool', ''],\n  [\n    'hideLabel',\n    'Will hide label, useful with loading to show only loader',\n    'bool',\n    '',\n  ],\n  [\n    'icon',\n    'Icon element, will be displayed according to iconPosition',\n    'node',\n    '',\n  ],\n  ['iconPosition', 'Postion of icon in button', 'string: left, right', 'left'],\n  ['iconSize', 'Custom size for icon', 'number', '18'],\n  ['loading', 'Toggles loading indicator in button', 'bool', ''],\n  ['onPress', 'Callback on button', 'func', ''],\n  [\n    'radius',\n    'Border radius for both ripple and component',\n    'number',\n    'theme.button.borderRadius',\n  ],\n  [\n    'rippleColor',\n    'Overrides default logic for ripple coloring',\n    'string',\n    'varies',\n  ],\n  ['style', 'Styles root element', 'object', ''],\n  ['text', 'Button Text', 'string', ''],\n  [\n    'textColor',\n    'Color applied to text, styles border if type is outlined',\n    'string',\n    'theme.primary.main',\n  ],\n  ['textStyle', 'Styles applied to text', 'object', ''],\n\n  [\n    'type',\n    'Indicates the type of button from available',\n    'string: flat, text, outlined, contained',\n    'text',\n  ],\n\n  [\n    'useInputCasing',\n    'Use text casing as input and do not auto-capitalize',\n    'boolean',\n    'false',\n  ],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/card/Demos/ActionMediaDemo.js",
    "content": "import React from 'react';\nimport { View, Image, Text } from 'react-native';\nimport { ComponentDemo, CodeInline } from '@components';\nimport {\n  Card,\n  Ripple,\n  CardMedia,\n  CardContent,\n  CardActions,\n} from '../../../../../../src/index';\n\nexport const code = `<View style={{flexDirection: 'row', alignItems: 'center'}}>\n  <Card style={{maxWidth: 400, width: '100%'}}>\n    <Ripple onPress={() => console.log('pressed action')}>\n      <CardMedia\n        image={\n          <Image\n            style={{ flex: 1, width: '100%' }}\n            source={{uri: 'https://images.pexels.com/photos/39571/gorilla-silverback-animal-silvery-grey-39571.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'}}\n            resizeMode=\"cover\"\n          />\n        }\n      />\n      <CardContent >\n        <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 16, fontWeight: '600', marginBottom: 6 }}>\n          Gorilla\n        </Text>\n        <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>\n          Gorillas are ground-dwelling, predominantly herbivorous apes that inhabit the forests of central Sub-Saharan Africa.\n        </Text>\n      </CardContent>\n    </Ripple>\n    <CardActions\n      leftActionItems={[\n        {name: 'share',},\n        {name: 'learn more'}\n      ]}\n    />\n  </Card>\n</View>\n`;\n\nconst IconDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Action Media'}\n    sectionHref={`${pageHref}#action-media`}\n    sectionId={'action-media'}\n    code={code}\n    scope={{\n      View,\n      Card,\n      Ripple,\n      CardMedia,\n      CardContent,\n      CardActions,\n      Image,\n      Text,\n    }}\n    description={\n      <div>\n        You can wrap any component with a{' '}\n        <CodeInline code=\"Ripple\" type=\"element\" /> to make it clickable.\n      </div>\n    }\n  />\n);\nexport default IconDemo;\n"
  },
  {
    "path": "docs/src/content/components/card/Demos/ClickableDemo.js",
    "content": "import React from 'react';\nimport { View, Image, Text } from 'react-native';\nimport { ComponentDemo, CodeInline } from '@components';\nimport {\n  IconButton,\n  Card,\n  CardHeader,\n  CardMedia,\n  CardContent,\n  CardActions,\n  Avatar,\n  Ripple,\n} from '../../../../../../src/index';\n\nexport const code = `<View style={{flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap'}}>\n  <Card style={{maxWidth: 300, width: '100%', marginRight: 24}} onPress={() => console.log('clicked gorilla')}>\n    <CardMedia\n      image={\n        <Image\n          style={{ flex: 1, width: '100%' }}\n          source={{uri: 'https://images.pexels.com/photos/39571/gorilla-silverback-animal-silvery-grey-39571.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'}}\n          resizeMode=\"cover\"\n        />\n      }\n    />\n    <CardContent >\n      <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 16, fontWeight: '600', marginBottom: 6 }}>\n        Gorilla\n      </Text>\n      <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>\n        Gorillas are ground-dwelling, predominantly herbivorous apes that inhabit the forests of central Sub-Saharan Africa.\n      </Text>\n    </CardContent>\n  </Card>\n\n  <Card style={{maxWidth: 300, width: '100%'}} onPress={() => console.log('clicked dog')}>\n    <CardMedia\n      image={\n        <Image\n          style={{ flex: 1, width: '100%' }}\n          source={{uri: 'https://images.pexels.com/photos/955463/pexels-photo-955463.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=800'}}\n          resizeMode=\"cover\"\n        />\n      }\n    />\n    <CardContent >\n      <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 16, fontWeight: '600', marginBottom: 6 }}>\n        Dog\n      </Text>\n      <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>\n        The domestic dog is a member of the genus Canis (canines), which forms part of the wolf-like canids, and is the most widely abundant terrestrial carnivore.\n      </Text>\n    </CardContent>\n  </Card>\n</View>\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Clickable'}\n    sectionHref={`${pageHref}#clickable`}\n    sectionId={'clickable'}\n    description={\n      <div>\n        Adding <CodeInline code=\"onPress\" type=\"prop\" /> will make the entire\n        card clickable, useful when cards act as links or actions.\n      </div>\n    }\n    code={code}\n    scope={{\n      View,\n      IconButton,\n      Card,\n      CardHeader,\n      CardMedia,\n      CardContent,\n      CardActions,\n      Avatar,\n      Image,\n      Text,\n      Ripple,\n    }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/card/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport ActionMediaDemo from './ActionMediaDemo';\nimport ClickableDemo from './ClickableDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n\n        <ActionMediaDemo pageHref={pageHref} />\n        <ClickableDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/card/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image, Text } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport {\n  IconButton,\n  Card,\n  CardHeader,\n  CardMedia,\n  CardContent,\n  CardActions,\n  Avatar,\n  Ripple,\n} from '../../../../../src/index';\n\nexport const code = `<View style={{flexDirection: 'row', alignItems: 'center'}}>\n  <Card style={{maxWidth: 400, width: '100%'}}>\n    <CardHeader\n        thumbnail={\n            <Avatar \n                type=\"image\" \n                image={<Image source={{uri: 'https://www.hbo.com/content/dam/hbodata/series/game-of-thrones/character/s5/john-snow-1920.jpg/_jcr_content/renditions/cq5dam.web.1200.675.jpeg'}} /> } \n                size={40}\n            />\n        }\n        title={'Jon Snow'}\n        subtitle={'Knows Nothing, KingofDaNorth'}\n        action={<IconButton name=\"more-vert\" size={24} />}\n    />\n    <CardMedia\n        image={\n            <Image\n                style={{ flex: 1, width: '100%' }}\n                source={{uri: 'https://i.redd.it/zj9vfr7uuljz.png'}}\n                resizeMode=\"cover\"\n            />\n        }\n    />\n    <CardContent >\n      <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>\n        Ran out of bleach for beard, but Daenerys says it looks cool.\n      </Text>\n    </CardContent>\n    <CardActions\n      rightActionItems={[\n        {name: 'thumb-up',},\n        {name: 'share'} \n      ]}\n    />\n  </Card>\n</View>`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        Cards can be built using <CodeInline code=\"CardHeader\" type=\"element\" />\n        , <CodeInline code=\"CardMedia\" type=\"element\" />,{' '}\n        <CodeInline code=\"CardContent\" type=\"element\" />,\n        <CodeInline code=\"CardActions\" type=\"element\" />, or custom components.\n        Please see each Card Component page to learn how to use them.\n      </div>\n    }\n    code={code}\n    scope={{\n      View,\n      IconButton,\n      Card,\n      CardHeader,\n      CardMedia,\n      CardContent,\n      CardActions,\n      Avatar,\n      Ripple,\n      Image,\n      Text,\n    }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/card/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/card/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { Card, CardMedia, CardContent, CardActions, } from 'material-bread';\n\nexport default class FullCard extends Component {\n  render() {\n    return (\n      <Card>\n        <CardMedia\n          image={\n            <Image\n              style={{ flex: 1, width: '100%' }}\n              source={{uri: 'https://images.pexels.com/photos/955463/pexels-photo-955463.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=800'}}\n              resizeMode=\"cover\"\n            />\n          }\n        />\n        <CardContent>\n          <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>\n            This is some test card content, though it can anything.\n          </Text>\n        </CardContent>\n        <CardActions\n          leftActionItems={[\n            {name: 'share',},\n            {name: 'learn more'}\n          ]}\n        />\n    </Card>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/card/index.js",
    "content": "import React, { Component } from 'react';\nimport { ComponentPageLayout } from '@components';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'Action Media', sub: true },\n  { name: 'Clickable', sub: true },\n];\n\nexport default class CardPage extends Component {\n  render() {\n    return (\n      <ComponentPageLayout\n        componentName={'card'}\n        title={'Card'}\n        description={\n          'Cards contain content and actions about a single subject.'\n        }\n        importCode={`import { Card } from 'material-bread';`}\n        docsLink={'https://material.io/design/components/cards.html'}\n        sideScrollMenuItems={sections}>\n        <MainDemo pageHref={'/components/card'} />\n        <Usage pageHref={'/components/card'} />\n        <Props pageHref={'/components/card'} />\n        <Demos pageHref={'/components/card'} />\n      </ComponentPageLayout>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/card/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  [\n    'onPress',\n    'Call back when card is pressed, adds ripple to whole component',\n    'func',\n    '',\n  ],\n  ['outlined', 'Adds a hairlineWidth border around card', 'bool', ''],\n  ['radius', 'Border radius of card', 'number', '4'],\n  ['rippleProps', 'Object is spread to Ripple Component', 'object', ''],\n  ['shadow', 'Adds shadow for all platforms', 'number', '1'],\n  ['style', 'Styles root element', 'object', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/card-actions/Demos/CustomDemo.js",
    "content": "import React from 'react';\nimport { View, Text, Image } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport {\n  Card,\n  CardContent,\n  CardActions,\n  CardMedia,\n  Button,\n  IconButton,\n} from '../../../../../../src/index';\n\nexport const code = `<View style={{flexDirection: 'row', alignItems: 'center'}}>\n<Card style={{maxWidth: 400, width: '100%'}}>\n  <CardMedia\n      image={\n          <Image\n          style={{ flex: 1, width: '100%' }}\n          source={{uri: 'https://images.pexels.com/photos/280250/pexels-photo-280250.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'}}\n          resizeMode=\"cover\"\n          />\n      }\n  />\n  <CardActions\n    leftActionItems={[\n      <IconButton name=\"bookmark-border\" size={30} color={'#673AB7'} />\n    ]}\n    rightActionItems={[\n      <Button text={'Read more'} type=\"outlined\" textColor={'#009688'} style={{marginRight: 8}} dense/>,\n      <Button text={'Buy'} type=\"flat\"  dense/>\n    ]}\n  />\n</Card>\n</View>\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Custom'}\n    sectionHref={`${pageHref}#custom`}\n    sectionId={'custom'}\n    description={\n      'You can pass arbitrary nodes to the array for each section to create something custom.'\n    }\n    code={code}\n    scope={{\n      IconButton,\n      View,\n      Card,\n      CardContent,\n      CardActions,\n      CardMedia,\n      Image,\n      Button,\n      Text,\n    }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/card-actions/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport CustomDemo from './CustomDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n\n        <CustomDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/card-actions/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image, Text } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport {\n  IconButton,\n  Card,\n  CardContent,\n  CardActions,\n  CardMedia,\n} from '../../../../../src/index';\n\nexport const code = `<View style={{flexDirection: 'row', alignItems: 'center'}}>\n  <Card style={{maxWidth: 400, width: '100%'}}>\n    <CardMedia\n        image={\n            <Image\n            style={{ flex: 1, width: '100%' }}\n            source={{uri: 'https://images.pexels.com/photos/1938123/pexels-photo-1938123.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'}}\n            resizeMode=\"cover\"\n            />\n        }\n    />\n    <CardContent >\n      <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>\n        Fact: dogs make everything better\n      </Text>\n    </CardContent>\n    <CardActions\n      leftActionItems={[\n        {name: 'share',},\n        {name: 'learn more'}\n      ]}\n      rightActionItems={[\n        {name: 'favorite',},\n        {name: 'share'} \n      ]}\n    />\n  </Card>\n</View>`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        CardActions are split into{' '}\n        <CodeInline code=\"leftActionItems\" type=\"prop\" /> and{' '}\n        <CodeInline code=\"rightActionItems\" type=\"prop\" />. Left action items\n        display as full text <CodeInline code=\"Button\" type=\"element\" />\n        s, right action items display as\n        <CodeInline code=\"IconButton\" type=\"element\" />\n        s. Both can be passed either as objects or nodes.\n      </div>\n    }\n    code={code}\n    scope={{\n      View,\n      IconButton,\n      Card,\n      CardContent,\n      CardActions,\n      CardMedia,\n      Image,\n      Text,\n    }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/card-actions/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/card-actions/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { Card,CardContent, CardActions, } from 'material-bread';\n\nexport default class FullCard extends Component {\n  render() {\n    return (\n      <Card>\n        <CardContent >\n          <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>\n            This is some test card content, though it can anything.\n          </Text>\n        </CardContent>\n        <CardActions\n          leftActionItems={[\n            {name: 'share',},\n            {name: 'learn more'}\n          ]}\n          rightActionItems={[\n            {name: 'favorite',},\n            {name: 'share'} \n          ]}\n        />\n      </Card>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/card-actions/index.js",
    "content": "import React, { Component } from 'react';\nimport { ComponentPageLayout } from '@components';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'custom', sub: true },\n];\n\nexport default class CardPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'card-actions'}\n          title={'Card Actions'}\n          description={\n            'Card action buttons displayed at the bottom of most the cards.'\n          }\n          importCode={`import { CardActions } from 'material-bread';`}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/card-actions'} />\n          <Usage pageHref={'/components/card-actions'} />\n          <Props pageHref={'/components/card-actions'} />\n          <Demos pageHref={'/components/card-actions'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/card-actions/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  [\n    'leftActionItems',\n    'Can be array of objects or nodes, shows on the left as buttons',\n    'array',\n    '',\n  ],\n  [\n    'rightActionItems',\n    'Can be array of objects or nodes, shows on the right as IconButtons',\n    'array',\n    '',\n  ],\n\n  ['style', 'Styles root element', 'object', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/card-content/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/card-content/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image, Text } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport {\n  Card,\n  CardContent,\n  CardActions,\n  CardMedia,\n  IconButton,\n  Badge,\n} from '../../../../../src/index';\n\nexport const code = `<View style={{flexDirection: 'row', alignItems: 'center'}}>\n  <Card style={{maxWidth: 400, width: '100%'}}>\n    <CardMedia\n      image={\n        <Image\n          style={{ flex: 1, width: '100%' }}\n          source={{uri: 'https://images.pexels.com/photos/1124002/pexels-photo-1124002.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'}}\n          resizeMode=\"cover\"\n        />\n      }\n    />\n    <CardContent >\n      <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 16, fontWeight: '600', marginBottom: 10 }}>\n        Reasons dogs are the best:\n      </Text>\n      <View style={{marginLeft: 8}}>\n        <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>\n            - Man's best friend\n        </Text>\n        <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>\n            - Some have jobs\n        </Text>\n        <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>\n            - See image\n        </Text>\n      </View>\n    </CardContent>\n    <CardActions\n        rightActionItems={[\n            <Badge content={99}>\n                <IconButton name=\"favorite\" color={'#F44336'} size={24} />\n            </Badge>,\n            {name: 'share'} \n        ]}\n    />\n  </Card>\n</View>`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        The CardContent component is meant for describing the main content of a\n        card, usually that content is text of some kind, but it can be{' '}\n        <CodeInline code=\"Images\" type=\"element\" />,{' '}\n        <CodeInline code=\"Images\" type=\"Avatars\" />, or anything else.\n      </div>\n    }\n    code={code}\n    scope={{\n      IconButton,\n      View,\n      Card,\n      CardContent,\n      CardActions,\n      CardMedia,\n      Badge,\n      Image,\n      Text,\n    }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/card-content/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/card-content/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { Card, CardContent, CardActions, } from 'material-bread';\n\nexport default class FullCard extends Component {\n  render() {\n    return (\n      <Card>\n        <CardContent >\n          <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>\n            This is some test card content, though it can anything.\n          </Text>\n        </CardContent>\n        <CardActions\n          leftActionItems={[\n            {name: 'share',},\n            {name: 'learn more'}\n          ]}\n        />\n      </Card>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/card-content/index.js",
    "content": "import React, { Component } from 'react';\nimport { ComponentPageLayout } from '@components';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n];\n\nexport default class CardContentPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'card-content'}\n          title={'Card Content'}\n          description={\n            'Card content allows for arbitrary content to be shown in a card.'\n          }\n          importCode={`import { CardContent } from 'material-bread';`}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/card-content'} />\n          <Usage pageHref={'/components/card-content'} />\n          <Props pageHref={'/components/card-content'} />\n          <Demos pageHref={'/components/card-content'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/card-content/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['onPress', 'Callback func on container', 'func', ''],\n  [\n    'rippleProps',\n    'Props spread to ripple if onPress is supplied',\n    'object',\n    '',\n  ],\n  ['style', 'Styles root element', 'object', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/card-header/Demos/MoreActions.js",
    "content": "import React from 'react';\nimport { View, Image, Text } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport {\n  Card,\n  CardHeader,\n  IconButton,\n  Avatar,\n  CardContent,\n} from '../../../../../../src/index';\n\nexport const code = `<Card\n    style={{ maxWidth: 400, width: '100%',  }}\n    radius={1}\n    shadow={4}>\n    <CardHeader\n        subtitle={'Mario - 25 mins ago'}\n        style={{\n            alignItems: 'center',\n            borderBottom: 'none',\n            paddingBottom: 0,\n        }}\n        action={\n            <View style={{ flexDirection: 'row', alignItems: 'center' }}>\n            <IconButton name=\"star\" size={24} color={'rgba(0,0,0,.47)'} />\n            <IconButton name=\"delete\" size={24} color={'rgba(0,0,0,.47)'} />\n            <IconButton\n                name=\"more-vert\"\n                size={24}\n                color={'rgba(0,0,0,.47)'}\n            />\n            <Avatar\n                type=\"image\"\n                image={\n                <Image\n                    source={{\n                    uri:\n                        'http://assets1.ignimgs.com/2014/04/07/marioignpng-e324a5_1280w.png',\n                    }}\n                />\n                }\n                size={40}\n            />\n            </View>\n        }>\n        <Text>Mario - 25 mins ago</Text>\n    </CardHeader>\n\n    <CardContent style={{ paddingTop: 4, paddingBottom: 16 }}>\n        <Text\n            style={{ color: 'rgba(0,0,0,1)', fontSize: 18, marginBottom: 4 }}>\n            Where is the Princess?\n        </Text>\n        <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>\n            I've defeated Bowser in 6 castles and still no Prin...\n        </Text>\n    </CardContent>\n</Card>\n`;\n\nconst IconDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'More Actions'}\n    sectionHref={`${pageHref}#more-actions`}\n    sectionId={'more-actions'}\n    code={code}\n    scope={{\n      View,\n      Image,\n      Text,\n      Card,\n      CardHeader,\n      IconButton,\n      Avatar,\n      CardContent,\n    }}\n  />\n);\nexport default IconDemo;\n"
  },
  {
    "path": "docs/src/content/components/card-header/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\nimport MoreActions from './MoreActions';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n        <MoreActions pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/card-header/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image, Text } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport {\n  IconButton,\n  Card,\n  CardContent,\n  CardActions,\n  CardMedia,\n  CardHeader,\n  Avatar,\n} from '../../../../../src/index';\n\nexport const code = `<View style={{flexDirection: 'row', alignItems: 'center'}}>\n  <Card style={{maxWidth: 400, width: '100%'}}>\n    <CardHeader\n        thumbnail={\n            <Avatar \n                type=\"image\" \n                image={<Image source={{uri: 'http://assets1.ignimgs.com/2014/04/07/marioignpng-e324a5_1280w.png'}} /> } \n                size={40}\n            />\n        }\n        title={'Mario'}\n        subtitle={'Hero. Plumber. Brother.'}\n        action={<IconButton name=\"more-vert\" size={24} />}\n    />\n    <CardMedia\n        image={\n            <Image\n                style={{ flex: 1, width: '100%' }}\n                source={{uri: 'https://i.redd.it/tr8wgp1ysulz.png'}}\n                resizeMode=\"cover\"\n            />\n        }\n    />\n    <CardContent >\n      <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>\n        Movember is over. \n      </Text>\n    </CardContent>\n    <CardActions\n      rightActionItems={[\n        {name: 'reply',},\n        {name: 'thumb-up',},\n        {name: 'share'} \n      ]}\n    />\n  </Card>\n</View>`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        The CardHeader component is built of{' '}\n        <CodeInline code=\"title\" type=\"prop\" />,{' '}\n        <CodeInline code=\"subheader\" type=\"prop\" />,{' '}\n        <CodeInline code=\"thumbnail\" type=\"prop\" />, and\n        <CodeInline code=\"action\" type=\"prop\" />. Any can be added or omitted.{' '}\n        <CodeInline code=\"children\" type=\"prop\" /> will replace both{' '}\n        <CodeInline code=\"title\" type=\"prop\" /> and{' '}\n        <CodeInline code=\"subheader\" type=\"prop\" /> and will show between{' '}\n        <CodeInline code=\"thumbnail\" type=\"prop\" /> and\n        <CodeInline code=\"action\" type=\"prop\" /> if provided.\n      </div>\n    }\n    code={code}\n    scope={{\n      View,\n      IconButton,\n      Card,\n      CardContent,\n      CardActions,\n      CardMedia,\n      CardHeader,\n      Avatar,\n      Image,\n      Text,\n    }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/card-header/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/card-header/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { Card, CardContent, CardHeader, } from 'material-bread';\n\nexport default class FullCard extends Component {\n  render() {\n    return (\n      <Card>\n        <CardHeader\n            thumbnail={\n                <Avatar \n                    type=\"icon\" \n                    content=\"person\"\n                    color={'white'}\n                    size={40}\n                />\n            }\n            title={'Title'}\n            subtitle={'Subtitle'}\n            action={<IconButton name=\"more-vert\" size={24} />}\n        />\n        <CardContent >\n          <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>\n            This is some test card content, though it can anything.\n          </Text>\n        </CardContent>\n        \n      </Card>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/card-header/index.js",
    "content": "import React, { Component } from 'react';\n\nimport { ComponentPageLayout } from '@components';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'More Actions', sub: true },\n];\n\nexport default class CardHeaderPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'card-header'}\n          title={'Card Header'}\n          description={\n            'CardHeader displays information and actions about the card.'\n          }\n          importCode={`import { CardHeader } from 'material-bread';`}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/card-header'} />\n          <Usage pageHref={'/components/card-header'} />\n          <Props pageHref={'/components/card-header'} />\n          <Demos pageHref={'/components/card-header'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/card-header/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['action', 'Displays action at the top right of the section', 'node', ''],\n  ['subtitle', 'Renders subtitle below the title', 'string', ''],\n  ['subtitleStyles', 'Styles for subtitle', 'object', ''],\n\n  ['thumbnail', 'Renders arbitrary thumbnail on left of text', 'node', ''],\n  ['title', 'Renders title', 'string', ''],\n  ['titleStyles', 'Styles for title', 'object', ''],\n  ['style', 'Styles root element', 'object', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/card-media/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/card-media/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image, Text } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport {\n  IconButton,\n  Card,\n  CardContent,\n  CardActions,\n  CardMedia,\n} from '../../../../../src/index';\n\nexport const code = `<View style={{flexDirection: 'row', alignItems: 'center'}}>\n  <Card style={{maxWidth: 400, width: '100%'}}>\n    <CardMedia\n        title={'Top ten books'}\n        subtitle={'by Cody'}\n        image={\n            <Image\n                style={{ flex: 1, width: '100%' }}\n                source={{uri: 'https://images.pexels.com/photos/34620/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'}}  \n                resizeMode=\"cover\"\n            />\n        }\n    />\n    <CardContent >\n      <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>\n        Books ranked with arbitrary bias, inconsistent logic, and strong opinions.\n      </Text>\n    </CardContent>\n    <CardActions\n      leftActionItems={[\n        {name: 'Read',},\n      ]}\n      rightActionItems={[\n        {name: 'favorite',},\n        {name: 'share'} \n      ]}\n    />\n  </Card>\n</View>`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        CardMedia takes an <CodeInline code=\"image\" type=\"prop\" /> prop and fits\n        it into a <CodeInline code=\"Card\" type=\"element\" />. Optional{' '}\n        <CodeInline code=\"title\" type=\"prop\" /> and{' '}\n        <CodeInline code=\"subtitle\" type=\"prop\" /> are shown in the bottom left\n        corner of the <CodeInline code=\"image\" type=\"prop\" />.\n      </div>\n    }\n    code={code}\n    scope={{\n      View,\n      IconButton,\n      Card,\n      CardContent,\n      CardActions,\n      CardMedia,\n      Image,\n      Text,\n    }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/card-media/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/card-media/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { Card, CardContent, CardMedia } from 'material-bread';\n\nexport default class FullCard extends Component {\n  render() {\n    return (\n      <Card>\n        <CardMedia\n            title={'Top ten books'}\n            subtitle={'by Cody'}\n            image={\n                <Image\n                    style={{ flex: 1, width: '100%' }}\n                    source={{uri: 'https://images.pexels.com/photos/34620/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'}}  \n                    resizeMode=\"cover\"\n                />\n            }\n        />\n        <CardContent >\n          <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>\n            This is some test card content, though it can anything.\n          </Text>\n        </CardContent>\n      </Card>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/card-media/index.js",
    "content": "import React, { Component } from 'react';\n\nimport { ComponentPageLayout } from '@components';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n];\n\nexport default class CardMediaPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'card-media'}\n          title={'Card Media'}\n          description={'CardMedia displays an image on a card.'}\n          importCode={`import { CardMedia } from 'material-bread';`}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/card-media'} />\n          <Usage pageHref={'/components/card-media'} />\n          <Props pageHref={'/components/card-media'} />\n          <Demos pageHref={'/components/card-media'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/card-media/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['height', 'Sets height of section and thus the image', 'number', '194'],\n  ['image', 'Displays image across the whole card media section', 'node', ''],\n  ['subtitle', 'Renders subtitle below the title', 'string', ''],\n  ['subtitleStyles', 'Styles for subtitle', 'object', ''],\n\n  ['title', 'Renders title', 'string', ''],\n  ['titleStyles', 'Styles for title', 'object', ''],\n  ['style', 'Styles root element', 'object', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/checkbox/Demos/IOSDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { CodeInline, ComponentDemo } from '@components';\nimport { Checkbox } from '../../../../../../src/index';\n\nexport const code = `class CheckboxPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      checkedOne: true,\n      checkedTwo: true,\n      checkedThree: true,\n      checkedFour: true,\n    }\n  }\n  render() {\n    return (\n      <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap'}}>\n          <Checkbox\n              ios\n              checked={this.state.checkedOne}\n              onPress={() => this.setState({ checkedOne: !this.state.checkedOne })}\n          />\n          <Checkbox\n              ios\n              rippleMatchesCheckbox\n              checkboxColor={'#009688'}\n              checked={this.state.checkedTwo}\n              label={'Toggle'}\n              onPress={() => this.setState({ checkedTwo: !this.state.checkedTwo })}\n          />\n          <Checkbox\n              ios\n              disabled\n              checkboxColor={'#E91E63'}\n              label={'Disabled'}\n              checked={this.state.checkedThree}\n              onPress={() => this.setState({ checkedThree: !this.state.checkedThree })}\n          /> \n          <Checkbox\n              ios\n              error\n              checkboxColor={'#E91E63'}\n              label={'Error'}\n              checked={this.state.checkedFour}\n              onPress={() => this.setState({ checkedFour: !this.state.checkedFour })}\n          />    \n      </View>\n    );\n  }\n}\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'iOS'}\n    sectionHref={`${pageHref}#ios`}\n    sectionId={'ios'}\n    description={\n      <div>\n        Platform guidelines suggest using an iOS checkbox, you can accomplish\n        this by adding the <CodeInline code=\"ios\" type=\"prop\" /> prop. The\n        unchecked state is usually blank.\n      </div>\n    }\n    code={code}\n    scope={{ View, Checkbox }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/checkbox/Demos/IconsDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo, CodeInline } from '@components';\nimport { Checkbox, Icon } from '../../../../../../src/index';\n\nexport const code = `class CheckboxPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      checkedOne: true,\n      checkedTwo: true,\n      checkedThree: true,\n      checkedFour: true,\n    }\n  }\n  render() {\n    return (\n      <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap'}}>\n          <Checkbox\n              icon={'favorite-border'}\n              checkedIcon={'favorite'}\n              checked={this.state.checkedOne}\n              onPress={() => this.setState({ checkedOne: !this.state.checkedOne })}\n          />\n          <Checkbox\n              rippleMatchesCheckbox\n              checkboxColor={'#009688'}\n              checked={this.state.checkedTwo}\n              icon={<Icon name=\"lock-open\" />}\n              checkedIcon={<Icon name=\"lock\" />}\n              onPress={() => this.setState({ checkedTwo: !this.state.checkedTwo })}\n          />\n          <Checkbox\n              rippleMatchesCheckbox\n              checkboxColor={'#E91E63'}\n              icon={<Icon name=\"error-outline\" size={30} />}\n              checkedIcon={<Icon name=\"error\" size={30} />}\n              checkboxStyle={{width: 42, height: 42}}\n              label={'Error'}\n              labelStyle={{fontSize: 18, color:'#E91E63' }}\n              checked={this.state.checkedThree}\n              onPress={() => this.setState({ checkedThree: !this.state.checkedThree })}\n          />\n\n          <Checkbox\n              rippleMatchesCheckbox\n              checkboxColor={'#3F51B5'}\n              label={'Alerts'}\n              labelStyle={{fontSize: 14, color:'#3F51B5' }}\n              labelPos={'left'}\n              checkedIcon={'notifications'}\n              icon={'notifications-none'}\n              checked={this.state.checkedFour}\n              onPress={() => this.setState({ checkedFour: !this.state.checkedFour })}\n          />       \n      </View>\n    );\n  }\n}\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Custom Icon'}\n    sectionHref={`${pageHref}#icons`}\n    sectionId={'icons'}\n    description={\n      <div>\n        Custom icons can be achieved by either passing a string or a node to{' '}\n        <CodeInline code=\"Icon\" type=\"element\" /> and{' '}\n        <CodeInline code=\"checkedIcon\" type=\"prop\" />. The component will add\n        the approriate color and toggle them based on\n        <CodeInline code=\"checked\" type=\"prop\" />.\n      </div>\n    }\n    code={code}\n    scope={{ View, Checkbox, Icon }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/checkbox/Demos/LabelsDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo, CodeInline } from '@components';\nimport { Checkbox } from '../../../../../../src/index';\n\nexport const code = `class CheckboxPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      checkedOne: true,\n      checkedTwo: true,\n      checkedThree: true,\n      checkedFour: true,\n    }\n  }\n  render() {\n    return (\n      <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap'}}>\n          <Checkbox\n              label={'Click me'}\n              checked={this.state.checkedOne}\n              onPress={() => this.setState({ checkedOne: !this.state.checkedOne })}\n          />\n          <Checkbox\n              rippleMatchesCheckbox\n              checkboxColor={'#009688'}\n              checked={this.state.checkedTwo}\n              label={'Item 2'}\n              labelStyle={{fontSize: 18, color:'#009688' }}\n              onPress={() => this.setState({ checkedTwo: !this.state.checkedTwo })}\n          />\n          <Checkbox\n              rippleMatchesCheckbox\n              checkboxColor={'#E91E63'}\n              icon={'bookmark-border'}\n              checkedIcon={'bookmark'}\n              label={'Bookmark'}\n              labelStyle={{fontSize: 14, color:'#E91E63' }}\n              checked={this.state.checkedThree}\n              onPress={() => this.setState({ checkedThree: !this.state.checkedThree })}\n          />\n\n          <Checkbox\n              rippleMatchesCheckbox\n              checkboxColor={'#3F51B5'}\n              label={'Left'}\n              labelStyle={{fontSize: 14, color:'#3F51B5' }}\n              labelPos={'left'}\n\n              checked={this.state.checkedFour}\n              onPress={() => this.setState({ checkedFour: !this.state.checkedFour })}\n          />       \n      </View>\n    );\n  }\n}\n`;\n\nconst IconDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Labels'}\n    sectionHref={`${pageHref}#labels`}\n    sectionId={'labels'}\n    code={code}\n    scope={{ View, Checkbox }}\n    descriptions={\n      <div>\n        Labels can be styled with the{' '}\n        <CodeInline code=\"labelStyle\" type=\"prop\" /> prop which will override\n        other styles. Labels can be on the{' '}\n        <CodeInline code=\"left\" type=\"value\" /> or{' '}\n        <CodeInline code=\"right\" type=\"value\" /> with{' '}\n        <CodeInline code=\"labelPos\" type=\"prop\" />. Clicking a label will\n        activate <CodeInline code=\"onPress\" type=\"prop\" /> if provided.\n      </div>\n    }\n  />\n);\nexport default IconDemo;\n"
  },
  {
    "path": "docs/src/content/components/checkbox/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport LabelsDemo from './LabelsDemo';\nimport IconsDemo from './IconsDemo';\nimport IOSDemo from './IOSDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n\n        <LabelsDemo pageHref={pageHref} />\n        <IconsDemo pageHref={pageHref} />\n        <IOSDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/checkbox/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { Checkbox } from '../../../../../src/index';\n\nexport const code = `class CheckboxPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      checkedOne: true,\n      checkedTwo: true,\n      checkedThree: true,\n      checkedFour: true,\n      checkedFive: true\n    }\n  }\n  render() {\n    return (\n      <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap'}}>\n          <Checkbox\n              checked={this.state.checkedOne}\n              onPress={() => this.setState({ checkedOne: !this.state.checkedOne })}\n          />\n          <Checkbox\n              rippleMatchesCheckbox\n              checkboxColor={'#009688'}\n              checked={this.state.checkedTwo}\n              label={'Item 2'}\n              onPress={() => this.setState({ checkedTwo: !this.state.checkedTwo })}\n          />\n          <Checkbox\n              rippleMatchesCheckbox\n              checkboxColor={'#E91E63'}\n              icon={'bookmark-border'}\n              checkedIcon={'bookmark'}\n              checked={this.state.checkedThree}\n              onPress={() => this.setState({ checkedThree: !this.state.checkedThree })}\n          />\n          <Checkbox\n              indeterminate\n              checkboxColor={'#F44336'}\n              checked={this.state.checkedFour} \n              onPress={() => this.setState({ checkedFour: !this.state.checkedFour })}\n          />\n          <Checkbox\n              checked={this.state.checkedFive}\n              disabled\n              onPress={() => this.setState({ checkedFive: !this.state.checkedFive })}\n          />   \n      </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        The <CodeInline code=\"Checkbox\" type=\"element\" /> component can have\n        labels, custom icons, and custom colors.\n      </div>\n    }\n    code={code}\n    scope={{ View, Checkbox, Image }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/checkbox/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/checkbox/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { Checkbox } from 'material-bread';\n\nclass CheckboxPage extends React.Component {\n    constructor(props) {\n      super(props)\n      this.state = {\n        checked: true,\n      }\n    }\n    render() {\n      return (\n        <View style={{flexDirection: 'row', alignItems: 'center'}}>\n            <Checkbox\n                checked={this.state.checked}\n                onPress={() => this.setState({ checked: !this.state.checked })}\n            />  \n        </View>\n      );\n    }\n  }`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/checkbox/index.js",
    "content": "import React, { Component } from 'react';\nimport { ComponentPageLayout } from '@components';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'label', sub: true },\n  { name: 'icon', sub: true },\n  { name: 'ios', sub: true },\n];\n\nexport default class CheckboxPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'checkbox'}\n          title={'Checkbox'}\n          description={\n            'Checkboxes allow the user to select one or more items from a set.'\n          }\n          docsLink={\n            'https://material.io/design/components/selection-controls.html#checkboxes'\n          }\n          importCode={`import { Checkbox } from 'material-bread';`}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/checkbox'} />\n          <Usage pageHref={'/components/checkbox'} />\n          <Props pageHref={'/components/checkbox'} />\n          <Demos pageHref={'/components/checkbox'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/checkbox/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['checkboxColor', 'Custom color for checked icon', 'string', ''],\n  ['checkboxStyle', 'Styles checkbox icon', 'object', ''],\n\n  ['checked', 'Wether the checkbox is filled or not', 'bool', 'false'],\n  ['checkedIcon', 'Renders checked icon', 'string || node', 'check-box'],\n  ['disabled', 'Toggles whether the checkbox can be changed', 'bool', ''],\n  ['error', 'Toggles error state', 'bool', ''],\n  [\n    'icon',\n    'Renders unchecked icon',\n    'string || node',\n    'check-box-outline-blank',\n  ],\n  ['indeterminate', 'Toggle indeteminate state', 'bool', ''],\n  ['ios', 'Toggle dispalying ios checkbox', 'bool', 'false'],\n  ['label', 'Text for label of checkbox, has Onpress', 'bool', ''],\n  ['labelPos', 'Determines position of label', 'string', 'right '],\n  ['labelStyle', 'Styles label', 'object', ''],\n  ['onPress', 'Call back for clicking on the checkbox or label', 'func', ''],\n  ['rippleColor', 'Custom ripple color', 'string', ''],\n  [\n    'rippleMatchesCheckbox',\n    'Default Material is dark ripple,  this forces the ripple to match checkbox',\n    'bool',\n    'false',\n  ],\n  [\n    'size',\n    'Scale the default icons while maintaining Material proportions',\n    'number',\n    '24',\n  ],\n  ['styles', 'Styles root container', 'object', ''],\n  ['textStyle', 'Styles for the text component', 'object', ''],\n  ['unCheckedColor', 'Custom color for unchecked icon', 'string', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/chip/Demos/CustomDemo.js",
    "content": "import React from 'react';\nimport { View, Image, Text } from 'react-native';\nimport { CodeInline, ComponentDemo } from '@components';\nimport { Avatar, Icon, Chip, IconButton } from '../../../../../../src/index';\n\nexport const code = `class ChipPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      chipOne: true,\n      chipTwo: true,\n    }\n  }\n  render() {\n    return (\n      <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap'}}>    \n          <Chip \n            text={'Mood'}\n            themeColor={'primary'}\n            radius={2}\n            leftIcon={<Icon name=\"mood\" color={'#FBC02D'} />}\n            onPress={() => console.log('Mood')}\n            onDelete={() => this.setState({chipOne: false})}\n            visible={this.state.chipOne}\n          />       \n          <Chip\n              text={'Delete me'}\n              radius={2}\n              chipStye={'outlined'}\n              color={'black'}\n              visible={this.state.chipTwo}\n              onDelete={() => this.setState({chipTwo: false})}\n          />\n          <Chip\n              text={'Alaska'}\n              color={'#009688'}\n              radius={100}\n              style={{height: 40}}\n              visible={this.state.chipThree}\n              onDelete={() => this.setState({chipThree: false})}\n          />\n          <Chip\n              text={'User'}\n              chipStyle={'outlined'}\n              color={'black'}\n              radius={2}\n              style={{borderWidth: 3, height: 40}}\n          >\n            <Text style={{fontSize: 18, marginHorizontal: 12, fontWeight: '600'}}>React</Text>\n          </Chip>\n      </View>\n    );\n  }\n}\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Custom'}\n    sectionHref={`${pageHref}#custom`}\n    sectionId={'custom'}\n    description={\n      <div>\n        You replace the text content component by passing in{' '}\n        <CodeInline code=\"children\" type=\"prop\" />, style the outer component,\n        and change the <CodeInline code=\"radius\" type=\"prop\" /> prop to create\n        more custom chips.\n      </div>\n    }\n    code={code}\n    scope={{ View, Icon, Chip, Avatar, Image, IconButton, Text }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/chip/Demos/DeleteChipDemo.js",
    "content": "import React from 'react';\nimport { View, Image, Text } from 'react-native';\nimport { ComponentDemo, CodeInline } from '@components';\nimport { Avatar, Icon, Chip } from '../../../../../../src/index';\n\nexport const code = `class ChipPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      chipOne: true,\n      chipTwo: true,\n      chipThree: true,\n      chipFour: true,\n      chipFive: true,\n      chipSix: true\n    }\n  }\n  render() {\n    return (\n      <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap'}}>    \n          <Chip \n            text={'Chip'}\n            visible={this.state.chipOne}\n            onDelete={() => this.setState({chipOne: false})}   \n          />       \n          <Chip\n              text={'Delete me'}\n              visible={this.state.chipTwo}\n              onDelete={() => this.setState({chipTwo: false})}   \n          />\n          <Chip\n              text={'Alaska'}\n              color={'#009688'}\n              visible={this.state.chipThree}\n              onDelete={() => this.setState({chipThree: false})}\n              leftIcon={<Icon name=\"place\" color={'white'} />}\n          />\n          <Chip\n              text={'User'}\n              themeColor={'primary'}\n              onPress={() => console.log('clicked four')}\n              visible={this.state.chipFour}\n              onDelete={() => this.setState({chipFour: false})}\n              leftIcon={<Avatar \n                type=\"image\" \n                image={<Image source={{uri: 'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4'}} /> } \n            />}\n          />\n          <Chip \n              text={'Click me'}\n              chipStyle={'outlined'}\n              themeColor={'primary'} \n              onPress={() => console.log('clicked five')}\n              visible={this.state.chipFive}\n              onDelete={() => this.setState({chipFive: false})}\n          />\n          <Chip \n              text={'Biking'}\n              chipStyle={'outlined'}\n              themeColor={'secondary'}\n              leftIcon={<Icon name=\"directions-bike\" color={'#E91E63'} />}\n              visible={this.state.chipSix}\n              onDelete={() => this.setState({chipSix: false})}\n          / >\n      </View>\n    );\n  }\n}\n`;\n\nconst IconDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Delete'}\n    sectionHref={`${pageHref}#delete`}\n    sectionId={'delete'}\n    code={code}\n    scope={{ View, Icon, Chip, Avatar, Image, Text }}\n    description={\n      <div>\n        Adding <CodeInline code=\"canDelete\" type=\"prop\" /> provides a prebuilt\n        delete icon on the right side, it will replace any right icon provided.\n        Toggle the\n        <CodeInline code=\"visible\" type=\"prop\" /> prop to show or hide the chip.\n      </div>\n    }\n  />\n);\nexport default IconDemo;\n"
  },
  {
    "path": "docs/src/content/components/chip/Demos/IconsDemo.js",
    "content": "import React from 'react';\nimport { View, Image, Text } from 'react-native';\nimport { ComponentDemo, CodeInline } from '@components';\nimport { Avatar, IconButton, Icon, Chip } from '../../../../../../src/index';\n\nexport const code = `class ChipPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      chipTwo: true,\n    }\n  }\n  render() {\n    return (\n      <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap'}}>    \n          <Chip \n            text={'Mood'}\n            leftIcon={<Icon name=\"mood\" color={'#4CAF50'} />}\n            rightIcon={<Icon name=\"mood-bad\" color={'#F44336'} />}\n            onPress={() => console.log('Mood')}\n          />       \n          <Chip\n              text={'Delete me'}\n              visible={this.state.chipTwo}\n              onDelete={() => this.setState({chipTwo: false})}\n              rightIcon={<Icon name=\"face\" color={'#666666'} />}\n          />\n          <Chip\n              text={'Alaska'}\n              color={'#009688'}\n              rightIcon={<IconButton name=\"place\" color={'white'} onPress={() => console.log('clicked second right icon')} />}\n              />\n          <Chip\n              text={'User'}\n              themeColor={'primary'}\n              onPress={() => console.log('clicked four')}\n              visible={this.state.chipFour}\n              onDelete={() => this.setState({chipFour: false})}\n              leftIcon={<Avatar \n                type=\"image\" \n                image={<Image source={{uri: 'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4'}} /> } \n              />}\n          />\n          <Chip \n              text={'Click me'}\n              chipStyle={'outlined'}\n              themeColor={'primary'} \n              onPress={() => console.log('clicked five')}\n              leftIcon={<Avatar \n                type=\"text\" \n                content=\"MP\" \n                />\n              }\n          />\n          <Chip \n              text={'Biking'}\n              chipStyle={'outlined'}\n              themeColor={'secondary'}\n              leftIcon={<Icon name=\"directions-bike\" color={'#E91E63'} />}\n              rightIcon={<Avatar \n                type=\"icon\" \n                content=\"directions-bike\"\n                contentColor=\"white\"\n                color={'#E91E63'}\n              />}\n          / >\n      </View>\n    );\n  }\n}\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Icons'}\n    sectionHref={`${pageHref}#icon`}\n    sectionId={'icon'}\n    description={\n      <div>\n        There are component spots on either side of the content in the chip.\n        usually you psas an <CodeInline code=\"Icon\" type=\"element\" />,{' '}\n        <CodeInline code=\"Avatar\" type=\"element\" />, or\n        <CodeInline code=\"IconButton\" type=\"element\" />, but you can pass\n        whatever you want. However, the right icon will be overwritten if you\n        pass <CodeInline code=\"onPress\" type=\"prop\" />, see second chip.\n      </div>\n    }\n    code={code}\n    scope={{ View, Icon, Chip, Avatar, Image, IconButton, Text }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/chip/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader, CodeInline } from '@components';\n\nimport DeleteChipDemo from './DeleteChipDemo';\nimport IconsDemo from './IconsDemo';\nimport CustomDemo from './CustomDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader\n          pageHref={pageHref}\n          description={\n            <div>\n              Chips have two styles: <CodeInline code=\"filled\" type=\"value\" />{' '}\n              or <CodeInline code=\"outlined\" type=\"value\" />. Adding{' '}\n              <CodeInline code=\"onPress\" type=\"prop\" />\n              will make the entire chip clickable. The rest can be customized as\n              shown below.\n            </div>\n          }\n        />\n\n        <DeleteChipDemo pageHref={pageHref} />\n        <IconsDemo pageHref={pageHref} />\n        <CustomDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/chip/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image, Text } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { Chip, Avatar, Icon } from '../../../../../src/index';\n\nexport const code = `class ChipPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      chipTwo: true,\n      chipThree: true,\n      chipSix: true\n    }\n  }\n  render() {\n    return (\n      <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap'}}>    \n          <Chip text={'Chip'} />       \n          <Chip\n              text={'Delete me'}\n              visible={this.state.chipTwo}\n              onDelete={() => this.setState({chipTwo: false})}   \n          />\n          <Chip\n              text={'Alaska'}\n              color={'#009688'}\n              visible={this.state.chipThree}\n              onDelete={() => this.setState({chipThree: false})}\n              leftIcon={<Icon name=\"place\" color={'white'} />}\n          />\n          <Chip\n              text={'User'}\n              themeColor={'primary'}\n              onPress={() => console.log('clicked four')}\n              leftIcon={<Avatar \n                type=\"image\" \n                image={<Image source={{uri: 'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4'}} /> } \n            />}\n          />\n          <Chip \n              text={'Click me'}\n              chipStyle={'outlined'}\n              themeColor={'primary'} \n              onPress={() => console.log('clicked five')}\n          />\n          <Chip \n              text={'Biking'}\n              chipStyle={'outlined'}\n              themeColor={'secondary'}\n              leftIcon={<Icon name=\"directions-bike\" color={'#E91E63'} />}\n              visible={this.state.chipSix}\n              onDelete={() => this.setState({chipSix: false})}\n          / >\n      </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        This is the base Chip component for the four types of chips:\n        <CodeInline code=\"InputChip\" type=\"element\" />,{' '}\n        <CodeInline code=\"ChoiceChip\" type=\"element\" />,\n        <CodeInline code=\"FilterChip\" type=\"element\" />, and{' '}\n        <CodeInline code=\"ActionChip\" type=\"element\" />. Using this base\n        component directly gives you more customization options and more\n        flexibility.\n      </div>\n    }\n    code={code}\n    scope={{ View, Chip, Avatar, Image, Icon, Text }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/chip/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/chip/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { Chip } from 'material-bread';\n\nclass ChipPage extends React.Component {\n    constructor(props) {\n      super(props)\n      this.state = {\n        chip: true,\n      }\n    }\n    render() {\n      return (\n        <View style={{flexDirection: 'row', alignItems: 'center'}}>         \n            <Chip\n                canDelete\n                onDelete={() => this.setState({chip: false})}\n                text={'Delete me'}\n                visible={this.state.chip}\n            />\n        </View>\n      );\n    }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/chip/index.js",
    "content": "import React, { Component } from 'react';\n\nimport { ComponentPageLayout } from '@components';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'delete', sub: true },\n  { name: 'icons', sub: true },\n  { name: 'custom', sub: true },\n];\n\nexport default class ChipPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'chip'}\n          title={'Chip'}\n          description={\n            'Chips are compact elements that represent an input, attribute, or action.'\n          }\n          docsLink={'https://material.io/design/components/chips.html'}\n          importCode={`import { Chip } from 'material-bread';`}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/chip'} />\n          <Usage pageHref={'/components/chip'} />\n          <Props pageHref={'/components/chip'} />\n          <Demos pageHref={'/components/chip'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/chip/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['chipStyle', 'Style of chip', 'string: outlined, flat', 'flat'],\n  ['color', 'Color of chip background and outline', 'string', ''],\n  ['disabled', 'Adds disabled styles and prevents clicking', 'bool', ''],\n  ['leftIcon', 'Displays component on the left of the content', 'node', ''],\n  [\n    'onDelete',\n    'Callback func for delete icon, adding this will add delete icon',\n    'func',\n    '',\n  ],\n  ['onPress', 'Callback func for chip, adds ripple', 'func', ''],\n  ['radius', 'Radius of chip and ripple', 'number', '16'],\n  ['rightIcon', 'Displays component on the right of the content', 'node', ''],\n  ['style', 'Styles root component', 'string', ''],\n  ['text', 'Text content for chip', 'string', ''],\n  ['textStyles', 'Styles text content', 'string', ''],\n  ['themeColor', 'Assigns a theme color to chip', 'string', ''],\n  ['visible', 'Toggle whether chip is shown or not', 'bool', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/datatable/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/datatable/MainDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport {\n  DataTable,\n  DataTableHeader,\n  DataTableCell,\n  DataTablePagination,\n  DataTableRow,\n} from '../../../../../src/index';\n\nexport const code = `class Table extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      checkedOne: false,\n      checkedTwo: false,\n      checkedThree: false\n    }\n  }\n  render() {\n    return (\n      <DataTable>\n          <DataTableHeader\n            title={'Nutrition'}\n            rightActions={[\n              {name: 'filter-list'},\n              {name: 'more-vert'},\n            ]} \n          />\n          <DataTableRow checkboxOffset>\n            <DataTableCell text={'Desert'} type={'header'} borderRight relativeWidth={2} />\n            <DataTableCell\n              text={'Calories'}\n              type={'header'}  right\n            />\n            <DataTableCell text={'Fat (g)'}  type={'header'}  right />\n            <DataTableCell text={'Carbs (g)'}  type={'header'}  right />\n            <DataTableCell text={'Protein (g)'}  type={'header'}  right />\n          </DataTableRow>\n          <DataTableRow\n            hover \n            showCheckbox\n            selected={this.state.checkedOne}\n            onPressCheckbox={() =>\n                this.setState({ checkedOne: !this.state.checkedOne })\n            }>\n            <DataTableCell text={'Frozen yogurt'} borderRight relativeWidth={2} />\n            <DataTableCell text={'159'} right />\n            <DataTableCell text={'6.0'} right />\n            <DataTableCell text={'24'} right />\n            <DataTableCell text={'4'} right />\n          </DataTableRow>\n          <DataTableRow\n              hover\n              showCheckbox\n              selected={this.state.checkedTwo}\n              onPressCheckbox={() =>\n                  this.setState({ checkedTwo: !this.state.checkedTwo })\n              }>\n              <DataTableCell text={'Ice Cream Sandwich'} borderRight relativeWidth={2} />\n              <DataTableCell text={'237'} right />\n              <DataTableCell text={'9.0'} right />\n              <DataTableCell text={'37'} right />\n              <DataTableCell text={'4.3'} right />\n          </DataTableRow>\n          <DataTableRow\n              hover\n              showCheckbox\n              selected={this.state.checkedThree}\n              onPressCheckbox={() =>\n                  this.setState({ checkedThree: !this.state.checkedThree })\n              }>\n              <DataTableCell text={'Eclair'} borderRight relativeWidth={2} />\n              <DataTableCell text={'262'} right />\n              <DataTableCell text={'16.0'} right />\n              <DataTableCell text={'24'} right />\n              <DataTableCell text={'6.0'} right />\n          </DataTableRow>\n      </DataTable>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        DataTables are built from sub components,{' '}\n        <CodeInline code=\"DataTableCell\" type=\"element\" />,{' '}\n        <CodeInline code=\"DataTableHeader\" type=\"element\" />,{' '}\n        <CodeInline code=\"DataTablePagination\" type=\"element\" />, and{' '}\n        <CodeInline code=\"DataTableRow\" type=\"element\" />. Below is a simple\n        example.\n      </div>\n    }\n    code={code}\n    scope={{\n      View,\n      DataTable,\n      DataTableHeader,\n      DataTableCell,\n      DataTablePagination,\n      DataTableRow,\n    }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/datatable/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps\n    pageHref={pageHref}\n    description={'See props for each sub component at each comoponent page.'}\n    propData={propData}\n  />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/datatable/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { DataTable, DataTableCell, DataTableRow, } from 'material-bread';\n\nclass Table extends React.Component {\n    constructor(props) {\n      super(props)\n    }\n    render() {\n      return (\n        <DataTable>\n            <DataTableRow>\n                <DataTableCell text={'Desert'} borderRight flex={2} />\n                <DataTableCell text={'Calories'} right />\n                <DataTableCell text={'Fat (g)'} right />\n                <DataTableCell text={'Carbs (g)'} right />\n                <DataTableCell text={'Protein (g)'} right />\n            </DataTableRow>\n            <DataTableRow>\n                <DataTableCell text={'Frozen yogurt'} borderRight flex={2} />\n                <DataTableCell text={'159'} right />\n                <DataTableCell text={'6.0'} right />\n                <DataTableCell text={'24'} right />\n                <DataTableCell text={'4'} right />\n            </DataTableRow>\n        </DataTable>\n      );\n    }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/datatable/index.js",
    "content": "import React, { Component } from 'react';\nimport { ComponentPageLayout } from '@components';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n];\n\nexport default class DataTablePage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'dataTable'}\n          title={'Data Table'}\n          description={'Data Tables display sets of data.'}\n          docsLink={'https://material.io/design/components/data-tables.html'}\n          importCode={`import { DataTable } from 'material-bread';`}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/datatable'} />\n          <Usage pageHref={'/components/datatable'} />\n          <Props pageHref={'/components/datatable'} />\n          <Demos pageHref={'/components/datatable'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/datatable/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [['style', 'Styles root element', 'object', '']];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/datatable-cell/Demos/SortingIconDemo.js",
    "content": "import React from 'react';\nimport { ComponentDemo } from '@components';\nimport { DataTableRow, DataTableCell } from '../../../../../../src/index';\n\nexport const code = `class ChipPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      sortingIcon: 'down',\n    }\n  }\n  render() {\n    return (\n        <DataTableRow>\n            <DataTableCell\n                text={'Desert'}\n                type={'header'}\n                borderRight\n                relativeWidth={2}\n            />\n            <DataTableCell\n                text={'Calories'}\n                type={'header'}\n                sortingIcon={this.state.sortingIcon}\n                onPress={() =>\n                this.setState({\n                    sortingIcon: this.state.sortingIcon == 'up' ? 'down' : 'up',\n                })\n                }\n                right\n            />\n            <DataTableCell text={'Fat (g)'} type={'header'} right />\n            <DataTableCell text={'Carbs (g)'} type={'header'} right />\n            <DataTableCell text={'Protein (g)'} type={'header'} right />\n        </DataTableRow>\n    );\n  }\n}\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'SortingIcon'}\n    sectionHref={`${pageHref}#sorting-icon`}\n    sectionId={'sorting-icon'}\n    code={code}\n    scope={{ DataTableRow, DataTableCell }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/datatable-cell/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport SortingIconDemo from './SortingIconDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n        <SortingIconDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/datatable-cell/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport {\n  DataTable,\n  DataTableHeader,\n  DataTableCell,\n  DataTablePagination,\n  DataTableRow,\n} from '../../../../../src/index';\n\nexport const code = `class Table extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n\n    }\n  }\n  render() {\n    return (\n      <DataTable>\n          <DataTableRow>\n              <DataTableCell text={'Desert'} type={'header'} borderRight relativeWidth={2} />\n              <DataTableCell text={'Calories'}  type={'header'}  right />\n              <DataTableCell text={'Fat (g)'}  type={'header'}  right />\n              <DataTableCell text={'Carbs (g)'}  type={'header'}  right />\n              <DataTableCell text={'Protein (g)'}  type={'header'}  right />\n          </DataTableRow>\n          <DataTableRow>\n              <DataTableCell text={'Frozen yogurt'} borderRight relativeWidth={2} />\n              <DataTableCell text={'159'} right />\n              <DataTableCell text={'6.0'} right />\n              <DataTableCell text={'24'} right />\n              <DataTableCell text={'4'} right />\n          </DataTableRow>\n          <DataTableRow>\n              <DataTableCell text={'Ice Cream Sandwich'} borderRight relativeWidth={2} />\n              <DataTableCell text={'237'} right />\n              <DataTableCell text={'9.0'} right />\n              <DataTableCell text={'37'} right />\n              <DataTableCell text={'4.3'} right />\n          </DataTableRow>\n          <DataTableRow>\n              <DataTableCell text={'Eclair'} borderRight relativeWidth={2} />\n              <DataTableCell text={'262'} right />\n              <DataTableCell text={'16.0'} right />\n              <DataTableCell text={'24'} right />\n              <DataTableCell text={'6.0'} right />\n          </DataTableRow>\n      </DataTable>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        Data Table Cells can either be <CodeInline code=\"header\" type=\"value\" />{' '}\n        or <CodeInline code=\"regular\" type=\"value\" /> cell. You can add\n        <CodeInline code=\"onPress\" type=\"props\" /> ,{' '}\n        <CodeInline code=\"right\" type=\"props\" /> to align to the right, or add\n        borders on either side.\n      </div>\n    }\n    code={code}\n    scope={{\n      View,\n      DataTable,\n      DataTableHeader,\n      DataTableCell,\n      DataTablePagination,\n      DataTableRow,\n      Image,\n    }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/datatable-cell/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/datatable-cell/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { DataTable, DataTableCell, DataTableRow, } from 'material-bread';\n\nclass Table extends React.Component {\n    constructor(props) {\n      super(props)\n    }\n    render() {\n      return (\n        <DataTable>\n            <DataTableRow>\n                <DataTableCell text={'Desert'} borderRight flex={2} />\n                <DataTableCell text={'Calories'} right />\n                <DataTableCell text={'Fat (g)'} right />\n                <DataTableCell text={'Carbs (g)'} right />\n                <DataTableCell text={'Protein (g)'} right />\n            </DataTableRow>\n            <DataTableRow>\n                <DataTableCell text={'Frozen yogurt'} borderRight flex={2} />\n                <DataTableCell text={'159'} right />\n                <DataTableCell text={'6.0'} right />\n                <DataTableCell text={'24'} right />\n                <DataTableCell text={'4'} right />\n            </DataTableRow>\n        </DataTable>\n      );\n    }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/datatable-cell/index.js",
    "content": "import React, { Component } from 'react';\nimport { ComponentPageLayout } from '@components';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'sorting icon', sub: true },\n];\n\nexport default class DataTableCellPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'dataTable-cell'}\n          title={'Data Table Cell'}\n          description={`Data Table Cells display invidiual pieces of data.`}\n          importCode={`import { DataTableCell } from 'material-bread';`}\n          docsLink={'https://material.io/design/components/data-tables.html'}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/datatable-cell'} />\n          <Usage pageHref={'/components/datatable-cell'} />\n          <Props pageHref={'/components/datatable-cell'} />\n          <Demos pageHref={'/components/datatable-cell'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/datatable-cell/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['borderLeft', 'Shows border on the left', 'bool', ''],\n  ['borderRight', 'Shows border on the right', 'bool', ''],\n\n  ['onPress', 'Call back on cell', 'func', ''],\n  ['minWidth', 'Determines minWidth for each cell', 'number', '100'],\n  ['relativeWidth', 'Sets relativeWidth factor to minWidth', 'integer', '1'],\n  ['right', 'Displays cell data on the right', 'bool', 'false'],\n  ['sortingIcon', 'Toggles sorting icon', 'string: up, down', 'down'],\n  ['style', 'Styles root element', 'object', ''],\n  ['text', 'Text content for cell', 'object', ''],\n  ['textStyle', 'Styles text element', 'object', ''],\n  [\n    'type',\n    'Whether it is a header or normal cell',\n    'string: header, normal',\n    'normal',\n  ],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/datatable-header/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentMainDemo } from '@components';\nimport {\n  DataTable,\n  DataTableHeader,\n  DataTableCell,\n  DataTablePagination,\n  DataTableRow,\n} from '../../../../../src/index';\n\nexport const code = `class Table extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n\n    }\n  }\n  render() {\n    return (\n      <DataTable>\n          <DataTableHeader\n            title={'Nutrition'}\n            rightActions={[\n              {name: 'filter-list'},\n              {name: 'more-vert'},\n            ]} \n          />\n          <DataTableRow>\n              <DataTableCell text={'Desert'} type={'header'} relativeWidth={2} />\n              <DataTableCell text={'Calories'}  type={'header'}  right />\n              <DataTableCell text={'Fat (g)'}  type={'header'}  right />\n              <DataTableCell text={'Carbs (g)'}  type={'header'}  right />\n              <DataTableCell text={'Protein (g)'}  type={'header'}  right />\n          </DataTableRow>\n          <DataTableRow>\n              <DataTableCell text={'Frozen yogurt'} borderRight relativeWidth={2} />\n              <DataTableCell text={'159'} right />\n              <DataTableCell text={'6.0'} right />\n              <DataTableCell text={'24'} right />\n              <DataTableCell text={'4'} right />\n          </DataTableRow>\n          <DataTableRow>\n              <DataTableCell text={'Ice Cream Sandwhich'} borderRight relativeWidth={2} />\n              <DataTableCell text={'237'} right />\n              <DataTableCell text={'9.0'} right />\n              <DataTableCell text={'37'} right />\n              <DataTableCell text={'4.3'} right />\n          </DataTableRow>\n          <DataTableRow>\n              <DataTableCell text={'Eclair'} borderRight relativeWidth={2} />\n              <DataTableCell text={'262'} right />\n              <DataTableCell text={'16.0'} right />\n              <DataTableCell text={'24'} right />\n              <DataTableCell text={'6.0'} right />\n          </DataTableRow>\n      </DataTable>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        DataTableHeaders can display action buttons, the number of selected\n        items, table title, or any other contextual information.\n      </div>\n    }\n    code={code}\n    scope={{\n      View,\n      DataTable,\n      DataTableHeader,\n      DataTableCell,\n      DataTablePagination,\n      DataTableRow,\n      Image,\n    }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/datatable-header/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/datatable-header/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { DataTable, DataTableHeader, DataTableCell, DataTableRow, } from 'material-bread';\n\nclass Table extends React.Component {\n    constructor(props) {\n      super(props)\n    }\n    render() {\n      return (\n        <DataTable>\n            <DataTableHeader\n              title={'Nutrition'}\n              rightActions={[\n                {name: 'filter-list'},\n                {name: 'more-vert'},\n              ]} \n            />\n            <DataTableRow>\n                <DataTableCell text={'Desert'} borderRight flex={2} />\n                <DataTableCell text={'Calories'} right />\n                <DataTableCell text={'Fat (g)'} right />\n                <DataTableCell text={'Carbs (g)'} right />\n                <DataTableCell text={'Protein (g)'} right />\n            </DataTableRow>\n            <DataTableRow>\n                <DataTableCell text={'Frozen yogurt'} borderRight flex={2} />\n                <DataTableCell text={'159'} right />\n                <DataTableCell text={'6.0'} right />\n                <DataTableCell text={'24'} right />\n                <DataTableCell text={'4'} right />\n            </DataTableRow>\n        </DataTable>\n      );\n    }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/datatable-header/index.js",
    "content": "import React, { Component } from 'react';\n\nimport { ComponentPageLayout } from '@components';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\n\nconst sections = [{ name: 'Component' }, { name: 'Usage' }, { name: 'Props' }];\n\nexport default class DataTableHeaderPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'dataTable-header'}\n          title={'Data Table Header'}\n          description={`Data Table Headers display contextual information above tables`}\n          importCode={`import { DataTableHeader } from 'material-bread';`}\n          docsLink={'https://material.io/design/components/data-tables.html'}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/datatable-header'} />\n          <Usage pageHref={'/components/datatable-header'} />\n          <Props pageHref={'/components/datatable-header'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/datatable-header/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['leftActions', 'Displays actions on left of header', 'array', ''],\n  ['rightActions', 'Displays actions on right of header', 'array', ''],\n  ['style', 'Styles root element', 'object', ''],\n  ['title', 'Table title', 'string', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/datatable-pagination/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport {\n  DataTable,\n  DataTableHeader,\n  DataTableCell,\n  DataTablePagination,\n  DataTableRow,\n} from '../../../../../src/index';\n\nexport const code = `class Table extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      page: 0,\n      perPage: 2,\n    }\n  }\n  render() {\n    const data = [\n      {\n        name: 'Frozen Yogurt',\n        calories: '159',\n        fat: '6.0',\n        carbs: '24',\n        protein: '4',\n      },\n      {\n        name: 'Ice Cream Sandwhich',\n        calories: '237',\n        fat: '9.0',\n        carbs: '37',\n        protein: '4.3',\n      },\n      {\n        name: 'Blizzard',\n        calories: '480',\n        fat: '3.4',\n        carbs: '80',\n        protein: '1',\n      },\n      {\n        name: 'Frosty',\n        calories: '200',\n        fat: '2.0',\n        carbs: '12',\n        protein: '8',\n      },\n      {\n        name: 'DillyBar',\n        calories: '120',\n        fat: '15',\n        carbs: '30',\n        protein: '10',\n      },\n      {\n        name: 'PushPop',\n        calories: '50',\n        fat: '1',\n        carbs: '2',\n        protein: '2',\n      },\n    ];\n\n    return (\n      <DataTable>\n          <DataTableRow>\n              <DataTableCell text={'Desert'} type={'header'} borderRight relativeWidth={2} />\n              <DataTableCell text={'Calories'}  type={'header'}  right />\n              <DataTableCell text={'Fat (g)'}  type={'header'}  right />\n              <DataTableCell text={'Carbs (g)'}  type={'header'}  right />\n              <DataTableCell text={'Protein (g)'}  type={'header'}  right />\n          </DataTableRow>\n          {data\n            .slice(\n              this.state.page * this.state.perPage,\n              this.state.page * this.state.perPage + this.state.perPage,\n            )\n            .map(row => (\n              <DataTableRow key={row.name}>\n                <DataTableCell text={row.name} borderRight relativeWidth={2} />\n                <DataTableCell text={row.calories} right />\n                <DataTableCell text={row.fat} right />\n                <DataTableCell text={row.carbs} right />\n                <DataTableCell text={row.protein} right />\n              </DataTableRow>\n            ))}\n\n          <DataTablePagination\n            page={this.state.page}\n            numberOfPages={data.length / this.state.perPage}\n            numberOfRows={data.length}\n            perPage={this.state.perPage}\n            onChangePage={page => this.setState({ page: page })}\n            onChangeRowsPerPage={perPage => this.setState({ perPage: perPage })}\n            possibleNumberPerPage={[2,3,4,5, 6]}\n          />\n      </DataTable>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        The <CodeInline code=\"DataTablePagination\" type=\"element\" /> component\n        displays the number of rows per page, current page, how many rows total,\n        and navigation buttons between different pages.\n      </div>\n    }\n    code={code}\n    scope={{\n      View,\n      DataTable,\n      DataTableHeader,\n      DataTableCell,\n      DataTablePagination,\n      DataTableRow,\n      Image,\n    }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/datatable-pagination/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/datatable-pagination/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { DataTable, DataTableCell, DataTableRow, DataTablePagination } from 'material-bread';\n\nclass Table extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      page: 0,\n      perPage: 2,\n    }\n  }\n  render() {\n    const data = [\n      {\n        name: 'Frozen Yogurt',\n        calories: '159',\n        fat: '6.0',\n        carbs: '24',\n        protein: '4',\n      },\n      {\n        name: 'Ice Cream Sandwhich',\n        calories: '237',\n        fat: '9.0',\n        carbs: '37',\n        protein: '4.3',\n      },\n      {\n        name: 'Blizzard',\n        calories: '480',\n        fat: '3.4',\n        carbs: '80',\n        protein: '1',\n      },\n      {\n        name: 'Frosty',\n        calories: '200',\n        fat: '2.0',\n        carbs: '12',\n        protein: '8',\n      },\n      {\n        name: 'DillyBar',\n        calories: '120',\n        fat: '15',\n        carbs: '30',\n        protein: '10',\n      },\n      {\n        name: 'PushPop',\n        calories: '50',\n        fat: '1',\n        carbs: '2',\n        protein: '2',\n      },\n    ];\n\n    return (\n      <DataTable>\n          <DataTableRow>\n              <DataTableCell text={'Desert'} type={'header'} borderRight flex={2} />\n              <DataTableCell text={'Calories'}  type={'header'}  right />\n              <DataTableCell text={'Fat (g)'}  type={'header'}  right />\n              <DataTableCell text={'Carbs (g)'}  type={'header'}  right />\n              <DataTableCell text={'Protein (g)'}  type={'header'}  right />\n          </DataTableRow>\n          {data\n            .slice(\n              this.state.page * this.state.perPage,\n              this.state.page * this.state.perPage + this.state.perPage,\n            )\n            .map(row => (\n              <DataTableRow key={row.name}>\n                <DataTableCell text={row.name} borderRight flex={2} />\n                <DataTableCell text={row.calories} right />\n                <DataTableCell text={row.fat} right />\n                <DataTableCell text={row.carbs} right />\n                <DataTableCell text={row.protein} right />\n              </DataTableRow>\n            ))}\n\n          <DataTablePagination\n            page={this.state.page}\n            numberOfPages={data.length / this.state.perPage}\n            numberOfRows={data.length}\n            perPage={this.state.perPage}\n            onChangePage={page => this.setState({ page: page })}\n            onChangeRowsPerPage={perPage => this.setState({ perPage: perPage })}\n            possibleNumberPerPage={[2,3,4,5, 6]}\n          />\n      </DataTable>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/datatable-pagination/index.js",
    "content": "import React, { Component } from 'react';\nimport { ComponentPageLayout } from '@components';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\n\nconst sections = [{ name: 'Component' }, { name: 'Usage' }, { name: 'Props' }];\n\nexport default class DataTablePaginationPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'dataTable-pagination'}\n          title={'Data Table Pagination'}\n          description={`Data Table Pagination navigates between pages`}\n          importCode={`import { DataTablePagination } from 'material-bread';`}\n          docsLink={'https://material.io/design/components/data-tables.html'}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/datatable-pagination'} />\n          <Usage pageHref={'/components/datatable-pagination'} />\n          <Props pageHref={'/components/datatable-pagination'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/datatable-pagination/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  [\n    'numberOfPages',\n    'Total number of pages, usually data.length / perPage',\n    'number',\n    '',\n  ],\n  ['numberOfRows', 'Number of rows/items, data.length', 'number', ''],\n  ['onChangePage', 'Callback when clicking navigation', 'func', ''],\n  [\n    'onChangeRowsPerPage',\n    'Callback when clicking the perPage Menu',\n    'func',\n    '',\n  ],\n  ['page', 'Current page, starts at 0', 'number', ''],\n  ['perPage', 'Number of rows  to display per page', 'number', ''],\n  ['possibleNumberPerPage', 'Array of possible perPage filtering', 'array', ''],\n\n  ['style', 'Styles root element', 'object', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/datatable-row/Demos/CheckboxDemo.js",
    "content": "import React from 'react';\nimport { ComponentDemo } from '@components';\nimport {\n  DataTable,\n  DataTableRow,\n  DataTableCell,\n} from '../../../../../../src/index';\n\nexport const code = `class Table extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n        checkedOne: false,\n        checkedTwo: false,\n        checkedThree: false,\n    }\n  }\n  render() {\n    return (\n        <DataTable>\n            <DataTableRow checkboxOffset>\n                <DataTableCell\n                    text={'Desert'}\n                    type={'header'}\n                    borderRight\n                    relativeWidth={2}\n                />\n                <DataTableCell text={'Calories'} type={'header'} right />\n                <DataTableCell text={'Fat (g)'} type={'header'} right />\n                <DataTableCell text={'Carbs (g)'} type={'header'} right />\n                <DataTableCell text={'Protein (g)'} type={'header'} right />\n            </DataTableRow>\n            <DataTableRow\n                hover\n                showCheckbox\n                selected={this.state.checkedOne}\n                onPressCheckbox={() =>\n                    this.setState({ checkedOne: !this.state.checkedOne })\n                }>\n                <DataTableCell text={'Frozen yogurt'} borderRight relativeWidth={2} />\n                <DataTableCell text={'159'} right />\n                <DataTableCell text={'6.0'} right />\n                <DataTableCell text={'24'} right />\n                <DataTableCell text={'4'} right />\n            </DataTableRow>\n            <DataTableRow\n                hover\n                showCheckbox\n                selected={this.state.checkedTwo}\n                onPressCheckbox={() =>\n                    this.setState({ checkedTwo: !this.state.checkedTwo })\n                }>\n                <DataTableCell text={'Ice Cream Sandwich'} borderRight relativeWidth={2} />\n                <DataTableCell text={'237'} right />\n                <DataTableCell text={'9.0'} right />\n                <DataTableCell text={'37'} right />\n                <DataTableCell text={'4.3'} right />\n            </DataTableRow>\n            <DataTableRow\n                hover\n                showCheckbox\n                selected={this.state.checkedThree}\n                onPressCheckbox={() =>\n                    this.setState({ checkedThree: !this.state.checkedThree })\n                }>\n                <DataTableCell text={'Eclair'} borderRight relativeWidth={2} />\n                <DataTableCell text={'262'} right />\n                <DataTableCell text={'16.0'} right />\n                <DataTableCell text={'24'} right />\n                <DataTableCell text={'6.0'} right />\n            </DataTableRow>\n        </DataTable>\n    );\n  }\n}\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Checkbox'}\n    sectionHref={`${pageHref}#checkbox`}\n    sectionId={'checkbox'}\n    code={code}\n    scope={{ DataTable, DataTableRow, DataTableCell }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/datatable-row/Demos/SelectedDemo.js",
    "content": "import React from 'react';\nimport { ComponentDemo, CodeInline } from '@components';\nimport {\n  DataTable,\n  DataTableRow,\n  DataTableCell,\n} from '../../../../../../src/index';\n\nexport const code = `class Table extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n        checkedOne: false,\n        checkedTwo: false,\n        checkedThree: false,\n    }\n  }\n  render() {\n    return (\n        <DataTable>\n            <DataTableRow>\n                <DataTableCell\n                    text={'Desert'}\n                    type={'header'}\n                    borderRight\n                    flex={2}\n                />\n                <DataTableCell text={'Calories'} type={'header'} right />\n                <DataTableCell text={'Fat (g)'} type={'header'} right />\n                <DataTableCell text={'Carbs (g)'} type={'header'} right />\n                <DataTableCell text={'Protein (g)'} type={'header'} right />\n            </DataTableRow>\n            <DataTableRow\n                hover\n                selected={this.state.checkedOne}\n                onPress={() =>\n                    this.setState({ checkedOne: !this.state.checkedOne })\n                }>\n                <DataTableCell text={'Frozen yogurt'} borderRight flex={2} />\n                <DataTableCell text={'159'} right />\n                <DataTableCell text={'6.0'} right />\n                <DataTableCell text={'24'} right />\n                <DataTableCell text={'4'} right />\n            </DataTableRow>\n            <DataTableRow\n                hover\n                selected={this.state.checkedTwo}\n                onPress={() =>\n                    this.setState({ checkedTwo: !this.state.checkedTwo })\n                }>\n                <DataTableCell text={'Ice Cream Sandwich'} borderRight flex={2} />\n                <DataTableCell text={'237'} right />\n                <DataTableCell text={'9.0'} right />\n                <DataTableCell text={'37'} right />\n                <DataTableCell text={'4.3'} right />\n            </DataTableRow>\n            <DataTableRow\n                hover\n                selected={this.state.checkedThree}\n                onPress={() =>\n                    this.setState({ checkedThree: !this.state.checkedThree })\n                }>\n                <DataTableCell text={'Eclair'} borderRight flex={2} />\n                <DataTableCell text={'262'} right />\n                <DataTableCell text={'16.0'} right />\n                <DataTableCell text={'24'} right />\n                <DataTableCell text={'6.0'} right />\n            </DataTableRow>\n        </DataTable>\n    );\n  }\n}\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Selected'}\n    sectionHref={`${pageHref}#selected`}\n    sectionId={'selected'}\n    description={\n      <div>\n        If you just want selected rows without checkboxes, then remove\n        <CodeInline code=\"showCheckbox\" type=\"prop\" /> and change{' '}\n        <CodeInline code=\"onPressCheckbox\" type=\"prop\" /> to simply{' '}\n        <CodeInline code=\"onPress\" type=\"prop\" />\n      </div>\n    }\n    code={code}\n    scope={{ DataTable, DataTableRow, DataTableCell }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/datatable-row/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport CheckboxDemo from './CheckboxDemo';\nimport SelectedDemo from './SelectedDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n        <CheckboxDemo pageHref={pageHref} />\n        <SelectedDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/datatable-row/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport {\n  DataTable,\n  DataTableHeader,\n  DataTableCell,\n  DataTablePagination,\n  DataTableRow,\n} from '../../../../../src/index';\n\nexport const code = `class Table extends React.Component {\n  constructor(props) {\n    super(props);\n  }\n  render() {\n    return (\n      <DataTable>\n          <DataTableRow hover>\n              <DataTableCell text={'Desert'} type={'header'} borderRight relativeWidth={2} />\n              <DataTableCell text={'Calories'}  type={'header'}  right />\n              <DataTableCell text={'Fat (g)'}  type={'header'}  right />\n              <DataTableCell text={'Carbs (g)'}  type={'header'}  right />\n              <DataTableCell text={'Protein (g)'}  type={'header'}  right />\n          </DataTableRow>\n          <DataTableRow hover>\n              <DataTableCell text={'Frozen yogurt'} borderRight relativeWidth={2} />\n              <DataTableCell text={'159'} right />\n              <DataTableCell text={'6.0'} right />\n              <DataTableCell text={'24'} right />\n              <DataTableCell text={'4'} right />\n          </DataTableRow>\n          <DataTableRow hover>\n              <DataTableCell text={'Ice Cream Sandwich'} borderRight relativeWidth={2} />\n              <DataTableCell text={'237'} right />\n              <DataTableCell text={'9.0'} right />\n              <DataTableCell text={'37'} right />\n              <DataTableCell text={'4.3'} right />\n          </DataTableRow>\n          <DataTableRow hover>\n              <DataTableCell text={'Eclair'} borderRight relativeWidth={2} />\n              <DataTableCell text={'262'} right />\n              <DataTableCell text={'16.0'} right />\n              <DataTableCell text={'24'} right />\n              <DataTableCell text={'6.0'} right />\n          </DataTableRow>\n      </DataTable>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        <CodeInline code=\"DataTabeRow\" type=\"element\" />s can have checkboxes,\n        be selected, or hovered.\n      </div>\n    }\n    code={code}\n    scope={{\n      View,\n      DataTable,\n      DataTableHeader,\n      DataTableCell,\n      DataTablePagination,\n      DataTableRow,\n      Image,\n    }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/datatable-row/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/datatable-row/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { DataTable, DataTableCell, DataTableRow, } from 'material-bread';\n\nclass Table extends React.Component {\n    constructor(props) {\n      super(props)\n    }\n    render() {\n      return (\n        <DataTable>\n            <DataTableRow>\n                <DataTableCell text={'Desert'} borderRight flex={2} />\n                <DataTableCell text={'Calories'} right />\n                <DataTableCell text={'Fat (g)'} right />\n                <DataTableCell text={'Carbs (g)'} right />\n                <DataTableCell text={'Protein (g)'} right />\n            </DataTableRow>\n            <DataTableRow>\n                <DataTableCell text={'Frozen yogurt'} borderRight flex={2} />\n                <DataTableCell text={'159'} right />\n                <DataTableCell text={'6.0'} right />\n                <DataTableCell text={'24'} right />\n                <DataTableCell text={'4'} right />\n            </DataTableRow>\n        </DataTable>\n      );\n    }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/datatable-row/index.js",
    "content": "import React, { Component } from 'react';\nimport { ComponentPageLayout } from '@components';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'checkbox', sub: true },\n  { name: 'selected', sub: true },\n];\n\nexport default class DataTableRowPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'dataTable-row'}\n          title={'DataTableRow'}\n          description={`Data Table Rows display a row composed of Cells`}\n          importCode={`import { DataTableHeader } from 'material-bread';`}\n          docsLink={'https://material.io/design/components/data-tables.html'}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/datatable-row'} />\n          <Usage pageHref={'/components/datatable-row'} />\n          <Props pageHref={'/components/datatable-row'} />\n          <Demos pageHref={'/components/datatable-row'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/datatable-row/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  [\n    'checkboxOffset',\n    'Offsets rows without checkboxes to align with ones that do',\n    'bool',\n    '',\n  ],\n  ['hover', `Will show background on hover`, 'bool', 'false'],\n\n  ['onPressCheckbox', 'Call back on checkbox', 'func', ''],\n  [\n    'onPress',\n    'Call back on whole row, will default to onPressCheckbox if provided',\n    'func',\n    '',\n  ],\n  ['selected', `Whether row and checbkox is selected`, 'bool', ''],\n  ['showCheckbox', 'Toggle checkbox display', 'bool', ''],\n  ['style', 'Styles root element', 'object', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/dialog/Demos/AlertDemo.js",
    "content": "import React from 'react';\nimport { View, Text } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { Dialog, Button } from '../../../../../../src/index';\n\nexport const code = `class DialogPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n    visible: false,\n    }\n  }\n  render() {\n    return (\n      <View style={{flexDirection: 'row', }}>    \n        <Button text={'Open'} onPress={() => this.setState({ visible: !this.state.visible })} />\n        <Dialog\n            visible={this.state.visible}\n            onTouchOutside={() => this.setState({ visible: false })}\n            supportingText={'Discard draft?'}\n            style={{width: 280}}\n            actionItems={[\n            {\n                text: 'Cancel',\n                onPress: () =>  this.setState({ visible: false }),\n            },\n            {\n                text: 'OK',\n                onPress: () =>  this.setState({ visible: false }),\n            },\n            ]}\n        /> \n      </View>\n    );\n  }\n}\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Alert'}\n    sectionHref={`${pageHref}#alert`}\n    sectionId={'alert'}\n    code={code}\n    scope={{ View, Dialog, Button, Text }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/dialog/Demos/SimpleDemo.js",
    "content": "import React from 'react';\nimport { View, Image, Text } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport {\n  Dialog,\n  Button,\n  Avatar,\n  Ripple,\n  BodyText,\n} from '../../../../../../src/index';\n\nexport const code = `class DialogPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n    visible: false,\n    }\n  }\n  render() {\n    return (\n      <View style={{flexDirection: 'row', }}>    \n        <Button text={'Open'} onPress={() => this.setState({ visible: !this.state.visible })} />\n        <Dialog\n            visible={this.state.visible}\n            onTouchOutside={() => this.setState({ visible: false })}\n            title={'Set up backup account'}>\n            <Ripple\n            style={{\n                flexDirection: 'row',\n                alignItems: 'center',\n                padding: 10,\n            }}>\n            <Avatar\n                type=\"image\"\n                image={\n                <Image\n                    source={{\n                    uri:\n                        'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4',\n                    }}\n                />\n                }\n                size={40}\n            />\n            <BodyText\n                style={{\n                fontSize: 14,\n                fontWeight: '400',\n                color: 'rgba(0, 0, 0, 0.54)',\n                marginLeft: 20,\n                }}>\n                user1@gmail.com\n            </BodyText>\n            </Ripple>\n\n            <Ripple\n            style={{\n                flexDirection: 'row',\n                alignItems: 'center',\n                padding: 10,\n            }}>\n            <Avatar\n                type=\"image\"\n                image={\n                <Image\n                    source={{\n                    uri:\n                        'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4',\n                    }}\n                />\n                }\n                size={40}\n            />\n            <BodyText\n                style={{\n                fontSize: 14,\n                fontWeight: '400',\n                color: 'rgba(0, 0, 0, 0.54)',\n                marginLeft: 20,\n                }}>\n                user2@gmail.com\n            </BodyText>\n            </Ripple>\n\n            <Ripple\n            style={{\n                flexDirection: 'row',\n                alignItems: 'center',\n                padding: 10,\n            }}>\n            <Avatar\n                type=\"icon\"\n                content=\"add\"\n                color=\"#ccc\"\n                contentColor={'white'}\n                size={40}\n            />\n            <BodyText\n                style={{\n                fontSize: 14,\n                fontWeight: '400',\n                color: 'rgba(0, 0, 0, 0.54)',\n                marginLeft: 20,\n                }}>\n                Add account\n            </BodyText>\n            </Ripple>\n        </Dialog>\n      </View>\n    );\n  }\n}\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Simple'}\n    sectionHref={`${pageHref}#simple`}\n    sectionId={'simple'}\n    code={code}\n    scope={{ View, Dialog, Button, Text, Avatar, Image, Ripple, BodyText }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/dialog/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport AlertDemo from './AlertDemo';\nimport SimpleDemo from './SimpleDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader\n          pageHref={pageHref}\n          description={\n            <div>\n              You can create the dialogs shown in the Material Docs by adding\n              components as children.\n            </div>\n          }\n        />\n\n        <AlertDemo pageHref={pageHref} />\n        <SimpleDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/dialog/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { Button, Dialog } from '../../../../../src/index';\n\nexport const code = `class DialogPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      visible: false\n    }\n  }\n  render() {\n    return (\n      <View>\n        <Button text={'Open'} onPress={() => this.setState({ visible: !this.state.visible })} />\n        <Dialog\n          visible={this.state.visible}\n          onTouchOutside={() => this.setState({ visible: false })}\n          title={'Use Googles location service?'}\n          supportingText={\n            'Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.'\n          }\n          actionItems={[\n            {\n              text: 'Cancel',\n              onPress: () =>  this.setState({ visible: false }),\n            },\n            {\n              text: 'OK',\n              onPress: () =>  this.setState({ visible: false }),\n            },\n          ]}\n        />  \n      </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        Dialogs are rendered with{' '}\n        <CodeInline code=\"modal-react-native-web\" type=\"\" /> package. This\n        mimics the default modal found in{' '}\n        <CodeInline code=\"react-native\" type=\"\" />. Passing in{' '}\n        <CodeInline code=\"title\" type=\"prop\" />,{' '}\n        <CodeInline code=\"supportingText\" type=\"prop\" />,{' '}\n        <CodeInline code=\"actionItems\" type=\"prop\" />, will create a standard\n        dialog. You can also insert whatever you want inbetween{' '}\n        <CodeInline code=\"supportingText\" type=\"prop\" />\n        and <CodeInline code=\"actionItems\" type=\"prop\" /> by passing in{' '}\n        <CodeInline code=\"children\" type=\"prop\" />\n      </div>\n    }\n    code={code}\n    scope={{\n      View,\n      Button,\n      Dialog,\n      Image,\n    }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/dialog/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/dialog/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { Dialog } from 'material-bread';\n\nclass DialogPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      visible: false\n    }\n  }\n  render() {\n    return (\n      <View>\n        <Button onPress={() => store.set({ visible: !this.state.visible })}>\n          Open\n        </Button>\n        <Dialog\n          visible={this.state.visible}\n          onTouchOutside={() => this.setState({ visible: false })}\n          title={'Use Googles location service?'}\n          supportingText={\n            'Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.'\n          }\n          actionItems={[\n            {\n              text: 'Cancel',\n              onPress: () =>  this.setState({ visible: false }),\n            },\n            {\n              text: 'OK',\n              onPress: () =>  this.setState({ visible: false }),\n            },\n          ]}\n        />\n      </View>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/dialog/index.js",
    "content": "import React, { Component } from 'react';\nimport { ComponentPageLayout } from '@components';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'alert', sub: true },\n  { name: 'simple', sub: true },\n];\n\nexport default class DialogPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'dialog'}\n          title={'Dialog'}\n          description={`Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.`}\n          importCode={`import { Dialog } from 'material-bread';`}\n          docsLink={'https://material.io/design/components/dialogs.html'}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/dialog'} />\n          <Usage pageHref={'/components/dialog'} />\n          <Props pageHref={'/components/dialog'} />\n          <Demos pageHref={'/components/dialog'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/dialog/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['actionItems', 'Array of actions to show at the bottom right', 'array', ''],\n  ['actionItemsContainerStyle', 'Styles action items container', 'object', ''],\n  [\n    'contentStyle',\n    'Styles content container excluding action items',\n    'object',\n    '',\n  ],\n  ['onRequestClose', 'Callback when dialog is closing', 'func', ''],\n  ['onShow', 'Callback when dialog is opening', 'func', ''],\n  [\n    'onTouchOutside',\n    'Callback when clicking outside of dialog when shown',\n    'func',\n    '',\n  ],\n  ['title', 'Adds a dialog title at the top', 'string', ''],\n  ['titleStyle', 'Additional styles for title', 'object', ''],\n  ['style', 'Styles container dialog', 'object', ''],\n  ['supportingText', 'Adds styled text below title', 'string', ''],\n  ['supportingTextStyle', 'Additional styles for supportingText', 'object', ''],\n  ['visible', 'Wether to show dialog or not', 'bool', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/divider/Demos/InsetLeftDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo, CodeInline } from '@components';\nimport { Divider, List, ListItem, Avatar } from '../../../../../../src/index';\n\nexport const code = `class DialogPage extends React.Component {\n  constructor(props) {\n    super(props)\n  }\n  render() {\n    return (\n        <List subheader={'Favorites'} style={{ width: 300 }}>\n        <ListItem\n          text={'Janet Perkins'}\n          media={\n            <Avatar\n              type=\"icon\"\n              content=\"person\"\n              contentColor={'#ececec'}\n              color={'#a3a3a3'}\n              size={40}\n            />\n          }\n        />\n\n        <ListItem\n          text={'Mary Perkins'}\n          media={\n            <Avatar\n              type=\"icon\"\n              content=\"person\"\n              contentColor={'#ececec'}\n              color={'#a3a3a3'}\n              size={40}\n            />\n          }\n        />\n        <Divider insetLeft={20} />\n        <ListItem\n          text={'Peter Carlsson'}\n          media={\n            <Avatar\n              type=\"icon\"\n              content=\"person\"\n              contentColor={'#ececec'}\n              color={'#a3a3a3'}\n              size={40}\n            />\n          }\n        />\n        <ListItem\n          text={'Trevor Hansen'}\n          media={\n            <Avatar\n              type=\"icon\"\n              content=\"person\"\n              contentColor={'#ececec'}\n              color={'#a3a3a3'}\n              size={40}\n            />\n          }\n        />\n     \n      </List>\n    );\n  }\n}\n`;\n\nconst SubtitleDemo = ({ pageHref }) => (\n  <ComponentDemo\n    sectionName={'InsetLeft'}\n    sectionHref={`${pageHref}#insetleft`}\n    sectionId={'insetleft'}\n    code={code}\n    description={\n      <div>\n        <CodeInline code=\"insetLeft\" type=\"prop\" /> shortens the width of the\n        divider by the provided amount and moves the{' '}\n        <CodeInline code=\"Divider\" type=\"element\" /> to the right by that\n        amount. This is useful for keeping the{' '}\n        <CodeInline code=\"Divider\" type=\"element\" /> inline with other elements.\n      </div>\n    }\n    scope={{ View, Divider, List, ListItem, Avatar }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/divider/Demos/SubheaderDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { Divider } from '../../../../../../src/index';\n\nexport const code = `class DialogPage extends React.Component {\n  constructor(props) {\n    super(props)\n  }\n  render() {\n    return (\n      <View >    \n        <Divider subheader={'Subheader'} />\n        <Divider subheader={'Title'} insetHeader={8} />\n        <Divider subheader={'Section'} insetHeader={16} marginVertical={24} />\n      </View>\n    );\n  }\n}\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Subheader'}\n    sectionHref={`${pageHref}#subheader`}\n    sectionId={'subheader'}\n    code={code}\n    scope={{ View, Divider }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/divider/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport SubheaderDemo from './SubheaderDemo';\nimport InsetLeftDemo from './InsetLeftDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n\n        <SubheaderDemo pageHref={pageHref} />\n        <InsetLeftDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/divider/MainDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { Divider } from '../../../../../src/index';\n\nexport const code = `class Dividers extends React.Component {\n  constructor(props) {\n    super(props)\n  }\n  render() {\n    return (\n      <View>\n        <Divider />\n        <Divider />\n        <Divider marginVertical={24} />\n      </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        A <CodeInline code=\"Divider\" type=\"element\" /> can be used in most\n        components to create a visible separation between sections\n      </div>\n    }\n    code={code}\n    scope={{ View, Divider }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/divider/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/divider/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { Divider } from 'material-bread';\n\nclass Dividerpage extends Component {\n    constructor(props) {\n      super(props)\n    }\n    render() {\n      return (\n        <View>\n          <Divider />\n        </View>\n      );\n    }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/divider/index.js",
    "content": "import React, { Component } from 'react';\nimport { ComponentPageLayout } from '@components';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'subheader', sub: true },\n  { name: 'insetLeft', sub: true },\n];\n\nexport default class DividerPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'divider'}\n          title={'Divider'}\n          description={`A divider is a thin line that groups content in lists and layouts.`}\n          importCode={`import { Divider } from 'material-bread';`}\n          docsLink={'https://material.io/design/components/dividers.html'}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/divider'} />\n          <Usage pageHref={'/components/divider'} />\n          <Props pageHref={'/components/divider'} />\n          <Demos pageHref={'/components/divider'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/divider/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['insetHeader', 'Subheader inset number ', 'number', ''],\n  ['insetLeft', 'Inset of Divider from left ', 'number', ''],\n  ['marginVertical', 'Adds magin on top and bottom for spacing', 'number', ''],\n  ['style', 'Styles root element', 'object', ''],\n  ['subheader', 'Displays under a divider as text ', 'string', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/drawer/Demos/ClippedDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo, CodeInline } from '@components';\nimport {\n  Drawer,\n  DrawerItem,\n  DrawerHeader,\n  DrawerSection,\n  Heading,\n  BodyText,\n  Appbar,\n} from '../../../../../../src/index';\n\nexport const code = `class DrawerPage extends React.Component {\n    constructor(props) {\n      super(props)\n      this.state = {\n        isOpen: false\n      }\n    }\n    render() {\n      const styles = {\n        container: {\n          zIndex: 1,\n          border: '1px solid rgba(0,0,0,.12)'\n        },\n        body: {\n          backgroundColor: '#eee',\n          height: 400,\n          minHeight: 400,\n          width: '100%', \n          flex: 1,\n          paddingTop: 20, \n          alignItems: 'center', \n        },\n      };\n\n      const DrawerContent = () => {\n        return (\n          <View>\n            <DrawerHeader title={'Jon Snow'} subtitle={'Knows nothing'} />\n            <DrawerSection bottomDivider>\n              <DrawerItem text={'Inbox'} icon={'mail'} active />\n              <DrawerItem text={'Outbox'} icon={'send'} />\n              <DrawerItem text={'Favorites'} icon={'favorite'} />\n            </DrawerSection>\n          </View>\n        );\n      };\n      \n      const PageContent = () => {\n        return (\n          <View style={styles.body}>\n            <Heading type={4} style={{ marginBottom: 20 }}>\n              This is a page\n            </Heading>\n            <BodyText text={'Click the menu button to open the drawer'} />\n            <BodyText text={'Click outside the drawer to close it'} />\n          </View>\n        );\n      };\n      \n      const AppbarContent = () => {\n        return (\n          <Appbar\n            barType={'normal'}\n            title={'Page Title'}\n            navigation={'menu'}\n            onNavigation={() => this.setState({ isOpen: !this.state.isOpen })}\n            actionItems={[{ name: 'search' }, { name: 'more-vert' }]}\n          />\n        );\n      };\n      \n      return (\n        <View style={styles.container}>\n            <Drawer\n                open={this.state.isOpen}\n                pageHeight={500}\n                scrimStyles={{position: 'absolute'}}\n                drawerContent={<DrawerContent />}\n                onClose={() => this.setState({ isOpen: false })}\n                appbar={<AppbarContent  />}\n            >\n                <PageContent />\n            </Drawer>\n        </View>\n      );\n    }\n  }\n`;\n\nconst ClippedDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Clipped'}\n    sectionHref={`${pageHref}#clipped`}\n    sectionId={'clipped'}\n    description={\n      <div>\n        Simply move the <CodeInline code=\"Appbar\" type=\"element\" /> component\n        into the <CodeInline code=\"appbar\" type=\"prop\" /> prop and it will\n        dispaly above the <CodeInline code=\"Drawer\" type=\"element\" /> and{' '}\n        <CodeInline code=\"Scrim\" type=\"element\" />\n      </div>\n    }\n    code={code}\n    scope={{\n      View,\n      Drawer,\n      DrawerItem,\n      DrawerHeader,\n      DrawerSection,\n      Heading,\n      BodyText,\n      Appbar,\n    }}\n  />\n);\nexport default ClippedDemo;\n"
  },
  {
    "path": "docs/src/content/components/drawer/Demos/PermanentDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo, CodeInline } from '@components';\nimport {\n  Drawer,\n  DrawerItem,\n  DrawerHeader,\n  DrawerSection,\n  Heading,\n  BodyText,\n  Appbar,\n} from '../../../../../../src/index';\n\nexport const code = `class DrawerPage extends React.Component {\n    constructor(props) {\n      super(props)\n      this.state = {\n        isOpen: true\n      }\n    }\n    render() {\n      const DrawerContent = () => {\n        return (\n          <View>\n            <DrawerHeader title={'Jon Snow'} subtitle={'Knows nothing'} />\n            <DrawerSection bottomDivider>\n              <DrawerItem text={'Inbox'} icon={'mail'} active />\n              <DrawerItem text={'Outbox'} icon={'send'} />\n              <DrawerItem text={'Favorites'} icon={'favorite'} />\n            </DrawerSection>\n          </View>\n        );\n      };\n      \n      const PageContent = () => {\n        return (\n          <View style={styles.body}>\n            <Heading type={4} style={{ marginBottom: 20 }}>\n              This is a page\n            </Heading>\n            <BodyText text={'Click the menu button to open the drawer'} />\n            <BodyText text={'Click outside the drawer to close it'} />\n          </View>\n        );\n      };\n      \n      const AppbarContent = () => {\n        return (\n          <Appbar\n            barType={'normal'}\n            title={'Page Title'}\n            navigation={'menu'}\n            onNavigation={() => this.setState({ isOpen: !this.state.isOpen })}\n            actionItems={[{ name: 'search' }, { name: 'more-vert' }]}\n          />\n        );\n      };\n      \n      const styles = {\n        container: {\n          zIndex: 1,\n          border: '1px solid rgba(0,0,0,.12)'\n        },\n        body: {\n          backgroundColor: '#eee',\n          height: 400,\n          minHeight: 400,\n          width: '100%', \n          flex: 1,\n          alignItems: 'center',\n          paddingTop: 20\n        },\n      };\n      return (\n        <View style={[styles.container, { width: 'auto' }]}>\n            <Drawer\n                open={this.state.isOpen}\n                pageHeight={500}\n                scrimStyles={{position: 'absolute'}}\n                drawerContent={<DrawerContent />}\n                onClose={() => store.set({ isOpen: false })}\n                type={'permanent'}\n            >\n                <View style={{width: '100%'}}>\n                    <AppbarContent />\n                    <PageContent />\n                </View>\n            </Drawer>\n        </View>\n      );\n    }\n  }\n`;\n\nconst PermanentDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Permanent '}\n    sectionHref={`${pageHref}#permanent`}\n    sectionId={'permanent'}\n    description={\n      <div>\n        The <CodeInline code=\"permanent\" type=\"value\" /> type is similiar to the{' '}\n        <CodeInline code=\"push\" type=\"value\" /> type because there are no\n        overlays, but instead of pushing the content to the right, it changes\n        the width of the content to accommodate the drawer width. Toggling the\n        drawer now changes the width of the page rather than the position left.\n        As with the other types you can clip the drawer under the{' '}\n        <CodeInline code=\"Appbar\" type=\"element\" />.\n      </div>\n    }\n    code={code}\n    scope={{\n      View,\n      Drawer,\n      DrawerItem,\n      DrawerHeader,\n      DrawerSection,\n      Heading,\n      BodyText,\n      Appbar,\n    }}\n  />\n);\nexport default PermanentDemo;\n"
  },
  {
    "path": "docs/src/content/components/drawer/Demos/PushDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo, CodeInline } from '@components';\nimport {\n  Drawer,\n  DrawerItem,\n  DrawerHeader,\n  DrawerSection,\n  Heading,\n  BodyText,\n  Appbar,\n} from '../../../../../../src/index';\n\nexport const code = `class DrawerPage extends React.Component {\n    constructor(props) {\n      super(props)\n      this.state = {\n        isOpen: false\n      }\n    }\n    render() {\n      const DrawerContent = () => {\n        return (\n          <View>\n            <DrawerHeader title={'Jon Snow'} subtitle={'Knows nothing'} />\n            <DrawerSection bottomDivider>\n              <DrawerItem text={'Inbox'} icon={'mail'} active />\n              <DrawerItem text={'Outbox'} icon={'send'} />\n              <DrawerItem text={'Favorites'} icon={'favorite'} />\n            </DrawerSection>\n          </View>\n        );\n      };\n      \n      const PageContent = () => {\n        return (\n          <View style={styles.body}>\n            <Heading type={4} style={{ marginBottom: 20 }}>\n              This is a page\n            </Heading>\n            <BodyText text={'Click the menu button to open the drawer'} />\n            <BodyText text={'Click outside the drawer to close it'} />\n          </View>\n        );\n      };\n      \n      const AppbarContent = () => {\n        return (\n          <Appbar\n            barType={'normal'}\n            title={'Page Title'}\n            navigation={'menu'}\n            onNavigation={() => this.setState({ isOpen: !this.state.isOpen })}\n            actionItems={[{ name: 'search' }, { name: 'more-vert' }]}\n          />\n        );\n      };\n      \n      const styles = {\n        container: {\n          zIndex: 1,\n          border: '1px solid rgba(0,0,0,.12)'\n        },\n        body: {\n          backgroundColor: '#eee',\n          height: 400,\n          minHeight: 400,\n          width: '100%', \n          flex: 1,\n          paddingTop: 20, \n          alignItems: 'center', \n        },\n      };\n      return (\n        <View style={styles.container}>\n            <Drawer\n                open={this.state.isOpen}\n                pageHeight={500}\n                scrimStyles={{position: 'absolute'}}\n                drawerContent={<DrawerContent />}\n                onClose={() => this.setState({ isOpen: false })}\n                appbar={<AppbarContent  />}\n                type={'push'}\n            >\n                <PageContent />\n            </Drawer>\n        </View>\n      );\n    }\n  }\n`;\n\nconst PushDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Push'}\n    sectionHref={`${pageHref}#push`}\n    sectionId={'push'}\n    description={\n      <div>\n        The <CodeInline code=\"push\" type=\"value\" /> type pushes the content to\n        the right rather than overlaying on top of it like{' '}\n        <CodeInline code=\"modal\" type=\"value\" /> type. This example shows under\n        the <CodeInline code=\"Appbar\" type=\"element\" />, but you can easily move\n        it as a child instead of in the <CodeInline code=\"appbar\" type=\"prop\" />{' '}\n        and it will push the whole page.\n      </div>\n    }\n    code={code}\n    scope={{\n      View,\n      Drawer,\n      DrawerItem,\n      DrawerHeader,\n      DrawerSection,\n      Heading,\n      BodyText,\n      Appbar,\n    }}\n  />\n);\nexport default PushDemo;\n"
  },
  {
    "path": "docs/src/content/components/drawer/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport ClippedDemo from './ClippedDemo';\nimport PushDemo from './PushDemo';\nimport PermanentDemo from './PermanentDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n        <ClippedDemo pageHref={pageHref} />\n        <PushDemo pageHref={pageHref} />\n        <PermanentDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/drawer/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport {\n  Drawer,\n  DrawerItem,\n  DrawerHeader,\n  DrawerSection,\n  Heading,\n  BodyText,\n  Appbar,\n} from '../../../../../src/index';\n\nexport const code = `class DrawerPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      isOpen: false\n    }\n  }\n  render() {\n    const DrawerContent = () => {\n      return (\n        <View>\n          <DrawerHeader title={'Jon Snow'} subtitle={'Knows nothing'} />\n          <DrawerSection bottomDivider>\n            <DrawerItem text={'Inbox'} icon={'mail'} active />\n            <DrawerItem text={'Outbox'} icon={'send'} />\n            <DrawerItem text={'Favorites'} icon={'favorite'} />\n          </DrawerSection>\n        </View>\n      );\n    };\n    \n    const PageContent = () => {\n      return (\n        <View style={{ marginTop: 20, alignItems: 'center', width: '100%', flex: 1 }}>\n          <Heading type={4} style={{ marginBottom: 20 }}>\n            This is a page\n          </Heading>\n          <BodyText text={'Click the menu button to open the drawer'} />\n          <BodyText text={'Click outside the drawer to close it'} />\n        </View>\n      );\n    };\n    \n    const AppbarContent = isOpen => {\n      return (\n        <Appbar\n          barType={'normal'}\n          title={'Page Title'}\n          navigation={'menu'}\n          onNavigation={() => this.setState({ isOpen: !this.state.isOpen })}\n          actionItems={[{ name: 'search' }, { name: 'more-vert' }]}\n        />\n      );\n    };\n    \n    const styles = {\n      container: {\n        zIndex: 1,\n        border: '1px solid rgba(0,0,0,.12)'\n      },\n      body: {\n        backgroundColor: '#eee',\n        height: 500,\n        flex: 1\n      },\n    };\n    return (\n      <View style={styles.container}>\n        <Drawer\n          open={this.state.isOpen}\n          pageHeight={500}\n          scrimStyles={{position: 'absolute'}}\n          drawerContent={<DrawerContent />}\n          onClose={() => this.setState({ isOpen: false })}\n          animationTime={250}>\n          <View style={styles.body}>\n            <AppbarContent />\n            <PageContent />\n          </View>\n        </Drawer>\n      </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        There three types of drawers: <CodeInline code=\"modal\" type=\"value\" />,{' '}\n        <CodeInline code=\"push\" type=\"value\" />, and{' '}\n        <CodeInline code=\"permanent\" type=\"value\" />. All types can show at\n        appbar height or be clipped underneath. Below is an example of a{' '}\n        <CodeInline code=\"modal\" type=\"value\" />\n        drawer that is not clipped.\n      </div>\n    }\n    code={code}\n    scope={{\n      View,\n      Drawer,\n      DrawerItem,\n      DrawerHeader,\n      DrawerSection,\n      Image,\n      Heading,\n      BodyText,\n      Appbar,\n    }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/drawer/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/drawer/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage, CodeInline } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { Drawer, DrawerItem, DrawerHeader, DrawerSection, Appbar, Heading, BodyText } from 'material-bread';\n\nconst DrawerContent = () => {\n  return (\n    <View>\n      <DrawerHeader title={'Jon Snow'} subtitle={'Knows nothing'} />\n      <DrawerSection bottomDivider>\n        <DrawerItem text={'Inbox'} icon={'mail'} active />\n        <DrawerItem text={'Outbox'} icon={'send'} />\n        <DrawerItem text={'Favorites'} icon={'favorite'} />\n      </DrawerSection>\n    </View>\n  );\n};\n\nconst PageContent = () => {\n  return (\n    <View style={{ marginTop: 20, alignItems: 'center', width: '100%', flex: 1 }}>\n      <Heading type={4} style={{ marginBottom: 20 }}>\n        This is a page\n      </Heading>\n      <BodyText text={'Click the menu button to open the drawer'} />\n      <BodyText text={'Click outside the drawer to close it'} />\n    </View>\n  );\n};\n\nconst AppbarContent = isOpen => {\n  return (\n    <Appbar\n      barType={'normal'}\n      title={'Page Title'}\n      navigation={'menu'}\n      onNavigation={() => this.setState({ isOpen: !this.state.isOpen })}\n      actionItems={[{ name: 'search' }, { name: 'more-vert' }]}\n    />\n  );\n};\n\nconst styles = {\n  container: {\n    width: '100%',\n  },\n  body: {\n    backgroundColor: '#eee',\n  },\n};\n\nclass App extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      isOpen: false\n    }\n  }\n  render() {\n    return (\n      <View style={styles.container}>\n        <Drawer\n          open={this.state.isOpen}\n          drawerContent={<DrawerContent />}\n          onClose={() => this.setState({ isOpen: false })}\n          animationTime={250}>\n          <View style={styles.body}>\n            <AppbarContent />\n            <PageContent />\n          </View>\n        </Drawer>\n      </View>\n    );\n  }\n}`;\n\nconst Usage = pageHref => (\n  <ComponentUsage\n    pageHref={pageHref}\n    description={\n      <div>\n        The <CodeInline code=\"Drawer\" type=\"element\" /> component needs to wrap\n        each page it will be displayed on. Usually this can be defined as a base\n        layout in your root <CodeInline code=\"App.js\" type=\"file\" /> file. You\n        must provide an <CodeInline code=\"onClose\" type=\"prop\" /> function if\n        you want to close the <CodeInline code=\"Drawer\" type=\"element\" /> by\n        clicking outside.\n      </div>\n    }\n    code={code}\n  />\n);\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/drawer/index.js",
    "content": "import React, { Component } from 'react';\nimport { ComponentPageLayout } from '@components';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'clipped', sub: true },\n  { name: 'push', sub: true },\n  { name: 'permanent', sub: true },\n];\n\nexport default class DrawerPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'drawer'}\n          title={'Drawer'}\n          description={`Navigation drawers provide access to destinations in your app.`}\n          importCode={`import { Drawer } from 'material-bread';`}\n          docsLink={\n            'https://material.io/design/components/navigation-drawer.html'\n          }\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/drawer'} />\n          <Usage pageHref={'/components/drawer'} />\n          <Props pageHref={'/components/drawer'} />\n          <Demos pageHref={'/components/drawer'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/drawer/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  [\n    'animationTime',\n    'How long the drawer animation should be, in ms',\n    'number',\n    '200',\n  ],\n  [\n    'appbar',\n    'Render appbar above drawer and page content for clipping purposes',\n    'node',\n    '',\n  ],\n  ['contentContainerStyle', 'Styles wrapper around page content', 'object', ''],\n  ['drawerContent', 'Components displayed inside the drawer', 'node', ''],\n  ['drawerStyle', 'Styles drawer', 'object', ''],\n  [\n    'fullHeight',\n    'Drawer takes up full height of the page so conent is not scrolled',\n    'bool',\n    'false',\n  ],\n  ['onClose', 'Callback when clicking outside of drawer', 'func', ''],\n  [\n    'pageHeight',\n    'Override calculated pageHeight, useful for demos as shown',\n    'number',\n    'ScreenHeight',\n  ],\n\n  [\n    'pageWidth',\n    'Override calculated pageWidth, useful pages that do not take up full space',\n    'number',\n    'ScreenWidth',\n  ],\n  ['position', 'Position of drawer', 'string', 'absolute'],\n  ['open', 'Whether drawer is shown or hidden', 'bool', 'false'],\n  ['style', 'Styles container element', 'object', ''],\n  ['scrim', 'Whether scrim is shown', 'bool', 'true'],\n  ['scrimColor', 'Color of scrim', 'object', 'black'],\n  ['scrimOpacity', 'The ending opacity for the scim', 'number', '.4'],\n  ['scrimStyles', 'Styles for scrim', 'object', ''],\n  [\n    'type',\n    'Determines the type of drawer from modal, push, and permanenent',\n    'string',\n    'modal',\n  ],\n\n  [\n    'width',\n    'Specific drawer width in pixels, will override widthPercentage',\n    'number',\n    '240',\n  ],\n  [\n    'widthPercentage',\n    'Percentage of pageWidth the drawer should take up',\n    '0-1',\n    '.40',\n  ],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/drawer-bottom/MainDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport {\n  DrawerBottom,\n  Button,\n  DrawerHeader,\n  DrawerSection,\n  DrawerItem,\n} from '../../../../../src/';\n\nexport const code = `class MainDemo extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n        visible: false,\n    }\n  }\n  render() {\n    return (\n      <View style={{ flex: 1}}>\n        <Button\n          text=\"Open Drawer\"\n          onPress={() => {\n            this.setState({ visible: true });\n          }}\n        />\n        <DrawerBottom\n          visible={this.state.visible}\n          onBackdropPress={() => this.setState({ visible: false })}\n          onSwipeDown={() => this.setState({ visible: false })}>\n          <View>\n            <DrawerHeader title={'Jon Snow'} subtitle={'Knows nothing'} />\n            <DrawerSection>\n              <DrawerItem text={'Inbox'} icon={'mail'} active />\n              <DrawerItem text={'Outbox'} icon={'send'} />\n              <DrawerItem text={'Favorites'} icon={'favorite'} />\n            </DrawerSection>\n          </View>\n        </DrawerBottom>\n      </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        <CodeInline code=\"DrawerBottom\" type=\"element\" /> is a type of{' '}\n        <CodeInline code=\"SheetBottom\" type=\"element\" />, specifically the{' '}\n        <CodeInline code=\"modal\" type=\"value\" /> type. All the same props and\n        usages apply.\n      </div>\n    }\n    code={code}\n    scope={{\n      View,\n      DrawerBottom,\n      Button,\n      DrawerHeader,\n      DrawerSection,\n      DrawerItem,\n    }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/drawer-bottom/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/drawer-bottom/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { DrawerBottom, Button,  DrawerHeader, DrawerSection, DrawerItem, } from 'material-bread';\n\nclass SelectPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n        visible: false\n    }\n  }\n  render() {\n    return (\n      <View style={{ flex: 1}}>\n        <Button\n          text=\"Open Sheet\"\n          onPress={() => {\n            this.setState({ visible: true });\n          }}\n        />\n        <DrawerBottom\n          visible={this.state.visible}\n          onBackdropPress={() => this.setState({ visible: false })}\n          onSwipeDown={() => this.setState({ visible: false })}>\n          <View>\n            <DrawerHeader title={'Jon Snow'} subtitle={'Knows nothing'} />\n            <DrawerSection bottomDivider>\n              <DrawerItem text={'Inbox'} icon={'mail'} active />\n              <DrawerItem text={'Outbox'} icon={'send'} />\n              <DrawerItem text={'Favorites'} icon={'favorite'} />\n            </DrawerSection>\n          </View>\n        </DrawerBottom>\n      </View>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/drawer-bottom/index.js",
    "content": "import React, { Component } from 'react';\nimport { ComponentPageLayout } from '@components';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\n\nconst sections = [{ name: 'Component' }, { name: 'Usage' }, { name: 'Props' }];\n\nexport default class DropdownPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'drawer-bottom'}\n          title={'DrawerBottom'}\n          description={`Bottom navigation drawers are modal drawers that are anchored to the bottom of the screen instead of the left or right edge.\n          `}\n          importCode={`import { DrawerBottom } from 'material-bread';`}\n          docsLink={\n            'https://material.io/design/components/navigation-drawer.html#bottom-drawer'\n          }\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/drawer-bottom'} />\n          <Usage pageHref={'/components/drawer-bottom'} />\n          <Props pageHref={'/components/drawer-bottom'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/drawer-bottom/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  [\n    'cardVerticalPadding',\n    'Padding vertical on the sheet, this used in calculating the position',\n    'number',\n    '20',\n  ],\n\n  ['duration', 'How long the hide animation takes', 'number', '200ms'],\n  [\n    'onBackdropPress',\n    'Callback when mask is pressed, usually to close sheet',\n    'func',\n    '',\n  ],\n  [\n    'onSwipeDown',\n    'Callback on swiping down, usually to close sheet',\n    'func',\n    '',\n  ],\n  ['onSwipeUp', 'Callback on swiping up', 'func', ''],\n  [\n    'pageHeight',\n    \"Manually control the height of the page, useful for demos or sheets that shouldn't take up the whole page\",\n    'number',\n    'ScreenHeight',\n  ],\n  ['style', 'Styles sheet element', 'object', ''],\n\n  ['visible', 'Toggles Sheet animation', 'bool', ''],\n  ['wrapperStyles', 'Styles wrapper around the whole page', 'object', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/drawer-header/Demos/AvatarDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport {\n  Drawer,\n  DrawerItem,\n  DrawerHeader,\n  DrawerSection,\n  Heading,\n  BodyText,\n  Appbar,\n  Avatar,\n} from '../../../../../../src/index';\n\nexport const code = `class DrawerPage extends React.Component {\n    constructor(props) {\n      super(props)\n      this.state = {\n        isOpen: true\n      }\n    }\n    render() {\n      const DrawerContent = () => {\n        return (\n          <View>\n            <DrawerHeader\n              title={'Jon Snow'}\n              subtitle={'Knows nothing'}\n              avatar={\n                <Avatar\n                  type=\"image\"\n                  image={\n                    <Image\n                      source={{\n                        uri:\n                          'https://www.hbo.com/content/dam/hbodata/series/game-of-thrones/character/s5/john-snow-1920.jpg/_jcr_content/renditions/cq5dam.web.1200.675.jpeg',\n                      }}\n                    />\n                  }\n                  size={40}\n                />\n              }\n            />\n            <DrawerSection bottomDivider>\n              <DrawerItem text={'Inbox'} icon={'mail'} active />\n              <DrawerItem text={'Outbox'} icon={'send'} />\n              <DrawerItem text={'Favorites'} icon={'favorite'} />\n            </DrawerSection>\n          </View>\n        );\n      };\n      \n      const PageContent = () => {\n        return (\n          <View style={styles.body}>\n            <Heading type={4} style={{ marginBottom: 20 }}>\n              This is a page\n            </Heading>\n            <BodyText text={'Click the menu button to open the drawer'} />\n            <BodyText text={'Click outside the drawer to close it'} />\n          </View>\n        );\n      };\n      \n      const AppbarContent = () => {\n        return (\n          <Appbar\n            barType={'normal'}\n            title={'Page Title'}\n            navigation={'menu'}\n            onNavigation={() => this.setState({ isOpen: !this.state.isOpen })}\n            actionItems={[{ name: 'search' }, { name: 'more-vert' }]}\n          />\n        );\n      };\n      \n      const styles = {\n        container: {\n          zIndex: 1,\n          border: '1px solid rgba(0,0,0,.12)'\n        },\n        body: {\n          backgroundColor: '#eee',\n          height: 300,\n          width: '100%', \n          flex: 1,\n          paddingTop: 20, \n          alignItems: 'center', \n        },\n      };\n      return (\n        <View style={styles.container}>\n            <Drawer\n                open={this.state.isOpen}\n                pageHeight={500}\n                scrimStyles={{position: 'absolute'}}\n                drawerContent={<DrawerContent />}\n                onClose={() => this.setState({ isOpen: false })}\n                appbar={<AppbarContent  />}\n            >\n                <PageContent />\n            </Drawer>\n        </View>\n      );\n    }\n  }\n`;\n\nconst PushDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Avatar'}\n    sectionHref={`${pageHref}#avatar`}\n    sectionId={'avatar'}\n    code={code}\n    scope={{\n      View,\n      Drawer,\n      DrawerItem,\n      DrawerHeader,\n      DrawerSection,\n      Heading,\n      BodyText,\n      Appbar,\n      Image,\n      Avatar,\n    }}\n  />\n);\nexport default PushDemo;\n"
  },
  {
    "path": "docs/src/content/components/drawer-header/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport AvatarDemo from './AvatarDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n        <AvatarDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/drawer-header/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport {\n  Drawer,\n  DrawerItem,\n  DrawerHeader,\n  DrawerSection,\n  Heading,\n  BodyText,\n  Appbar,\n} from '../../../../../src/index';\n\nexport const code = `class DrawerPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      isOpen: true\n    }\n  }\n  render() {\n    const DrawerContent = () => {\n      return (\n        <View>\n          <DrawerHeader title={'Jon Snow'} subtitle={'knowsnothing1234@thewall.com'} />\n          <DrawerSection bottomDivider>\n            <DrawerItem text={'Inbox'} icon={'mail'} active />\n            <DrawerItem text={'Outbox'} icon={'send'} />\n            <DrawerItem text={'Favorites'} icon={'favorite'} />\n          </DrawerSection>\n        </View>\n      );\n    };\n    \n    const PageContent = () => {\n      return (\n        <View style={{ marginTop: 20, alignItems: 'center', width: '100%', flex: 1 }}>\n          <Heading type={4} style={{ marginBottom: 20 }}>\n            This is a page\n          </Heading>\n          <BodyText text={'Click the menu button to open the drawer'} />\n          <BodyText text={'Click outside the drawer to close it'} />\n        </View>\n      );\n    };\n    \n    const AppbarContent = isOpen => {\n      return (\n        <Appbar\n          barType={'normal'}\n          title={'Page Title'}\n          navigation={'menu'}\n          onNavigation={() => this.setState({ isOpen: !this.state.isOpen })}\n          actionItems={[{ name: 'search' }, { name: 'more-vert' }]}\n        />\n      );\n    };\n    \n    const styles = {\n      container: {\n        zIndex: 1,\n        border: '1px solid rgba(0,0,0,.12)'\n      },\n      body: {\n        backgroundColor: '#eee',\n        height: 500,\n        flex: 1\n      },\n    };\n    return (\n      <View style={styles.container}>\n        <Drawer\n          open={this.state.isOpen}\n          pageHeight={500}\n          scrimStyles={{position: 'absolute'}}\n          drawerContent={<DrawerContent />}\n          onClose={() => this.setState({ isOpen: false })}\n          animationTime={250}>\n          <View style={styles.body}>\n            <AppbarContent />\n            <PageContent />\n          </View>\n        </Drawer>\n      </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        <CodeInline code=\"DrawerHeader\" type=\"element\" /> can have a{' '}\n        <CodeInline code=\"title\" type=\"prop\" />,{' '}\n        <CodeInline code=\"subtitle\" type=\"value\" />, or an{' '}\n        <CodeInline code=\"avatar\" type=\"value\" />. You can create a more custom\n        header by adding children components.\n      </div>\n    }\n    code={code}\n    scope={{\n      View,\n      Drawer,\n      DrawerItem,\n      DrawerHeader,\n      DrawerSection,\n      Image,\n      Heading,\n      BodyText,\n      Appbar,\n    }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/drawer-header/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/drawer-header/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { Drawer, DrawerItem, DrawerHeader, DrawerSection, Appbar, Heading, BodyText } from 'material-bread';\n\nconst DrawerContent = () => {\n  return (\n    <View>\n      <DrawerHeader title={'Jon Snow'} subtitle={'Knows nothing'} />\n      <DrawerSection bottomDivider>\n        <DrawerItem text={'Inbox'} icon={'mail'} active />\n        <DrawerItem text={'Outbox'} icon={'send'} />\n        <DrawerItem text={'Favorites'} icon={'favorite'} />\n      </DrawerSection>\n    </View>\n  );\n};\n\nconst PageContent = () => {\n  return (\n    <View style={{ marginTop: 20, alignItems: 'center', width: '100%', flex: 1 }}>\n      <Heading type={4} style={{ marginBottom: 20 }}>\n        This is a page\n      </Heading>\n      <BodyText text={'Click the menu button to open the drawer'} />\n      <BodyText text={'Click outside the drawer to close it'} />\n    </View>\n  );\n};\n\nconst AppbarContent = isOpen => {\n  return (\n    <Appbar\n      barType={'normal'}\n      title={'Page Title'}\n      navigation={'menu'}\n      onNavigation={() => this.setState({ isOpen: !this.state.isOpen })}\n      actionItems={[{ name: 'search' }, { name: 'more-vert' }]}\n    />\n  );\n};\n\nconst styles = {\n  container: {\n    width: '100%',\n  },\n  body: {\n    backgroundColor: '#eee',\n  },\n};\n\nclass App extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      isOpen: false\n    }\n  }\n  render() {\n    return (\n      <View style={styles.container}>\n        <Drawer\n          open={this.state.isOpen}\n          drawerContent={<DrawerContent />}\n          onClose={() => this.setState({ isOpen: false })}\n          animationTime={250}>\n          <View style={styles.body}>\n            <AppbarContent />\n            <PageContent />\n          </View>\n        </Drawer>\n      </View>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/drawer-header/index.js",
    "content": "import React, { Component } from 'react';\nimport { ComponentPageLayout } from '@components';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'avatar', sub: true },\n];\n\nexport default class DrawerPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'drawer-header'}\n          title={'Drawer Header'}\n          description={`Navigation drawers provide access to destinations in your app.`}\n          importCode={`import { DrawerHeader } from 'material-bread';`}\n          docsLink={\n            'https://material.io/design/components/navigation-drawer.html'\n          }\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/drawer'} />\n          <Usage pageHref={'/components/drawer'} />\n          <Props pageHref={'/components/drawer'} />\n          <Demos pageHref={'/components/drawer'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/drawer-header/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['avatar', 'Shows above the title', 'node', ''],\n  ['style', 'Styles container element', 'object', ''],\n  ['subtitle', 'DrawerHeader subtitle shows below title', 'string', ''],\n  ['title', 'DrawerHeader title shows above subtitle', 'string', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/drawer-item/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport {\n  Drawer,\n  DrawerItem,\n  DrawerHeader,\n  DrawerSection,\n  Heading,\n  BodyText,\n  Appbar,\n} from '../../../../../src/index';\n\nexport const code = `class DrawerPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      isOpen: true\n    }\n  }\n  render() {\n    const DrawerContent = () => {\n      return (\n        <View>\n          <DrawerItem text={'Inbox'} icon={'mail'} active />\n          <DrawerItem text={'Outbox'} icon={'send'} />\n          <DrawerItem text={'Favorites'} icon={'favorite'} />\n          <DrawerItem text={'Important'} icon={'bookmark'} />\n          <DrawerItem text={'Spam'} icon={'error'} />\n          <DrawerItem text={'Trash'} icon={'delete'} />\n        </View>\n      );\n    };\n    \n    const PageContent = () => {\n      return (\n        <View style={{ marginTop: 20, alignItems: 'center', width: '100%', flex: 1 }}>\n          <Heading type={4} style={{ marginBottom: 20 }}>\n            This is a page\n          </Heading>\n          <BodyText text={'Click the menu button to open the drawer'} />\n          <BodyText text={'Click outside the drawer to close it'} />\n        </View>\n      );\n    };\n    \n    const AppbarContent = isOpen => {\n      return (\n        <Appbar\n          barType={'normal'}\n          title={'Page Title'}\n          navigation={'menu'}\n          onNavigation={() => this.setState({ isOpen: !this.state.isOpen })}\n          actionItems={[{ name: 'search' }, { name: 'more-vert' }]}\n        />\n      );\n    };\n    \n    const styles = {\n      container: {\n        zIndex: 1,\n        border: '1px solid rgba(0,0,0,.12)'\n      },\n      body: {\n        backgroundColor: '#eee',\n        height: 500,\n        flex: 1\n      },\n    };\n    return (\n      <View style={styles.container}>\n        <Drawer\n          open={this.state.isOpen}\n          pageHeight={500}\n          scrimStyles={{position: 'absolute'}}\n          drawerContent={<DrawerContent />}\n          onClose={() => this.setState({ isOpen: false })}\n          animationTime={250}>\n          <View style={styles.body}>\n            <AppbarContent />\n            <PageContent />\n          </View>\n        </Drawer>\n      </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        <CodeInline code=\"DrawerItem\" type=\"element\" /> can have an{' '}\n        <CodeInline code=\"icon\" type=\"prop\" />,{' '}\n        <CodeInline code=\"text\" type=\"value\" />, or be in an{' '}\n        <CodeInline code=\"active\" type=\"value\" /> state. You can create a more\n        custom section by adding children components.\n      </div>\n    }\n    code={code}\n    scope={{\n      View,\n      Drawer,\n      DrawerItem,\n      DrawerHeader,\n      DrawerSection,\n      Image,\n      Heading,\n      BodyText,\n      Appbar,\n    }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/drawer-item/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/drawer-item/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { Drawer, DrawerItem, DrawerHeader, DrawerSection, Appbar, Heading, BodyText } from 'material-bread';\n\nconst DrawerContent = () => {\n  return (\n    <View>\n      <DrawerHeader title={'Jon Snow'} subtitle={'Knows nothing'} />\n      <DrawerSection bottomDivider>\n        <DrawerItem text={'Inbox'} icon={'mail'} active />\n        <DrawerItem text={'Outbox'} icon={'send'} />\n        <DrawerItem text={'Favorites'} icon={'favorite'} />\n      </DrawerSection>\n    </View>\n  );\n};\n\nconst PageContent = () => {\n  return (\n    <View style={{ marginTop: 20, alignItems: 'center', width: '100%', flex: 1 }}>\n      <Heading type={4} style={{ marginBottom: 20 }}>\n        This is a page\n      </Heading>\n      <BodyText text={'Click the menu button to open the drawer'} />\n      <BodyText text={'Click outside the drawer to close it'} />\n    </View>\n  );\n};\n\nconst AppbarContent = isOpen => {\n  return (\n    <Appbar\n      barType={'normal'}\n      title={'Page Title'}\n      navigation={'menu'}\n      onNavigation={() => this.setState({ isOpen: !this.state.isOpen })}\n      actionItems={[{ name: 'search' }, { name: 'more-vert' }]}\n    />\n  );\n};\n\nconst styles = {\n  container: {\n    width: '100%',\n  },\n  body: {\n    backgroundColor: '#eee',\n  },\n};\n\nclass App extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      isOpen: false\n    }\n  }\n  render() {\n    return (\n      <View style={styles.container}>\n        <Drawer\n          open={this.state.isOpen}\n          drawerContent={<DrawerContent />}\n          onClose={() => this.setState({ isOpen: false })}\n          animationTime={250}>\n          <View style={styles.body}>\n            <AppbarContent />\n            <PageContent />\n          </View>\n        </Drawer>\n      </View>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/drawer-item/index.js",
    "content": "import React, { Component } from 'react';\nimport { ComponentPageLayout } from '@components';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n];\n\nexport default class DrawerPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'drawer-item'}\n          title={'Drawer Item'}\n          description={`Navigation drawers provide access to destinations in your app.`}\n          importCode={`import { DrawerItem } from 'material-bread';`}\n          docsLink={\n            'https://material.io/design/components/navigation-drawer.html'\n          }\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/drawer-item'} />\n          <Usage pageHref={'/components/drawer-item'} />\n          <Props pageHref={'/components/drawer-item'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/drawer-item/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['active', 'Toggles active state for drawer item', 'bool', ''],\n  ['onPress', 'Callback when item is pressed', 'func', ''],\n  ['icon', 'Icon name for icon shown on left', 'string', ''],\n  [\n    'iconComponent',\n    'One of the Icon components from react-native-vector-icons',\n    'function',\n    '',\n  ],\n  ['style', 'Styles container element', 'object', ''],\n  ['text', 'Text shown for item', 'string', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/drawer-section/Demos/LabelDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport {\n  Drawer,\n  DrawerItem,\n  DrawerHeader,\n  DrawerSection,\n  Heading,\n  BodyText,\n  Appbar,\n  Avatar,\n} from '../../../../../../src/index';\n\nexport const code = `class DrawerPage extends React.Component {\n    constructor(props) {\n      super(props)\n      this.state = {\n        isOpen: true\n      }\n    }\n    render() {\n      const DrawerContent = () => {\n        return (\n          <React.Fragment>\n            <DrawerHeader\n              title={'Jon Snow'}\n              subtitle={'Knows nothing'}\n              avatar={\n                <Avatar\n                  type=\"image\"\n                  image={\n                    <Image\n                      source={{\n                        uri:\n                          'https://www.hbo.com/content/dam/hbodata/series/game-of-thrones/character/s5/john-snow-1920.jpg/_jcr_content/renditions/cq5dam.web.1200.675.jpeg',\n                      }}\n                    />\n                  }\n                  size={40}\n                />\n              }\n            />\n            <DrawerSection bottomDivider label={'Main'}>\n              <DrawerItem text={'Inbox'} icon={'mail'} active />\n              <DrawerItem text={'Outbox'} icon={'send'} />\n              <DrawerItem text={'Favorites'} icon={'favorite'} />\n            </DrawerSection>\n            <DrawerSection bottomDivider label={'Secondary'}>\n              <DrawerItem text={'Important'} icon={'mail'} />\n              <DrawerItem text={'Spam'} icon={'send'} />\n              <DrawerItem text={'Trash'} icon={'favorite'} />\n            </DrawerSection>\n          </React.Fragment>\n        );\n      };\n      \n      const PageContent = () => {\n        return (\n          <View style={styles.body}>\n            <Heading type={4} style={{ marginBottom: 20 }}>\n              This is a page\n            </Heading>\n            <BodyText text={'Click the menu button to open the drawer'} />\n            <BodyText text={'Click outside the drawer to close it'} />\n          </View>\n        );\n      };\n      \n      const AppbarContent = () => {\n        return (\n          <Appbar\n            barType={'normal'}\n            title={'Page Title'}\n            navigation={'menu'}\n            onNavigation={() => this.setState({ isOpen: !this.state.isOpen })}\n            actionItems={[{ name: 'search' }, { name: 'more-vert' }]}\n          />\n        );\n      };\n      \n      const styles = {\n        container: {\n          zIndex: 1,\n          border: '1px solid rgba(0,0,0,.12)'\n        },\n        body: {\n          backgroundColor: '#eee',\n          height: 300,\n          width: '100%', \n          flex: 1,\n          paddingTop: 20, \n          alignItems: 'center', \n          overflow: 'scroll'\n        },\n      };\n      return (\n        <View style={styles.container}>\n            <Drawer\n                open={this.state.isOpen}\n                pageHeight={300}\n                scrimStyles={{position: 'absolute'}}\n                drawerContent={<DrawerContent />}\n                onClose={() => this.setState({ isOpen: false })}\n                appbar={<AppbarContent  />}\n                drawerStyle={{overflowY: 'scroll'}}\n            >\n                <PageContent />\n            </Drawer>\n        </View>\n      );\n    }\n  }\n`;\n\nconst PushDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Label'}\n    sectionHref={`${pageHref}#label`}\n    sectionId={'label'}\n    code={code}\n    scope={{\n      View,\n      Drawer,\n      DrawerItem,\n      DrawerHeader,\n      DrawerSection,\n      Heading,\n      BodyText,\n      Appbar,\n      Image,\n      Avatar,\n    }}\n  />\n);\nexport default PushDemo;\n"
  },
  {
    "path": "docs/src/content/components/drawer-section/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport LabelDemo from './LabelDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n        <LabelDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/drawer-section/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport {\n  Drawer,\n  DrawerItem,\n  DrawerHeader,\n  DrawerSection,\n  Heading,\n  BodyText,\n  Appbar,\n} from '../../../../../src/index';\n\nexport const code = `class DrawerPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      isOpen: true\n    }\n  }\n  render() {\n    const DrawerContent = () => {\n      return (\n        <View>\n          <DrawerSection bottomDivider>\n            <DrawerItem text={'Inbox'} icon={'mail'} active />\n            <DrawerItem text={'Outbox'} icon={'send'} />\n            <DrawerItem text={'Favorites'} icon={'favorite'} />\n          </DrawerSection>\n          <DrawerSection bottomDivider>\n            <DrawerItem text={'Important'} icon={'mail'} />\n            <DrawerItem text={'Spam'} icon={'send'} />\n            <DrawerItem text={'Trash'} icon={'favorite'} />\n          </DrawerSection>\n        </View>\n      );\n    };\n    \n    const PageContent = () => {\n      return (\n        <View style={{ marginTop: 20, alignItems: 'center', width: '100%', flex: 1 }}>\n          <Heading type={4} style={{ marginBottom: 20 }}>\n            This is a page\n          </Heading>\n          <BodyText text={'Click the menu button to open the drawer'} />\n          <BodyText text={'Click outside the drawer to close it'} />\n        </View>\n      );\n    };\n    \n    const AppbarContent = isOpen => {\n      return (\n        <Appbar\n          barType={'normal'}\n          title={'Page Title'}\n          navigation={'menu'}\n          onNavigation={() => this.setState({ isOpen: !this.state.isOpen })}\n          actionItems={[{ name: 'search' }, { name: 'more-vert' }]}\n        />\n      );\n    };\n    \n    const styles = {\n      container: {\n        zIndex: 1,\n        border: '1px solid rgba(0,0,0,.12)'\n      },\n      body: {\n        backgroundColor: '#eee',\n        height: 500,\n        flex: 1\n      },\n    };\n    return (\n      <View style={styles.container}>\n        <Drawer\n          open={this.state.isOpen}\n          pageHeight={500}\n          scrimStyles={{position: 'absolute'}}\n          drawerContent={<DrawerContent />}\n          onClose={() => this.setState({ isOpen: false })}\n          animationTime={250}>\n          <View style={styles.body}>\n            <AppbarContent />\n            <PageContent />\n          </View>\n        </Drawer>\n      </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        <CodeInline code=\"DrawerSection\" type=\"element\" /> can have a{' '}\n        <CodeInline code=\"topDivider\" type=\"prop\" />,{' '}\n        <CodeInline code=\"bottomDivider\" type=\"value\" />, or a{' '}\n        <CodeInline code=\"label\" type=\"value\" />. You can create a more custom\n        section by adding children components.\n      </div>\n    }\n    code={code}\n    scope={{\n      View,\n      Drawer,\n      DrawerItem,\n      DrawerHeader,\n      DrawerSection,\n      Image,\n      Heading,\n      BodyText,\n      Appbar,\n    }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/drawer-section/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/drawer-section/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { Drawer, DrawerItem, DrawerHeader, DrawerSection, Appbar, Heading, BodyText } from 'material-bread';\n\nconst DrawerContent = () => {\n  return (\n    <View>\n      <DrawerHeader title={'Jon Snow'} subtitle={'Knows nothing'} />\n      <DrawerSection bottomDivider>\n        <DrawerItem text={'Inbox'} icon={'mail'} active />\n        <DrawerItem text={'Outbox'} icon={'send'} />\n        <DrawerItem text={'Favorites'} icon={'favorite'} />\n      </DrawerSection>\n    </View>\n  );\n};\n\nconst PageContent = () => {\n  return (\n    <View style={{ marginTop: 20, alignItems: 'center', width: '100%', flex: 1 }}>\n      <Heading type={4} style={{ marginBottom: 20 }}>\n        This is a page\n      </Heading>\n      <BodyText text={'Click the menu button to open the drawer'} />\n      <BodyText text={'Click outside the drawer to close it'} />\n    </View>\n  );\n};\n\nconst AppbarContent = isOpen => {\n  return (\n    <Appbar\n      barType={'normal'}\n      title={'Page Title'}\n      navigation={'menu'}\n      onNavigation={() => this.setState({ isOpen: !this.state.isOpen })}\n      actionItems={[{ name: 'search' }, { name: 'more-vert' }]}\n    />\n  );\n};\n\nconst styles = {\n  container: {\n    width: '100%',\n  },\n  body: {\n    backgroundColor: '#eee',\n  },\n};\n\nclass App extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      isOpen: false\n    }\n  }\n  render() {\n    return (\n      <View style={styles.container}>\n        <Drawer\n          open={this.state.isOpen}\n          drawerContent={<DrawerContent />}\n          onClose={() => this.setState({ isOpen: false })}\n          animationTime={250}>\n          <View style={styles.body}>\n            <AppbarContent />\n            <PageContent />\n          </View>\n        </Drawer>\n      </View>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/drawer-section/index.js",
    "content": "import React, { Component } from 'react';\nimport { ComponentPageLayout } from '@components';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'label', sub: true },\n];\n\nexport default class DrawerPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'drawer-section'}\n          title={'Drawer Section'}\n          description={`Navigation drawers provide access to destinations in your app.`}\n          importCode={`import { DrawerSection } from 'material-bread';`}\n          docsLink={\n            'https://material.io/design/components/navigation-drawer.html'\n          }\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/drawer-section'} />\n          <Usage pageHref={'/components/drawer-section'} />\n          <Props pageHref={'/components/drawer-section'} />\n          <Demos pageHref={'/components/drawer-section'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/drawer-section/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  [\n    'bottomDivider',\n    'Toggles a divider on the bottom of the section',\n    'bool',\n    'false',\n  ],\n  ['fullWidth', 'Toggles padding on either side', 'bool', 'false'],\n  ['label', 'Adds section label at the top', 'string', ''],\n  ['style', 'Styles container element', 'object', ''],\n  [\n    'topDivider',\n    'Toggles a divider on the top of the section',\n    'bool',\n    'false',\n  ],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/fab/Demos/AnimatedDemo.js",
    "content": "import React from 'react';\nimport { View, Text } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { Fab, Button } from '../../../../../../src/index';\n\nexport const code = `class Page extends React.Component {\n    constructor(props) {\n      super(props)\n      this.state = {\n        visible: true,\n      }\n    }\n    render() {\n      return (\n        <View>\n           <View style={{flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap'}}>\n            <Fab animated visible={this.state.visible} icon={'add'} />\n            <Fab\n                animated\n                visible={this.state.visible}\n                backgroundColor={'#E91E63'}\n                icon={'archive'}\n            />\n            <Fab\n                animated\n                visible={this.state.visible}\n                backgroundColor={'#F44336'}\n                icon={'delete'}\n            />\n            <Fab\n                animated\n                visible={this.state.visible}\n                mini\n                backgroundColor={'#009688'}\n                icon={'edit'}\n            />\n            <Fab\n                animated\n                visible={this.state.visible}\n                mini\n                backgroundColor={'black'}\n                icon={'attach-money'}\n            />\n            <Fab\n                animated\n                disabled\n                visible={this.state.visible}\n                mini\n                backgroundColor={'#009688'}\n                icon={'delete'}\n           />\n           </View>\n           <Button\n              text={'Toggle visibility'}\n              onPress={() => this.setState({ visible: !this.state.visible })}\n            />\n        </View>\n      );\n    }\n  }`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Animated'}\n    sectionHref={`${pageHref}#animated`}\n    sectionId={'animated'}\n    code={code}\n    scope={{ View, Fab, Button, Text }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/fab/Demos/ExtendedDemo.js",
    "content": "import React from 'react';\nimport { View, Text } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { Fab, Button } from '../../../../../../src/index';\n\nexport const code = `<View style={{flexDirection: 'row', flexWrap: 'wrap'}}>\n    <Fab icon={'add'} label={'Add'} />\n    <Fab backgroundColor={'#E91E63'} icon={'archive'} label={'Archive'} />\n    <Fab backgroundColor={'#F44336'} icon={'delete'} label={'Delete'} />\n    <Fab backgroundColor={'#009688'} icon={'edit'} label={'Edit'} />\n    <Fab backgroundColor={'black'} icon={'attach-money'} label={'Buy'} />\n    <Fab disabled icon={'delete'} label={'Disabled'} />\n</View>`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Extended'}\n    sectionHref={`${pageHref}#extended`}\n    sectionId={'extended'}\n    code={code}\n    scope={{ View, Fab, Button, Text }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/fab/Demos/MiniDemo.js",
    "content": "import React from 'react';\nimport { View, Text } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { Fab, Button } from '../../../../../../src/index';\n\nexport const code = `<View style={{flexDirection: 'row', flexWrap: 'wrap'}}>\n    <Fab mini icon={'add'} />\n    <Fab mini backgroundColor={'#E91E63'} icon={'archive'} />\n    <Fab mini backgroundColor={'#F44336'} icon={'delete'} />\n    <Fab mini backgroundColor={'#009688'} icon={'edit'} />\n    <Fab mini backgroundColor={'black'} icon={'attach-money'} />\n    <Fab mini disabled backgroundColor={'#009688'} icon={'delete'} />\n</View>`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Mini'}\n    sectionHref={`${pageHref}#mini`}\n    sectionId={'mini'}\n    code={code}\n    scope={{ View, Fab, Button, Text }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/fab/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport ExtendedDemo from './ExtendedDemo';\nimport MiniDemo from './MiniDemo';\nimport AnimatedDemo from './AnimatedDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n\n        <ExtendedDemo pageHref={pageHref} />\n        <MiniDemo pageHref={pageHref} />\n        <AnimatedDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/fab/MainDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { Fab } from '../../../../../src/index';\n\nexport const code = `<View style={{flexDirection: 'row', flexWrap: 'wrap'}}>\n  <Fab icon={'add'}/>\n  <Fab backgroundColor={'#E91E63'} icon={'archive'} />\n  <Fab backgroundColor={'#F44336'} icon={'delete'} />\n  <Fab backgroundColor={'#009688'} icon={'edit'} />\n  <Fab backgroundColor={'black'} icon={'attach-money'} />\n  <Fab disabled backgroundColor={'#009688'} icon={'delete'} />\n</View>`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        <CodeInline code=\"Fab\" type=\"element\" />s usually display icons in the\n        middle, you can pass a string for the name of the icon or pass an icon\n        node to the <CodeInline code=\"icon\" type=\"prop\" /> prop. You can also\n        replace it entirely with children.\n      </div>\n    }\n    code={code}\n    scope={{ View, Fab }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/fab/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/fab/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { Fab} from 'material-bread';\n\nclass FabPage extends React.Component {\n  constructor(props) {\n    super(props);\n  }\n  render() {\n    return (\n      <View>\n        <Fab />\n      </View>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/fab/index.js",
    "content": "import React, { Component } from 'react';\n\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\n\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'extended', sub: true },\n  { name: 'mini', sub: true },\n  { name: 'animated', sub: true },\n];\n\nexport default class FabPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'fab'}\n          title={'Floating Action Button'}\n          description={`A floating action button (FAB) represents the primary action of a screen.`}\n          importCode={`import { Fab } from 'material-bread';`}\n          docsLink={\n            'https://material.io/design/components/buttons-floating-action-button.html'\n          }\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/fab'} />\n          <Usage pageHref={'/components/fab'} />\n          <Props pageHref={'/components/fab'} />\n          <Demos pageHref={'/components/fab'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/fab/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['animated', 'Whether to animate when changing visible prop', 'bool', ''],\n  ['backgroundColor', 'Background color for fab circle', 'object', ''],\n  ['containerStyle', 'Styles wrapping element', 'object', ''],\n  ['disabled', 'Whether fab is disabled', 'bool', 'false'],\n  ['icon', 'Name of icon to show or an icon node', 'string || node', ''],\n  ['label', 'String to show as extended fab', 'string', ''],\n  ['mini', 'Toggles mini variant', 'bool', ''],\n  ['onPress', 'Call back on button', 'func', ''],\n  ['rippleColor', 'Color for ripple', 'string', ''],\n  ['shadow', 'Shadow on fab', 'number', '10'],\n  ['style', 'Styles root element', 'object', ''],\n  ['visible', 'Toggles visibility', 'bool', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/fab-speeddial/Demos/ExtendedDemo.js",
    "content": "import React from 'react';\nimport { View, Text } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { Fab, FabSpeedDial, Button } from '../../../../../../src/index';\n\nexport const code = `class FabPage extends React.Component {\n    constructor(props) {\n      super(props);\n    }\n    render() {\n      const actionsExtended = [\n        <Fab key={4} label=\"Buy\" backgroundColor={'black'} icon={'attach-money'} />,\n        <Fab key={3} label=\"Edit\" backgroundColor={'#009688'} icon={'edit'} />,\n        \n        <Fab key={2} label=\"Delete\" backgroundColor={'#F44336'} icon={'delete'} />,\n        <Fab key={1} label=\"Archive\" backgroundColor={'#E91E63'} icon={'archive'} />,\n       ];\n      return (\n        <View style={{marginTop: 350}}>\n          <FabSpeedDial\n            actions={actionsExtended}\n            style={{ marginTop: 400 }}\n            fab={<Fab label=\"Open\" icon=\"add\" />}\n          />\n        </View>\n      );\n    }\n  }`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Extended'}\n    sectionHref={`${pageHref}#extended`}\n    sectionId={'extended'}\n    code={code}\n    scope={{ View, FabSpeedDial, Fab, Button, Text }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/fab-speeddial/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport ExtendedDemo from './ExtendedDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n\n        <ExtendedDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/fab-speeddial/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { Fab, FabSpeedDial } from '../../../../../src/index';\n\nexport const code = `class FabPage extends React.Component {\n  constructor(props) {\n    super(props);\n  }\n  render() {\n    const actions = [\n      <Fab key={1} backgroundColor={'#E91E63'} icon={'archive'} />,\n      <Fab key={2}  backgroundColor={'#F44336'} icon={'delete'} />,\n      <Fab key={3} backgroundColor={'#009688'} icon={'edit'} />,\n      <Fab key={4} backgroundColor={'black'} icon={'attach-money'} />,\n    ];\n    return (\n      <View style={{marginTop: 350}}>\n        <FabSpeedDial actions={actions} />\n      </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        <CodeInline code=\"FabSpeedDial\" type=\"element\" /> accepts an array of{' '}\n        <CodeInline code=\"actions\" type=\"prop\" /> which will animate out from\n        the provided fab. You can pass a string to the{' '}\n        <CodeInline code=\"fab\" type=\"prop\" /> prop and it will update the icon\n        or you can pass a <CodeInline code=\"Fab\" type=\"element\" /> element for\n        more customization.\n      </div>\n    }\n    code={code}\n    scope={{ View, FabSpeedDial, Fab, Image }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/fab-speeddial/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/fab-speeddial/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { FabSpeedDial} from 'material-bread';\n\nclass FabPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n\n    }\n  }\n  render() {\n    const actions = [\n      {\n        text: 'Favorites',\n      },\n      {\n        text: 'Language',\n      },\n      {\n        text: 'Location',\n      },\n      {\n        text: 'Video',\n      },\n    ];\n    return (\n      <View>\n        <FabSpeedDial actions={actions} />\n      </View>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/fab-speeddial/index.js",
    "content": "import React, { Component } from 'react';\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\n\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'extended', sub: true },\n];\n\nexport default class FabPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'fab-speeddial'}\n          title={'Fab Speed Dial'}\n          description={`Fab Speed Dial toggles more actions extending from Fab.`}\n          importCode={`import { FabSpeedDial } from 'material-bread';`}\n          docsLink={\n            'https://material.io/design/components/buttons-floating-action-button.html'\n          }\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/fab-speeddial'} />\n          <Usage pageHref={'/components/fab-speeddial'} />\n          <Props pageHref={'/components/fab-speeddial'} />\n          <Demos pageHref={'/components/fab-speeddial'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/fab-speeddial/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  [\n    'Actions',\n    'Array of actions or other nodes to display when fab is activated',\n    'array',\n    '',\n  ],\n  [\n    'containerStyle',\n    'Styles containing element over fab and items',\n    'object',\n    '',\n  ],\n\n  [\n    'fab',\n    'String adds the name of the icon, node should be full fab',\n    'string || node',\n    '',\n  ],\n\n  ['fabProps', 'props to render on the fab', 'object', ''],\n\n  [\n    'onPress',\n    'Call back on main fab, this will activate animation as well',\n    'func',\n    '',\n  ],\n  ['style', 'Styles fab element', 'object', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/icon/Demos/AnotherSourceDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo, CodeInline } from '@components';\nimport { Icon } from '../../../../../../src/index';\nimport MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';\n\nexport const code = `class DialogPage extends React.Component {\n  constructor(props) {\n    super(props)\n  }\n  render() {\n    return (\n      <View style={{ flexDirection: 'row', marginBottom: 20 }}>\n        <Icon\n          name=\"visual-studio-code\"\n          size={24}\n          color={'#373177'}\n          iconComponent={MaterialCommunityIcons}\n        />\n        <Icon\n          name=\"android-head\"\n          size={32}\n          color={'#69B342'}\n          iconComponent={MaterialCommunityIcons}\n        />\n        <Icon\n          name=\"apple-ios\"\n          size={48}\n          color={'#000000'}\n          iconComponent={MaterialCommunityIcons}\n        />\n        <Icon\n          name=\"react\"\n          size={64}\n          color={'#5FDAFB'}\n          iconComponent={MaterialCommunityIcons}\n        />\n      </View>\n    );\n  }\n}\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Source'}\n    sectionHref={`${pageHref}#source`}\n    sectionId={'source'}\n    description={\n      <div>\n        You can use other icon packs from{' '}\n        <CodeInline code=\"react-native-vector-icons\" type=\"\" /> by passing them\n        into <CodeInline code=\"MaterialCommunityIcons\" type=\"proop\" /> and\n        providing the icon name in the string.\n      </div>\n    }\n    code={code}\n    scope={{ View, Icon, MaterialCommunityIcons }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/icon/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport AnotherSourceDemo from './AnotherSourceDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n        <AnotherSourceDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/icon/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { Icon, Badge } from '../../../../../src/index';\n\nexport const code = `class IconPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n\n    }\n  }\n  render() {\n    return (\n      <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>\n        <Icon name=\"adb\" size={12} color={'#F44336'} />\n        <Icon name=\"album\" size={24} color={'#E91E63'} />\n        <Icon name=\"battery-full\" size={32} color={'#9C27B0'} />\n     \n        <Icon name=\"camera\" size={48} color={'#009688'} />\n        <Icon name=\"create\" size={24} color={'#00BCD4'} />\n        <Icon name=\"dashboard\" size={32} color={'#607D8B'} />\n        <Icon name=\"directions-walk\" size={48} color={'#8BC34A'} />\n\n        <Icon name=\"flash-on\" size={64} color={'#FFEB3B'} />\n      </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        <CodeInline code=\"Icon\" type=\"element\" />s are provided by\n        <CodeInline code=\"react-native-vector-icons\" type=\"\" />, you can learn\n        more about these icons in the style section on icons. The default icon\n        pack is MaterialIcons, but you can use aany that{' '}\n        <CodeInline code=\"react-native-vector-icons\" type=\"\" /> supports.\n      </div>\n    }\n    code={code}\n    scope={{ View, Icon, Image, Badge }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/icon/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/icon/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { Icon } from 'material-bread';\n\nclass IconPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n\n    }\n  }\n  render() {\n    return (\n      <View>\n        <Icon name=\"favorite\" size={48} />\n      </View>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/icon/index.js",
    "content": "import React, { Component } from 'react';\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'source', sub: true },\n];\n\nexport default class IconPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'icon'}\n          title={'Icon'}\n          description={`Icons symbolize meaning and represent common actions.`}\n          importCode={`import { Icon } from 'material-bread';`}\n          docsLink={'https://material.io/design/iconography/product-icons.html'}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/icon'} />\n          <Usage pageHref={'/components/icon'} />\n          <Props pageHref={'/components/icon'} />\n          <Demos pageHref={'/components/icon'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/icon/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['color', 'Icon Color', 'string', ''],\n  [\n    'iconComponent',\n    'One of the Icon components from react-native-vector-icons',\n    'function',\n    '',\n  ],\n  ['name', 'Name of icon that matches material names', 'string', ''],\n  ['size', 'Size of icon', 'number', ''],\n  ['style', 'Styles root element', 'object', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/iconbutton/Demos/AnotherSourceDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo, CodeInline } from '@components';\nimport { IconButton } from '../../../../../../src/index';\nimport MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';\n\nexport const code = `class DialogPage extends React.Component {\n  constructor(props) {\n    super(props)\n  }\n  render() {\n    return (\n      <View style={{ flexDirection: 'row', marginBottom: 20 }}>\n        <IconButton\n          name=\"visual-studio-code\"\n          size={24}\n          color={'#373177'}\n          iconComponent={MaterialCommunityIcons}\n        />\n        <IconButton\n          name=\"android-head\"\n          size={32}\n          color={'#69B342'}\n          iconComponent={MaterialCommunityIcons}\n        />\n        <IconButton\n          name=\"apple-ios\"\n          size={48}\n          color={'#000000'}\n          iconComponent={MaterialCommunityIcons}\n        />\n        <IconButton\n          name=\"react\"\n          size={64}\n          color={'#5FDAFB'}\n          iconComponent={MaterialCommunityIcons}\n        />\n      </View>\n    );\n  }\n}\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Source'}\n    sectionHref={`${pageHref}#source`}\n    sectionId={'source'}\n    description={\n      <div>\n        You can use other icon packs from{' '}\n        <CodeInline code=\"react-native-vector-icons\" type=\"\" /> by passing them\n        into <CodeInline code=\"MaterialCommunityIcons\" type=\"proop\" /> and\n        providing the icon name in the string.\n      </div>\n    }\n    code={code}\n    scope={{ View, IconButton, MaterialCommunityIcons }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/iconbutton/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport AnotherSourceDemo from './AnotherSourceDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n        <AnotherSourceDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/iconbutton/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { IconButton, Badge } from '../../../../../src/index';\n\nexport const code = `class IconPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n\n    }\n  }\n  render() {\n    return (\n      <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>\n\n        <IconButton name=\"adb\" size={12} color={'#F44336'} />\n        <IconButton name=\"album\" size={24} color={'#E91E63'} />\n        <IconButton name=\"battery-full\" size={32} color={'#9C27B0'} />\n        <Badge\n          style={{ position: 'absolute', top: 0, right: 0 }}\n          size={14}\n          badgeContent={4}>\n          <IconButton name=\"camera\" size={48} color={'#009688'} />\n        </Badge>\n\n        <IconButton name=\"create\" size={24} color={'#00BCD4'} />\n        <IconButton name=\"dashboard\" size={32} color={'#607D8B'} />\n        <IconButton name=\"directions-walk\" size={48} color={'#8BC34A'} />\n        <IconButton name=\"flash-on\" size={64} color={'#FFEB3B'} />\n      </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        <CodeInline code=\"IconButtons\" type=\"element\" /> are convenient\n        components for adding <CodeInline code=\"onPress\" type=\"prop\" /> and{' '}\n        <CodeInline code=\"Ripple\" type=\"element\" /> to icons.\n      </div>\n    }\n    code={code}\n    scope={{ View, IconButton, Badge, Image }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/iconbutton/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/iconbutton/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { IconButton } from 'material-bread';\n\nclass IconPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n\n    }\n  }\n  render() {\n    return (\n      <View>\n        <IconButton name=\"favorite\" size={48} />\n      </View>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/iconbutton/index.js",
    "content": "import React, { Component } from 'react';\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\n\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'source', sub: true },\n];\n\nexport default class IconPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'iconbutton'}\n          title={'Icon Button'}\n          description={`Icon Buttons turn Icons into clickable actions`}\n          importCode={`import { IconButton } from 'material-bread';`}\n          docsLink={'https://material.io/design/iconography/product-icons.html'}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/iconbutton'} />\n          <Usage pageHref={'/components/iconbutton'} />\n          <Props pageHref={'/components/iconbutton'} />\n          <Demos pageHref={'/components/iconbutton'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/iconbutton/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['color', 'Icon Color', 'string', ''],\n  [\n    'iconComponent',\n    'One of the Icon components from react-native-vector-icons',\n    'function',\n    '',\n  ],\n  ['name', 'Name of icon that matches material names', 'string', ''],\n  ['onPress', 'Callback on icon', 'func', ''],\n  ['rippleColor', 'Icon rippleColor overrides ripple color', 'string', 'color'],\n  ['size', 'Size of icon', 'number', ''],\n  ['style', 'Styles root element', 'object', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/list/Demos/SubheaderDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { List, ListItem, Avatar } from '../../../../../../src/index';\n\nexport const code = `class DialogPage extends React.Component {\n  constructor(props) {\n    super(props)\n  }\n  render() {\n    return (\n        <List subheader={'Favorites'} style={{ maxWidth: 300 }}>\n            <ListItem\n                text={'Janet Perkins'}\n                media={\n                    <Avatar\n                        type=\"icon\"\n                        content=\"person\"\n                        contentColor={'#ececec'}\n                        color={'#a3a3a3'}\n                        size={40}\n                    />\n                }\n            />\n            <ListItem\n                text={'Mary Perkins'}\n                media={\n                    <Avatar\n                        type=\"icon\"\n                        content=\"person\"\n                        contentColor={'#ececec'}\n                        color={'#a3a3a3'}\n                        size={40}\n                    />\n                }\n            />\n            <ListItem\n                text={'Peter Carlsson'}\n                media={\n                    <Avatar\n                        type=\"icon\"\n                        content=\"person\"\n                        contentColor={'#ececec'}\n                        color={'#a3a3a3'}\n                        size={40}\n                    />\n                }\n            />\n            <ListItem\n                text={'Trevor Hansen'}\n                media={\n                    <Avatar\n                        type=\"icon\"\n                        content=\"person\"\n                        contentColor={'#ececec'}\n                        color={'#a3a3a3'}\n                        size={40}\n                    />\n                }\n            />\n        </List>\n    );\n  }\n}\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Subheader'}\n    sectionHref={`${pageHref}#subheader`}\n    sectionId={'subheader'}\n    code={code}\n    scope={{ View, List, ListItem, Avatar }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/list/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport SubheaderDemo from './SubheaderDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n        <SubheaderDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/list/MainDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { List, ListItem, Icon } from '../../../../../src/index';\n\nexport const code = `class ListPage extends React.Component {\n  constructor(props) {\n    super(props)\n  }\n  render() {\n    return (\n      <List style={{ maxWidth: 300 }}>\n        <ListItem\n          text={'Attractions'}\n          icon={<Icon name={'local-movies'} size={24} />}\n        />\n        <ListItem\n          text={'Dining'}\n          icon={<Icon name={'local-dining'} size={24} />}\n        />\n        <ListItem text={'Education'} icon={<Icon name={'edit'} size={24} />} />\n        <ListItem text={'Health'} icon={<Icon name={'favorite'} size={24} />} />\n        <ListItem text={'Family'} icon={<Icon name={'group'} size={24} />} />\n        <ListItem\n          text={'Office'}\n          icon={<Icon name={'content-cut'} size={24} />}\n        />\n        <ListItem\n          text={'Promotions'}\n          icon={<Icon name={'loyalty'} size={24} />}\n        />\n      </List>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        <CodeInline code=\"List\" type=\"element\" /> components are built using{' '}\n        <CodeInline code=\"ListItem\" type=\"element\" />\n        s, and <CodeInline code=\"ListSection\" type=\"element\" />\n        s, and <CodeInline code=\"ListExpand\" type=\"element\" />. There are many\n        combinations of these components, please see each components page or\n        storybook for more demos.\n      </div>\n    }\n    code={code}\n    scope={{\n      View,\n      List,\n      ListItem,\n      Icon,\n    }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/list/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/list/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { List, ListItem } from 'material-bread';\n\nclass ListPage extends React.Component {\n  constructor(props) {\n    super(props)\n  }\n  render() {\n    return (\n      <List style={{ width: 300 }}>\n        <ListItem text={'Attractions'} />\n        <ListItem text={'Dining'} />\n        <ListItem text={'Education'} />\n        <ListItem text={'Health'} />\n        <ListItem text={'Family'} />\n        <ListItem text={'Office'} />\n        <ListItem text={'Promotions'} />\n      </List>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/list/index.js",
    "content": "import React, { Component } from 'react';\n\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\n\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'subheader', sub: true },\n];\n\nexport default class ListPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'list'}\n          title={'List'}\n          description={`Lists are continuous, vertical indexes of text or images.`}\n          importCode={`import { List } from 'material-bread';`}\n          docsLink={'https://material.io/design/components/lists.html'}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/list'} />\n          <Usage pageHref={'/components/list'} />\n          <Props pageHref={'/components/list'} />\n          <Demos pageHref={'/components/list'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/list/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['shadow', 'Shadow using the Shadow util', 'number', ''],\n  ['style', 'Styles root element', 'object', ''],\n  ['subheader', 'Adds a subheader for the whole list', 'string', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/list-expand/Demos/IconDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { List, ListItem, ListExpand, Icon } from '../../../../../../src/index';\n\nexport const code = `class DialogPage extends React.Component {\n  constructor(props) {\n    super(props)\n  }\n  render() {\n    return (\n        <List style={{ maxWidth: 300 }}>\n            <ListExpand\n                title={'Attractions'}\n                icon={<Icon name={'local-movies'} size={24} />}\n            >\n                <ListItem text={'Movies'} />\n                <ListItem text={'Bowling'} />\n                <ListItem text={'Fairgrounds'} />\n            </ListExpand>\n            <ListExpand\n                title={'Dining'}\n                icon={<Icon name={'local-dining'} size={24} />}\n            >\n                <ListItem text={'Pizz Hut'} />\n                <ListItem text={'Taco bell'} />\n                <ListItem text={'Sonics'} />\n            </ListExpand>\n            <ListExpand\n                title={'Education'}\n                icon={<Icon name={'edit'} size={24} />}\n            >\n                <ListItem text={'Basket Weaving'} />\n                <ListItem text={'Cooking'} />\n                <ListItem text={'Economics'} />\n            </ListExpand>\n        </List>\n    );\n  }\n}\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Icon'}\n    sectionHref={`${pageHref}#icon`}\n    sectionId={'icon'}\n    code={code}\n    scope={{ View, List, ListItem, ListExpand, Icon }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/list-expand/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport IconDemo from './IconDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n        <IconDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/list-expand/MainDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { List, ListItem, ListExpand, Icon } from '../../../../../src/index';\n\nexport const code = `class ListPage extends React.Component {\n  constructor(props) {\n    super(props)\n  }\n  render() {\n    return (\n      <List style={{ maxWidth: 300 }}>\n        <ListExpand title={'Events'}>\n          <ListItem text={'Attractions'} />\n          <ListItem text={'Dining'} />\n          <ListItem text={'Education'} />\n          <ListItem text={'Health'} />\n          <ListItem text={'Family'} />\n          <ListItem text={'Office'} />\n          <ListItem text={'Promotions'} />\n        </ListExpand>\n      </List>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        The <CodeInline code=\"ListExpand\" type=\"element\" /> component simply\n        reveals more <CodeInline code=\"ListItem\" type=\"element\" />s on click.\n        You must provide a <CodeInline code=\"title\" type=\"prop\" />.\n      </div>\n    }\n    code={code}\n    scope={{\n      View,\n      List,\n      ListItem,\n      ListExpand,\n      Icon,\n    }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/list-expand/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/list-expand/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { List, ListItem } from 'material-bread';\n\nclass ListPage extends React.Component {\n  constructor(props) {\n    super(props)\n  }\n  render() {\n    return (\n      <List style={{ width: 300 }}>\n        <ListItem text={'Attractions'} />\n        <ListItem text={'Dining'} />\n        <ListItem text={'Education'} />\n        <ListItem text={'Health'} />\n        <ListItem text={'Family'} />\n        <ListItem text={'Office'} />\n        <ListItem text={'Promotions'} />\n      </List>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/list-expand/index.js",
    "content": "import React, { Component } from 'react';\n\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\n\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'icon', sub: true },\n];\n\nexport default class ListPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'list-expand'}\n          title={'ListExpand'}\n          description={`ListExpand reveals more list items on press.`}\n          importCode={`import { ListExpand } from 'material-bread';`}\n          docsLink={'https://material.io/design/components/lists.html'}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/list-expand'} />\n          <Usage pageHref={'/components/list-expand'} />\n          <Props pageHref={'/components/list-expand'} />\n          <Demos pageHref={'/components/list-expand'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/list-expand/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['expanded', 'Manual control of when the menu is open', 'bool', 'false'],\n\n  ['expandIconStyle', 'Styles expand icon element', 'object', ''],\n  [\n    'icon',\n    'Renders an icon on the left, pushes inner content over',\n    'node',\n    '',\n  ],\n  ['onPress', 'Callback when clicking ListExpand', 'func', ''],\n\n  ['rippleProps', 'Ripple props spread', 'object', ''],\n  ['style', 'Styles root element', 'object', ''],\n  ['title', 'The text shown on the expand button, required', 'string', ''],\n  ['titleStyle', 'Styles the title text', 'object', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/list-item/Demos/ActionItemDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { List, ListItem, Avatar, Checkbox } from '../../../../../../src/index';\n\nexport const code = `class Page extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n        checkedOne: true,\n        checkedTwo: false\n    }\n  }\n  render() {\n    return (\n        <List style={{ maxWidth: 300 }}>\n            <ListItem\n              text={'Janet Perkins'}\n              media={\n                <Avatar\n                  type=\"icon\"\n                  content=\"person\"\n                  contentColor={'#ececec'}\n                  color={'#a3a3a3'}\n                  size={40}\n                />\n              }\n              onPress={() => this.setState({ checkedOne: !this.state.checkedOne })}\n              actionItem={\n                <Checkbox\n                  checked={this.state.checkedOne}\n                  onPress={() => this.setState({ checkedOne: !this.state.checkedOne })}\n                />\n              }\n            />\n            <ListItem\n              text={'Mary Perkins'}\n              media={\n                <Avatar\n                  type=\"icon\"\n                  content=\"person\"\n                  contentColor={'#ececec'}\n                  color={'#a3a3a3'}\n                  size={40}\n                />\n              }\n              onPress={() => this.setState({ checkedTwo: !this.state.checkedTwo })}\n              actionItem={\n                <Checkbox\n                  checked={this.state.checkedTwo}\n                  onPress={() => this.setState({ checkedTwo: !this.state.checkedTwo })}\n                />\n              }\n            />\n        </List>\n    );\n  }\n}\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Action Item'}\n    sectionHref={`${pageHref}#actionitem`}\n    sectionId={'actionitem'}\n    code={code}\n    scope={{ View, List, ListItem, Avatar, Checkbox }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/list-item/Demos/LeadingActionDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport {\n  List,\n  ListItem,\n  Avatar,\n  Checkbox,\n  IconButton,\n} from '../../../../../../src/index';\n\nexport const code = `class Page extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n        checkedOne: true,\n        checkedTwo: false\n    }\n  }\n  render() {\n    return (\n        <List style={{ maxWidth: 300 }}>\n            <ListItem\n              text={'Janet Perkins'}\n              onPress={() => this.setState({ checkedOne: !this.state.checkedOne })}\n              actionItem={\n                <IconButton name=\"comment\" size={24} color=\"#6e6e6e\" />\n              }\n              leadingActionItem={\n                <Checkbox\n                  checked={this.state.checkedOne}\n                  onPress={() => this.setState({ checkedOne: !this.state.checkedOne })}\n                />\n              }\n            />\n            <ListItem\n              text={'Mary Perkins'}\n              onPress={() => this.setState({ checkedTwo: !this.state.checkedTwo })}\n              actionItem={\n                <IconButton name=\"comment\" size={24} color=\"#6e6e6e\" />\n              }\n              leadingActionItem={\n                <Checkbox\n                  checked={this.state.checkedTwo}\n                  onPress={() => this.setState({ checkedTwo: !this.state.checkedTwo })}\n                />\n              }\n            />\n        </List>\n    );\n  }\n}\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Leading action'}\n    sectionHref={`${pageHref}#leadingaction`}\n    sectionId={'leadingaction'}\n    code={code}\n    scope={{ View, List, ListItem, Avatar, Checkbox, IconButton }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/list-item/Demos/SecondaryDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport {\n  List,\n  ListItem,\n  Caption,\n  IconButton,\n} from '../../../../../../src/index';\n\nexport const code = `class Page extends React.Component {\n  constructor(props) {\n    super(props)\n  }\n  render() {\n    return (\n      <List style={{ maxWidth: 300 }}>\n        <ListItem\n            leadingActionItem={<IconButton name=\"local-offer\" size={24} color=\"#6e6e6e\" />} \n            text={'Two Line'} \n            secondaryText={'Secondary Text'} \n            actionItem={<Caption text={'01'} />}\n        />\n        <ListItem\n            leadingActionItem={<IconButton name=\"local-offer\" size={24} color=\"#6e6e6e\" />} \n            text={'Two Line'} \n            secondaryText={'Secondary Text'} \n            actionItem={<Caption text={'02'} />}\n        />\n      </List>\n          \n    );\n  }\n}\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Secondary Text'}\n    sectionHref={`${pageHref}#secondary`}\n    sectionId={'secondary'}\n    code={code}\n    scope={{ View, List, ListItem, Caption, IconButton }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/list-item/Demos/SelectedDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { List, ListItem, Caption, Icon } from '../../../../../../src/index';\n\nexport const code = `class Page extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      selected: 2\n    }\n  }\n  render() {\n    return (\n      <List style={{ maxWidth: 300 }}>\n        <ListItem\n          text={'Attractions'}\n          icon={<Icon name={'local-movies'} size={24} />}\n          onPress={() => this.setState({ selected: 1 })}\n          selected={this.state.selected == 1}\n        />\n        <ListItem\n          text={'Dining'}\n          icon={<Icon name={'local-dining'} size={24} />}\n          onPress={() => this.setState({ selected: 2 })}\n          selected={this.state.selected == 2}\n        />\n        <ListItem\n          text={'Education'}\n          icon={<Icon name={'edit'} size={24} />}\n          onPress={() => this.setState({ selected: 3 })}\n          selected={this.state.selected == 3}\n        />\n      </List>   \n    );\n  }\n}\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Selected'}\n    sectionHref={`${pageHref}#selected`}\n    sectionId={'selected'}\n    code={code}\n    scope={{ View, List, ListItem, Caption, Icon }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/list-item/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport ActionItemDemo from './ActionItemDemo';\nimport LeadingActionDemo from './LeadingActionDemo';\nimport SecondaryDemo from './SecondaryDemo';\nimport SelectedDemo from './SelectedDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n        <ActionItemDemo pageHref={pageHref} />\n        <LeadingActionDemo pageHref={pageHref} />\n        <SecondaryDemo pageHref={pageHref} />\n        <SelectedDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/list-item/MainDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { List, ListItem, IconButton, Avatar } from '../../../../../src/index';\n\nexport const code = `class ListPage extends React.Component {\n  constructor(props) {\n    super(props)\n  }\n  render() {\n    return (\n      <List style={{ maxWidth: 300 }}>\n        <ListItem\n          text={'Photos'}\n          secondaryText={'Jan 9, 2018'}\n          media={\n            <Avatar\n              type=\"icon\"\n              content=\"folder\"\n              contentColor={'#ececec'}\n              color={'#a3a3a3'}\n              size={40}\n            />\n          }\n          actionItem={<IconButton name=\"error\" size={24} color=\"#6e6e6e\" />}\n        />\n        <ListItem\n          text={'Recipes'}\n          secondaryText={'Jan 17, 2018'}\n          media={\n            <Avatar\n              type=\"icon\"\n              content=\"folder\"\n              contentColor={'#ececec'}\n              color={'#a3a3a3'}\n              size={40}\n            />\n          }\n          actionItem={<IconButton name=\"error\" size={24} color=\"#6e6e6e\" />}\n        />\n      </List>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        <CodeInline code=\"ListItem\" type=\"element\" />s can have{' '}\n        <CodeInline code=\"text\" type=\"prop\" />,{' '}\n        <CodeInline code=\"icon\" type=\"prop\" />,{' '}\n        <CodeInline code=\"media\" type=\"prop\" />,{' '}\n        <CodeInline code=\"actionItem\" type=\"prop\" />,{' '}\n        <CodeInline code=\"leadingItem\" type=\"prop\" />, or{' '}\n        <CodeInline code=\"secondaryText\" type=\"prop\" />. If you want more custom\n        you can pass in children to replace text with anything.\n      </div>\n    }\n    code={code}\n    scope={{\n      View,\n      List,\n      ListItem,\n      IconButton,\n      Avatar,\n    }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/list-item/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/list-item/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { List, ListItem } from 'material-bread';\n\nclass ListPage extends React.Component {\n  constructor(props) {\n    super(props)\n  }\n  render() {\n    return (\n      <List style={{ width: 300 }}>\n        <ListItem text={'Attractions'} />\n        <ListItem text={'Dining'} />\n        <ListItem text={'Education'} />\n        <ListItem text={'Health'} />\n        <ListItem text={'Family'} />\n        <ListItem text={'Office'} />\n        <ListItem text={'Promotions'} />\n      </List>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/list-item/index.js",
    "content": "import React, { Component } from 'react';\n\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\n\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'actionitem', sub: true },\n  { name: 'leadingaction', sub: true },\n  { name: 'secondary', sub: true },\n  { name: 'selected', sub: true },\n];\n\nexport default class ListPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'list-item'}\n          title={'ListItem'}\n          description={`Lists are continuous, vertical indexes of text or images.`}\n          importCode={`import { ListItem } from 'material-bread';`}\n          docsLink={'https://material.io/design/components/lists.html'}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/list-item'} />\n          <Usage pageHref={'/components/list-item'} />\n          <Props pageHref={'/components/list-item'} />\n          <Demos pageHref={'/components/list-item'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/list-item/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  [\n    'actionItem',\n    'Dispays arbitrary node on the far right of the item ',\n    'node',\n    '',\n  ],\n  ['disabled', 'Disables click functionality', 'bool', ''],\n  ['icon', 'Dispays arbitrary icon to the left of text and media ', 'node', ''],\n  [\n    'leadingActionItem',\n    'Dispays arbitrary node on the left right of the item ',\n    'node',\n    '',\n  ],\n  ['media', 'Dispays arbitrary node to the left of text', 'node', ''],\n  ['onPress', 'Callback on listItem', 'func', ''],\n  ['rippleProps', 'Ripple props spread', 'object', ''],\n  [\n    'secondaryText',\n    'Secondary text, show under the main text',\n    'string || element',\n    '',\n  ],\n  [\n    'secondaryTextProps',\n    'Addtional props for the secondary text element',\n    'object',\n    '',\n  ],\n  ['secondaryTextStyle', 'Styles secondary text element', 'object', ''],\n  ['selected', 'Whether the item is selected', 'bool', ''],\n  ['style', 'Styles root element', 'object', ''],\n  ['text', 'Main text for item', 'string', ''],\n  ['textProps', 'Addtional props for the main text element', 'object', ''],\n  ['textStyle', 'Styles main text element', 'object', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/list-section/Demos/InsetDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { List, ListItem, ListSection, Icon } from '../../../../../../src/index';\n\nexport const code = `class DialogPage extends React.Component {\n  constructor(props) {\n    super(props)\n  }\n  render() {\n    return (\n      <List style={{ maxWidth: 300 }}>\n        <ListSection inset bottomDivider>\n          <ListItem\n            text={'Attractions'}\n            icon={<Icon name={'local-movies'} size={24} />}\n          />\n          <ListItem\n            text={'Dining'}\n            icon={<Icon name={'local-dining'} size={24} />}\n          />\n        </ListSection>\n        <ListSection inset bottomDivider>\n          <ListItem\n            text={'Health'}\n            icon={<Icon name={'favorite'} size={24} />}\n          />\n          <ListItem text={'Family'} icon={<Icon name={'group'} size={24} />} />\n        </ListSection>\n        <ListSection inset>\n          <ListItem\n            text={'Education'}\n            icon={<Icon name={'edit'} size={24} />}\n          />\n          <ListItem\n            text={'Office'}\n            icon={<Icon name={'content-cut'} size={24} />}\n          />\n          <ListItem\n            text={'Promotions'}\n            icon={<Icon name={'loyalty'} size={24} />}\n          />\n        </ListSection>\n      </List>\n    );\n  }\n}\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Inset Divider'}\n    sectionHref={`${pageHref}#inset`}\n    sectionId={'inset'}\n    code={code}\n    scope={{ View, List, ListItem, ListSection, Icon }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/list-section/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport InsetDemo from './InsetDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n        <InsetDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/list-section/MainDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { List, ListItem, ListSection, Icon } from '../../../../../src/index';\n\nexport const code = `class ListPage extends React.Component {\n  constructor(props) {\n    super(props)\n  }\n  render() {\n    return (\n      <List style={{ maxWidth: 300 }}>\n        <ListSection label={'Entertainment'}>\n          <ListItem\n            text={'Attractions'}\n            icon={<Icon name={'local-movies'} size={24} />}\n          />\n          <ListItem\n            text={'Dining'}\n            icon={<Icon name={'local-dining'} size={24} />}\n          />\n        </ListSection>\n        <ListSection label={'Home'}>\n          <ListItem\n            text={'Health'}\n            icon={<Icon name={'favorite'} size={24} />}\n          />\n          <ListItem text={'Family'} icon={<Icon name={'group'} size={24} />} />\n        </ListSection>\n        <ListSection label={'Job'}>\n          <ListItem\n            text={'Education'}\n            icon={<Icon name={'edit'} size={24} />}\n          />\n          <ListItem\n            text={'Office'}\n            icon={<Icon name={'content-cut'} size={24} />}\n          />\n          <ListItem\n            text={'Promotions'}\n            icon={<Icon name={'loyalty'} size={24} />}\n          />\n        </ListSection>\n      </List>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        <CodeInline code=\"ListSection\" type=\"element\" /> is a convenient\n        component for breaking lists into separate sections. They can have{' '}\n        <CodeInline code=\"bottomDivider\" type=\"prop\" />,{' '}\n        <CodeInline code=\"topDivider\" type=\"prop\" />,{' '}\n        <CodeInline code=\"label\" type=\"prop\" />, or be{' '}\n        <CodeInline code=\"inset\" type=\"prop\" />.\n      </div>\n    }\n    code={code}\n    scope={{\n      View,\n      List,\n      ListItem,\n      ListSection,\n      Icon,\n    }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/list-section/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/list-section/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { List, ListItem, ListSection, Icon } from 'material-bread';\n\nclass ListPage extends React.Component {\n  constructor(props) {\n    super(props)\n  }\n  render() {\n    return (\n      <List style={{ width: 300 }}>\n        <ListSection label={'Entertainment'}>\n          <ListItem\n            text={'Attractions'}\n            icon={<Icon name={'local-movies'} size={24} />}\n          />\n          <ListItem\n            text={'Dining'}\n            icon={<Icon name={'local-dining'} size={24} />}\n          />\n        </ListSection>\n      </List>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/list-section/index.js",
    "content": "import React, { Component } from 'react';\n\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\n\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'inset', sub: true },\n];\n\nexport default class ListPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'list-section'}\n          title={'ListSection'}\n          description={`Lists are continuous, vertical indexes of text or images.`}\n          importCode={`import { ListSection } from 'material-bread';`}\n          docsLink={'https://material.io/design/components/lists.html'}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/list-section'} />\n          <Usage pageHref={'/components/list-section'} />\n          <Props pageHref={'/components/list-section'} />\n          <Demos pageHref={'/components/list-section'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/list-section/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['bottomDivider', 'Adds a divider on the bottom of the section', 'bool', ''],\n  ['contentStyle', 'Styles element wrapping the content', 'object', ''],\n  ['inset', 'Insets the divider', 'bool', ''],\n  ['label', 'Text as a section header', 'string', ''],\n  ['labelStyle', 'Styles label', 'object', ''],\n  ['style', 'Styles root element', 'object', ''],\n  ['topDivider', 'Adds a divider on the top of the section', 'bool', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/menu/Demos/ScrollingDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo, CodeInline } from '@components';\nimport { Menu, MenuItem, Button } from '../../../../../../src/index';\n\nexport const code = `class Demo extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      visible: false\n    }\n  }\n  render() {\n    return (\n      <View style={{marginBottom: 200}}>\n        <Menu\n          visible={this.state.visible}\n          menuStyle={{ maxHeight: 200 }}\n          button={\n            <Button\n              text={'Show menu'}\n              onPress={() => {\n                this.setState({ visible: !this.state.visible });\n              }}\n              type=\"contained\" />\n          }>\n          <MenuItem text={'Menu item 1'} onPress={() => this.setState({ visible: false })} />\n          <MenuItem text={'Menu item 2'} onPress={() => this.setState({ visible: false })} />\n          <MenuItem text={'Menu item 3'} onPress={() => this.setState({ visible: false })} />\n          <MenuItem text={'Menu item 4'} onPress={() => this.setState({ visible: false })} />\n          <MenuItem text={'Menu item 5'} onPress={() => this.setState({ visible: false })} />\n          <MenuItem text={'Menu item 6'} onPress={() => this.setState({ visible: false })} />\n          <MenuItem text={'Menu item 7'} onPress={() => this.setState({ visible: false })} />\n        </Menu>\n      </View>\n    );\n  }\n}\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Scrolling'}\n    sectionHref={`${pageHref}#scrolling`}\n    sectionId={'scrolling'}\n    code={code}\n    description={\n      <div>\n        Provide <CodeInline code=\"maxheight\" type=\"prop\" /> to scroll the\n        content.\n      </div>\n    }\n    scope={{ View, Menu, MenuItem, Button }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/menu/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport ScrollingDemo from './ScrollingDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n\n        <ScrollingDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/menu/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { Menu, MenuItem, Button } from '../../../../../src/index';\n\nexport const code = `class MenuPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      visible: false\n    }\n  }\n  render() {\n    return (\n      <View style={{marginBottom: 200}}>\n        <Menu\n          visible={this.state.visible}\n          button={\n            <Button\n              text={'Show menu'}\n              onPress={() => {\n                this.setState({ visible: !this.state.visible });\n              }}\n              type=\"contained\" />\n          }>\n          <MenuItem text={'Menu item 1'} onPress={() => this.setState({ visible: false })} />\n          <MenuItem text={'Menu item 2'} onPress={() => this.setState({ visible: false })} />\n          <MenuItem disabled text={'Menu item 3'} onPress={() => this.setState({ visible: false })} />\n          <MenuItem text={'Menu item 4'} onPress={() => this.setState({ visible: false })} />          \n        </Menu>\n      </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        The <CodeInline code=\"Menu\" type=\"element\" /> component is built with\n        <CodeInline code=\"MenuItem\" type=\"element\" />s and{' '}\n        <CodeInline code=\"Button\" type=\"element\" />\n        s. Pass a <CodeInline code=\"Button\" type=\"element\" /> to activate the\n        menu and it will attach to that component.\n      </div>\n    }\n    code={code}\n    scope={{ View, Menu, MenuItem, Button, Image }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/menu/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/menu/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport {  Menu, MenuItem, Button } from 'material-bread';\n\nclass MenuPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      visible: false\n    }\n  }\n  render() {\n    return (\n      <Menu\n        visible={this.state.visible}\n        button={\n          <Button\n            text={'Show menu'}\n            onPress={() => {\n              this.setState({ visible: !this.state.visible });\n            }}\n            type=\"contained\" />\n        }>\n        <MenuItem text={'Menu item 1'} onPress={() => this.setState({ visible: false })} />\n        <MenuItem text={'Menu item 2'} onPress={() => this.setState({ visible: false })} />\n        <MenuItem text={'Menu item 3'} onPress={() => this.setState({ visible: false })} />\n        <MenuItem text={'Menu item 4'} onPress={() => this.setState({ visible: false })} />\n      </Menu>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/menu/index.js",
    "content": "import React, { Component } from 'react';\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'scrolling', sub: true },\n];\n\nexport default class MenuPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'menu'}\n          title={'Menu'}\n          description={`Menus display a list of choices on temporary surfaces.`}\n          importCode={`import { Menu } from 'material-bread';`}\n          docsLink={'https://material.io/design/components/menus.html'}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/menu'} />\n          <Usage pageHref={'/components/menu'} />\n          <Props pageHref={'/components/menu'} />\n          <Demos pageHref={'/components/menu'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/menu/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  [\n    'button',\n    'Component that will both activate menu and menu will attach to',\n    'node',\n    '',\n  ],\n  ['fullWidth', 'Forces menu button to be 100% width', 'bool', 'false'],\n  ['menuStyle', 'Styles the container to menu', 'object', ''],\n  ['onHidden', 'Callback when menu is hidden', 'func', ''],\n  ['onBackdropPress', 'Callback when clicking outside menu', 'func', ''],\n  [\n    'sameWidth',\n    'Forces menu to match the width of the passed in button',\n    'bool',\n    'false',\n  ],\n  ['style', 'Styles root element', 'object', ''],\n  ['visible', 'Whether the menu displays', 'bool', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/menu-item/Demos/IconDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo, CodeInline } from '@components';\nimport {\n  Menu,\n  MenuItem,\n  Paper,\n  Divider,\n  Icon,\n} from '../../../../../../src/index';\n\nexport const code = `class Demo extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      visible: false\n    }\n  }\n  render() {\n    return (\n      <Paper radius={6} style={{ width: 200 }}>\n        <MenuItem text={'Preview'} icon={<Icon name={'remove-red-eye'} />} />\n        <MenuItem text={'Share'} icon={<Icon name={'person-add'} />} />\n        <MenuItem text={'Get Link'} icon={<Icon name={'link'} />} />\n        <Divider />\n        <MenuItem text={'Preview'} icon={<Icon name={'content-copy'} />} />\n        <MenuItem text={'Download'} icon={<Icon name={'file-download'} />} />\n      </Paper>\n    );\n  }\n}\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Icon'}\n    sectionHref={`${pageHref}#icon`}\n    sectionId={'icon'}\n    code={code}\n    description={\n      <div>\n        Simply add a node to the <CodeInline code=\"icon\" type=\"prop\" /> prop.\n      </div>\n    }\n    scope={{ View, Menu, MenuItem, Paper, Divider, Icon }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/menu-item/Demos/KeyboardDemo.js",
    "content": "import React from 'react';\nimport { View, Text } from 'react-native';\nimport { ComponentDemo, CodeInline } from '@components';\nimport {\n  Menu,\n  MenuItem,\n  Paper,\n  Divider,\n  Icon,\n} from '../../../../../../src/index';\n\nexport const code = `class Demo extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      visible: false\n    }\n  }\n  render() {\n    return (\n      <Paper radius={6} style={{ width: 200 }}>\n        <MenuItem\n          text={'Cut'}\n          icon={<Icon name={'content-cut'} />}\n          keyboardCommand={\n            <Text style={{ fontSize: 12, color: '#6e6e6e' }}>&#8984;X</Text>\n          }\n        />\n\n        <MenuItem\n          text={'Copy'}\n          icon={<Icon name={'content-copy'} />}\n          keyboardCommand={\n            <Text style={{ fontSize: 12, color: '#6e6e6e' }}>&#8984;C</Text>\n          }\n        />\n\n        <MenuItem\n          text={'Paste'}\n          icon={<Icon name={'content-paste'} />}\n          keyboardCommand={\n            <Text style={{ fontSize: 12, color: '#6e6e6e' }}>&#8984;V</Text>\n          }\n        />\n      </Paper>\n    );\n  }\n}\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Keyboard'}\n    sectionHref={`${pageHref}#keyboard`}\n    sectionId={'keyboard'}\n    code={code}\n    description={\n      <div>\n        Simply add a node to the{' '}\n        <CodeInline code=\"keyboardCommand\" type=\"prop\" /> prop.\n      </div>\n    }\n    scope={{ View, Menu, MenuItem, Paper, Divider, Icon, Text }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/menu-item/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport IconDemo from './IconDemo';\nimport KeyboardDemo from './KeyboardDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n\n        <IconDemo pageHref={pageHref} />\n        <KeyboardDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/menu-item/MainDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport {\n  Menu,\n  MenuItem,\n  Button,\n  Paper,\n  Divider,\n} from '../../../../../src/index';\n\nexport const code = `class MenuPage extends React.Component {\n  constructor(props) {\n    super(props)\n  }\n  render() {\n    return (    \n      <Paper radius={6} style={{ width: 200 }}>\n     \n        <MenuItem text={'Menu Item 1'} />\n        <MenuItem text={'Menu Item 2'} />\n        <Divider />\n        <MenuItem disabled text={'Menu Item 3'} />\n        <MenuItem text={'Menu Item 4'} />\n      </Paper>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        <CodeInline code=\"MenuItem\" type=\"element\" />s can contain text or\n        icons. You can create a more custom one by replacing the children.\n      </div>\n    }\n    code={code}\n    scope={{ View, Menu, MenuItem, Button, Paper, Divider }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/menu-item/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/menu-item/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { Menu, MenuItem, Button } from 'material-bread';\n\nclass MenuPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      visible: false\n    }\n  }\n  render() {\n    return (\n      <Menu\n        visible={this.state.visible}\n        button={\n          <Button\n            text={'Show menu'}\n            onPress={() => {\n              this.setState({ visible: !this.state.visible });\n            }}\n            type=\"contained\" />\n        }>\n        <MenuItem text={'Menu item 1'} onPress={() => this.setState({ visible: false })} />\n        <MenuItem text={'Menu item 2'} onPress={() => this.setState({ visible: false })} />\n        <MenuItem text={'Menu item 3'} onPress={() => this.setState({ visible: false })} />\n        <MenuItem text={'Menu item 4'} onPress={() => this.setState({ visible: false })} />\n      </Menu>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/menu-item/index.js",
    "content": "import React, { Component } from 'react';\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'icon', sub: true },\n  { name: 'keyboard', sub: true },\n];\n\nexport default class MenuPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'menu-item'}\n          title={'Menu Item'}\n          description={`Menu Items display individual data within a menu.`}\n          importCode={`import { MenuItem } from 'material-bread';`}\n          docsLink={'https://material.io/design/components/menus.html'}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/menu-item'} />\n          <Usage pageHref={'/components/menu-item'} />\n          <Props pageHref={'/components/menu-item'} />\n          <Demos pageHref={'/components/menu-item'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/menu-item/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['disabled', 'Toggles disabled', 'bool', ''],\n  ['icon', 'Renders icon on the left of the text', 'node', ''],\n  ['keyboardCommand', 'Renders arbiraty node on the far right', 'node', ''],\n  ['onPress', 'Callback on MenuItem', 'func', ''],\n  ['style', 'Styles root element', 'object', ''],\n  ['text', 'Renders main text', 'string', ''],\n  ['textStyle', 'Styles menu text', 'object', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/paper/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { Paper } from '../../../../../src/index';\n\nexport const code = `class PaperDemo extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n\n    }\n  }\n  render() {\n    return (\n      <View style={{flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap'}}>\n        <Paper\n            style={{\n              height: 100,\n              width: 100,\n              alignItems: 'center',\n            }}\n            shadow={2}\n          />\n          <Paper\n            style={{\n              height: 100,\n              width: 100,\n            }}\n            shadow={4}\n          />\n          <Paper\n            style={{\n              height: 100,\n              width: 100,\n            }}\n            shadow={8}\n          />\n      </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        The <CodeInline code=\"Paper\" type=\"element\" /> copmonent is a base\n        component for displaying surfaces with shadow.\n      </div>\n    }\n    code={code}\n    scope={{ View, Paper, Image }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/paper/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/paper/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { Paper } from 'material-bread';\n\nclass PaperDemo extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n\n    }\n  }\n  render() {\n    return (\n     <View style={{flexDirection: 'row'}}>\n      <Paper\n          style={{\n            padding: 8,\n            height: 100,\n            width: 100,\n            alignItems: 'center',\n          }}\n          elevation={2}\n        />\n        <Paper\n          style={{\n            padding: 8,\n            height: 100,\n            width: 100,\n            marginTop: 30,\n            alignItems: 'center',\n            justifyContent: 'center',\n          }}\n          elevation={4}\n        />\n        <Paper\n          style={{\n            padding: 8,\n            height: 100,\n            width: 100,\n            marginTop: 30,\n            alignItems: 'center',\n            justifyContent: 'center',\n          }}\n          elevation={8}\n        />\n     </View>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/paper/index.js",
    "content": "import React, { Component } from 'react';\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\n\nconst sections = [{ name: 'Component' }, { name: 'Usage' }, { name: 'Props' }];\n\nexport default class PaperPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'paper'}\n          title={'Paper'}\n          description={`Material Design has three-dimensional qualities that are reflected in its use of surfaces, depth, and shadows.`}\n          importCode={`import { Paper } from 'material-bread';`}\n          docsLink={'https://material.io/design/environment/surfaces.html'}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/paper'} />\n          <Usage pageHref={'/components/paper'} />\n          <Props pageHref={'/components/paper'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/paper/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['radius', 'Border Radius for paper', 'number', ''],\n  ['shadow', 'Sets shadow on all platforms', 'number', ''],\n\n  ['style', 'Styles root element', 'object', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/progress-bar/Demos/DeterminateDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { ProgressBar, Button } from '../../../../../../src/index';\n\nexport const code = `class Demo extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      value: 10,\n      visible: true\n    }\n  }\n  render() {\n    return (\n      <View>    \n        <ProgressBar\n          determinate\n          value={this.state.value}\n          animationDuration={2000}\n          visible={this.state.visible}\n        />\n        <Button\n          type=\"outlined\"\n          style={{ marginTop: 20 }}\n          text={' Change Value'}\n          onPress={() => {\n            this.setState({\n              value: Math.floor(Math.random() * Math.floor(100)),\n            });\n          }}\n        />\n\n        <Button\n          type=\"outlined\"\n          style={{ marginTop: 20 }}\n          animationDuration={500}\n          text={'Hide / Show Animate'}\n          onPress={() => {\n            this.setState({\n              visible: !this.state.visible,\n            });\n          }}\n        />\n      </View>\n    );\n  }\n}\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Determinate'}\n    sectionHref={`${pageHref}#determinate`}\n    sectionId={'determinate'}\n    code={code}\n    description={'You must provide a value for the animation to stop at.'}\n    scope={{ View, ProgressBar, Button }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/progress-bar/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport DeterminateDemo from './DeterminateDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n\n        <DeterminateDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/progress-bar/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { ProgressBar, Button } from '../../../../../src/index';\n\nexport const code = `class ProgressBarDemo extends React.Component {\n  constructor(props) {\n    super(props)\n  }\n  render() {\n    return (\n      <View>\n        <ProgressBar visible />\n        <ProgressBar\n          visible\n          indicatorStartPosition={100}\n          trackStyle={{ marginTop: 20 }}\n          color={'#E91E63'}\n        />\n        <ProgressBar\n          visible\n          indicatorStartPosition={100}\n          trackStyle={{ marginTop: 20 }}\n          color={'#009688'}\n          animationDuration={4000}\n          height={6}\n        /> \n      </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        <CodeInline code=\"ProgressBar\" type=\"element\" />s can be{' '}\n        <CodeInline code=\"determinate\" type=\"value\" /> or{' '}\n        <CodeInline code=\"indeterminate\" type=\"value\" />. You can customize the\n        height of the bar, the color of the track, color of the indicator and\n        much more.\n      </div>\n    }\n    code={code}\n    scope={{ View, ProgressBar, Button, Image }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/progress-bar/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/progress-bar/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { Button, ProgressBar } from 'material-bread';\n\nclass ProgressBarDemo extends React.Component {\n    constructor(props) {\n      super(props)\n    }\n    render() {\n      return (\n        <View>\n          <ProgressBar\n            determinate\n            value={50}\n            animationDuration={2000}\n            visible\n          />\n        </View>\n      );\n    }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/progress-bar/index.js",
    "content": "import React, { Component } from 'react';\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\n\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'determinate', sub: true },\n];\n\nexport default class DataTableHeaderPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'progress-bar'}\n          title={'Progress Bar'}\n          description={`Progress indicators express an unspecified wait time or display the length of a process.`}\n          importCode={`import { ProgressBar } from 'material-bread';`}\n          docsLink={\n            'https://material.io/design/components/progress-indicators.html#linear-progress-indicators'\n          }\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/progress-bar'} />\n          <Usage pageHref={'/components/progress-bar'} />\n          <Props pageHref={'/components/progress-bar'} />\n          <Demos pageHref={'/components/progress-bar'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/progress-bar/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  [\n    'animationDuration',\n    'Length of each animation loop in ms',\n    'number',\n    '1000',\n  ],\n  ['animationEasing', 'Easing function for bar animation', 'func', ''],\n  ['color', 'Color of bar', 'string', ''],\n  ['determinate', 'Whether bar continues to animate or not', 'bool', ''],\n\n  ['height', 'Height of track and indicator', 'number', '4'],\n  [\n    'indicatorStartPosition',\n    'Where the indicator starts before the animation begins',\n    'number',\n    '0',\n  ],\n\n  ['style', 'Styles root element', 'object', ''],\n  ['trackStyle', 'Styles track containing the indicator', 'object', ''],\n  [\n    'value',\n    'Percent out of 100 the indcator should fill in determinate mode',\n    'number',\n    '',\n  ],\n  ['visible', 'Whether bar is visible or not', 'bool', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/progress-circle/Demos/DeterminateDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { ProgressCircle, Button } from '../../../../../../src/index';\n\nexport const code = `class Demo extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n        value: 10,\n    }\n  }\n  render() {\n    return (\n      <View >    \n        <ProgressCircle\n            value={this.state.value}\n            size={48}\n            thickness={4}\n            color=\"#2b80ff\"\n            unfilledColor=\"#f2f2f2\"\n            animationMethod=\"timing\"\n            animationConfig={{ speed: 1 }}\n            shouldAnimateFirstValue\n            determinate\n        />\n\n        <Button\n            type=\"outlined\"\n            style={{ marginTop: 20 }}\n            onPress={() => {\n                this.setState({\n                  value: Math.floor(Math.random() * Math.floor(100)),\n                });\n            }}\n            text={'Change Value'}\n        />\n      </View>\n    );\n  }\n}\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Determinate'}\n    sectionHref={`${pageHref}#determinate`}\n    sectionId={'determinate'}\n    code={code}\n    description={'You must provide a value for the animation to stop at.'}\n    scope={{ View, ProgressCircle, Button }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/progress-circle/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport DeterminateDemo from './DeterminateDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n\n        <DeterminateDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/progress-circle/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { ProgressCircle, Button } from '../../../../../src/index';\n\nexport const code = `class ProgressCircleDemo extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      circleValue3: 50\n    }\n  }\n  render() {\n    return (   \n      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>\n        <ProgressCircle  />\n        <ProgressCircle color={'#03A9F4'} animationDuration={1200} />\n        <ProgressCircle color={'#E91E63'} animationDuration={3800} />\n        <ProgressCircle color={'#009688'} animationDuration={4800} />\n    </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        <CodeInline code=\"ProgressCircle\" type=\"element\" />s can be{' '}\n        <CodeInline code=\"determinate\" type=\"value\" /> or{' '}\n        <CodeInline code=\"indeterminate\" type=\"value\" />. You can customize the\n        size of the circle, the color of the track, color of the indicator and\n        much more.\n      </div>\n    }\n    code={code}\n    scope={{ View, ProgressCircle, Button, Image }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/progress-circle/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/progress-circle/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { Button, ProgressCircle } from 'material-bread';\n\nclass ProgressCircleDemo extends React.Component {\n    constructor(props) {\n      super(props)\n    }\n    render() {\n      return (\n        <View>\n          <ProgressCircle color={'#E91E63'} />\n        </View>\n      );\n    }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/progress-circle/index.js",
    "content": "import React, { Component } from 'react';\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'determinate', sub: true },\n];\n\nexport default class DataTableHeaderPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'progress-circle'}\n          title={'Progress Circle'}\n          description={`Progress indicators express an unspecified wait time or display the length of a process.`}\n          importCode={`import { ProgressCircle } from 'material-bread';`}\n          docsLink={\n            'https://material.io/design/components/progress-indicators.html#circular-progress-indicators'\n          }\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/progress-circle'} />\n          <Usage pageHref={'/components/progress-circle'} />\n          <Props pageHref={'/components/progress-circle'} />\n          <Demos pageHref={'/components/progress-circle'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/progress-circle/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  [\n    'animationDuration',\n    'Length of each animation loop in ms',\n    'number',\n    '1000',\n  ],\n  ['animationEasing', 'Easaing function', 'func', ''],\n  ['color', 'Color of circle', 'string', ''],\n  ['determinate', 'Whether circle continues to animate or not', 'bool', ''],\n  [\n    'indicatorStartPosition',\n    'Where the indicator starts before the animation begins',\n    'number',\n    '0',\n  ],\n  [\n    'shouldAnimateFirstValue',\n    'Whether the determinate value should animate at start',\n    'bool',\n    'true',\n  ],\n  ['size', 'Diameter of circle', 'number', '48'],\n  ['style', 'Styles root element', 'object', ''],\n  ['trackStyle', 'Styles track containing the indicator', 'object', ''],\n  [\n    'value',\n    'Percent out of 100 the indicator should fill in determinate mode',\n    'number',\n    '',\n  ],\n  ['visible', 'Whether circle is visible or not', 'bool', ''],\n  ['widthOfBorder', 'The width of the track', 'number', '10'],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/radiobutton/Demos/LabelsDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo, CodeInline } from '@components';\nimport { RadioButton } from '../../../../../../src/index';\n\nexport const code = `class Demo extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      checked: 1,\n    }\n  }\n  render() {\n    return (\n      <View style={{flexDirection: 'column',  flexWrap: 'wrap'}}>\n        <RadioButton\n          checked={this.state.checked == 1}\n          onPress={() => this.setState({ checked: 1 })}\n          label=\"Home\"\n        />\n        <RadioButton\n          checked={this.state.checked == 2}\n          onPress={() => this.setState({ checked: 2 })}\n          label=\"Work\"\n        />\n        <RadioButton\n          checked={this.state.checked == 3}\n          onPress={() => this.setState({ checked: 3 })}\n          label=\"Anywhere\"\n        />\n      </View>\n    );\n  }\n}\n`;\n\nconst IconDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Labels'}\n    sectionHref={`${pageHref}#labels`}\n    sectionId={'labels'}\n    code={code}\n    scope={{ View, RadioButton }}\n    descriptions={\n      <div>\n        Labels can be styled with the{' '}\n        <CodeInline code=\"labelStyle\" type=\"prop\" /> prop which will override\n        other styles. Labels can be on the{' '}\n        <CodeInline code=\"left\" type=\"value\" /> or{' '}\n        <CodeInline code=\"right\" type=\"value\" /> with{' '}\n        <CodeInline code=\"labelPos\" type=\"prop\" />. Clicking a label will\n        activate <CodeInline code=\"onPress\" type=\"prop\" /> if provided.\n      </div>\n    }\n  />\n);\nexport default IconDemo;\n"
  },
  {
    "path": "docs/src/content/components/radiobutton/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport LabelsDemo from './LabelsDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n\n        <LabelsDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/radiobutton/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { RadioButton } from '../../../../../src/index';\n\nexport const code = `class RadioButtonDemo extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      checked: 1\n    }\n  }\n  render() {\n    return (\n      <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>\n        <RadioButton\n          checked={this.state.checked == 1}\n          onPress={() => this.setState({ checked: 1 })}\n        />\n        <RadioButton\n          checked={this.state.checked == 2}\n          radioButtonColor={'#E91E63'}\n          rippleColor={'#E91E63'}\n          onPress={() => this.setState({ checked: 2 })}\n        />\n        <RadioButton\n          checked={this.state.checked == 3}\n          onPress={() => this.setState({ checked: 3 })}\n          uncheckedBorderColor={'#009688'}\n          radioButtonColor={'#009688'}\n          rippleColor={'#009688'}\n        />\n        <RadioButton\n          checked={true}\n          disabled\n          onPress={() => this.setState({ checked: 3 })}\n          uncheckedBorderColor={'#009688'}\n          radioButtonColor={'#009688'}\n          rippleColor={'#009688'}\n        />\n        <RadioButton\n          checked={this.state.checked == 4}\n          error\n          onPress={() => this.setState({ checked: 4 })}\n          uncheckedBorderColor={'#009688'}\n          radioButtonColor={'#009688'}\n          rippleColor={'#009688'}\n        />\n      </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        <CodeInline code=\"RadioButton\" type=\"element\" />s can has custom color,\n        ripple, or border color.\n      </div>\n    }\n    code={code}\n    scope={{ View, RadioButton, Image }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/radiobutton/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/radiobutton/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { RadioButton } from 'material-bread';\n\nclass RadioButtonDemo extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      checked: 1\n    }\n  }\n  render() {\n    return (\n      <View>\n        <RadioButton\n          checked={this.state.checked == 1}\n          onPress={() => this.setState({ checked: 1 })}\n        />\n        <RadioButton\n          checked={this.state.checked == 2}\n          onPress={() => this.setState({ checked: 2 })}\n        />\n        <RadioButton\n          checked={this.state.checked == 3}\n          onPress={() => this.setState({ checked: 3 })}\n        />\n      </View>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/radiobutton/index.js",
    "content": "import React, { Component } from 'react';\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'labels', sub: true },\n];\n\nexport default class RadioButtonPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'radiobutton'}\n          title={'Radio Button '}\n          description={`Radio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.`}\n          importCode={`import { RadioButton } from 'material-bread';`}\n          docsLink={\n            'https://material.io/design/components/selection-controls.html#radio-buttons'\n          }\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/radiobutton'} />\n          <Usage pageHref={'/components/radiobutton'} />\n          <Props pageHref={'/components/radiobutton'} />\n          <Demos pageHref={'/components/radiobutton'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/radiobutton/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['checked', 'Whether radiobutton is checked', 'bool', ''],\n  ['disabled', 'Whether radiobutton is disabled', 'bool', ''],\n  ['error', 'Toggles error state', 'bool', ''],\n  ['label', 'Text shown next to radiobutton', 'string', ''],\n  ['labelPos', 'Position right or left of text', 'string', ''],\n  ['labelStyle', 'Styles on label', 'object', ''],\n  ['onPress', 'Call back on radioButton', 'func', ''],\n  ['radioButtonColor', 'Color of dot and active border', 'string', ''],\n  ['rippleColor', 'Radio Button ripple color', 'string', ''],\n  ['style', 'Styles root element', 'object', ''],\n  ['uncheckedBorderColor', 'Color of unchecked border', 'string', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/ripple/Demos/CenteredDemo.js",
    "content": "import React from 'react';\nimport { View, Text } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { Ripple, Card } from '../../../../../../src/index';\n\nexport const code = `class DialogPage extends React.Component {\n  constructor(props) {\n    super(props)\n  }\n  render() {\n    return (\n        <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>\n            <Ripple\n                rippleColor={'blue'}\n                rippleCentered\n                style={{\n                    width: 180,\n                    height: 250,\n                    justifyContent: 'center',\n                    alignItems: 'center',\n                    borderWidth: 1,\n                    borderColor: 'black',\n                    borderRadius: 5,\n                }}>\n                <Text>Click Me</Text>\n            </Ripple>\n            <Ripple\n                rippleCentered\n                style={{ width: 200, height: 200, marginLeft: 40 }}>\n                <Card\n                    shadow={4}\n                    style={{\n                    width: 200,\n                    height: 200,\n                    justifyContent: 'center',\n                    alignItems: 'center',\n                    }}>\n                    <Text>Click Me</Text>\n                </Card>\n            </Ripple>\n        </View>\n    );\n  }\n}\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Centered'}\n    sectionHref={`${pageHref}#centered`}\n    sectionId={'centered'}\n    code={code}\n    description={\n      'This forces the ripple to start in the center no matter where you click'\n    }\n    scope={{ View, Ripple, Card, Text }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/ripple/Demos/SequentialDemo.js",
    "content": "import React from 'react';\nimport { View, Text } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { Ripple, Card } from '../../../../../../src/index';\n\nexport const code = `class DialogPage extends React.Component {\n  constructor(props) {\n    super(props)\n  }\n  render() {\n    return (\n        <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>\n            <Ripple\n                rippleColor={'blue'}\n                rippleSequential\n                style={{\n                    width: 180,\n                    height: 250,\n                    justifyContent: 'center',\n                    alignItems: 'center',\n                    borderWidth: 1,\n                    borderColor: 'black',\n                    borderRadius: 5,\n                }}>\n                <Text>Click Me</Text>\n            </Ripple>\n            <Ripple\n                rippleCentered\n                rippleSequential\n                style={{ width: 200, height: 200, marginLeft: 40 }}>\n                <Card\n                    shadow={4}\n                    style={{\n                    width: 200,\n                    height: 200,\n                    justifyContent: 'center',\n                    alignItems: 'center',\n                    }}>\n                    <Text>Click Me</Text>\n                </Card>\n            </Ripple>\n        </View>\n    );\n  }\n}\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Sequential'}\n    sectionHref={`${pageHref}#sequential`}\n    sectionId={'sequential'}\n    code={code}\n    description={\n      'This makes the next ripple wait until the current ripple is done.'\n    }\n    scope={{ View, Ripple, Card, Text }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/ripple/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport SequentialDemo from './SequentialDemo';\nimport CenteredDemo from './CenteredDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n        <CenteredDemo pageHref={pageHref} />\n        <SequentialDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/ripple/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Text } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { Ripple, Card } from '../../../../../src/index';\n\nexport const code = `class Demo extends React.Component {\n  constructor(props) {\n    super(props)\n  }\n  render() {\n    return (\n      <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>\n        <Ripple\n          rippleColor={'blue'}\n          style={{\n            width: 180,\n            height: 250,\n            justifyContent: 'center',\n            alignItems: 'center',\n            borderWidth: 1,\n            borderColor: 'black',\n            borderRadius: 5,\n          }}>\n          <Text>Click Me</Text>\n        </Ripple>\n        <Ripple style={{ width: 200, height: 200, marginLeft: 40 }}>\n          <Card\n            shadow={4}\n            style={{\n              width: 200,\n              height: 200,\n              justifyContent: 'center',\n              alignItems: 'center',\n            }}>\n            <Text>Click Me</Text>\n          </Card>\n        </Ripple>\n      </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        <CodeInline code=\"Ripple\" type=\"element\" /> is a base component that can\n        be used to add a ripple animation to anything on touch. You can change{' '}\n        <CodeInline code=\"rippleDuration\" type=\"prop\" />,{' '}\n        <CodeInline code=\"rippleColor\" type=\"prop\" />,{' '}\n        <CodeInline code=\"rippleContainerBorderRadius\" type=\"prop\" />, and much\n        more.\n      </div>\n    }\n    code={code}\n    scope={{ View, Text, Ripple, Card }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/ripple/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/ripple/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View, Text } from 'react-native';\nimport { Ripple } from 'material-bread';\n\nclass Demo extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n\n    }\n  }\n  render() {\n    return (\n      <View>\n        <Ripple\n          rippleColor={'blue'}\n          style={{\n            width: 180,\n            height: 250,\n            justifyContent: 'center',\n            alignItems: 'center',\n            borderWidth: 1,\n            borderColor: 'black',\n            borderRadius: 5,\n          }}>\n          <Text>Click Me</Text>\n        </Ripple>\n      </View>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/ripple/index.js",
    "content": "import React, { Component } from 'react';\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\n\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'centered', sub: true },\n  { name: 'sequential', sub: true },\n];\n\nexport default class RipplePage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'ripple'}\n          title={'Ripple'}\n          description={`Ripple adds animation feedback to interactions.`}\n          importCode={`import { Ripple } from 'material-bread';`}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/ripple'} />\n          <Usage pageHref={'/components/ripple'} />\n          <Props pageHref={'/components/ripple'} />\n          <Demos pageHref={'/components/ripple'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/ripple/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  [\n    'displayUntilPressOut',\n    'Keep ripple at full size while holding press',\n    'bool',\n    'true',\n  ],\n  ['disabled', 'Disables ripple', 'bool', ''],\n  ['onPress', 'Call back on ripple', 'func', ''],\n  [\n    'rippleCentered',\n    'Whether the ripple starts at the center of the component or where you clicked',\n    'bool',\n    'false',\n  ],\n  ['rippleColor', 'Color of ripple', 'string', 'rgba(0, 0, 0, .87)'],\n  ['rippleContainerBorderRadius', 'Border Radius of ripple', 'number', '0'],\n  [\n    'rippleDuration',\n    'Animation Duration of ripple to fill the entire component',\n    'duration',\n    '400',\n  ],\n  ['rippleOpacity', 'Opacity of ripple', 'number', '0.3'],\n  ['rippleSize', 'Determines the size of ripple', 'number', '0'],\n  ['rippleSequential', 'Ripple should start in sequence', 'bool', 'false'],\n  ['style', 'Styles root element', 'object', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/searchbar/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentMainDemo } from '@components';\nimport { Searchbar } from '../../../../../src/index';\n\nexport const code = `class Demo extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      search: ''\n    }\n  }\n  render() {\n    return (\n      <View>\n        <Searchbar\n          label={'Label'}\n          value={this.state.search}\n          onChangeText={value => this.setState({ search: value })}\n          onCloseIcon={() => this.setState({ search: '' })}\n        />\n      </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={`The Searchbar component is a convenient component for displaying a full searchbar in an appbar. Usually this component is used on mobile.`}\n    code={code}\n    scope={{ View, Searchbar, Image }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/searchbar/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/searchbar/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { Searchbar } from 'material-bread';\n\nclass Demo extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      search: ''\n    }\n  }\n  render() {\n    return (\n      <View>\n        <Searchbar\n          label={'Label'}\n          value={this.state.search}\n          onChangeText={value => this.setState({ search: value })}\n          onCloseIcon={() => this.setState({ search: '' })}\n        />\n      </View>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/searchbar/index.js",
    "content": "import React, { Component } from 'react';\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\n\nconst sections = [{ name: 'Component' }, { name: 'Usage' }, { name: 'Props' }];\n\nexport default class SearchBarPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'searchbar'}\n          title={'Searchbar'}\n          description={`Searchbar displays as a full appbar for searching`}\n          importCode={`import { Searchbar } from 'material-bread';`}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/searchbar'} />\n          <Usage pageHref={'/components/searchbar'} />\n          <Props pageHref={'/components/searchbar'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/searchbar/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['onChangeText', 'Callback when text is changed', 'func', ''],\n  ['onCloseIcon', 'Callback when close icon is pressed', 'func', ''],\n  ['onNavigation', 'Callback when navigation icon is Pressed', 'func', ''],\n  ['style', 'Styles root element', 'object', ''],\n  ['value', 'Search input', 'string', ''],\n  ['placeholder', 'Placeholder for input search', 'string', 'Search'],\n  ['navigationIcon', 'Navigation icon name', 'string', 'arrow-back'],\n  [\n    'navigationIconComponent',\n    'One of the Icon components from react-native-vector-icons',\n    'function',\n    '',\n  ],\n  ['closeIcon', 'Close icon name', 'string', 'close'],\n  [\n    'closeIconComponent',\n    'One of the Icon components from react-native-vector-icons',\n    'function',\n    '',\n  ],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/searchfield/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentMainDemo } from '@components';\nimport { Searchfield } from '../../../../../src/index';\n\nexport const code = `class Demo extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      search: ''\n    }\n  }\n  render() {\n    return (\n      <View >\n        <Searchfield \n          color={'#E91E63'}\n          value={this.state.search}\n          onChangeText={(search) => this.setState({search})}\n          onCloseIcon={() => this.setState({search: ''})}\n        />\n      </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={`Searchfield is a convenient component for displaying a simple search component.`}\n    code={code}\n    scope={{ View, Searchfield, Image }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/searchfield/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/searchfield/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { SearchField } from 'material-bread';\n\nclass Demo extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      search: ''\n    }\n  }\n  render() {\n    return (\n      <View>\n        <SearchField \n          color={'#E91E63'}\n          value={this.state.search}\n          onChangeText={(search) => this.setState({search})}\n          onCloseIcon={() => this.setState({search: ''})}\n        />\n      </View>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/searchfield/index.js",
    "content": "import React, { Component } from 'react';\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\n\nconst sections = [{ name: 'Component' }, { name: 'Usage' }, { name: 'Props' }];\n\nexport default class SearchBarPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'searchfield'}\n          title={'Searchfield'}\n          description={`Searchfield allows the user to enter and clear a search.`}\n          importCode={`import { Searchfield } from 'material-bread';`}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/searchfield'} />\n          <Usage pageHref={'/components/searchfield'} />\n          <Props pageHref={'/components/searchfield'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/searchfield/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['closeIconProps', 'Override props for closeIcon', 'object', ''],\n  ['color', 'Background color', 'string', 'white'],\n  ['inputProps', 'Override props for inputProps', 'object', ''],\n  ['inputRef', 'Catch the reference of the TextInput component', 'func', ''],\n  ['onChangeText', 'Callback when text is changed', 'func', ''],\n  ['onCloseIcon', 'Callback when close icon is pressed', 'func', ''],\n  ['onFocus', 'Callback when focused', 'func', ''],\n  ['onBlur', 'Callback when blurred', 'func', ''],\n  ['searchIconProps', 'Override props for searchIcon', 'object', ''],\n  ['style', 'Styles root element', 'object', ''],\n  ['textStyle', 'Styles text input element', 'object', ''],\n  ['value', 'Search input', 'string', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/select/Demos/TextFieldPropsDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo, CodeInline } from '@components';\nimport { Select, Icon } from '../../../../../../src/index';\n\nexport const code = `class DropdownPage extends React.Component {\n    constructor(props) {\n      super(props)\n      this.state = {\n          selectedItem: '',\n          selectedItemTwo: '',\n          selectedItemThree: ''\n      }\n    }\n    render() {\n      const data = [\n        { id: 1, name: 'Option 1' },\n        { id: 2, name: 'Option 2' },\n        { id: 3, name: 'Option 3' },\n      ];\n      return (\n        <View >\n          <Select\n            label={'Select'}\n            menuItems={data}\n            onSelect={value => this.setState({ selectedItem: value.name })}\n            selectedItem={this.state.selectedItem}\n            textFieldProps={{\n              leadingIcon: (\n                <Icon name={'date-range'} size={24} color={'#6e6e6e'} />\n              ),\n            }}\n          />\n          <Select\n            label={'Select'}\n            type={'filled'}\n            menuItems={data}\n            onSelect={value => this.setState({ selectedItemTwo: value.name })}\n            selectedItem={this.state.selectedItemTwo}\n            textFieldProps={{\n              leadingIcon: (\n                <Icon name={'date-range'} size={24} color={'#6e6e6e'} />\n              ),\n            }}\n          />\n          <Select\n            label={'Select'}\n            type={'outlined'}\n            menuItems={data}\n            onSelect={value => this.setState({ selectedItemThree: value.name })}\n            selectedItem={this.state.selectedItemThree}\n            textFieldProps={{\n              leadingIcon: (\n                <Icon name={'date-range'} size={24} color={'#6e6e6e'} />\n              ),\n            }}\n          />\n        </View>\n      );\n    }\n  }`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'TextField Props'}\n    sectionHref={`${pageHref}#textfield-props`}\n    sectionId={'textfield-props'}\n    code={code}\n    description={\n      <div>\n        You can manipulate the base{' '}\n        <CodeInline code=\"TextField\" type=\"element\" /> component by passing in{' '}\n        <CodeInline code=\"textFieldProps\" type=\"prop\" />. This allows for\n        example to add a <CodeInline code=\"leadingIcon\" type=\"prop\" />.\n      </div>\n    }\n    scope={{ View, Select, Icon }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/select/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport TextFieldPropsDemo from './TextFieldPropsDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n        <TextFieldPropsDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/select/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { Select } from '../../../../../src/';\n\nexport const code = `class DropdownPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n        selectedItem: '',\n        selectedItemTwo: '',\n        selectedItemThree: ''\n    }\n  }\n  render() {\n    const data = [\n      { id: 1, name: 'Option 1' },\n      { id: 2, name: 'Option 2' },\n      { id: 3, name: 'Option 3' },\n    ];\n    return (\n      <View >\n        <Select\n          label={'Select'}\n          menuItems={data}\n          onSelect={value => this.setState({ selectedItem: value.name })}\n          selectedItem={this.state.selectedItem}\n        />\n        <Select\n          label={'Select'}\n          type={'filled'}\n          menuItems={data}\n          onSelect={value => this.setState({ selectedItemTwo: value.name })}\n          selectedItem={this.state.selectedItemTwo}\n        />\n        <Select\n          label={'Select'}\n          type={'outlined'}\n          menuItems={data}\n          onSelect={value => this.setState({ selectedItemThree: value.name })}\n          selectedItem={this.state.selectedItemThree}\n        />\n      </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        <CodeInline code=\"Select\" type=\"element\" /> or Exposed Menus allow\n        selecting an item from a dropdown. The base component is built from the{' '}\n        <CodeInline code=\"Menu\" type=\"element\" /> and{' '}\n        <CodeInline code=\"TextField\" type=\"element\" /> components. You can pass\n        any props down to them using <CodeInline code=\"menuProps\" type=\"prop\" />{' '}\n        and <CodeInline code=\"textFieldProps\" type=\"prop\" />.\n      </div>\n    }\n    code={code}\n    scope={{ View, Select, Image }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/select/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/select/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { Select } from 'material-bread';\n\nclass SelectPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n        selectedItem: ''\n    }\n  }\n  render() {\n    const data = [\n      { id: 1, name: 'Option 1' },\n      { id: 2, name: 'Option 2' },\n      { id: 3, name: 'Option 3' },\n    ];\n    return (\n      <Select\n        label={'Select'}\n        menuItems={data}\n        onSelect={value => this.setState({ selectedItem: value.name })}\n        selectedItem={this.state.selectedItem}\n      />\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/select/index.js",
    "content": "import React, { Component } from 'react';\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'textfield props', sub: true },\n];\n\nexport default class DropdownPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'select'}\n          title={'Select'}\n          description={`Exposed dropdown menus display the currently selected menu item above the menu.`}\n          importCode={`import { Select } from 'material-bread';`}\n          docsLink={\n            'https://material.io/design/components/menus.html#exposed-dropdown-menu'\n          }\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/select'} />\n          <Usage pageHref={'/components/select'} />\n          <Props pageHref={'/components/select'} />\n          <Demos pageHref={'/components/select'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/select/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  [\n    'buttonStyle',\n    'Styles for wrapping container around the input',\n    'object',\n    '',\n  ],\n  ['fullWidth', 'Forces select button to be 100% width', 'bool', 'false'],\n  ['label', 'Label for textinput', 'string', ''],\n\n  ['menuItems', 'Items to display in menu dropdown', 'array', ''],\n  ['menuProps', 'Pass any props down to the Menu', 'object', ''],\n  ['onSelect', 'Callback when selecting new menu item', 'func', ''],\n  ['selectedItem', 'Item currently selected', 'string', ''],\n  ['style', 'Styles root element', 'object', ''],\n  [\n    'textFieldProps',\n    'Pass any textFieldProps down the TextField',\n    'object',\n    '',\n  ],\n  [\n    'type',\n    'Chooses the style of select, outlined, flat, filled ',\n    'string',\n    'flat',\n  ],\n  ['visible', 'Whether menu is visible', 'bool', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/sheet-bottom/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { SheetBottom, Button, List, ListItem, Icon } from '../../../../../src/';\n\nexport const code = `class MainDemo extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n        visible: false,\n    }\n  }\n  render() {\n    return (\n      <View style={{ flex: 1}}>\n        <Button\n          text=\"Open Sheet\"\n          onPress={() => {\n            this.setState({ visible: true });\n          }}\n        />\n        <SheetBottom\n          visible={this.state.visible}\n          onBackdropPress={() => this.setState({ visible: false })}\n          onSwipeDown={() => this.setState({ visible: false })}>\n          <List>\n            <ListItem\n              text={'Attractions'}\n              icon={<Icon name={'local-movies'} size={24} />}\n            />\n            <ListItem\n              text={'Dining'}\n              icon={<Icon name={'local-dining'} size={24} />}\n            />\n            <ListItem\n              text={'Education'}\n              icon={<Icon name={'edit'} size={24} />}\n            />\n            <ListItem\n              text={'Health'}\n              icon={<Icon name={'favorite'} size={24} />}\n            />\n            <ListItem\n              text={'Family'}\n              icon={<Icon name={'group'} size={24} />}\n            />\n          \n          </List>\n        </SheetBottom>\n      </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        <CodeInline code=\"SheetBottom\" type=\"element\" /> animates from the\n        bottom of the screen to show more items. You can manually control swipe\n        up and down by using <CodeInline code=\"onSwipeUp\" type=\"element\" /> and{' '}\n        <CodeInline code=\"onSwipeDown\" type=\"element\" />.\n      </div>\n    }\n    code={code}\n    scope={{ View, SheetBottom, Button, List, ListItem, Icon, Image }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/sheet-bottom/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/sheet-bottom/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { SheetBottom, Button, List, ListItem, Icon  } from 'material-bread';\n\nclass SelectPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n        visible: false\n    }\n  }\n  render() {\n    return (\n      <View style={{ flex: 1}}>\n        <Button\n          text=\"Open Sheet\"\n          onPress={() => {\n            this.setState({ visible: true });\n          }}\n        />\n        <SheetBottom\n          visible={this.state.visible}\n          onBackdropPress={() => this.setState({ visible: false })}\n          onSwipeDown={() => this.setState({ visible: false })}>\n          <List>\n            <ListItem\n              text={'Attractions'}\n              icon={<Icon name={'local-movies'} size={24} />}\n            />\n            <ListItem\n              text={'Dining'}\n              icon={<Icon name={'local-dining'} size={24} />}\n            />\n            <ListItem\n              text={'Education'}\n              icon={<Icon name={'edit'} size={24} />}\n            />\n            <ListItem\n              text={'Health'}\n              icon={<Icon name={'favorite'} size={24} />}\n            />\n            <ListItem\n              text={'Family'}\n              icon={<Icon name={'group'} size={24} />}\n            />\n          \n          </List>\n        </SheetBottom>\n      </View>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/sheet-bottom/index.js",
    "content": "import React, { Component } from 'react';\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\n\nconst sections = [{ name: 'Component' }, { name: 'Usage' }, { name: 'Props' }];\n\nexport default class DropdownPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'sheet-bottom'}\n          title={'SheetBottom'}\n          description={`Bottom sheets are surfaces containing supplementary content that are anchored to the bottom of the screen.\n          `}\n          importCode={`import { SheetBottom } from 'material-bread';`}\n          docsLink={'https://material.io/design/components/sheets-bottom.html#'}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/sheet-bottom'} />\n          <Usage pageHref={'/components/sheet-bottom'} />\n          <Props pageHref={'/components/sheet-bottom'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/sheet-bottom/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  [\n    'cardVerticalPadding',\n    'Padding vertical on the sheet, this used in calculating the position',\n    'number',\n    '20',\n  ],\n\n  ['duration', 'How long the hide animation takes', 'number', '200ms'],\n  [\n    'onBackdropPress',\n    'Callback when mask is pressed, usually to close sheet',\n    'func',\n    '',\n  ],\n  [\n    'onSwipeDown',\n    'Callback on swiping down, usually to close sheet',\n    'func',\n    '',\n  ],\n  ['onSwipeUp', 'Callback on swiping up', 'func', ''],\n  [\n    'pageHeight',\n    \"Manually control the height of the page, useful for demos or sheets that shouldn't take up the whole page\",\n    'number',\n    'ScreenHeight',\n  ],\n  ['style', 'Styles sheet element', 'object', ''],\n\n  ['visible', 'Toggles Sheet animation', 'bool', ''],\n  ['wrapperStyles', 'Styles wrapper around the whole page', 'object', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/sheet-side/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { SheetSide, Button, List, ListItem, Icon } from '../../../../../src/';\n\nexport const code = `class MainDemo extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n        visible: false,\n    }\n  }\n  render() {\n    return (\n      <View style={{ flex: 1}}>\n        <Button\n          text=\"Open Sheet\"\n          onPress={() => {\n            this.setState({ visible: true });\n          }}\n        />\n        <SheetSide\n          visible={this.state.visible}\n          onBackdropPress={() => this.setState({ visible: false })}\n          onSwipeRight={() => this.setState({ visible: false })}>\n          <List>\n            <ListItem\n              text={'Attractions'}\n              icon={<Icon name={'local-movies'} size={24} />}\n            />\n            <ListItem\n              text={'Dining'}\n              icon={<Icon name={'local-dining'} size={24} />}\n            />\n            <ListItem\n              text={'Education'}\n              icon={<Icon name={'edit'} size={24} />}\n            />\n            <ListItem\n              text={'Health'}\n              icon={<Icon name={'favorite'} size={24} />}\n            />\n            <ListItem\n              text={'Family'}\n              icon={<Icon name={'group'} size={24} />}\n            />\n            <ListItem\n              text={'Office'}\n              icon={<Icon name={'content-cut'} size={24} />}\n            />\n            <ListItem\n              text={'Promotions'}\n              icon={<Icon name={'loyalty'} size={24} />}\n            />\n          </List>\n        </SheetSide>\n      </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        <CodeInline code=\"SheetSide\" type=\"element\" /> animates from the left or\n        right of the screen to show whatever you want. You can manually control\n        swipe left and right on the sheet by using{' '}\n        <CodeInline code=\"onSwipeRight\" type=\"element\" /> and{' '}\n        <CodeInline code=\"onSwipeLeft\" type=\"element\" />.\n      </div>\n    }\n    code={code}\n    scope={{ View, SheetSide, Button, List, ListItem, Icon, Image }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/sheet-side/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/sheet-side/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { SheetSide, Button, List, ListItem, Icon  } from 'material-bread';\n\nclass SelectPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n        visible: false\n    }\n  }\n  render() {\n    return (\n      <View style={{ flex: 1}}>\n        <Button\n          text=\"Open Sheet\"\n          onPress={() => {\n            this.setState({ visible: true });\n          }}\n        />\n        <SheetSide\n          visible={this.state.visible}\n          onBackdropPress={() => this.setState({ visible: false })}\n          onSwipeRight={() => this.setState({ visible: false })}>\n          <List>\n            <ListItem\n              text={'Attractions'}\n              icon={<Icon name={'local-movies'} size={24} />}\n            />\n            <ListItem\n              text={'Dining'}\n              icon={<Icon name={'local-dining'} size={24} />}\n            />\n            <ListItem\n              text={'Education'}\n              icon={<Icon name={'edit'} size={24} />}\n            />\n            <ListItem\n              text={'Health'}\n              icon={<Icon name={'favorite'} size={24} />}\n            />\n            <ListItem\n              text={'Family'}\n              icon={<Icon name={'group'} size={24} />}\n            />\n            <ListItem\n              text={'Office'}\n              icon={<Icon name={'content-cut'} size={24} />}\n            />\n            <ListItem\n              text={'Promotions'}\n              icon={<Icon name={'loyalty'} size={24} />}\n            />\n          </List>\n        </SheetSide>\n      </View>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/sheet-side/index.js",
    "content": "import React, { Component } from 'react';\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\n\nconst sections = [{ name: 'Component' }, { name: 'Usage' }, { name: 'Props' }];\n\nexport default class DropdownPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'sheet-side'}\n          title={'SheetSide'}\n          description={`Side sheets are surfaces containing supplementary content that are anchored to the left or right edge of the screen.\n          `}\n          importCode={`import { SheetSide } from 'material-bread';`}\n          docsLink={'https://material.io/design/components/sheets-side.html#'}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/sheet-side'} />\n          <Usage pageHref={'/components/sheet-side'} />\n          <Props pageHref={'/components/sheet-side'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/sheet-side/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  [\n    'cardVerticalPadding',\n    'Padding vertical on the sheet, this used in calculating the position',\n    'number',\n    '20',\n  ],\n\n  ['duration', 'How long the hide animation takes', 'number', '200ms'],\n  [\n    'onBackdropPress',\n    'Callback when mask is pressed, usually to close sheet',\n    'func',\n    '',\n  ],\n  [\n    'onSwipeLeft',\n    'Callback on swiping left, usually to close sheet',\n    'func',\n    '',\n  ],\n  [\n    'onSwipeRight',\n    'Callback on swiping right, usually to close sheet',\n    'func',\n    '',\n  ],\n  [\n    'pageHeight',\n    \"Manually control the height of the page, useful for demos or sheets that shouldn't take up the whole page\",\n    'number',\n    'ScreenHeight',\n  ],\n  [\n    'pageWidth',\n    \"Manually control the width of the page, useful for demos or sheets that shouldn't take up the whole page\",\n    'number',\n    'ScreenHeight',\n  ],\n  [\n    'sheetWidth',\n    'Sheetwidth on the web, no effect on widthPercentage',\n    'number',\n    '300',\n  ],\n  ['side', 'Determines the side the sheet appears on', 'string', 'right'],\n  ['style', 'Styles sheet element', 'object', ''],\n\n  ['visible', 'Toggles Sheet animation', 'bool', ''],\n  [\n    'widthPercentage',\n    'Percentage of the screen the sheet should take up on mobile, no effect on web',\n    'number',\n    '.8',\n  ],\n  ['wrapperStyles', 'Styles wrapper around the whole page', 'object', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/slider/Demos/RangedDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { Slider, Icon } from '../../../../../../src/index';\n\nexport const code = `class Sliders extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      slider: 40,\n      sliderTwo: 80\n    }\n  }\n  render() {\n    return (\n      <View >\n        <Slider\n          values={[this.state.slider, this.state.sliderTwo]}\n          sliderLength={200}\n          max={100}\n          onValueChange={value => store.set({ slider: value })}\n        />\n\n        <Slider\n          values={[this.state.slider, this.state.sliderTwo]}\n          sliderLength={200}\n          max={100}\n          disableOne={true}\n          onValueChange={value => this.setState({ sliderTwo: value })}\n        />\n\n        <Slider\n          values={[this.state.slider, this.state.sliderTwo]}\n          sliderLength={200}\n          max={100}\n          disableOne={true}\n          disableTwo={true}\n          onValueChange={value => this.setState({ sliderTwo: value })}\n        />\n      </View>\n    );\n  }\n}`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Ranged Sliders'}\n    sectionHref={`${pageHref}#ranged`}\n    sectionId={'ranged'}\n    code={code}\n    scope={{ View, Slider, Icon }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/slider/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport RangedDemo from './RangedDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n        <RangedDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/slider/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { Slider } from '../../../../../src/';\n\nexport const code = `class Sliders extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      slider: 40,\n      sliderTwo: 20,\n      sliderThree: 60\n    }\n  }\n  render() {\n    return (\n      <View >\n        <Slider\n          values={[this.state.slider]}\n          sliderLength={200}\n          max={100}\n          onValueChange={value => store.set({ slider: value })}\n        />\n\n        <Slider\n          values={[this.state.sliderTwo]}\n          sliderLength={200}\n          max={100}\n          disableOne={true}\n          onValueChange={value => this.setState({ sliderTwo: value })}\n        />\n\n        <Slider\n          values={[this.state.sliderThree]}\n          sliderLength={200}\n          max={100}\n          onValueChange={value => this.setState({ sliderThree: value })}\n          markerSize={16}\n          trackHeight={8}\n          trackStyle={{borderRadius: 99}}\n        />\n      </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        A <CodeInline code=\"Slider\" type=\"element\" /> can show with one marker\n        or two markers. Two markers is called a Ranged slider.\n      </div>\n    }\n    code={code}\n    scope={{ View, Slider, Image }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/slider/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/slider/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { Slider } from 'material-bread';\n\nclass Sliders extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      slider: 40,\n      sliderTwo: 20\n    }\n  }\n  render() {\n    return (\n      <View >\n        <Slider\n          values={[this.state.slider]}\n          sliderLength={200}\n          max={100}\n          onValueChange={value => store.set({ slider: value })}\n        />\n\n        <Slider\n          values={[this.state.sliderTwo]}\n          sliderLength={200}\n          max={100}\n          disableOne={true}\n          onValueChange={value => this.setState({ sliderTwo: value })}\n        />\n      </View>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/slider/index.js",
    "content": "import React, { Component } from 'react';\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'ranged', sub: true },\n];\n\nexport default class DropdownPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'slider'}\n          title={'Slider'}\n          description={`Sliders allow users to make selections from a range of values.`}\n          importCode={`import { Slider } from 'material-bread';`}\n          docsLink={'https://material.io/design/components/sliders.html#'}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/slider'} />\n          <Usage pageHref={'/components/slider'} />\n          <Props pageHref={'/components/slider'} />\n          <Demos pageHref={'/components/slider'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/slider/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['allowOverlap', 'Allow overlap for markers', 'bool', 'false'],\n  ['disableOne', 'Disables marker on the left', 'bool', ''],\n  ['disableTwo', 'Disables marker on the right', 'bool', ''],\n  ['markerColor', 'Color of marker', 'string', 'theme.primary.main'],\n  ['markerSize', 'The size of the markers', 'number', 12],\n  ['max', 'Maximum number for the either marker', 'number', '100'],\n  ['min', 'Minium number for the either marker', 'number', '0'],\n  ['onValuesChange', 'Callback as values change', 'func', ''],\n  ['onValuesChangeEnd', 'Callback when letting go of marker', 'func', ''],\n  ['sliderLength', 'The defined width of the slider', 'number', '280'],\n  ['step', 'Number that marker jumps to next value', 'number', '1'],\n  ['style', 'Styles root element', 'object', ''],\n  ['trackColor', 'Color of track', 'string', 'theme.primary.main'],\n  ['backgroundTrackColor', 'Color of background track', 'string', '#CECECE'],\n  ['trackHeight', 'The height of the track', 'number', 2],\n  ['trackStyle', 'Styles the track', 'object', ''],\n  ['values', 'Array of starting values for each marker', 'array', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/snackbar/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentMainDemo } from '@components';\nimport { Snackbar, Button } from '../../../../../src/index';\n\nexport const code = `class Demo extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      show: false\n    }\n  }\n  render() {\n    return (\n      <View >\n        <Button\n          type=\"outlined\"\n          onPress={() => this.setState({ show: true })}\n          textColor={'#6E2CFA'}\n          text={'Open Snackbar'}\n        />\n        <Snackbar\n          visible={this.state.show}\n          action={\n            <Button\n              type=\"text\"\n              onPress={() => this.setState({ show: false })}\n              text={'ok'}\n              textColor={'#6E2CFA'}\n            />\n          }>\n          {'This is a snackbar component'}\n        </Snackbar>\n      </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={`Snackbars will show at the bottom of the containing component.`}\n    code={code}\n    scope={{ View, Snackbar, Button, Image }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/snackbar/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/snackbar/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { Snackbar, Button } from 'material-bread';\n\nclass Demo extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      show: false\n    }\n  }\n  render() {\n    return (\n      <View >\n        <Button\n          type=\"outlined\"\n          onPress={() => this.setState({ show: true })}\n          textColor={'#6E2CFA'}\n          text={'Open Snackbar'}\n        />\n        <Snackbar\n          visible={this.state.show}\n          action={\n            <Button\n              type=\"text\"\n              onPress={() => this.setState({ show: false })}\n              text={'ok'}\n              textColor={'#6E2CFA'}\n            />\n          }>\n          {'This is a snackbar component'}\n        </Snackbar>\n      </View>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/snackbar/index.js",
    "content": "import React, { Component } from 'react';\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\n\nconst sections = [{ name: 'Component' }, { name: 'Usage' }, { name: 'Props' }];\n\nexport default class Snackbarpage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'snackbar'}\n          title={'Snackbar'}\n          description={`Snackbars provide brief messages about app processes at the bottom of the screen.`}\n          importCode={`import { Snackbar } from 'material-bread';`}\n          docsLink={'https://material.io/design/components/snackbars.html'}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/snackbar'} />\n          <Usage pageHref={'/components/snackbar'} />\n          <Props pageHref={'/components/snackbar'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/snackbar/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  [\n    'animationDuration',\n    'Duration of entering and leaving animation',\n    'number',\n    '',\n  ],\n  ['action', 'The action after the message, at the end of the snackbar', 'node', ''],\n  ['style', 'Styles root element', 'object', ''],\n  ['visible', 'Whether snackbar is visible', 'bool', 'false'],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/swipenav/Demos/SwipeFooter.js",
    "content": "import React from 'react';\nimport { View, Text, Platform } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport {\n  SwipeNav,\n  BottomNavigation,\n  Card,\n  CardContent,\n} from '../../../../../../src/index';\n\nconst SimpleCard = ({ hours, title, description }) => {\n  return (\n    <Card\n      shadow={3}\n      style={{ maxWidth: 500, width: '100%', marginBottom: 6, marginTop: 6 }}>\n      <CardContent>\n        <Text\n          style={{ color: 'rgba(0,0,0,.6)', fontSize: 14, marginBottom: 6 }}>\n          {hours}\n        </Text>\n        <Text\n          style={{ color: 'rgba(0,0,0,1)', fontSize: 16, marginBottom: 10 }}>\n          {title}\n        </Text>\n        <Text style={{ color: 'rgba(0,0,0,.8)', fontSize: 14 }}>\n          {description}\n        </Text>\n      </CardContent>\n    </Card>\n  );\n};\n\nconst BodyContent = () => {\n  return (\n    <View\n      style={{\n        backgroundColor: 'salmon',\n        paddingLeft: 8,\n        paddingRight: 8,\n      }}>\n      <SimpleCard\n        hours={'2 hours ago'}\n        title={'Woman Opens Two Chrome Tabs'}\n        description={\n          'After downloading 128GB of RAM on her custom desktop, Karen was able to open two Chrome tabs at the same time which experts have called \"Revolutionary\"'\n        }\n      />\n      <SimpleCard\n        hours={'3 hours ago'}\n        title={'Local developer wastes time'}\n        description={\n          'A local develop wastes his Sunday writing placeholder text for a demo instead of going outside'\n        }\n      />\n      <SimpleCard\n        hours={'4 hours ago'}\n        title={'Bitcoin dead again'}\n        description={\n          'Bitcoin has died yet again after falling .2% in 1 hour says leading economist.'\n        }\n      />\n      <SimpleCard\n        hours={'6 hours ago'}\n        title={'Bitcoin going to the moon'}\n        description={\n          'Bitcoin has risen 11.4% in the last 5 minutes which has some experts predicating the start of the next bull run'\n        }\n      />\n\n      <SimpleCard\n        hours={'8 hours ago'}\n        title={'U.S Tech Startups rebound'}\n        description={\n          'Favorable Business Conditions have allowed startups to secure more fundraising deals compared to last year.'\n        }\n      />\n      <SimpleCard\n        hours={'9 hours ago'}\n        title={\"Asia's clean energy initiatives\"}\n        description={\n          'China Plans to invest billions of dollars for the development of over 300 clean energy projects in SouthEast Asia'\n        }\n      />\n      <SimpleCard\n        hours={'10 hours ago'}\n        title={'Copper on the rise'}\n        description={\n          'Copper prices soar admid global market optimism and increasing demand'\n        }\n      />\n      <SimpleCard\n        hours={'11 hours ago'}\n        title={'Poverty to Empowerment in Chicago'}\n        description={\n          'How one woman is transforming the lives of underpriveledged children.'\n        }\n      />\n    </View>\n  );\n};\n\nexport const code = `class Demo extends React.Component {\n    constructor(props) {\n      super(props)\n    }\n    render() {\n      return (\n        <View style={{ height: '100%', maxWidth: 500, overflowY: 'hidden' }}>\n          <SwipeNav\n            footer={\n            <BottomNavigation\n                style={{ maxWidth: 672, width: '100%' }}\n                value={true}\n                showLabels\n                actionItems={[\n                { label: 'Buy' },\n                { label: 'Sell' },\n                { label: 'Settings' },\n                ]}\n            />\n            }\n            scrollViewStyle={{\n                height: 400,\n                overflow: 'hidden',\n            }}>\n           <BodyContent />\n          </SwipeNav>\n        </View>\n      );\n    }\n  }`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Swipe Footer'}\n    sectionHref={`${pageHref}#footer`}\n    sectionId={'footer'}\n    code={code}\n    scope={{\n      View,\n      SwipeNav,\n      BottomNavigation,\n      Card,\n      CardContent,\n      Text,\n      Platform,\n      SimpleCard,\n      BodyContent,\n    }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/swipenav/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport SwipeFooter from './SwipeFooter';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n        <SwipeFooter pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/swipenav/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Text } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { SwipeNav, Appbar, Card, CardContent } from '../../../../../src/index';\n\nconst SimpleCard = ({ hours, title, description }) => {\n  return (\n    <Card\n      shadow={3}\n      style={{ maxWidth: 500, width: '100%', marginBottom: 6, marginTop: 6 }}>\n      <CardContent>\n        <Text\n          style={{ color: 'rgba(0,0,0,.6)', fontSize: 14, marginBottom: 6 }}>\n          {hours}\n        </Text>\n        <Text\n          style={{ color: 'rgba(0,0,0,1)', fontSize: 16, marginBottom: 10 }}>\n          {title}\n        </Text>\n        <Text style={{ color: 'rgba(0,0,0,.8)', fontSize: 14 }}>\n          {description}\n        </Text>\n      </CardContent>\n    </Card>\n  );\n};\n\nconst BodyContent = () => {\n  return (\n    <View\n      style={{\n        backgroundColor: 'salmon',\n        paddingLeft: 8,\n        paddingRight: 8,\n      }}>\n      <SimpleCard\n        hours={'2 hours ago'}\n        title={'Woman Opens Two Chrome Tabs'}\n        description={\n          'After downloading 128GB of RAM on her custom desktop, Karen was able to open two Chrome tabs at the same time which experts have called \"Revolutionary\"'\n        }\n      />\n      <SimpleCard\n        hours={'3 hours ago'}\n        title={'Local developer wastes time'}\n        description={\n          'A local develop wastes his Sunday writing placeholder text for a demo instead of going outside'\n        }\n      />\n      <SimpleCard\n        hours={'4 hours ago'}\n        title={'Bitcoin dead again'}\n        description={\n          'Bitcoin has died yet again after falling .2% in 1 hour says leading economist.'\n        }\n      />\n      <SimpleCard\n        hours={'6 hours ago'}\n        title={'Bitcoin going to the moon'}\n        description={\n          'Bitcoin has risen 11.4% in the last 5 minutes which has some experts predicating the start of the next bull run'\n        }\n      />\n\n      <SimpleCard\n        hours={'8 hours ago'}\n        title={'U.S Tech Startups rebound'}\n        description={\n          'Favorable Business Conditions have allowed startups to secure more fundraising deals compared to last year.'\n        }\n      />\n      <SimpleCard\n        hours={'9 hours ago'}\n        title={\"Asia's clean energy initiatives\"}\n        description={\n          'China Plans to invest billions of dollars for the development of over 300 clean energy projects in SouthEast Asia'\n        }\n      />\n      <SimpleCard\n        hours={'10 hours ago'}\n        title={'Copper on the rise'}\n        description={\n          'Copper prices soar admid global market optimism and increasing demand'\n        }\n      />\n      <SimpleCard\n        hours={'11 hours ago'}\n        title={'Poverty to Empowerment in Chicago'}\n        description={\n          'How one woman is transforming the lives of underpriveledged children.'\n        }\n      />\n    </View>\n  );\n};\n\nexport const code = `class Demo extends React.Component {\n  constructor(props) {\n    super(props)\n  }\n  render() {\n\n    return (\n      <View style={{ height: '100%', maxWidth: 500, overflowY: 'hidden' }}>\n        <SwipeNav\n          header={\n            <Appbar\n              barType={'normal'}\n              color={'#009688'}\n              navigation={'menu'}\n              title={'News'}\n              actionItems={[{ name: 'more-vert' }]}\n            />\n          }\n          scrollViewStyle={{ height: 500 }}>\n          <BodyContent />\n        </SwipeNav>\n      </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        <CodeInline code=\"SwipeNav\" type=\"element\" /> wraps your content with a{' '}\n        <CodeInline code=\"ScrollView\" type=\"element\" /> and hides the header or\n        footer. The header hides on scroll down and shows on scroll up while the\n        footer hides on scroll up and shows on scroll down. You can also pass in\n        a custom scroll componnt like a{' '}\n        <CodeInline code=\"FlatList\" type=\"element\" /> for more control.\n      </div>\n    }\n    code={code}\n    scope={{\n      View,\n      SwipeNav,\n      Appbar,\n      Card,\n      CardContent,\n      Text,\n      SimpleCard,\n      BodyContent,\n    }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/swipenav/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/swipenav/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React from 'react';\nimport { View, Text } from 'react-native';\nimport { SwipeNav, Appbar, Button } from 'material-bread';\n\nclass Demo extends React.Component {\n  constructor(props) {\n    super(props)\n  }\n  render() {\n    return (\n      <View>\n        <SwipeNav\n          header={\n            <Appbar\n              barType={'normal'}\n              color={'#009688'}\n              navigation={'menu'}\n              title={'News'}\n              actionItems={[{ name: 'more-vert' }]}\n            />\n          }>\n          <View>\n            <Text>Content</Text>\n          </View>\n        </SwipeNav>\n      </View>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/swipenav/index.js",
    "content": "import React, { Component } from 'react';\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'footer', sub: true },\n];\n\nexport default class Snackbarpage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'swipnav'}\n          title={'SwipeNav'}\n          description={`SwipeNav shows and hides headers and footer on scroll`}\n          importCode={`import { SwipeNav } from 'material-bread';`}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/swipenav'} />\n          <Usage pageHref={'/components/swipenav'} />\n          <Props pageHref={'/components/swipenav'} />\n          <Demos pageHref={'/components/slider'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/swipenav/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['header', 'Header component that renders above the content', 'node', ''],\n  ['headerContainerStyle', 'Styles container around header', 'object', ''],\n  ['footer', 'Footer component that renders below the content', 'node', ''],\n  ['footerContainerStyle', 'Styles container around footer', 'object', ''],\n  ['scrollComponent', 'Custom scroll component', 'node', ''],\n\n  ['scrollViewProps', 'Props spread onto the scrollview', 'object', ''],\n  ['scrollViewStyle', 'Styles scrollview', 'object', ''],\n  ['style', 'Styles root element', 'object', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/switch/Demos/LabelsDemo.js",
    "content": "import React from 'react';\nimport { View, Text } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { Switch, BodyText } from '../../../../../../src/index';\n\nexport const code = `class Demo extends React.Component {\n    constructor(props) {\n      super(props)\n      this.state = {\n        checkedOne: false,\n        checkedTwo: true,\n        checkedThree: true\n      }\n    }\n    render() {\n      return (\n        <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>\n            <Switch\n              onPress={() => this.setState({ checkedOne: !this.state.checkedOne })}\n              checked={this.state.checkedOne}\n              style={{ marginRight: 8 }}\n              label={<BodyText text={'$'} />}\n            />\n            <Switch\n              color={'#E91E63'}\n              onPress={() => this.setState({ checkedTwo: !this.state.checkedTwo })}\n              checked={this.state.checkedTwo}\n              style={{ marginRight: 8 }}\n              label={<BodyText style={{color: '#E91E63'}}>Label</BodyText>}\n            />\n            <Switch\n              color={'#009688'}\n              onPress={() => this.setState({ checkedThree: !this.state.checkedThree })}\n              checked={this.state.checkedThree}\n              label={<BodyText text={'$'} />}\n              labelPos={'left'}\n              style={{ marginLeft: 16 }}\n            />\n        </View>\n      );\n    }\n  }`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Labels'}\n    sectionHref={`${pageHref}#labels`}\n    sectionId={'labels'}\n    code={code}\n    scope={{ View, Switch, BodyText, Text }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/switch/Demos/LoaderDemo.js",
    "content": "import React from 'react';\nimport { View, Text } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { Switch, BodyText, Button } from '../../../../../../src/index';\n\nexport const code = `class Demo extends React.Component {\n    constructor(props) {\n      super(props)\n      this.state = {\n        checkedOne: true,\n        checkedTwo: true,\n        checkedThree: true,\n        isLoading: true\n      }\n    }\n    render() {\n      return (\n        <View>\n            <View style={{flexDirection: 'row', flexWrap: 'wrap', marginBottom: 12}}>\n                <Switch\n                onPress={() => this.setState({ checkedOne: !this.state.checkedOne })}\n                checked={this.state.checkedOne}\n                style={{ marginRight: 8 }}\n                loading={this.state.isLoading}\n                />\n                <Switch\n                color={'#E91E63'}\n                onPress={() => this.setState({ checkedTwo: !this.state.checkedTwo })}\n                checked={this.state.checkedTwo}\n                style={{ marginRight: 8 }}\n                loading={this.state.isLoading}\n                />\n                <Switch\n                color={'#009688'}\n                onPress={() => this.setState({ checkedThree: !this.state.checkedThree })}\n                checked={this.state.checkedThree}\n                label={<BodyText text={'$'} />}\n                labelPos={'left'}\n                loading={this.state.isLoading}\n                />\n            </View>\n            <Button\n              text={'Toggle Loading'}\n              type=\"outlined\"\n              onPress={() => this.setState({ isLoading: !this.state.isLoading })}\n            />\n        </View>\n      );\n    }\n  }`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Loader'}\n    sectionHref={`${pageHref}#loader`}\n    sectionId={'loader'}\n    code={code}\n    scope={{ View, Switch, BodyText, Text, Button }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/switch/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport LoaderDemo from './LoaderDemo';\nimport LabelsDemo from './LabelsDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n        <LoaderDemo pageHref={pageHref} />\n        <LabelsDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/switch/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { Switch } from '../../../../../src/index';\n\nexport const code = `class Demo extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      checkedOne: false,\n      checkedTwo: true,\n      checkedThree: true\n    }\n  }\n  render() {\n    return (\n      <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>\n          <Switch\n            onPress={() => this.setState({ checkedOne: !this.state.checkedOne })}\n            checked={this.state.checkedOne}\n            style={{ marginRight: 8 }}\n          />\n          <Switch\n            color={'#E91E63'}\n            onPress={() => this.setState({ checkedTwo: !this.state.checkedTwo })}\n            checked={this.state.checkedTwo}\n            style={{ marginRight: 8 }}\n          />\n          <Switch\n            color={'#009688'}\n            onPress={() => this.setState({ checkedThree: !this.state.checkedThree })}\n            checked={this.state.checkedThree}\n          />\n      </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        The <CodeInline code=\"Switch\" type=\"element\" /> track and knob can be\n        customized by passing in <CodeInline code=\"trackStyle\" type=\"prop\" /> or{' '}\n        <CodeInline code=\"thumbStyle\" type=\"prop\" />.\n      </div>\n    }\n    code={code}\n    scope={{ View, Switch, Image }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/switch/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/switch/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { Switch } from 'material-bread';\n\nclass Demo extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n\n    }\n  }\n  render() {\n    return (\n      <View>\n        <Switch />\n      </View>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/switch/index.js",
    "content": "import React, { Component } from 'react';\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'loader', sub: true },\n  { name: 'labels', sub: true },\n];\n\nexport default class SwitchPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'switch'}\n          title={'Switch'}\n          description={`Switches toggle the state of a single setting on or off.`}\n          importCode={`import { Switch } from 'material-bread';`}\n          docsLink={\n            'https://material.io/design/components/selection-controls.html#switches'\n          }\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/switch'} />\n          <Usage pageHref={'/components/switch'} />\n          <Props pageHref={'/components/switch'} />\n          <Demos pageHref={'/components/switch'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/switch/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['checked', 'Whether switch is checked', 'bool', ''],\n  ['color', 'Color of track and thumb', 'string', ''],\n  [\n    'label',\n    'Renders an aribtrary node on either side of the switch',\n    'node',\n    '',\n  ],\n  ['labelPos', 'Determines the position of the label', 'right'],\n  ['loading', 'Toggles loading state in thumb', 'false'],\n  ['onPress', 'Callback when thumb or label is pressed', 'func', ''],\n  ['style', 'Styles root element', 'object', ''],\n  ['trackStyle', 'Styles the track element', 'object', ''],\n  ['thumbStyle', 'Styles the thumb element', 'object', ''],\n  ['width', 'Scales the switch based on the desired width', 'number', '36'],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/tab/Demos/StyledDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { Tabs, Tab } from '../../../../../../src/index';\n\nexport const code = `class TabsPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      selectedTab: 0\n    }\n  }\n\n  render() {\n    return (\n      <Tabs\n        selectedIndex={this.state.selectedTab}\n        handleChange={index => this.setState({ selectedTab: index })}\n        actionItems={[\n          <Tab key={1} icon=\"phone\" label=\"Recents\" style={{ backgroundColor: '#9C27B0' }} />,\n          <Tab key={2} icon=\"favorite\" label=\"Favorites\" style={{ backgroundColor: '#009688' }} />,\n          <Tab key={3} icon=\"map\" label=\"Nearby\" />,\n          <Tab key={4} icon=\"account-circle\" label=\"Account\" style={{ backgroundColor: '#E91E63' }} />,\n        ]}\n      />\n    );\n  }\n}`;\n\nconst IconDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Styled'}\n    sectionHref={`${pageHref}#styled`}\n    sectionId={'styled'}\n    code={code}\n    scope={{ View, Tabs, Tab }}\n  />\n);\nexport default IconDemo;\n"
  },
  {
    "path": "docs/src/content/components/tab/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport StyledDemo from './StyledDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n\n        <StyledDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/tab/MainDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { Tabs, Tab } from '../../../../../src/index';\n\nexport const code = `class TabsPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      selectedTab: 0\n    }\n  }\n\n  render() {\n    return (\n      <Tabs\n        selectedIndex={this.state.selectedTab}\n        handleChange={index => this.setState({ selectedTab: index })}\n        backgroundColor={'#E91E63'}\n        actionItems={[\n          <Tab key={1} icon=\"favorite\" label=\"Favorites\" />,\n          <Tab key={2} icon=\"music-note\" label=\"Music\" />,\n          <Tab key={3} icon=\"tv\" label=\"Movie\" />,\n          <Tab key={4} icon=\"camera\" label=\"Photo\" />,\n        ]}\n      />\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        Using <CodeInline code=\"Tab\" type=\"element\" /> component directly allows\n        you to customize the <CodeInline code=\"activeTextColor\" type=\"prop\" />,{' '}\n        <CodeInline code=\"inActiveTextColor\" type=\"prop\" />,{' '}\n        <CodeInline code=\"rippleProps\" type=\"prop\" />,{' '}\n        <CodeInline code=\"textStyles\" type=\"prop\" />,{' '}\n        <CodeInline code=\"iconStyles\" type=\"prop\" />, and more.\n      </div>\n    }\n    code={code}\n    scope={{ View, Tabs, Tab }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/tab/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/tab/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { Tabs } from 'material-bread';\n\nclass TabsPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      selectedTab: 0\n    }\n  }\n\n  render() {\n    return (\n      <Tabs\n        selectedIndex={this.state.selectedTab}\n        handleChange={index => this.setState({ selectedTab: index })}\n        actionItems={[\n          { icon: 'phone', label: 'Recents' },\n          { icon: 'favorite', label: 'Favorites' },\n          { icon: 'map', label: 'Nearby' },\n          { icon: 'account-circle', label: 'Account' },\n        ]}\n      />\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/tab/index.js",
    "content": "import React, { Component } from 'react';\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'styled', sub: true },\n];\n\nexport default class TabsPage extends Component {\n  render() {\n    return (\n      <ComponentPageLayout\n        componentName={'tab'}\n        title={'Tab'}\n        description={\n          'Tabs organize content across different screens, data sets, and other interactions.'\n        }\n        docsLink={'https://material.io/design/components/tabs.html#'}\n        importCode={`import { Tab } from 'material-bread';`}\n        sideScrollMenuItems={sections}>\n        <MainDemo pageHref={'/components/tab'} />\n        <Usage pageHref={'/components/tab'} />\n        <Props pageHref={'/components/tab'} />\n        <Demos pageHref={'/components/tab'} />\n      </ComponentPageLayout>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/tab/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['activeTextColor', 'Color when item is active', 'string', '#fff'],\n  ['icon', 'Name of icon component above text', 'string', ''],\n  ['iconStyles', 'Styles for icon element', 'object', ''],\n  [\n    'inActiveTextColor',\n    'Color when item is active',\n    'string',\n    'rgba(255,255,255, .65)',\n  ],\n\n  ['label', 'Displays text under an icon', 'string', ''],\n  ['onPress', 'Callback on item', 'func', ''],\n\n  ['rippleProps', 'Props spread to root ripple component', 'object', ''],\n\n  ['style', 'Styles root element', 'object', ''],\n  ['textStyle', 'Styles for text element', 'object', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/tabs/Demos/IconsOnly.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { Tabs } from '../../../../../../src/index';\n\nexport const code = `class TabsPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      selectedTab: 0\n    }\n  }\n\n  render() {\n    return (\n      <Tabs\n        selectedIndex={this.state.selectedTab}\n        handleChange={index => this.setState({ selectedTab: index })}\n        backgroundColor={'#009688'}\n        actionItems={[\n          { icon: 'access-time' },\n          { icon: 'shopping-cart' },\n          { icon: 'shop' },\n        ]}\n      />\n    );\n  }\n}`;\n\nconst IconDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Icons'}\n    sectionHref={`${pageHref}#icons`}\n    sectionId={'icons'}\n    code={code}\n    scope={{ View, Tabs }}\n  />\n);\nexport default IconDemo;\n"
  },
  {
    "path": "docs/src/content/components/tabs/Demos/LabelsDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { Tabs } from '../../../../../../src/index';\n\nexport const code = `class TabsPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      selectedTab: 0\n    }\n  }\n\n  render() {\n    return (\n      <Tabs\n        selectedIndex={this.state.selectedTab}\n        handleChange={index => this.setState({ selectedTab: index })}\n        backgroundColor={'#9C27B0'}\n        actionItems={[\n          { label: 'Dogs' },\n          { label: 'Cats' },\n          { label: 'Birds' },\n        ]}\n      />\n    );\n  }\n}`;\n\nconst IconDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Labels'}\n    sectionHref={`${pageHref}#labels`}\n    sectionId={'labels'}\n    code={code}\n    scope={{ View, Tabs }}\n  />\n);\nexport default IconDemo;\n"
  },
  {
    "path": "docs/src/content/components/tabs/Demos/ScrollableDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { Tabs } from '../../../../../../src/index';\n\nexport const code = `class TabsPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      selectedTab: 0\n    }\n  }\n\n  render() {\n    return (\n      <Tabs\n        selectedIndex={this.state.selectedTab}\n        handleChange={index => this.setState({ selectedTab: index })}\n        backgroundColor={'#E91E63'}\n        scrollEnabled\n        actionItems={[\n          { icon: 'phone', label: 'Recents' },\n          { icon: 'favorite', label: 'Favorites' },\n          { icon: 'map', label: 'Nearby' },\n          { icon: 'account-circle', label: 'Account' },\n        ]}\n      />\n    );\n  }\n}`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Scrollable'}\n    sectionHref={`${pageHref}#scrollable`}\n    sectionId={'scrollable'}\n    code={code}\n    scope={{ View, Tabs }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/tabs/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport LabelsDemo from './LabelsDemo';\nimport ScrollableDemo from './ScrollableDemo';\nimport IconsOnly from './IconsOnly';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n\n        <LabelsDemo pageHref={pageHref} />\n        <IconsOnly pageHref={pageHref} />\n        <ScrollableDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/tabs/MainDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { Tabs } from '../../../../../src/index';\n\nexport const code = `class TabsPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      selectedTab: 0\n    }\n  }\n\n  render() {\n    return (\n      <Tabs\n        selectedIndex={this.state.selectedTab}\n        handleChange={index => this.setState({ selectedTab: index })}\n        actionItems={[\n          { icon: 'phone', label: 'Recents' },\n          { icon: 'favorite', label: 'Favorites' },\n          { icon: 'map', label: 'Nearby' },\n          { icon: 'account-circle', label: 'Account' },\n        ]}\n      />\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        The <CodeInline code=\"Tabs\" type=\"element\" /> component provides a\n        wrapper around the <CodeInline code=\"Tab\" type=\"element\" />s component\n        to handle the index and <CodeInline code=\"Underline\" type=\"element\" />.\n        You can further customize <CodeInline code=\"actionItems\" type=\"prop\" />{' '}\n        by passing in the <CodeInline code=\"Tab\" type=\"element\" /> component\n        directly.\n      </div>\n    }\n    code={code}\n    scope={{ View, Tabs }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/tabs/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/tabs/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { Tabs } from 'material-bread';\n\nclass TabsPage extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      selectedTab: 0\n    }\n  }\n\n  render() {\n    return (\n      <Tabs\n        selectedIndex={this.state.selectedTab}\n        handleChange={index => this.setState({ selectedTab: index })}\n        actionItems={[\n          { icon: 'phone', label: 'Recents' },\n          { icon: 'favorite', label: 'Favorites' },\n          { icon: 'map', label: 'Nearby' },\n          { icon: 'account-circle', label: 'Account' },\n        ]}\n      />\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/tabs/index.js",
    "content": "import React, { Component } from 'react';\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'labels', sub: true },\n  { name: 'icons', sub: true },\n  { name: 'scrollable', sub: true },\n];\n\nexport default class TabsPage extends Component {\n  render() {\n    return (\n      <ComponentPageLayout\n        componentName={'tabs'}\n        title={'Tabs'}\n        description={\n          'Tabs organize content across different screens, data sets, and other interactions.'\n        }\n        docsLink={'https://material.io/design/components/tabs.html#'}\n        importCode={`import { Tabs } from 'material-bread';`}\n        sideScrollMenuItems={sections}>\n        <MainDemo pageHref={'/components/tabs'} />\n        <Usage pageHref={'/components/tabs'} />\n        <Props pageHref={'/components/tabs'} />\n        <Demos pageHref={'/components/tabs'} />\n      </ComponentPageLayout>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/tabs/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['actionItems', 'Array of objects displaying tab items', 'array', ''],\n  [\n    'backgroundColor',\n    'Background Color for root component',\n    'string',\n    'theme.primary.main',\n  ],\n\n  [\n    'handleChange',\n    'fires when a Tab is clicked, handles changing tabs',\n    'func',\n    '',\n  ],\n  [\n    'scrollEnabled',\n    'Toggles whether tabs should be scrollable or squish to fit into width',\n    'bool',\n    'false',\n  ],\n  ['selectedIndex', 'Index of currently active Item', 'number', ''],\n  ['style', 'Styles root element', 'object', ''],\n  ['underlineColor', 'Color for underline', 'string', 'theme.primary.main'],\n  ['underlineHeight', 'Height for underline', 'number', '2'],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/textfield/Demos/DenseDemo.js",
    "content": "import React from 'react';\nimport { View, Text } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { TextField, Icon } from '../../../../../../src/index';\n\nexport const code = `class Page extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n        one: '',\n        two: '',\n        three: ''\n    }\n  }\n  render() {\n    return (\n        <View >      \n            <TextField\n                type={'flat'}\n                label={'Label'}\n                value={this.state.one}\n                onChangeText={value => this.setState({ one: value })}\n                dense\n            />\n            <TextField\n                type={'filled'}\n                value={this.state.two}\n                onChangeText={value => this.setState({ two: value })}\n                dense\n                containerStyle={{marginVertical: 8}}\n            />\n            <TextField\n                type={'outlined'}\n                label={'Hours'}\n                value={this.state.three}\n                onChangeText={value => this.setState({ three: value })}\n                dense\n            />\n        </View>\n    );\n  }\n}\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Dense '}\n    sectionHref={`${pageHref}#dense`}\n    sectionId={'dense'}\n    code={code}\n    scope={{ View, TextField, Icon, Text }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/textfield/Demos/HelperTextDemo.js",
    "content": "import React from 'react';\nimport { View, Text } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { TextField, Icon } from '../../../../../../src/index';\n\nexport const code = `class Page extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n        one: '',\n        two: '',\n        three: ''\n    }\n  }\n  render() {\n    return (\n        <View >      \n            <TextField\n                type={'flat'}\n                label={'Label'}\n                value={this.state.one}\n                onChangeText={value => this.setState({ one: value })}\n                helperText={'Some helper text here'}\n            />\n            <TextField\n                type={'filled'}\n                label={'Enter Code'}\n                value={this.state.two}\n                onChangeText={value => this.setState({ two: value })}\n                helperText={'5 digits are required'}\n            />\n            <TextField\n                type={'outlined'}\n                label={'Hours'}\n                value={this.state.three}\n                onChangeText={value => this.setState({ three: value })}\n                helperText={'Between 1-24'}\n            />\n        </View>\n    );\n  }\n}\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'HelperText '}\n    sectionHref={`${pageHref}#helper-text`}\n    sectionId={'helper-text'}\n    code={code}\n    scope={{ View, TextField, Icon, Text }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/textfield/Demos/LeadingIconDemo.js",
    "content": "import React from 'react';\nimport { View, Text } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { TextField, Icon } from '../../../../../../src/index';\n\nexport const code = `class Page extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n        one: '',\n        two: '',\n        three: ''\n    }\n  }\n  render() {\n    return (\n        <View >\n            <TextField\n                type={'flat'}\n                containerStyle={{ marginTop: 20 }}\n                label={'Icon'}\n                leadingIcon={\n                    <Icon name={'account-circle'} size={24} color={'#6e6e6e'} />\n                }\n                value={this.state.one}\n                onChangeText={value => this.setState({ one: value })}\n            />\n            <TextField\n                type={'filled'}\n                containerStyle={{ marginTop: 20 }}\n                label={'Icon'}\n                leadingIcon={\n                    <Icon name={'date-range'} size={24} color={'#6e6e6e'} />\n                }\n                value={this.state.two}\n                onChangeText={value => this.setState({ two: value })}\n            />\n            <TextField\n                type={'outlined'}\n                containerStyle={{ marginTop: 20 }}\n                label={'Icon'}\n                leadingIcon={\n                    <Icon name={'album'} size={24} color={'#6e6e6e'} />\n                }\n                value={this.state.three}\n                onChangeText={value => this.setState({ three: value })}\n            />\n        </View>\n    );\n  }\n}\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Leading Icon'}\n    sectionHref={`${pageHref}#leading-icon`}\n    sectionId={'leading-icon'}\n    code={code}\n    scope={{ View, TextField, Icon, Text }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/textfield/Demos/PrefixSuffixDemo.js",
    "content": "import React from 'react';\nimport { View, Text } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { TextField, Caption, BodyText } from '../../../../../../src/index';\n\nexport const code = `class Page extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n        one: '',\n        two: '',\n        three: ''\n    }\n  }\n  render() {\n    return (\n        <View >      \n            <TextField\n                type={'flat'}\n                containerStyle={{ marginTop: 20 }}\n                label={'Icon'}\n                prefix={<BodyText text={'$'} />}\n                suffix={<Caption text=\"lbs\" />}\n                value={this.state.one}\n                onChangeText={value => this.setState({ one: value })}\n            />\n            <TextField\n                type={'filled'}\n                containerStyle={{ marginTop: 20 }}\n                label={'Icon'}\n                prefix={<BodyText text={'$'} />}\n                suffix={<Caption text=\"lbs\" />}\n                value={this.state.two}\n                onChangeText={value => this.setState({ two: value })}\n            />\n            <TextField\n                type={'outlined'}\n                containerStyle={{ marginTop: 20 }}\n                label={'Icon'}\n                prefix={<BodyText text={'$'} />}\n                suffix={<Caption text=\"lbs\" />}\n                value={this.state.three}\n                onChangeText={value => this.setState({ three: value })}\n            />\n        </View>\n    );\n  }\n}\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Prefix and Suffix'}\n    sectionHref={`${pageHref}#prefix-suffix`}\n    sectionId={'prefix-suffix'}\n    code={code}\n    scope={{ View, TextField, Caption, BodyText, Text }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/textfield/Demos/TrailingIconDemo.js",
    "content": "import React from 'react';\nimport { View, Text } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { TextField, IconButton } from '../../../../../../src/index';\n\nexport const code = `class Page extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n        one: '',\n        two: '',\n        three: ''\n    }\n  }\n  render() {\n    return (\n        <View >      \n            <TextField\n                type={'flat'}\n                containerStyle={{ marginTop: 20 }}\n                label={'Icon'}\n                leadingIcon={\n                    <IconButton name={'person'} size={24} color={'#6e6e6e'} />\n                }\n                trailingIcon={\n                    <IconButton name={'clear'} size={24} color={'#6e6e6e'} />\n                }\n                value={this.state.one}\n                onChangeText={value => this.setState({ one: value })}\n            />\n            <TextField\n                type={'filled'}\n                containerStyle={{ marginTop: 20 }}\n                label={'Icon'}\n                leadingIcon={\n                    <IconButton name={'date-range'} size={24} color={'#6e6e6e'} />\n                }\n                trailingIcon={\n                    <IconButton name={'mic'} size={24} color={'#6e6e6e'} />\n                }\n                value={this.state.two}\n                onChangeText={value => this.setState({ two: value })}\n            />\n            <TextField\n                type={'outlined'}\n                containerStyle={{ marginTop: 20 }}\n                label={'Icon'}\n                leadingIcon={\n                    <IconButton name={'mic'} size={24} color={'#6e6e6e'} />\n                }\n                trailingIcon={\n                    <IconButton name={'album'} size={24} color={'#6e6e6e'} />\n                }\n                value={this.state.three}\n                onChangeText={value => this.setState({ three: value })}\n            />\n        </View>\n    );\n  }\n}\n`;\n\nconst SubtitleDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Trailing Icon'}\n    sectionHref={`${pageHref}#trailing-icon`}\n    sectionId={'trailing-icon'}\n    code={code}\n    scope={{ View, TextField, IconButton, Text }}\n  />\n);\nexport default SubtitleDemo;\n"
  },
  {
    "path": "docs/src/content/components/textfield/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport LeadingIconDemo from './LeadingIconDemo';\nimport TrailingIconDemo from './TrailingIconDemo';\nimport HelperTextDemo from './HelperTextDemo';\nimport DenseDemo from './DenseDemo';\nimport PrefixSuffixDemo from './PrefixSuffixDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n        <LeadingIconDemo pageHref={pageHref} />\n        <TrailingIconDemo pageHref={pageHref} />\n        <HelperTextDemo pageHref={pageHref} />\n        <DenseDemo pageHref={pageHref} />\n        <PrefixSuffixDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/textfield/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { TextField } from '../../../../../src/index';\n\nexport const code = `class Demo extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      one: '',\n      two: '',\n      three: ''\n    }\n  }\n  render() {\n    return (\n     <View>\n        <TextField\n          label={'Label'}\n          value={this.state.one}\n          onChangeText={value => this.setState({ one: value })}\n        />\n        <TextField\n          containerStyle={{ marginTop: 20 }}\n          type={'outlined'}\n          label={'Label'}\n          value={this.state.two}\n          onChangeText={value => this.setState({ two: value })}\n        />\n        <TextField\n          containerStyle={{ marginTop: 20 }}\n          type={'filled'}\n          label={'Label'}\n          value={this.state.three}\n          onChangeText={value => this.setState({ three: value })}\n        />\n     </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        <CodeInline code=\"TextField\" type={'element'} /> components can either\n        be <CodeInline code=\"flat\" type={'value'} />,{' '}\n        <CodeInline code=\"filled\" type={'value'} />, or{' '}\n        <CodeInline code=\"outlined\" type={'value'} />. You can also pass any\n        native <CodeInline code=\"TextInput\" type={'element'} /> props and it\n        will be applied to the native element.\n      </div>\n    }\n    code={code}\n    scope={{ View, TextField, Image }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/textfield/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/textfield/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { TextField} from 'material-bread';\n\nclass Demo extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      one: '',\n      two: '',\n      three: ''\n    }\n  }\n  render() {\n    return (\n     <View>\n        <TextField\n          label={'Label'}\n          value={this.state.one}\n          onChangeText={value => this.setState({ one: value })}\n        />\n        <TextField\n          containerStyle={{ marginTop: 20 }}\n          type={'outlined'}\n          value={this.state.two}\n          onChangeText={value => this.setState({ two: value })}\n        />\n        <TextField\n          containerStyle={{ marginTop: 20 }}\n          type={'Filled'}\n          label={'Label'}\n          error={true}\n          value={this.state.two}\n          onChangeText={value => this.setState({ three: value })}\n          helperText={'There is an error'}\n        />\n     </View>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/textfield/index.js",
    "content": "import React, { Component } from 'react';\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'leading icon', sub: true },\n  { name: 'trailing icon', sub: true },\n  { name: 'helper text', sub: true },\n  { name: 'dense', sub: true },\n  { name: 'prefix suffix', sub: true },\n];\n\nexport default class TextFieldPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'textfield'}\n          title={'TextField'}\n          description={`Text fields let users enter and edit text.`}\n          importCode={`import { TextField } from 'material-bread';`}\n          docsLink={'https://material.io/design/components/text-fields.html'}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/textfield'} />\n          <Usage pageHref={'/components/textfield'} />\n          <Props pageHref={'/components/textfield'} />\n          <Demos pageHref={'/components/textfield'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/textfield/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['containerStyle', 'Styles the wrapping element', 'object', ''],\n  ['disabled', 'Whether component is disabled', 'bool', ''],\n  ['error', 'Toggles displaying error', 'bool', ''],\n  ['focused', 'Manual control of focus', 'bool', ''],\n  ['helperText', 'Renders text under the TextField', 'string', ''],\n  ['helperVisible', 'Wether or not helperText is visible', 'bool', ''],\n  ['helperTextStyle', 'Style of helpertext under the textfield', 'object', ''],\n  ['label', 'Display label within textfield', 'string', ''],\n  ['labelColor', 'Color of label within textfield', 'string', ''],\n  ['labelStyle', 'Style of label within textfield', 'object', ''],\n  ['focusedLabelColor', 'Style of label when focused', 'string', ''],\n  ['leadingIcon', 'Render arbitrary node on the left the input', 'node', ''],\n  ['onBlur', 'Callback on input blur', 'func', ''],\n  ['onFocus', 'Callback on input focus', 'func', ''],\n  ['prefix', 'Renders text node on the far leeft', 'node', ''],\n  ['style', 'Styles input element', 'object', ''],\n  ['suffix', 'Renders text node on the far right', 'node', ''],\n  ['trailingIcon', 'Render arbitrary node on the right the input', 'node', ''],\n  ['underlineColor', 'Color of underline when inactive', 'string', ''],\n  [\n    'underlineActiveColor',\n    'Color of underline when active',\n    'string',\n    'theme.main.primary',\n  ],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/togglebutton/Demos/CustomDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { ToggleButton, Icon } from '../../../../../../src/index';\n\nexport const code = `class Demo extends React.Component {\n    constructor(props) {\n      super(props)\n    }\n    render() {\n      const styles = {\n          active: {\n            backgroundColor: 'rgba(0,0,0,.12)',\n            borderWidth: 1,\n            borderColor: 'rgba(0,0,0,.12)',\n            padding: 8,\n          },\n          inactive: {\n            backgroundColor: 'white',\n            borderWidth: 1,\n            borderColor: 'rgba(0,0,0,.12)',\n            padding: 8,\n          }\n      }\n      return (\n        <View style={{ flexDirection: 'row' }}>\n            <ToggleButton\n            activeNode={\n                <View style={styles.active}>\n                    <Icon name=\"format-italic\" size={20} />\n                </View>\n            }\n            inActiveNode={\n                <View style={styles.inactive}>\n                    <Icon name=\"format-italic\" size={20} />\n                </View>\n            }\n            rippleContainerBorderRadius={0}\n            />\n            <ToggleButton\n            activeNode={\n                <View style={[styles.active, {\n                    borderRightWidth: 0,\n                    borderLeftWidth: 0,                      \n                }]}>\n                    <Icon name=\"format-bold\" size={20} />\n                </View>\n            }\n            inActiveNode={\n                <View style={[styles.inactive, {\n                        borderRightWidth: 0,\n                        borderLeftWidth: 0,                      \n                    }]}>\n                    <Icon name=\"format-bold\" size={20} />\n                </View>\n            }\n            rippleContainerBorderRadius={0}\n            />\n            <ToggleButton\n                activeNode={\n                    <View style={styles.active}>\n                        <Icon name=\"format-underlined\" size={20} />\n                    </View>\n                }\n                inActiveNode={\n                    <View style={styles.inactive}>\n                        <Icon name=\"format-underlined\" size={20} />\n                    </View>\n                }\n                rippleContainerBorderRadius={0}\n            />\n        </View>\n      );\n    }\n  }\n`;\n\nconst PushDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Custom'}\n    sectionHref={`${pageHref}#custom`}\n    sectionId={'custom'}\n    code={code}\n    scope={{\n      View,\n      ToggleButton,\n      Icon,\n    }}\n  />\n);\nexport default PushDemo;\n"
  },
  {
    "path": "docs/src/content/components/togglebutton/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport CustomDemo from './CustomDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n        <CustomDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/togglebutton/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { ToggleButton, Icon } from '../../../../../src/index';\n\nexport const code = `class Demo extends React.Component {\n  constructor(props) {\n    super(props)\n  }\n  render() {\n    return (\n      <View style={{ flexDirection: 'row' }}>\n        <ToggleButton\n          activeNode={<Icon name=\"alarm\" size={32} />}\n          inActiveNode={\n            <Icon name=\"alarm\" size={32} style={{ opacity: 0.5 }} />\n          }\n          size={32}\n        />\n        <ToggleButton\n          activeNode={<Icon name=\"face\" size={32} color={'purple'} />}\n          inActiveNode={\n            <Icon\n              name=\"face\"\n              size={32}\n              style={{ opacity: 0.5 }}\n              color={'purple'}\n            />\n          }\n          size={32}\n        />\n        <ToggleButton\n          activeNode={<Icon name=\"favorite\" size={32} />}\n          inActiveNode={<Icon name=\"favorite-border\" size={32} />}\n          size={32}\n        />\n        <ToggleButton\n          activeNode={<Icon name=\"label\" size={32} color={'orange'} />}\n          inActiveNode={\n            <Icon\n              name=\"label-outline\"\n              size={32}\n              style={{ opacity: 0.5 }}\n              color={'orange'}\n            />\n          }\n          size={32}\n        />\n      </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    code={code}\n    description={\n      <div>\n        Pass arbitrary components to{' '}\n        <CodeInline code=\"activeNode\" type=\"prop\" /> and{' '}\n        <CodeInline code=\"inActiveNode\" type=\"prop\" /> and the component will\n        switch when clicked. A common use case is simple opacity shown below,\n        however these can be any.\n      </div>\n    }\n    scope={{ View, ToggleButton, Icon, Image }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/togglebutton/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/togglebutton/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { ToggleButton, Icon } from 'material-bread';\n\nclass Demo extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n\n    }\n  }\n  render() {\n    return (\n      <View>\n        <ToggleButton\n          activeNode={<Icon name=\"alarm\" size={32} />}\n          inActiveNode={\n            <Icon name=\"alarm\" size={32} style={{ opacity: 0.5 }} />\n          }\n          size={32}\n        />\n      </View>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/togglebutton/index.js",
    "content": "import React, { Component } from 'react';\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'custom', sub: true },\n];\n\nexport default class ToggleButtonPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'togglebutton'}\n          title={'ToggleButton'}\n          description={`Toggle Buttons indicate active and inactive states`}\n          importCode={`import { ToggleButton } from 'material-bread';`}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/togglebutton'} />\n          <Usage pageHref={'/components/togglebutton'} />\n          <Props pageHref={'/components/togglebutton'} />\n          <Demos pageHref={'/components/togglebutton'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/togglebutton/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['active', 'Manually control active state', 'bool', ''],\n  ['activeNode', 'Component to show when active', 'node', ''],\n  ['color', 'Color for icon', 'string', ''],\n  ['icon', 'Name for icon component', 'string', ''],\n  ['inActiveNode', 'Component to show when inactive', 'node', ''],\n  ['rippleColor', 'Manual control of ripple color', 'string', ''],\n  [\n    'rippleContainerBorderRadius',\n    'Manual control of ripple borderRadius',\n    'number',\n    '100',\n  ],\n\n  ['onPress', 'Callback for root component', 'func', ''],\n  ['size', 'Size of icon', 'number', ''],\n  ['style', 'Styles root element', 'object', ''],\n  ['value', 'Value for toggle button, used in ToggleButtonGroup', 'string', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/togglebutton-group/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport {\n  ToggleButton,\n  ToggleButtonGroup,\n  Icon,\n} from '../../../../../src/index';\n\nexport const code = `class Demo extends React.Component {\n  constructor(props) {\n    super(props)\n  }\n  render() {\n    const styles = {\n      active: {\n        backgroundColor: 'rgba(0,0,0,.12)',\n        borderWidth: 1,\n        borderColor: 'rgba(0,0,0,.12)',\n        padding: 8,\n      },\n      inactive: {\n        backgroundColor: 'white',\n        borderWidth: 1,\n        borderColor: 'rgba(0,0,0,.12)',\n        padding: 8,\n      }\n    }\n    return (\n      <ToggleButtonGroup onPress={value => console.log(value)}>\n        <View style={{ flexDirection: 'row' }}>\n          <ToggleButton\n            value={'italic'}\n            activeNode={\n              <View style={styles.active}>\n                <Icon name=\"format-align-center\" size={20} />\n              </View>\n            }\n            inActiveNode={\n              <View style={styles.inactive}>\n                <Icon name=\"format-align-center\" size={20} />\n              </View>\n            }\n            rippleContainerBorderRadius={0}\n          />\n          <ToggleButton\n            value={'bold'}\n            activeNode={\n              <View style={[styles.active, {\n                borderRightWidth: 0,\n                borderLeftWidth: 0,                      \n                }]}>\n                <Icon name=\"format-align-left\" size={20} />\n              </View>\n            }\n            inActiveNode={\n              <View style={[styles.inactive, {\n                borderRightWidth: 0,\n                borderLeftWidth: 0,                      \n                }]}>\n                <Icon name=\"format-align-left\" size={20} />\n              </View>\n            }\n            rippleContainerBorderRadius={0}\n          />\n          <ToggleButton\n            value={'underlined'}\n            activeNode={\n              <View style={styles.active}>\n                <Icon name=\"format-align-right\" size={20} />\n              </View>\n            }\n            inActiveNode={\n              <View style={styles.inactive}>\n                <Icon name=\"format-align-right\" size={20} />\n              </View>\n            }\n            rippleContainerBorderRadius={0}\n          />\n        </View>\n      </ToggleButtonGroup>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    code={code}\n    description={\n      <div>\n        <CodeInline code=\"ToggleButtonGroup\" type=\"element\" /> wraps all{' '}\n        <CodeInline code=\"ToggleButton\" type=\"element\" />\n        s, and only allows one to be selected at a time, it handles all of this\n        behind the scenes. A unique <CodeInline code=\"value\" type=\"prop\" /> prop\n        is required for each child since that will be passed to to the{' '}\n        <CodeInline code=\"onPress\" type=\"prop\" /> callback.\n      </div>\n    }\n    scope={{ View, ToggleButton, ToggleButtonGroup, Icon, Image }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/togglebutton-group/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/togglebutton-group/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { ToggleButton, ToggleButtonGroup, Icon } from 'material-bread';\n\nclass Demo extends React.Component {\n  constructor(props) {\n    super(props)\n  }\n  render() {\n    return (\n      <ToggleButtonGroup>\n        <ToggleButton\n          activeNode={<Icon name=\"alarm\" size={32} />}\n          inActiveNode={\n            <Icon name=\"alarm\" size={32} style={{ opacity: 0.5 }} />\n          }\n          size={32}\n          value={'alarm'}\n          />\n        <ToggleButton\n          activeNode={<Icon name=\"face\" size={32} />}\n          inActiveNode={\n            <Icon name=\"face\" size={32} style={{ opacity: 0.5 }} />\n          }\n          size={32}\n          value={'face'}\n        />\n      </ToggleButtonGroup>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/togglebutton-group/index.js",
    "content": "import React, { Component } from 'react';\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\n\nconst sections = [{ name: 'Component' }, { name: 'Usage' }, { name: 'Props' }];\n\nexport default class ToggleButtonPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'togglebutton-group'}\n          title={'ToggleButtonGroup'}\n          description={`Toggle Buttons indicate active and inactive states`}\n          importCode={`import { ToggleButtonGroup } from 'material-bread';`}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/togglebutton-group'} />\n          <Usage pageHref={'/components/togglebutton-group'} />\n          <Props pageHref={'/components/togglebutton-group'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/togglebutton-group/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['onPress', 'Callback for when a toggleButton is clicked', 'func', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/tooltip/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport { Tooltip, Button } from '../../../../../src/index';\n\nexport const code = `class Demo extends React.Component {\n  constructor(props) {\n    super(props)\n  }\n  render() {\n    return (\n      <View style={{position: 'relative'}}>\n        <Tooltip content={\"I'm a tooltip\"}>\n          <Button\n            type=\"contained\"\n            text={'Hover me'}\n          />\n        </Tooltip>\n      </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        <CodeInline code=\"Tooltip\" type=\"element\" />s display text above, below,\n        or on either side of the element provided. On native, you can click to\n        open a tooltip and click anywhere to close it.\n      </div>\n    }\n    code={code}\n    scope={{ View, Tooltip, Button, Image }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/tooltip/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/tooltip/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { Tooltip, Button } from 'material-bread';\n\nclass Demo extends React.Component {\n  constructor(props) {\n    super(props)\n  }\n  render() {\n    return (\n      <View >\n        <Tooltip content={\"I'm a tooltip\"}>\n          <Button\n            type=\"contained\"\n            text={'Hover me'}\n          />\n        </Tooltip>\n      </View>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/tooltip/index.js",
    "content": "import React, { Component } from 'react';\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\n\nconst sections = [{ name: 'Component' }, { name: 'Usage' }, { name: 'Props' }];\n\nexport default class Snackbarpage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'tooltip'}\n          title={'Tooltip'}\n          description={`Tooltips display informative text when users hover over, focus on, or tap an element.`}\n          importCode={`import { Tooltip } from 'material-bread';`}\n          docsLink={'https://material.io/design/components/tooltips.html#'}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/tooltip'} />\n          <Usage pageHref={'/components/tooltip'} />\n          <Props pageHref={'/components/tooltip'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/tooltip/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['content', 'Text Content for tooltip', 'string', ''],\n\n  ['style', 'Styles root element', 'object', ''],\n  [\n    'tooltipPosition',\n    'Position for the tooltip: top, bottom, left, right',\n    'string',\n    'top',\n  ],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/components/typography/MainDemo.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { ComponentMainDemo, CodeInline } from '@components';\nimport {\n  Heading,\n  Subtitle,\n  BodyText,\n  Caption,\n  Overline,\n} from '../../../../../src/index';\n\nexport const code = `class Demo extends React.Component {\n\n  render() {\n    return (\n      <View>  \n        <Heading type={1} text=\"H1\" />\n        <Heading type={2} text=\"H2\" />\n        <Heading type={3} text=\"H3\" />\n        <Heading type={4} text=\"H4\" />\n        <Heading type={5} text=\"H5\" />\n        <Heading type={6} text=\"H6\" />\n        <Subtitle type={1} text=\"Subtitle 1\" />\n        <Subtitle type={2} text=\"Subtitle 2\" />\n        <BodyText type={1} text=\"Body 1\" />\n        <BodyText type={2} text=\"Body 2\" />\n        <Caption text=\"Caption\" />\n        <Overline text=\"Overline\" />\n      </View>\n    );\n  }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      <div>\n        You can either pass text with the <CodeInline code=\"text\" type=\"prop\" />{' '}\n        prop or pass as children{' '}\n      </div>\n    }\n    code={code}\n    scope={{ View, Heading, Subtitle, BodyText, Caption, Overline, Image }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/components/typography/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/components/typography/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { Heading, Subtitle, BodyText, Caption, Overline, } from 'material-bread';\n\nclass Demo extends React.Component {\n  \n  render() {\n    return (\n      <View>\n        <Heading type={1} text=\"h1\" />\n        <Heading type={2} text=\"h2\" />\n        <Heading type={3} text=\"h3\" />\n        <Heading type={4} text=\"h4\" />\n        <Heading type={5} text=\"h5\" />\n        <Heading type={6} text=\"h6\" />\n        <Subtitle type={1} text=\"Subtitle 1\" />\n        <Subtitle type={2} text=\"Subtitle 2\" />\n        <BodyText type={1} text=\"Body 1\" />\n        <BodyText type={2} text=\"Body 2\" />\n        <Caption text=\"Caption\" />\n        <Overline text=\"Overline\" />\n      </View>\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/components/typography/index.js",
    "content": "import React, { Component } from 'react';\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\n\nconst sections = [{ name: 'Component' }, { name: 'Usage' }, { name: 'Props' }];\n\nexport default class TypographyPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'typography'}\n          title={'Typography'}\n          description={`Typography Components follow a design system to convey meaning.`}\n          importCode={`import { Heading, Subtitle, BodyText, Caption, Overline} from 'material-bread';`}\n          docsLink={\n            'https://material.io/design/typography/the-type-system.html'\n          }\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/components/typography'} />\n          <Usage pageHref={'/components/typography'} />\n          <Props pageHref={'/components/typography'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/components/typography/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['align', 'Applies text-align to component', 'string', 'start'],\n  ['color', 'Text color', 'string', ''],\n  ['gutterBottom', 'Adds marginBottom 10 to create space', 'bool', 'false'],\n\n  ['style', 'Styles root element', 'object', ''],\n  ['text', 'Renders a Text string', 'string', ''],\n  [\n    'themeColor',\n    'The color value defined within the `textColor` theme property',\n    'string',\n    'primary',\n  ],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/utils/anchor/MainDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentMainDemo } from '@components';\nimport { Anchor, Heading, Button } from '../../../../../src/index';\n\nexport const code = `<View style={{ flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap' }}>\n  <Anchor url={'http://material-bread.org/'} target={'_parent'}>\n    <Button\n      text={'Documentation'}\n      type={'outlined'}\n      textColor={'rgb(233, 30, 99)'}\n    />\n  </Anchor>\n\n  <Anchor\n    url={'https://github.com/codypearce/material-bread'}\n    target={'_parent'}>\n    <Button\n      text={'Github'}\n      type={'outlined'}\n      textColor={'#666'}\n      style={{ marginLeft: 10 }}\n    />\n  </Anchor>\n  <Anchor url={'https://www.pbs.org/'} target={'_blank'}>\n    <Heading style={{ color: 'blue',  marginLeft: 10  }}>PBS</Heading>\n  </Anchor>\n  <Anchor url={'https://www.bbc.com/'} target={'_blank'}>\n    <Heading style={{ color: 'blue', marginLeft: 10 }}>BBC</Heading>\n  </Anchor>\n</View>`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      'Links are defined differently in react-native and the web. This component combines those two approaches so you can use one component across all platforms.'\n    }\n    code={code}\n    scope={{ View, Anchor, Heading, Button }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/utils/anchor/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/utils/anchor/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage, CodeInline } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { Anchor, BaseText } from 'material-bread';\n\nclass Demo extends React.Component {\n  constructor(props) {\n    super(props)\n\n  }\n  render() {\n    return (\n      <View style={{ flexDirection: 'row' }}>\n        <Anchor url={'https://www.pbs.org/'} target={'_blank'}>\n          <Heading style={{ color: 'blue' }}>PBS</Heading>\n        </Anchor>\n      </View>\n    );\n  }\n}`;\n\nconst Usage = pageHref => (\n  <ComponentUsage\n    pageHref={pageHref}\n    description={\n      <div>\n        Simply wrap your component in the{' '}\n        <CodeInline code=\"Anchor\" type=\"element\" /> component and provide a url\n        to link to.\n      </div>\n    }\n    code={code}\n  />\n);\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/utils/anchor/index.js",
    "content": "import React, { Component } from 'react';\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\n\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\n\nconst sections = [{ name: 'Component' }, { name: 'Usage' }, { name: 'Props' }];\n\nexport default class AnchorPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'anchor'}\n          title={'Anchor'}\n          description={`Cross Platform Anchor For linking to outside pages.`}\n          importCode={`import { Anchor } from 'material-bread';`}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/utils/anchor'} />\n          <Usage pageHref={'/utils/anchor'} />\n          <Props pageHref={'/utils/anchor'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/utils/anchor/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['target', 'Anchor target, only relevant on the web', 'string', '_self'],\n  ['url', 'Full url for external link', 'string', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/utils/color/MainDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentMainDemo } from '@components';\nimport { Colors } from '../../../../../src/index';\n\nexport const code = `<View style={{flexDirection: 'row', flexWrap: 'wrap'}}>\n    <View style={{width: 100, height: 100, backgroundColor: Colors.blue[700]}} />\n    <View style={{width: 100, height: 100, backgroundColor: Colors.red[300]}} />\n    <View style={{width: 100, height: 100, backgroundColor: Colors.teal[500]}} />\n    <View style={{width: 100, height: 100, backgroundColor: Colors.cyan['A100']}} />\n    <View style={{width: 100, height: 100, backgroundColor: Colors.pink['600']}} />\n</View>`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={'Colors can be accessed as shown below'}\n    code={code}\n    scope={{ View, Colors }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/utils/color/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { Colors } from 'material-bread';\n\nclass Demo extends React.Component {\n  constructor(props) {\n    super(props)\n\n  }\n  render() {\n    return (\n      <View style={{width: 100, height: 100, backgroundColor: Colors.blue[700]}} />\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/utils/color/index.js",
    "content": "import React, { Component } from 'react';\nimport Section from '../../../components/Section';\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\nimport ComponentDescription from '../../../components/ComponentPage/ComponentDescription';\nimport FullPalette from '../../../components/ColorPalette/FullPalette';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Palette' },\n];\n\nexport default class ColorPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'color'}\n          title={'Color'}\n          description={`The Material Design color system can be used to create a color theme that reflects your brand or style`}\n          importCode={`import { Colors } from 'material-bread';`}\n          docsLink={'https://material.io/design/color/'}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/utils/colors'} />\n          <Usage pageHref={'/utils/colors'} />\n          <Section name=\"Palette\" href=\"/utils/colors#palette\" id=\"palette\">\n            <ComponentDescription text=\"Click a block to copy the hex value\" />\n            <FullPalette />\n          </Section>\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/utils/hoverable/Demos/AnimatedDemo.js",
    "content": "import React from 'react';\nimport { View, Animated } from 'react-native';\nimport { ComponentDemo } from '@components';\nimport { Hoverable } from '../../../../../../src/index';\n\nexport const code = `class Demo extends React.Component {\n    constructor(props) {\n      super(props)\n      this.state = {\n        rotate: new Animated.Value(0)\n      }\n    }\n\n    toggleAnimation(state) {\n      const value = state ? 1 : 0;\n      Animated.timing(this.state.rotate, {\n        toValue: value,\n        duration: 500,\n      }).start();\n    }\n  \n  \n    render() {\n      return (\n        <Hoverable\n          onHoverIn={() => this.toggleAnimation(true)}\n          onHoverOut={() => this.toggleAnimation(false)}\n          >\n          <Animated.View\n            style={{\n              width: 125,\n              height: 125,\n              backgroundColor: '#E91E63',\n              transform: [\n                {\n                  rotate: this.state.rotate.interpolate({\n                    inputRange: [0, 1],\n                    outputRange: ['0deg', '360deg'],\n                  }),\n                },\n              ],\n            }}\n          />\n        </Hoverable>\n      );\n    }\n  }`;\n\nconst AnimatedDemo = pageHref => (\n  <ComponentDemo\n    sectionName={'Animated'}\n    sectionHref={'/components/hoverable#animated'}\n    sectionId={'animated'}\n    pageHref={pageHref}\n    code={code}\n    scope={{ View, Hoverable, Animated }}\n  />\n);\nexport default AnimatedDemo;\n"
  },
  {
    "path": "docs/src/content/utils/hoverable/Demos/index.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { ComponentDemoHeader } from '@components';\n\nimport AnimatedDemo from './AnimatedDemo';\n\nexport default class Demos extends Component {\n  static propTypes = {\n    pageHref: PropTypes.string,\n  };\n  render() {\n    const { pageHref } = this.props;\n    return (\n      <div>\n        <ComponentDemoHeader pageHref={pageHref} />\n\n        <AnimatedDemo pageHref={pageHref} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/utils/hoverable/MainDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentMainDemo } from '@components';\nimport { Hoverable } from '../../../../../src/index';\n\nexport const code = `class Demo extends React.Component {\n    constructor(props) {\n      super(props)\n      this.state = {\n        color: '#009688'\n      }\n    }\n  \n    handleHover(toggle) {\n      this.setState({ color: toggle ? '#00BCD4' : '#009688' });\n    }\n  \n    render() {\n      return (\n        <Hoverable\n          onHoverIn={() => this.handleHover(true)}\n          onHoverOut={() => this.handleHover(false)}\n        >\n          <View style={{width: 200, height: 125, backgroundColor: this.state.color}} />\n        </Hoverable>\n      );\n    }\n  }`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      'Wrap a component in Hoverable and activate a change when the user hovers over a component. On desktop it will activate on hover on mobile it will activate on touch.'\n    }\n    code={code}\n    scope={{ View, Hoverable }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/utils/hoverable/Props.js",
    "content": "import React from 'react';\nimport { ComponentProps } from '@components';\nimport propData from './propData';\n\nconst Props = pageHref => (\n  <ComponentProps pageHref={pageHref} propData={propData} />\n);\nexport default Props;\n"
  },
  {
    "path": "docs/src/content/utils/hoverable/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nconst code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { Hoverable } from 'material-bread';\n\nclass Demo extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      color: '#009688'\n    }\n  }\n\n    handleHover(toggle) {\n        this.setState({ color: toggle ? '#00BCD4' : '#009688' });\n    }\n\n  render() {\n    return (\n      <Hoverable\n        onHoverIn={() => this.handleHover(true)}\n        onHoverOut={() => this.handleHover(false)}\n      >\n        <View style={{width: 200, height: 125, backgroundColor: this.state.color}} />\n    </Hoverable>\n    );\n  }`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\n\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/utils/hoverable/index.js",
    "content": "import React, { Component } from 'react';\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\nimport Props from './Props';\nimport Demos from './Demos';\n\nconst sections = [\n  { name: 'Component' },\n  { name: 'Usage' },\n  { name: 'Props' },\n  { name: 'Demos' },\n  { name: 'animated', sub: true },\n];\n\nexport default class HoverablePage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'hoverable'}\n          title={'Hoverable'}\n          description={`Hoverable is a utility to add changes on hover.`}\n          importCode={`import { Hoverable } from 'material-bread';`}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/utils/hoverable'} />\n          <Usage pageHref={'/utils/hoverable'} />\n          <Props pageHref={'/utils/hoverable'} />\n          <Demos pageHref={'/utils/hoverable'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/content/utils/hoverable/propData.js",
    "content": "import { createTableData } from '../../../utils/createPropData';\nconst propData = [\n  ['onHoverIn', 'Call back when mouse enters component', 'func', ''],\n  ['onHoverOut', 'Call back when mouse leaves component', 'func', ''],\n];\n\nexport default createTableData(propData);\n"
  },
  {
    "path": "docs/src/content/utils/shadow/MainDemo.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { ComponentMainDemo } from '@components';\nimport { shadow } from '../../../../../src/index';\n\nexport const code = `class Demo extends React.Component {\n    constructor(props) {\n      super(props)\n\n    }\n    render() {\n      return (\n        <View style={{flexDirection: 'row', alignItems: 'center'}}>\n          <View\n            style={{\n              height: 100,\n              width: 100,\n              backgroundColor: 'white',\n              borderRadius: 100,\n              ...shadow(4),\n            }}\n          />\n          <View\n            style={{\n              height: 50,\n              width: 50,\n              backgroundColor: '#E91E63',\n              marginLeft: 20,\n              ...shadow(16),\n            }}\n          />\n        </View>\n      );\n    }\n}`;\n\nconst MainDemo = pageHref => (\n  <ComponentMainDemo\n    pageHref={pageHref}\n    description={\n      'Shadows are available from 0-24, each number recreates a shadow on the given platform.'\n    }\n    code={code}\n    scope={{ View, shadow }}\n  />\n);\nexport default MainDemo;\n"
  },
  {
    "path": "docs/src/content/utils/shadow/Usage.js",
    "content": "import React from 'react';\nimport { ComponentUsage } from '@components';\n\nexport const code = `import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport { shadow } from 'material-bread';\n\nconst styles = {\n  padding: 8,\n  height: 100,\n  width: 100,\n  marginTop: 20,\n  alignItems: 'center',\n  justifyContent: 'center',\n  backgroundColor: 'white',\n  borderRadius: 100,\n  ...shadow(10)\n};\n\nclass Demo extends React.Component {\n  constructor(props) {\n    super(props)\n\n  }\n  render() {\n    return (\n      <View\n        style={styles}\n      />\n    );\n  }\n}`;\n\nconst Usage = pageHref => <ComponentUsage pageHref={pageHref} code={code} />;\nexport default Usage;\n"
  },
  {
    "path": "docs/src/content/utils/shadow/index.js",
    "content": "import React, { Component } from 'react';\nimport ComponentPageLayout from '../../../components/ComponentPage/ComponentPageLayout';\nimport MainDemo from './MainDemo';\nimport Usage from './Usage';\n\nconst sections = [{ name: 'Component' }, { name: 'Usage' }];\n\nexport default class ShadowPage extends Component {\n  render() {\n    return (\n      <div>\n        <ComponentPageLayout\n          componentName={'shadow'}\n          title={'Shadow'}\n          description={`Shadow is a utility to add cross platform shadows.`}\n          importCode={`import { shadow } from 'material-bread';`}\n          sideScrollMenuItems={sections}>\n          <MainDemo pageHref={'/utils/shadow'} />\n          <Usage pageHref={'/utils/shadow'} />\n        </ComponentPageLayout>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/html.js",
    "content": "import React from 'react';\nimport PropTypes from 'prop-types';\n\nexport default function HTML(props) {\n  return (\n    <html {...props.htmlAttributes}>\n      <head>\n        <meta charSet=\"utf-8\" />\n        <meta httpEquiv=\"x-ua-compatible\" content=\"ie=edge\" />\n        <meta\n          name=\"viewport\"\n          content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"\n        />\n        <meta\n          name=\"google-site-verification\"\n          content=\"pnInoKlqzLFjeCNTW6F-BnibL8xE4qnA7Tghks5dLwo\"\n        />\n\n        {props.headComponents}\n      </head>\n      <body {...props.bodyAttributes}>\n        {props.preBodyComponents}\n        <noscript key=\"noscript\" id=\"gatsby-noscript\">\n          This app works best with JavaScript enabled.\n        </noscript>\n        <div\n          key={`body`}\n          id=\"___gatsby\"\n          dangerouslySetInnerHTML={{ __html: props.body }}\n        />\n        {props.postBodyComponents}\n      </body>\n    </html>\n  );\n}\n\nHTML.propTypes = {\n  htmlAttributes: PropTypes.object,\n  headComponents: PropTypes.array,\n  bodyAttributes: PropTypes.object,\n  preBodyComponents: PropTypes.array,\n  body: PropTypes.string,\n  postBodyComponents: PropTypes.array,\n};\n"
  },
  {
    "path": "docs/src/navigation/componentPages.js",
    "content": "const components = [\n  {\n    title: 'Appbar',\n    path: '/components/appbar',\n  },\n  {\n    title: 'Searchbar',\n    path: '/components/searchbar',\n    subsubItem: true,\n  },\n  {\n    title: 'Appbar Bottom',\n    path: '/components/appbar-bottom',\n  },\n  {\n    title: 'Avatar',\n    path: '/components/avatar',\n  },\n  {\n    title: 'Backdrop',\n    path: '/components/backdrop',\n  },\n  {\n    title: 'Badge',\n    path: '/components/badge',\n  },\n  {\n    title: 'Banner',\n    path: '/components/banner',\n  },\n  {\n    title: 'Bottom Navigation',\n    path: '/components/bottom-navigation',\n  },\n  {\n    title: 'Bottom Navigation Item',\n    path: '/components/bottom-navigation-item',\n    subsubItem: true,\n  },\n  {\n    title: 'Button',\n    path: '/components/button',\n  },\n  {\n    title: 'Card',\n    path: '/components/card',\n  },\n  {\n    title: 'CardActions',\n    path: '/components/card-actions',\n    subsubItem: true,\n  },\n  {\n    title: 'CardContent',\n    path: '/components/card-content',\n    subsubItem: true,\n  },\n  {\n    title: 'CardHeader',\n    path: '/components/card-header',\n    subsubItem: true,\n  },\n  {\n    title: 'CardMedia',\n    path: '/components/card-media',\n    subsubItem: true,\n  },\n  {\n    title: 'Checkbox',\n    path: '/components/checkbox',\n  },\n  {\n    title: 'Chip',\n    path: '/components/chip',\n  },\n  {\n    title: 'DataTable',\n    path: '/components/datatable',\n  },\n  {\n    title: 'DataTableCell',\n    path: '/components/datatable-cell',\n    subsubItem: true,\n  },\n  {\n    title: 'DataTableHeader',\n    path: '/components/datatable-header',\n    subsubItem: true,\n  },\n  {\n    title: 'DataTablePagination',\n    path: '/components/datatable-pagination',\n    subsubItem: true,\n  },\n  {\n    title: 'DataTableRow',\n    path: '/components/datatable-row',\n    subsubItem: true,\n  },\n  {\n    title: 'Dialog',\n    path: '/components/dialog',\n  },\n  {\n    title: 'Divider',\n    path: '/components/divider',\n  },\n  {\n    title: 'Drawer',\n    path: '/components/drawer',\n  },\n\n  {\n    title: 'DrawerHeader',\n    path: '/components/drawer-header',\n    subsubItem: true,\n  },\n  {\n    title: 'DrawerItem',\n    path: '/components/drawer-item',\n    subsubItem: true,\n  },\n  {\n    title: 'DrawerSection',\n    path: '/components/drawer-section',\n    subsubItem: true,\n  },\n  {\n    title: 'DrawerBottom',\n    path: '/components/drawer-bottom',\n  },\n\n  {\n    title: 'Fab',\n    path: '/components/fab',\n  },\n  {\n    title: 'Speed dial',\n    path: '/components/fab-speeddial',\n    subsubItem: true,\n  },\n  {\n    title: 'Icon',\n    path: '/components/icon',\n  },\n  {\n    title: 'IconButton',\n    path: '/components/iconbutton',\n  },\n  {\n    title: 'List',\n    path: '/components/list',\n  },\n  {\n    title: 'ListExpand',\n    path: '/components/list-expand',\n    subsubItem: true,\n  },\n  {\n    title: 'ListItem',\n    path: '/components/list-item',\n    subsubItem: true,\n  },\n  {\n    title: 'ListSection',\n    path: '/components/list-section',\n    subsubItem: true,\n  },\n  {\n    title: 'Menu',\n    path: '/components/menu',\n  },\n  {\n    title: 'MenuItem',\n    path: '/components/menu-item',\n    subsubItem: true,\n  },\n  {\n    title: 'Paper',\n    path: '/components/paper',\n  },\n  {\n    title: 'Progress Bar',\n    path: '/components/progress-bar',\n  },\n  {\n    title: 'Progress Circle',\n    path: '/components/progress-circle',\n  },\n  {\n    title: 'Radio Button',\n    path: '/components/radiobutton',\n  },\n  {\n    title: 'Ripple',\n    path: '/components/ripple',\n  },\n\n  {\n    title: 'Select',\n    path: '/components/select',\n  },\n  {\n    title: 'SheetBottom',\n    path: '/components/sheet-bottom',\n  },\n  {\n    title: 'SheetSide',\n    path: '/components/sheet-side',\n  },\n  {\n    title: 'Slider',\n    path: '/components/slider',\n  },\n  {\n    title: 'Snackbar',\n    path: '/components/snackbar',\n  },\n  {\n    title: 'SwipeNav',\n    path: '/components/swipenav',\n  },\n  {\n    title: 'Switch',\n    path: '/components/switch',\n  },\n  {\n    title: 'Tabs',\n    path: '/components/tabs',\n  },\n  {\n    title: 'Tab',\n    path: '/components/tab',\n    subsubItem: true,\n  },\n  {\n    title: 'Textfield',\n    path: '/components/textfield',\n  },\n  {\n    title: 'Searchfield',\n    path: '/components/searchfield',\n    subsubItem: true,\n  },\n  {\n    title: 'ToggleButton',\n    path: '/components/togglebutton',\n  },\n  {\n    title: 'ToggleButtonGroup',\n    path: '/components/togglebutton-group',\n    subsubItem: true,\n  },\n  {\n    title: 'Tooltip',\n    path: '/components/tooltip',\n  },\n  {\n    title: 'Typography',\n    path: '/components/typography',\n  },\n];\n\nexport default components;\n"
  },
  {
    "path": "docs/src/navigation/contributingPages.js",
    "content": "const contributingPages = [\n  {\n    title: 'Library',\n    path: '/contributing/library',\n  },\n  {\n    title: 'Docs',\n    path: '/contributing/docs',\n  },\n];\nexport default contributingPages;\n"
  },
  {
    "path": "docs/src/navigation/gettingStartedPages.js",
    "content": "const gettingStartedPages = [\n  {\n    title: 'React Native',\n    path: '/getting-started/react-native',\n  },\n  {\n    title: 'Web',\n    path: '/getting-started/web',\n  },\n  {\n    title: 'Electron',\n    path: '/getting-started/electron',\n  },\n  {\n    title: 'MacOS',\n    path: '/getting-started/macos',\n  },\n  {\n    title: 'Windows',\n    path: '/getting-started/windows',\n  },\n  {\n    title: 'NextJs',\n    path: '/getting-started/nextjs',\n  },\n  {\n    title: 'Expo',\n    path: '/getting-started/expo',\n  },\n  {\n    title: 'Vue Native',\n    path: '/getting-started/vue-native',\n  },\n];\nexport default gettingStartedPages;\n"
  },
  {
    "path": "docs/src/navigation/index.js",
    "content": "import componentPages from './componentPages';\nimport contributingPages from './contributingPages';\nimport gettingStartedPages from './gettingStartedPages';\nimport stylePages from './stylePages';\nimport utilsPages from './utilsPages';\n\nexport {\n  componentPages,\n  contributingPages,\n  gettingStartedPages,\n  stylePages,\n  utilsPages,\n};\n"
  },
  {
    "path": "docs/src/navigation/stylePages.js",
    "content": "const stylePages = [\n  {\n    title: 'Font',\n    path: '/style/font',\n  },\n  {\n    title: 'Icons',\n    path: '/style/icons',\n  },\n  {\n    title: 'Theme',\n    path: '/style/theme',\n  },\n];\n\nexport default stylePages;\n"
  },
  {
    "path": "docs/src/navigation/utilsPages.js",
    "content": "const utils = [\n  {\n    title: 'Anchor',\n    path: '/utils/anchor',\n  },\n  {\n    title: 'Color',\n    path: '/utils/color',\n  },\n  {\n    title: 'Hoverable',\n    path: '/utils/hoverable',\n  },\n  {\n    title: 'Shadow',\n    path: '/utils/shadow',\n  },\n];\nexport default utils;\n"
  },
  {
    "path": "docs/src/pages/404.js",
    "content": "import React from 'react';\n\nconst NotFoundPage = () => (\n  <div>\n    <h1>NOT FOUND</h1>\n    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>\n  </div>\n);\n\nexport default NotFoundPage;\n"
  },
  {
    "path": "docs/src/pages/about.js",
    "content": "import React, { Component } from 'react';\n\nimport Prism from 'prismjs';\nimport {\n  PageTitle,\n  ComponentSubtitle,\n  Section,\n  ComponentDescription,\n  Helmet,\n} from '@components';\n\nclass Index extends Component {\n  componentDidMount() {\n    Prism.highlightAll();\n  }\n  render() {\n    return (\n      <div style={styles.container}>\n        <Helmet title={'About'} />\n        <PageTitle>About</PageTitle>\n        <ComponentSubtitle\n          description={\n            'Material Bread is a React Native Material Component Library that aims to provide useful components across various platforms.'\n          }\n        />\n\n        <div style={{ color: 'rgba(0, 0, 0, 0.67)' }}>\n          Read a more in-depth article about Material Bread{' '}\n          <a href=\"https://codinhood.com/series/baking-material-bread/introducing-material-bread\">\n            Introducing Material Bread for React and React Native\n          </a>\n        </div>\n\n        <Section\n          name=\"All Components\"\n          id=\"all-components\"\n          href=\"/about#all-components\">\n          <ComponentDescription\n            text={\n              <div>\n                The main goal of this package is to provide all components found\n                in the Material Docs. This includes all variations within\n                reason. The idea is that a developer could recreate whatever is\n                seen in the docs.\n              </div>\n            }\n          />\n        </Section>\n\n        <Section\n          name=\"Cross Platform\"\n          id=\"cross-platform\"\n          href=\"/about#cross-platform\">\n          <ComponentDescription\n            text={\n              <div>\n                The goal is for all components to work cross platofrm on iOS,\n                Android, Web, Electron, and other platforms.\n              </div>\n            }\n          />\n        </Section>\n\n        <Section\n          name=\"Highly Customizable\"\n          id=\"highly-customizable\"\n          href=\"/about#highly-customizable\">\n          <ComponentDescription\n            text={\n              <div>\n                Having almost complete control over the styling of every\n                component is an important feature of UI libraries for the\n                following reasons:\n                <ol>\n                  <li>\n                    There will always be something that needs to be slightly\n                    changed or different. Packages that make it difficult to\n                    customize quickly become more of a burden then a useful\n                    tool.\n                  </li>\n                  <li>\n                    Having more control over the component allows the developer\n                    to possibly fix edge cases or issues themselves rather than\n                    wait for a new release of the package.\n                  </li>\n                  <li>\n                    More customization allows developers to build their own\n                    components on top package components.{' '}\n                  </li>\n                </ol>\n                React Native provides a unique challenge for customization since\n                you cannot select any element you want with CSS and override all\n                the styles.\n              </div>\n            }\n          />\n        </Section>\n\n        <Section\n          name=\"Copious Demos \"\n          id=\"copious-demos\"\n          href=\"/about#copious-demos\">\n          <ComponentDescription\n            text={\n              <div>\n                Demos make learning how to use components and how to build\n                common patterns much easier. Since this library is dedicated to\n                providing Material Design components, it is important to provide\n                as many demos as needed to illustrate how one can create all\n                variations with this library.\n              </div>\n            }\n          />\n        </Section>\n      </div>\n    );\n  }\n}\n\nconst styles = {\n  container: {\n    display: 'flex',\n    flexDirection: 'column',\n\n    width: '100%',\n    paddingBottom: 60,\n  },\n  code: {},\n};\n\nexport default Index;\n"
  },
  {
    "path": "docs/src/pages/baking-material.js",
    "content": "import React, { Component } from 'react';\n\nimport Prism from 'prismjs';\nimport {\n  PageTitle,\n  ComponentSubtitle,\n  Section,\n  ComponentDescription,\n  Helmet,\n} from '@components';\n\nclass Index extends Component {\n  componentDidMount() {\n    Prism.highlightAll();\n  }\n  render() {\n    return (\n      <div style={styles.container}>\n        <Helmet title={'Baking Material Bread'} />\n        <PageTitle>Baking Material Bread</PageTitle>\n        <ComponentSubtitle\n          description={'A series of articles about making Material Bread'}\n        />\n        <a style={{}}></a>\n      </div>\n    );\n  }\n}\n\nconst styles = {\n  container: {\n    display: 'flex',\n    flexDirection: 'column',\n    height: '100vh',\n    width: '100%',\n    paddingBottom: 60,\n  },\n  code: {},\n};\n\nexport default Index;\n"
  },
  {
    "path": "docs/src/pages/components/appbar-bottom.js",
    "content": "export default from '../../content/components/appbar-bottom';\n"
  },
  {
    "path": "docs/src/pages/components/appbar.js",
    "content": "export default from '../../content/components/appbar';\n"
  },
  {
    "path": "docs/src/pages/components/avatar.js",
    "content": "export default from '../../content/components/avatar';\n"
  },
  {
    "path": "docs/src/pages/components/backdrop.js",
    "content": "export default from '../../content/components/backdrop';\n"
  },
  {
    "path": "docs/src/pages/components/badge.js",
    "content": "export default from '../../content/components/badge';\n"
  },
  {
    "path": "docs/src/pages/components/banner.js",
    "content": "export default from '../../content/components/banner';\n"
  },
  {
    "path": "docs/src/pages/components/bottom-navigation-item.js",
    "content": "export default from '../../content/components/bottom-navigation-item';\n"
  },
  {
    "path": "docs/src/pages/components/bottom-navigation.js",
    "content": "export default from '../../content/components/bottom-navigation';\n"
  },
  {
    "path": "docs/src/pages/components/button.js",
    "content": "export default from '../../content/components/button';\n"
  },
  {
    "path": "docs/src/pages/components/card-actions.js",
    "content": "export default from '../../content/components/card-actions';\n"
  },
  {
    "path": "docs/src/pages/components/card-content.js",
    "content": "export default from '../../content/components/card-content';\n"
  },
  {
    "path": "docs/src/pages/components/card-header.js",
    "content": "export default from '../../content/components/card-header';\n"
  },
  {
    "path": "docs/src/pages/components/card-media.js",
    "content": "export default from '../../content/components/card-media';\n"
  },
  {
    "path": "docs/src/pages/components/card.js",
    "content": "export default from '../../content/components/card';\n"
  },
  {
    "path": "docs/src/pages/components/checkbox.js",
    "content": "export default from '../../content/components/checkbox';\n"
  },
  {
    "path": "docs/src/pages/components/chip.js",
    "content": "export default from '../../content/components/chip';\n"
  },
  {
    "path": "docs/src/pages/components/datatable-cell.js",
    "content": "export default from '../../content/components/datatable-cell';\n"
  },
  {
    "path": "docs/src/pages/components/datatable-header.js",
    "content": "export default from '../../content/components/datatable-header';\n"
  },
  {
    "path": "docs/src/pages/components/datatable-pagination.js",
    "content": "export default from '../../content/components/datatable-pagination';\n"
  },
  {
    "path": "docs/src/pages/components/datatable-row.js",
    "content": "export default from '../../content/components/datatable-row';\n"
  },
  {
    "path": "docs/src/pages/components/datatable.js",
    "content": "export default from '../../content/components/datatable';\n"
  },
  {
    "path": "docs/src/pages/components/dialog.js",
    "content": "export default from '../../content/components/dialog';\n"
  },
  {
    "path": "docs/src/pages/components/divider.js",
    "content": "export default from '../../content/components/divider';\n"
  },
  {
    "path": "docs/src/pages/components/drawer-bottom.js",
    "content": "export default from '../../content/components/drawer-bottom';\n"
  },
  {
    "path": "docs/src/pages/components/drawer-header.js",
    "content": "export default from '../../content/components/drawer-header';\n"
  },
  {
    "path": "docs/src/pages/components/drawer-item.js",
    "content": "export default from '../../content/components/drawer-item';\n"
  },
  {
    "path": "docs/src/pages/components/drawer-section.js",
    "content": "export default from '../../content/components/drawer-section';\n"
  },
  {
    "path": "docs/src/pages/components/drawer.js",
    "content": "export default from '../../content/components/drawer';\n"
  },
  {
    "path": "docs/src/pages/components/fab-speeddial.js",
    "content": "export default from '../../content/components/fab-speeddial';\n"
  },
  {
    "path": "docs/src/pages/components/fab.js",
    "content": "export default from '../../content/components/fab';\n"
  },
  {
    "path": "docs/src/pages/components/icon.js",
    "content": "export default from '../../content/components/icon';\n"
  },
  {
    "path": "docs/src/pages/components/iconbutton.js",
    "content": "export default from '../../content/components/iconbutton';\n"
  },
  {
    "path": "docs/src/pages/components/list-expand.js",
    "content": "export default from '../../content/components/list-expand';\n"
  },
  {
    "path": "docs/src/pages/components/list-item.js",
    "content": "export default from '../../content/components/list-item';\n"
  },
  {
    "path": "docs/src/pages/components/list-section.js",
    "content": "export default from '../../content/components/list-section';\n"
  },
  {
    "path": "docs/src/pages/components/list.js",
    "content": "export default from '../../content/components/list';\n"
  },
  {
    "path": "docs/src/pages/components/menu-item.js",
    "content": "export default from '../../content/components/menu-item';\n"
  },
  {
    "path": "docs/src/pages/components/menu.js",
    "content": "export default from '../../content/components/menu';\n"
  },
  {
    "path": "docs/src/pages/components/paper.js",
    "content": "export default from '../../content/components/paper';\n"
  },
  {
    "path": "docs/src/pages/components/progress-bar.js",
    "content": "export default from '../../content/components/progress-bar';\n"
  },
  {
    "path": "docs/src/pages/components/progress-circle.js",
    "content": "export default from '../../content/components/progress-circle';\n"
  },
  {
    "path": "docs/src/pages/components/radiobutton.js",
    "content": "export default from '../../content/components/radiobutton';\n"
  },
  {
    "path": "docs/src/pages/components/ripple.js",
    "content": "export default from '../../content/components/ripple';\n"
  },
  {
    "path": "docs/src/pages/components/searchbar.js",
    "content": "export default from '../../content/components/searchbar';\n"
  },
  {
    "path": "docs/src/pages/components/searchfield.js",
    "content": "export default from '../../content/components/searchfield';\n"
  },
  {
    "path": "docs/src/pages/components/select.js",
    "content": "export default from '../../content/components/select';\n"
  },
  {
    "path": "docs/src/pages/components/sheet-bottom.js",
    "content": "export default from '../../content/components/sheet-bottom';\n"
  },
  {
    "path": "docs/src/pages/components/sheet-side.js",
    "content": "export default from '../../content/components/sheet-side';\n"
  },
  {
    "path": "docs/src/pages/components/slider.js",
    "content": "export default from '../../content/components/slider';\n"
  },
  {
    "path": "docs/src/pages/components/snackbar.js",
    "content": "export default from '../../content/components/snackbar';\n"
  },
  {
    "path": "docs/src/pages/components/swipenav.js",
    "content": "export default from '../../content/components/swipenav';\n"
  },
  {
    "path": "docs/src/pages/components/switch.js",
    "content": "export default from '../../content/components/switch';\n"
  },
  {
    "path": "docs/src/pages/components/tab.js",
    "content": "export default from '../../content/components/tab';\n"
  },
  {
    "path": "docs/src/pages/components/tabs.js",
    "content": "export default from '../../content/components/tabs';\n"
  },
  {
    "path": "docs/src/pages/components/textfield.js",
    "content": "export default from '../../content/components/textfield';\n"
  },
  {
    "path": "docs/src/pages/components/togglebutton-group.js",
    "content": "export default from '../../content/components/togglebutton-group';\n"
  },
  {
    "path": "docs/src/pages/components/togglebutton.js",
    "content": "export default from '../../content/components/togglebutton';\n"
  },
  {
    "path": "docs/src/pages/components/tooltip.js",
    "content": "export default from '../../content/components/tooltip';\n"
  },
  {
    "path": "docs/src/pages/components/typography.js",
    "content": "export default from '../../content/components/typography';\n"
  },
  {
    "path": "docs/src/pages/contributing/docs.js",
    "content": "import React, { Component } from 'react';\n\nimport Prism from 'prismjs';\nimport {\n  PageTitle,\n  ComponentSubtitle,\n  Section,\n  ComponentDescription,\n  CodeInline,\n  Link,\n  SideScrollMenu,\n  Helmet,\n} from '@components';\nimport { DataTable, DataTableCell, DataTableRow } from '../../../../src';\nconst sections = [{ name: 'Started' }, { name: 'Setup' }];\n\nclass Index extends Component {\n  componentDidMount() {\n    Prism.highlightAll();\n  }\n  render() {\n    return (\n      <div style={styles.container}>\n        <Helmet title={'Contribute to docs'} />\n        <PageTitle>Contributing to Docs</PageTitle>\n        <ComponentSubtitle\n          description={\n            'All contributions are welcome, please follow the guide below to get started'\n          }\n        />\n        <SideScrollMenu items={sections} />\n        <Section\n          name=\"Getting Started\"\n          id=\"started\"\n          href=\"/contributing/docs#tarted\">\n          <ComponentDescription\n            text={\n              <div>\n                <div style={{ marginTop: 8, marginBottom: 8 }}>\n                  Documentation is built using{' '}\n                  <Link href=\"https://www.gatsbyjs.org/\">Gatsbyjs</Link>.\n                </div>\n                The main folders and files are in the{' '}\n                <CodeInline code=\"docs\" type={''} /> folder.\n                <DataTable\n                  style={{ marginTop: 8, marginBottom: 8, maxWidth: 400 }}>\n                  <DataTableRow style={{ backgroundColor: 'rgba(0,0,0,.12)' }}>\n                    <DataTableCell text={'folder'} type={'header'} />\n                    <DataTableCell text={'description'} type={'header'} />\n                  </DataTableRow>\n                  <DataTableRow>\n                    <DataTableCell text={'assets'} />\n                    <DataTableCell text={'media and fonts'} />\n                  </DataTableRow>\n                  <DataTableRow>\n                    <DataTableCell text={'components'} />\n                    <DataTableCell text={'general doc components'} />\n                  </DataTableRow>\n                  <DataTableRow>\n                    <DataTableCell text={'content'} />\n                    <DataTableCell text={'components for pages'} />\n                  </DataTableRow>\n                  <DataTableRow>\n                    <DataTableCell text={'navigation'} />\n                    <DataTableCell text={'defined routes and subitems'} />\n                  </DataTableRow>\n                  <DataTableRow>\n                    <DataTableCell text={'pages'} />\n                    <DataTableCell text={'all site pages'} />\n                  </DataTableRow>\n                  <DataTableRow>\n                    <DataTableCell text={'styles'} />\n                    <DataTableCell text={'limited css styles'} />\n                  </DataTableRow>\n                  <DataTableRow>\n                    <DataTableCell text={'utils'} />\n                    <DataTableCell text={'useful functions'} />\n                  </DataTableRow>\n                </DataTable>\n              </div>\n            }\n          />\n        </Section>\n\n        <Section name=\"Setup\" id=\"setup\" href=\"/contributing/docs#setup\">\n          <ComponentDescription\n            text={\n              <div style={{ overflow: 'auto' }}>\n                <ol>\n                  <li>Fork material-bread repo on github</li>\n                  <li>\n                    Clone the fork to your machine{' '}\n                    <CodeInline\n                      code=\"git clone git@github.com:codypearce/material-bread.git\"\n                      type={''}\n                    />\n                  </li>\n                  <li>\n                    Cd into project docs{' '}\n                    <CodeInline code=\"cd material-bread/docs\" type={''} />\n                  </li>\n                  <li>\n                    Install dependencies by running{' '}\n                    <CodeInline code=\"npm i\" type={''} /> or{' '}\n                    <CodeInline code=\"yarn\" type={''} />\n                  </li>\n                  <li>\n                    Start up Gatsby{' '}\n                    <CodeInline code=\"npm run develop\" type={''} />\n                  </li>\n                </ol>\n                Wait for the project to build and it should be running at\n                <CodeInline code=\"localhost:8000\" type={''} />.\n              </div>\n            }\n          />\n        </Section>\n      </div>\n    );\n  }\n}\n\nconst styles = {\n  container: {\n    display: 'flex',\n    flexDirection: 'column',\n\n    width: '100%',\n    paddingBottom: 60,\n  },\n  code: {},\n};\n\nexport default Index;\n"
  },
  {
    "path": "docs/src/pages/contributing/library.js",
    "content": "import React, { Component } from 'react';\n\nimport Prism from 'prismjs';\nimport {\n  PageTitle,\n  ComponentSubtitle,\n  Section,\n  ComponentDescription,\n  CodeInline,\n  Link,\n  SideScrollMenu,\n  Helmet,\n} from '@components';\nimport { DataTable, DataTableCell, DataTableRow } from '../../../../src';\nconst sections = [\n  { name: 'Started' },\n  { name: 'Setup' },\n  { name: 'Developing' },\n  { name: 'Storybook' },\n];\n\nclass Index extends Component {\n  componentDidMount() {\n    Prism.highlightAll();\n  }\n  render() {\n    return (\n      <div style={styles.container}>\n        <Helmet title={'Contribute to component library'} />\n        <PageTitle>Contributing to Library</PageTitle>\n        <ComponentSubtitle\n          description={\n            'All contributions are welcome, please follow the guide below to get started'\n          }\n        />\n        <SideScrollMenu items={sections} />\n        <Section\n          name=\"Getting Started\"\n          id=\"started\"\n          href=\"/contributing/library#tarted\">\n          <ComponentDescription\n            text={\n              <div>\n                <div style={{ marginTop: 8, marginBottom: 8 }}>\n                  This project uses{' '}\n                  <Link href=\"https://storybook.js.org/\">Storybook</Link> as\n                  it's development environment for both React Native and the\n                  web. Storybook has it's own simple webserver to run the web\n                  components, but the project uses a bare React Native app to\n                  run it's components and the Storybook environment.\n                </div>\n                The main project folders are as follows:\n                <DataTable\n                  style={{ marginTop: 8, marginBottom: 8, maxWidth: 400 }}>\n                  <DataTableRow style={{ backgroundColor: 'rgba(0,0,0,.12)' }}>\n                    <DataTableCell text={'folder'} type={'header'} />\n                    <DataTableCell text={'description'} type={'header'} />\n                  </DataTableRow>\n                  <DataTableRow>\n                    <DataTableCell text={'.storybook'} />\n                    <DataTableCell text={'storybook config'} />\n                  </DataTableRow>\n                  <DataTableRow>\n                    <DataTableCell text={'docs'} />\n                    <DataTableCell text={'documentation site '} />\n                  </DataTableRow>\n                  <DataTableRow>\n                    <DataTableCell text={'public'} />\n                    <DataTableCell text={'storybook web files'} />\n                  </DataTableRow>\n                  <DataTableRow>\n                    <DataTableCell text={'src'} />\n                    <DataTableCell text={'component library'} />\n                  </DataTableRow>\n                </DataTable>\n                Essentially the project files are in the{' '}\n                <CodeInline code=\"root\" type={'value'} /> of the folder, and all\n                documtation files live in the{' '}\n                <CodeInline code=\"docs\" type={'value'} /> folder.\n              </div>\n            }\n          />\n        </Section>\n\n        <Section name=\"Setup\" id=\"setup\" href=\"/contributing/library#setup\">\n          <ComponentDescription\n            text={\n              <div>\n                You can follow the{' '}\n                <Link href=\"https://facebook.github.io/react-native/docs/getting-started\">\n                  React Native Docs\n                </Link>{' '}\n                to get React Native installed if you need to. Once you have\n                React Native set up, follow these steps to get the project set\n                up:\n                <ol>\n                  <li>Fork material-bread repo on github</li>\n                  <li>\n                    Clone the fork to your machine{' '}\n                    <CodeInline\n                      code=\"git clone git@github.com:copypearce/material-bread.git\"\n                      type={''}\n                    />\n                  </li>\n                  <li>\n                    Cd into project{' '}\n                    <CodeInline code=\"cd material-bread\" type={''} />\n                  </li>\n                  <li>\n                    Install dependencies by running{' '}\n                    <CodeInline code=\"npm i\" type={''} /> or{' '}\n                    <CodeInline code=\"yarn\" type={''} />\n                  </li>\n                  <li>\n                    Start up react native app by running{' '}\n                    <CodeInline\n                      code=\"react-native\n                run-ios\"\n                      type={''}\n                    />{' '}\n                    or{' '}\n                    <CodeInline\n                      code=\"react-native\n                run-android\"\n                      type={''}\n                    />\n                  </li>\n                  <li>\n                    Start up web project by openning a new terminal tab and\n                    running\n                    <CodeInline code=\"npm run storybook-web\" type={''} />\n                  </li>\n                </ol>\n                The app should be running on whichever simulator you set up, and\n                the web app should be available at{' '}\n                <CodeInline code=\"localhost:9009\" type={''} />.\n              </div>\n            }\n          />\n        </Section>\n\n        <Section\n          name=\"Developing\"\n          id=\"developing\"\n          href=\"/contributing/library#developing\">\n          <ComponentDescription\n            text={\n              <div style={{ overflow: 'auto' }}>\n                <div>\n                  Components all live in{' '}\n                  <CodeInline code=\"src/Components\" type={'file'} />, and\n                  they're displayed in the dev environment in a corresponding\n                  file{' '}\n                  <CodeInline\n                    code=\"src/storybook/stories/index\"\n                    type={'file'}\n                  />\n                  .\n                </div>\n                Use the following steps to create a new component:\n                <ol>\n                  <li>\n                    Create a basic component folder and file in{' '}\n                    <CodeInline\n                      code=\"src/Components/ComponentName\"\n                      type={'file'}\n                    />{' '}\n                    named\n                    <CodeInline code=\"ComponentName.js\" type={'file'} />.\n                  </li>\n                  <li>\n                    Import <CodeInline code=\"withTheme\" type={'element'} />\n                    and Wrap component in the HOC theme component as such\n                    <CodeInline\n                      code=\"export default withTheme(ComponentName);\"\n                      type={'value'}\n                    />\n                  </li>\n                  <li>\n                    Add component to{' '}\n                    <CodeInline code=\"src/index.js\" type={'file'} />\n                    as such{' '}\n                    <CodeInline\n                      code=\"export { default as ComponentName } from './Components/ComponentName/ComponentName'\"\n                      type={'value'}\n                    />\n                    .\n                  </li>\n                  <li>\n                    Create component file in{' '}\n                    <CodeInline\n                      code=\"src/Components/ComponentName.stories.js\"\n                      type={'file'}\n                    />{' '}\n                    as shown in the other files\n                  </li>\n                  <li>\n                    Add component story to{' '}\n                    <CodeInline\n                      code=\"src/storybook/stories/index\"\n                      type={'file'}\n                    />{' '}\n                    as such{' '}\n                    <CodeInline\n                      code=\"export { default as ComponentName } from '../Components/ComponentName/ComponentName.stories.js'\"\n                      type={'value'}\n                    />{' '}\n                    .\n                  </li>\n                </ol>\n                You should now see your component listed in your Storybook\n                environment on the app or the web.\n              </div>\n            }\n          />\n        </Section>\n\n        <Section\n          name=\"Storybook Docs \"\n          id=\"storybook\"\n          href=\"/contributing/library#storybook\">\n          <ComponentDescription\n            text={\n              <div>\n                The storybook environment houses all of the components for\n                development, but its also used in the docs to display more\n                variations. This means the storybook stories you write will\n                appear in the docs for users to play with. For more information\n                about writing storybook stories, refer to{' '}\n                <Link href=\"https://storybook.js.org/docs/basics/introduction/\">\n                  storybook documentation\n                </Link>\n              </div>\n            }\n          />\n        </Section>\n      </div>\n    );\n  }\n}\n\nconst styles = {\n  container: {\n    display: 'flex',\n    flexDirection: 'column',\n\n    width: '100%',\n    paddingBottom: 60,\n  },\n  code: {},\n};\n\nexport default Index;\n"
  },
  {
    "path": "docs/src/pages/getting-started/electron.js",
    "content": "import React, { Component } from 'react';\n\nimport Prism from 'prismjs';\nimport {\n  CodeBlock,\n  Section,\n  Link,\n  ComponentDescription,\n  SideScrollMenu,\n  PageTitle,\n  ComponentSubtitle,\n  CodeInline,\n  Helmet,\n} from '@components';\n\nconst sections = [\n  { name: 'Install' },\n  { name: 'Setup' },\n  { name: 'Usage' },\n  { name: 'Examples' },\n];\n\nconst dependencies = `npm i material-bread electron react react-dom react-native-web react-native-svg modal-enhanced-react-native-web @babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread @babel/plugin-transform-flow-strip-types @babel/plugin-transform-regenerator @babel/plugin-transform-runtime @babel/plugin-proposal-export-default-from css-loader file-loader style-loader webpack webpack-cli webpack-dev-server\n`;\n\nconst code = `import React, { Component } from \"react\";\nimport Root from \"./Root\";\nimport { BreadProvider } from \"material-bread\";\n\nexport default class App extends Component {\n  render() {\n    return (\n      <BreadProvider>\n        <Root />\n      </BreadProvider>\n    );\n  }\n}`;\n\nconst html = `<!DOCTYPE html>\n<html>\n  <head>\n    <title>Material Bread Electron</title>\n    <meta charset=\"utf-8\" />\n  </head>\n  <body>\n    <div id=\"app\"></div>\n    <script\n      type=\"text/javascript\"\n      src=\"http://localhost:7000/bundle.js\"\n    ></script>\n  </body>\n</html>\n`;\n\nconst mainJs = `const { app, BrowserWindow } = require(\"electron\");\n\nlet win;\n\nconst createWindow = () => {\n  win = new BrowserWindow({\n    width: 800,\n    minWidth: 500,\n    height: 620,\n    minHeight: 500,\n    center: true,\n    show: false\n  });\n  win.loadURL(\\`file://${__dirname}/index.html\\`);\n\n  win.on(\"closed\", () => {\n    win = null;\n  });\n  win.once(\"ready-to-show\", () => {\n    win.show();\n  });\n};\n\napp.on(\"ready\", createWindow);\n\napp.on(\"window-all-closed\", () => {\n  app.quit();\n});\n\napp.on(\"activate\", () => {\n  if (win === null) {\n    createWindow();\n  }\n});\n`;\n\nconst rendererJs = `import React from \"react\";\nimport { render, unmountComponentAtNode } from \"react-dom\";\n\nconst root = document.getElementById(\"app\");\n\nconst renderApp = () => {\n  const App = require(\"./App\").default;\n  if (root) render(<App />, root);\n};\n\nrenderApp();\n\nif (module && module.hot != null && typeof module.hot.accept === \"function\") {\n  module.hot.accept([\"./App\"], () =>\n    setImmediate(() => {\n      unmountComponentAtNode(root);\n      renderApp();\n    })\n  );\n}`;\n\nconst webpack = `const path = require(\"path\");\n\nmodule.exports = {\n  mode: \"development\",\n  entry: {\n    app: path.join(__dirname, \"src\", \"renderer.js\")\n  },\n  node: {\n    __filename: true,\n    __dirname: true\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.(js|jsx)$/,\n        exclude: /node_modules\\/(?!(material-bread|react-native-vector-icons)\\/).*/,\n        use: {\n          loader: \"babel-loader\",\n          options: {\n            presets: [\"@babel/preset-env\", \"@babel/preset-react\"],\n            plugins: [\n              \"@babel/plugin-transform-flow-strip-types\",\n              \"@babel/plugin-proposal-class-properties\",\n              \"@babel/plugin-proposal-object-rest-spread\",\n              \"@babel/plugin-transform-runtime\",\n              \"@babel/plugin-transform-regenerator\",\n              \"@babel/plugin-proposal-export-default-from\"\n            ]\n          }\n        }\n      },\n      {\n        test: /\\.html$/,\n        use: [\n          {\n            loader: \"html-loader\"\n          }\n        ]\n      },\n      {\n        test: /\\.css$/,\n        use: [\"style-loader\", \"css-loader\"]\n      },\n      {\n        test: /\\.(png|woff|woff2|eot|ttf|svg)$/,\n        loader: \"file-loader?limit=100000\"\n      }\n    ]\n  },\n  resolve: {\n    alias: {\n      \"react-native\": \"react-native-web\"\n    }\n  },\n  output: {\n    filename: \"bundle.js\"\n  },\n  target: \"electron-renderer\",\n  devServer: {\n    contentBase: path.join(__dirname, \"src\"),\n    port: 7000\n  }\n};`;\n\nconst appjs = `import React, { Component } from \"react\";\nimport { View } from \"react-native\";\nimport { Fab } from \"material-bread\";\n\nconst materialFont = new FontFace(\n  \"MaterialIcons\",\n  \"url(../node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf)\"\n);\ndocument.fonts.add(materialFont);\n\nclass App extends Component {\n  \n    render() {\n        return (\n            <View>\n                <Fab />\n            </View>\n        );\n    }\n}\n\nexport default App;`;\n\nconst scripts = `\"server\": \"webpack-dev-server --config ./webpack.config.js\",\n\"electron\": \"electron ./src/main.js\",\n`;\n\nclass Index extends Component {\n  componentDidMount() {\n    Prism.highlightAll();\n  }\n  render() {\n    return (\n      <div style={styles.container}>\n        <Helmet title={'React Native Electron'} />\n        <PageTitle>Electron</PageTitle>\n        <ComponentSubtitle\n          description={\n            'Build cross platform desktop apps with JavaScript, HTML, and CSS'\n          }\n        />\n\n        <SideScrollMenu items={sections} />\n        <Section\n          name=\"Install\"\n          id=\"install\"\n          href=\"/getting-started/electron#install\">\n          <div className=\"row\">\n            <CodeBlock\n              code={'npm i material-bread'}\n              style={styles.code}\n              fontSize={12}\n              canCopy\n              small\n            />\n          </div>\n          <div className=\"row\">or</div>\n          <div className=\"row\">\n            <CodeBlock\n              code={'yarn add material-bread'}\n              style={styles.code}\n              fontSize={12}\n              canCopy\n              small\n            />\n          </div>\n        </Section>\n        <Section\n          name=\"Setup\"\n          id=\"setup\"\n          href=\"/getting-started/electron#setup \">\n          <ComponentDescription\n            text={\n              <div>\n                There are essentially three steps involved in getting Material\n                Bread working on Electron.\n                <ol>\n                  <li>Set up React on Electron</li>\n                  <li>Set up React-Web on Electron</li>\n                  <li>Set up Material Bread and vector icons</li>\n                </ol>\n                The quickest and easiest way to get started is to check out the\n                example repo linked below. If you're familiar with setting up\n                <CodeInline code=\"react\" type=\"\" /> and{' '}\n                <CodeInline code=\"react-native-web\" type=\"\" /> with electron\n                then you can skip to the section about webpack config and{' '}\n                <CodeInline code=\"app.js\" type=\"file\" />.\n              </div>\n            }\n          />\n          <div style={styles.subSection}>\n            <h3 style={styles.h3}>Install dependencies</h3>\n            <ComponentDescription\n              text={\n                <div>\n                  This includes <CodeInline code=\"react\" type=\"\" />,{' '}\n                  <CodeInline code=\"react-native\" type=\"\" />\n                  , <CodeInline code=\"react-native-web\" type=\"\" />,{' '}\n                  <CodeInline code=\"electron\" type=\"\" />, required babel\n                  plugins, and webpack loaders.\n                </div>\n              }\n            />\n            <CodeBlock\n              code={dependencies}\n              style={styles.code}\n              canCopy\n              small\n              fontSize={12}\n            />\n          </div>\n          <div style={styles.subSection}>\n            <h3 style={styles.h3}>HTML entry</h3>\n            <ComponentDescription\n              text={\n                <div>\n                  Create a src folder with{' '}\n                  <CodeInline code=\"index.html\" type=\"file\" /> to act as an\n                  entry\n                </div>\n              }\n            />\n            <CodeBlock code={html} style={styles.code} canCopy />\n          </div>\n\n          <div style={styles.subSection}>\n            <h3 style={styles.h3}>Create main.js</h3>\n            <ComponentDescription\n              text={\n                <div>\n                  Create a <CodeInline code=\"main.js\" type=\"file\" /> file in src\n                  that will create a window and load the{' '}\n                  <CodeInline code=\"index.html\" type=\"file\" />\n                  file.\n                </div>\n              }\n            />\n            <CodeBlock code={mainJs} style={styles.code} canCopy />\n          </div>\n\n          <div style={styles.subSection}>\n            <h3 style={styles.h3}>Create renderer.js</h3>\n            <ComponentDescription\n              text={\n                <div>\n                  Create a <CodeInline code=\"renderer.js\" type=\"file\" /> file in\n                  src that will load react into the html file with hot\n                  reloading.\n                </div>\n              }\n            />\n            <CodeBlock code={rendererJs} style={styles.code} canCopy />\n          </div>\n\n          <div style={styles.subSection}>\n            <h3 style={styles.h3}>Create webpack.config.js</h3>\n            <ComponentDescription\n              text={\n                <div>\n                  Create a <CodeInline code=\"webpack.config.js\" type=\"file\" />{' '}\n                  file in the root of the project that will handle babel\n                  plugins, loaders, electron-renderer, output our bundle, and\n                  alias react-native.\n                </div>\n              }\n            />\n            <CodeBlock code={webpack} style={styles.code} canCopy />\n          </div>\n\n          <div style={styles.subSection}>\n            <h3 style={styles.h3}>Create App.js and add Icons</h3>\n            <ComponentDescription\n              text={\n                <div>\n                  Create <CodeInline code=\"App.js \" type=\"file\" />\n                  component in src. Add the FontFace function below to add the\n                  material icons to the package.\n                </div>\n              }\n            />\n            <CodeBlock code={appjs} style={styles.code} canCopy />\n          </div>\n\n          <div style={styles.subSection}>\n            <h3 style={styles.h3}>Add scipts</h3>\n            <ComponentDescription\n              text={\n                <div>\n                  Add webpack server script and electron server to{' '}\n                  <CodeInline code=\"package.json\" type=\"file\" />.\n                </div>\n              }\n            />\n            <CodeBlock code={scripts} style={styles.code} canCopy />\n          </div>\n\n          <div style={styles.subSection}>\n            <h3 style={styles.h3}>Finish</h3>\n            <ComponentDescription\n              text={\n                <div>\n                  Finally open up two console tabs, run{' '}\n                  <CodeInline code=\"npm run server\" type=\"\" />\n                  in one and <CodeInline code=\"npm run electron\" type=\"\" /> in\n                  the other. You should now see your app running with Material\n                  Bread components. Keep in mind this a very minimal setup,\n                  there are plenty of other great guides setting up{' '}\n                  <CodeInline code=\"react\" type=\"\" /> and\n                  <CodeInline code=\"react-native\" type=\"\" /> with{' '}\n                  <CodeInline code=\"electron\" type=\"\" />.\n                </div>\n              }\n            />\n          </div>\n        </Section>\n        <Section name=\"Usage\" id=\"usage\" href=\"/getting-started/electron#usage\">\n          <ComponentDescription\n            text={\n              <div>\n                Simply wrap your app or root in the{' '}\n                <CodeInline code=\"BreadProvider\" type=\"element\" /> and start\n                developing. You can learn about customizing on the\n                <Link href=\"/style/theme\"> theme page</Link>.\n              </div>\n            }\n          />\n          <CodeBlock code={code} canCopy />\n        </Section>\n        <Section\n          name=\"Examples\"\n          id=\"examples\"\n          href=\"/getting-started/electron#examples\">\n          <ComponentDescription\n            text={\n              <div>\n                For a quick start with minimal set up with{' '}\n                <CodeInline code=\"react-native-web\" type=\"\" />,\n                <CodeInline code=\"electron\" type=\"\" />, and{' '}\n                <CodeInline code=\"materal-bread\" type=\"\" />, checkout the\n                example below\n              </div>\n            }\n          />\n          <Link\n            href=\"https://github.com/codypearce/material-bread-electron-example\"\n            style={{ fontSize: 18, whitespace: 'wrap' }}>\n            Minimal React Native Electron Example\n          </Link>\n        </Section>\n      </div>\n    );\n  }\n}\n\nconst styles = {\n  container: { marginBottom: 60 },\n  code: {},\n  h3: {\n    fontWeight: 400,\n    marginBottom: 8,\n  },\n  subSection: {\n    marginTop: 40,\n  },\n};\n\nexport default Index;\n"
  },
  {
    "path": "docs/src/pages/getting-started/expo.js",
    "content": "import React, { Component } from 'react';\n\nimport Prism from 'prismjs';\nimport {\n  CodeBlock,\n  Section,\n  Link,\n  ComponentDescription,\n  SideScrollMenu,\n  PageTitle,\n  ComponentSubtitle,\n  CodeInline,\n  Helmet,\n} from '@components';\n\nconst sections = [\n  { name: 'Install' },\n  { name: 'Setup' },\n  { name: 'Usage' },\n  { name: 'Examples' },\n];\n\nconst expoCode = `npm install expo-cli --global\nexpo init my-new-project\ncd my-new-project\nexpo start`;\n\nconst code = `import React, { Component } from \"react\";\nimport Root from \"./Root\";\nimport { BreadProvider } from \"material-bread\";\n\nexport default class App extends Component {\n  render() {\n    return (\n      <BreadProvider>\n        <Root />\n      </BreadProvider>\n    );\n  }\n}`;\n\nconst fontCode = `@font-face {\n    src: url(./MaterialIcons.ttf);\n    font-family: MaterialIcons;\n}\n`;\n\nclass Index extends Component {\n  componentDidMount() {\n    Prism.highlightAll();\n  }\n  render() {\n    return (\n      <div style={styles.container}>\n        <Helmet title={'Get started with Expo and Material Bread'} />\n        <PageTitle>Expo</PageTitle>\n        <ComponentSubtitle\n          description={'Build mobile apps using React and React Native'}\n        />\n\n        <SideScrollMenu items={sections} />\n        <Section\n          name=\"Install\"\n          id=\"install\"\n          href=\"/getting-started/expo#install\">\n          <div className=\"row\">\n            <CodeBlock\n              code={'npm i material-bread'}\n              style={styles.code}\n              fontSize={12}\n              canCopy\n              small\n            />\n          </div>\n          <div className=\"row\">or</div>\n          <div className=\"row\">\n            <CodeBlock\n              code={'yarn add material-bread'}\n              style={styles.code}\n              fontSize={12}\n              canCopy\n              small\n            />\n          </div>\n        </Section>\n        <Section name=\"Setup\" id=\"setup\" href=\"/getting-started/expo#setup \">\n          <div>\n            <h3 style={styles.h3}>Install Expo</h3>\n            <ComponentDescription\n              text={\n                <div>\n                  Follow the instructions on Expo's\n                  <Link href=\"https://expo.io/learn\"> Get Started</Link> guide\n                  to make sure you have everything installed. Or run the\n                  following\n                  <CodeBlock code={expoCode} canCopy />\n                </div>\n              }\n            />\n          </div>\n          <div>\n            <h3 style={styles.h3}>Dependencies</h3>\n            <ComponentDescription\n              text={\n                <div>\n                  Expo already has{' '}\n                  <CodeInline code=\"react-native-vector-icons\" type=\"\" /> setup,\n                  so we only need to install\n                  <Link href=\"https://github.com/react-native-community/react-native-svg\">\n                    {' '}\n                    react-native-svg{' '}\n                  </Link>\n                  , and we're ready to start adding components.\n                </div>\n              }\n            />\n          </div>\n\n          <div>\n            <h3 style={styles.h3}>Expo Web</h3>\n            <ComponentDescription\n              text={\n                <div>\n                  Expo web should run fine, but we need to provide the\n                  MaterialIcon font to the browser. First we need to generate\n                  the <CodeInline code=\"index.html\" type=\"file\" /> to insert the\n                  font in the head. Run the following and select{' '}\n                  <CodeInline code=\"index.html\" type=\"file\" />:\n                  <CodeBlock code={`expo customize:web`} canCopy />\n                  <div style={{ marginTop: 16 }}>\n                    Next we need to download the font file,\n                    <CodeInline code=\"MaterialIcons.ttf\" type=\"file\" />, go to\n                    <Link\n                      href=\"https://github.com/oblador/react-native-vector-icons/blob/master/Fonts/MaterialIcons.ttf\"\n                      style={{ margin: '0 4px', display: 'inline' }}>\n                      {' '}\n                      react-native-vector-icons repo\n                    </Link>\n                    to download it. Add this file to a new{' '}\n                    <CodeInline code=\"web\" type=\"file\" /> folder at the root.\n                  </div>\n                  <div style={{ marginTop: 16 }}>\n                    Finally, go to the{' '}\n                    <CodeInline code=\"index.html\" type=\"file\" /> and add the\n                    following to the bottom of the{' '}\n                    <CodeInline code=\"<style>\" type=\"element\" /> element.\n                    <CodeBlock code={fontCode} canCopy />\n                  </div>\n                  <div style={{ marginTop: 16 }}>\n                    Now you can run the following and start adding components\n                    with icons\n                    <CodeBlock code={`expo start -w`} canCopy />\n                  </div>\n                </div>\n              }\n            />\n          </div>\n        </Section>\n        <Section\n          name=\"Usage\"\n          id=\"usage\"\n          href=\"/getting-started/react-native#usage\">\n          <ComponentDescription\n            text={\n              <div>\n                Simply wrap your app or root in the{' '}\n                <CodeInline code=\"BreadProvider\" type=\"element\" /> and start\n                developing. You can learn about customizing on the\n                <Link href=\"/style/theme\"> theme page</Link>.\n              </div>\n            }\n          />\n          <CodeBlock code={code} canCopy />\n        </Section>\n        <Section\n          name=\"Examples\"\n          id=\"examples\"\n          href=\"/getting-started/react-native#examples\">\n          <ComponentDescription\n            text={\n              <div>\n                If you're confused, check out thes example repo with Material\n                Bread set up\n              </div>\n            }\n          />\n          <div className=\"row\">\n            <Link\n              href=\"https://github.com/codypearce/material-bread-expo-example\"\n              style={{ fontSize: 18 }}>\n              Expo Example\n            </Link>\n          </div>\n        </Section>\n      </div>\n    );\n  }\n}\n\nconst styles = {\n  container: { marginBottom: 60 },\n  code: {},\n};\n\nexport default Index;\n"
  },
  {
    "path": "docs/src/pages/getting-started/macos.js",
    "content": "import React, { Component } from 'react';\n\nimport Prism from 'prismjs';\nimport {\n  CodeBlock,\n  Section,\n  Link,\n  ComponentDescription,\n  SideScrollMenu,\n  PageTitle,\n  ComponentSubtitle,\n  CodeInline,\n  Helmet,\n} from '@components';\n\nconst sections = [\n  { name: 'Install' },\n  { name: 'Setup' },\n  { name: 'Usage' },\n  { name: 'Examples' },\n];\n\nconst code = `import React, { Component } from \"react\";\nimport Root from \"./Root\";\nimport { BreadProvider } from \"material-bread\";\n\nexport default class App extends Component {\n  render() {\n    return (\n      <BreadProvider>\n        <Root />\n      </BreadProvider>\n    );\n  }\n}`;\n\nconst depend = `npm install react-native-macos-cli -g\nreact-native-macos init MyProject\ncd MyProject\nreact-native-macos run-macos`;\n\nconst alias = `const withTM = require('next-transpile-modules')\nconst withFonts = require('next-fonts')\nmodule.exports = withFonts(\n  withTM({\n    transpileModules: ['material-bread', 'react-native-svg', 'react-native-vector-icons'],\n    webpack: config => {\n      config.resolve.extensions = ['.web.js', '.js']\n      config.resolve.alias = {\n        ...(config.resolve.alias || {}),\n        'react-native$': 'react-native-web',\n        'react-native-svg$': 'react-native-svg-web'\n      }\n      return config\n    }\n  })\n)`;\n\nconst appjson = `{\n    \"name\": \"material-bread-next\",\n    \"displayName\": \"material-bread-next\"\n}\n`;\n\nconst documentNext = `import Document, { Head, Main, NextScript } from 'next/document'\nimport React from 'react'\nimport { AppRegistry } from 'react-native'\nimport config from '../app.json'\n\nconst normalizeNextElements = \\`\nhtml,\nbody,\n#__next {\n  height: 100%;\n  font-family: Roboto, sans-serif;\n}\n@import url(\"https://fonts.googleapis.com/css?family=Roboto\");\n@font-face {\n  src: url(/static/MaterialIcons.ttf);\n  font-family: MaterialIcons;\n}  \n\\`\n\nexport default class MyDocument extends Document {\n  static async getInitialProps({ renderPage }) {\n    AppRegistry.registerComponent(config.name, () => Main)\n    const { getStyleElement } = AppRegistry.getApplication(config.name)\n    const page = renderPage()\n\n    const styles = [<style dangerouslySetInnerHTML={{ __html: normalizeNextElements }} />, getStyleElement()]\n    return { ...page, styles: React.Children.toArray(styles) }\n  }\n\n  render() {\n    return (\n      <html>\n        <Head />\n        <body>\n          <Main />\n          <NextScript />\n        </body>\n      </html>\n    )\n  }\n}\n`;\n\nconst indexjs = `import React, { Component } from \"react\";\nimport { View } from \"react-native\";\nimport { Fab } from \"material-bread\";\n\nclass App extends Component {\n    render() {\n        return (\n            <View>\n                <Fab />\n            </View>\n        );\n    }\n}\n\nexport default App;`;\n\nclass Index extends Component {\n  componentDidMount() {\n    Prism.highlightAll();\n  }\n  render() {\n    return (\n      <div style={styles.container}>\n        <Helmet title={'Get started with Material Bread and MacOS'} />\n        <PageTitle>MacOS</PageTitle>\n        <ComponentSubtitle\n          description={'Build macOS desktop applications using React Native.'}\n        />\n\n        <SideScrollMenu items={sections} />\n        <Section\n          name=\"Install\"\n          id=\"install\"\n          href=\"/getting-started/react-native#install\">\n          <div className=\"row\">\n            <CodeBlock\n              code={'npm i material-bread'}\n              style={styles.code}\n              fontSize={12}\n              canCopy\n              small\n            />\n          </div>\n          <div className=\"row\">or</div>\n          <div className=\"row\">\n            <CodeBlock\n              code={'yarn add material-bread'}\n              style={styles.code}\n              fontSize={12}\n              canCopy\n              small\n            />\n          </div>\n        </Section>\n        <Section name=\"Setup\" id=\"setup\" href=\"/getting-started/web#setup \">\n          <ComponentDescription\n            text={\n              <div>\n                Since React Native macOS is just a fork of React Native the\n                setup process is easy. Go to the\n                <Link\n                  href=\"https://github.com/ptmt/react-native-macos\"\n                  style={{ margin: '0 4px', display: 'inline' }}>\n                  {' '}\n                  react-native-macos repo\n                </Link>\n                <span>\n                  to learn more. Alternatively, you can use the{' '}\n                  <Link\n                    href=\"https://github.com/codypearce/react-native-infinity\"\n                    style={{ margin: '0 4px', display: 'inline' }}>\n                    {' '}\n                    react-native-infinty cli\n                  </Link>{' '}\n                  to generate a project with Material Bread already setup.\n                </span>\n              </div>\n            }\n          />\n          <div>\n            <h3 style={styles.h3}>Init a project</h3>\n            <ComponentDescription\n              text={\n                <div>\n                  <CodeBlock\n                    code={depend}\n                    style={styles.code}\n                    fontSize={12}\n                    canCopy\n                    small\n                  />{' '}\n                </div>\n              }\n            />\n          </div>\n\n          <div style={styles.subSection}>\n            <h3 style={styles.h3}>Dependencies</h3>\n            <ComponentDescription\n              text={\n                <div>\n                  Next, simply install and link {'  '}\n                  <Link href=\"https://github.com/oblador/react-native-vector-icons\">\n                    {' '}\n                    react-native-vector-icons{' '}\n                  </Link>{' '}\n                  and{' '}\n                  <Link href=\"https://github.com/react-native-community/react-native-svg\">\n                    {' '}\n                    react-native-svg{' '}\n                  </Link>\n                  .\n                </div>\n              }\n            />\n          </div>\n        </Section>\n\n        <Section\n          name=\"Usage\"\n          id=\"usage\"\n          href=\"/getting-started/react-native#usage\">\n          <ComponentDescription\n            text={\n              <div>\n                Wrap your app or root in the{' '}\n                <CodeInline code=\"BreadProvider\" type=\"element\" /> and start\n                developing. You can learn about customizing on the\n                <Link href=\"/style/theme\"> theme page</Link>.\n              </div>\n            }\n          />\n          <CodeBlock code={code} canCopy />\n        </Section>\n        <Section\n          name=\"Examples\"\n          id=\"examples\"\n          href=\"/getting-started/macos#examples\">\n          <ComponentDescription\n            text={\n              <div>\n                If you're confused, check out this example repos with Material\n                Bread set up. Alternatively, you can use the{' '}\n                <Link\n                  href=\"https://github.com/codypearce/react-native-infinity\"\n                  style={{ margin: '0 4px', display: 'inline' }}>\n                  {' '}\n                  react-native-infinty cli\n                </Link>{' '}\n                to generate a project with Material Bread already setup.\n              </div>\n            }\n          />\n          <div className=\"row\">\n            <Link\n              href=\"https://github.com/codypearce/material-bread-macos-example\"\n              style={{ fontSize: 18 }}>\n              MacOS Example\n            </Link>\n          </div>\n        </Section>\n      </div>\n    );\n  }\n}\n\nconst styles = {\n  container: { marginBottom: 60 },\n  code: {},\n  subSection: { marginTop: 60 },\n};\n\nexport default Index;\n"
  },
  {
    "path": "docs/src/pages/getting-started/nextjs.js",
    "content": "import React, { Component } from 'react';\n\nimport Prism from 'prismjs';\nimport {\n  CodeBlock,\n  Section,\n  Link,\n  ComponentDescription,\n  SideScrollMenu,\n  PageTitle,\n  ComponentSubtitle,\n  CodeInline,\n  Helmet,\n} from '@components';\n\nconst sections = [\n  { name: 'Install' },\n  { name: 'Setup' },\n  { name: 'Usage' },\n  { name: 'Examples' },\n];\n\nconst code = `import React, { Component } from \"react\";\nimport Root from \"./Root\";\nimport { BreadProvider } from \"material-bread\";\n\nexport default class App extends Component {\n  render() {\n    return (\n      <BreadProvider>\n        <Root />\n      </BreadProvider>\n    );\n  }\n}`;\n\nconst depend = `{\n    \"name\": \"material-bread-next\",\n    \"scripts\": {\n        \"dev\": \"next\",\n        \"build\": \"next build\",\n        \"start\": \"next start\"\n    },\n    \"dependencies\": {\n        \"babel-plugin-react-native-web\": \"^0.11.7\",\n        \"material-bread\": \"^0.2.2\",\n        \"next\": \"latest\",\n        \"next-fonts\": \"^0.18.0\",\n        \"next-transpile-modules\": \"^2.3.1\",\n        \"react\": \"^16.7.0\",\n        \"react-dom\": \"^16.7.0\",\n        \"react-native-svg-web\": \"^1.0.1\",\n        \"react-native-vector-icons\": \"^6.6.0\",\n        \"react-native-web\": \"^0.11.6\"\n    }\n}`;\n\nconst alias = `const withTM = require('next-transpile-modules')\nconst withFonts = require('next-fonts')\nmodule.exports = withFonts(\n  withTM({\n    transpileModules: ['material-bread', 'react-native-svg', 'react-native-vector-icons'],\n    webpack: config => {\n      config.resolve.extensions = ['.web.js', '.js']\n      config.resolve.alias = {\n        ...(config.resolve.alias || {}),\n        'react-native$': 'react-native-web',\n        'react-native-svg$': 'react-native-svg-web'\n      }\n      return config\n    }\n  })\n)`;\n\nconst appjson = `{\n    \"name\": \"material-bread-next\",\n    \"displayName\": \"material-bread-next\"\n}\n`;\n\nconst documentNext = `import Document, { Head, Main, NextScript } from 'next/document'\nimport React from 'react'\nimport { AppRegistry } from 'react-native'\nimport config from '../app.json'\n\nconst normalizeNextElements = \\`\nhtml,\nbody,\n#__next {\n  height: 100%;\n  font-family: Roboto, sans-serif;\n}\n@import url(\"https://fonts.googleapis.com/css?family=Roboto\");\n@font-face {\n  src: url(/static/MaterialIcons.ttf);\n  font-family: MaterialIcons;\n}  \n\\`\n\nexport default class MyDocument extends Document {\n  static async getInitialProps({ renderPage }) {\n    AppRegistry.registerComponent(config.name, () => Main)\n    const { getStyleElement } = AppRegistry.getApplication(config.name)\n    const page = renderPage()\n\n    const styles = [<style dangerouslySetInnerHTML={{ __html: normalizeNextElements }} />, getStyleElement()]\n    return { ...page, styles: React.Children.toArray(styles) }\n  }\n\n  render() {\n    return (\n      <html>\n        <Head />\n        <body>\n          <Main />\n          <NextScript />\n        </body>\n      </html>\n    )\n  }\n}\n`;\n\nconst indexjs = `import React, { Component } from \"react\";\nimport { View } from \"react-native\";\nimport { Fab } from \"material-bread\";\n\nclass App extends Component {\n    render() {\n        return (\n            <View>\n                <Fab />\n            </View>\n        );\n    }\n}\n\nexport default App;`;\n\nclass Index extends Component {\n  componentDidMount() {\n    Prism.highlightAll();\n  }\n  render() {\n    return (\n      <div style={styles.container}>\n        <Helmet title={'Get started with Material Bread and NextJS'} />\n        <PageTitle>NextJS</PageTitle>\n        <ComponentSubtitle\n          description={'Server Rendered React and React Native'}\n        />\n\n        <SideScrollMenu items={sections} />\n        <Section\n          name=\"Install\"\n          id=\"install\"\n          href=\"/getting-started/react-native#install\">\n          <div className=\"row\">\n            <CodeBlock\n              code={'npm i material-bread'}\n              style={styles.code}\n              fontSize={12}\n              canCopy\n              small\n            />\n          </div>\n          <div className=\"row\">or</div>\n          <div className=\"row\">\n            <CodeBlock\n              code={'yarn add material-bread'}\n              style={styles.code}\n              fontSize={12}\n              canCopy\n              small\n            />\n          </div>\n        </Section>\n        <Section name=\"Setup\" id=\"setup\" href=\"/getting-started/web#setup \">\n          <ComponentDescription\n            text={\n              <div>\n                The following guide is for setting up a minimal configuration\n                for\n                <Link\n                  href=\"https://nextjs.org/learn/basics/getting-started\"\n                  style={{ margin: '0 4px', display: 'inline' }}>\n                  {' '}\n                  NextJS\n                </Link>\n                <span>\n                  and Material Bread. Please see the example repo for the full\n                  code.\n                </span>\n              </div>\n            }\n          />\n          <div>\n            <h3 style={styles.h3}>Package.json</h3>\n            <ComponentDescription\n              text={\n                <div>\n                  Init a new project with a{' '}\n                  <CodeInline code=\"package.json\" type=\"file\" /> like below\n                  <CodeBlock\n                    code={depend}\n                    style={styles.code}\n                    fontSize={12}\n                    canCopy\n                    small\n                  />{' '}\n                  Then run\n                  <CodeBlock\n                    code={`npm i`}\n                    style={styles.code}\n                    fontSize={12}\n                    canCopy\n                    small\n                  />\n                </div>\n              }\n            />\n          </div>\n          <div style={styles.subSection}>\n            <h3 style={styles.h3}>next.config.js</h3>\n            <ComponentDescription\n              text={\n                <div>\n                  Create the\n                  <CodeInline code=\"next.config.js\" type=\"file\" /> to transpile\n                  packages, alias react native, and handle fonts.\n                </div>\n              }\n            />\n            <CodeBlock code={alias} style={styles.code} canCopy />\n            <ComponentDescription\n              text={\n                <div>\n                  Also Create a file for the app name,{' '}\n                  <CodeInline code=\"app.json\" type=\"file\" />\n                </div>\n              }\n            />\n            <CodeBlock code={appjson} style={styles.code} canCopy />\n          </div>\n\n          <div style={styles.subSection}>\n            <h3 style={styles.h3}>Next Document</h3>\n            <ComponentDescription\n              text={\n                <div>\n                  Create a <CodeInline code=\"pages/_document.js\" type=\"file\" />{' '}\n                  file as follows to register the app, setup Roboto, setup\n                  Material Icons, and finish setting up NextJs:\n                </div>\n              }\n            />\n            <CodeBlock code={documentNext} style={styles.code} canCopy />\n          </div>\n\n          <div style={styles.subSection}>\n            <h3 style={styles.h3}>Material Icons</h3>\n\n            <ComponentDescription\n              text={\n                <div>\n                  The font-face for Material Icons above references a local{' '}\n                  <CodeInline code=\"MaterialIcons.ttf\" type=\"file\" /> file. We\n                  can download this file from the\n                  <Link\n                    href=\"https://github.com/oblador/react-native-vector-icons/blob/master/Fonts/MaterialIcons.ttf\"\n                    style={{ margin: '0 4px', display: 'inline' }}>\n                    {' '}\n                    react-native-vector-icons repo\n                  </Link>\n                  . Add this file to a new{' '}\n                  <CodeInline code=\"static\" type=\"file\" /> folder at the root.\n                </div>\n              }\n            />\n          </div>\n\n          <div style={styles.subSection}>\n            <h3 style={styles.h3}>Create index.js</h3>\n            <ComponentDescription\n              text={\n                <div>\n                  You should now able to create your first page with Material\n                  Bread components. Create{' '}\n                  <CodeInline code=\"pages/index.js\" type=\"file\" /> as follows:\n                </div>\n              }\n            />\n            <CodeBlock code={indexjs} style={styles.code} canCopy />\n          </div>\n        </Section>\n\n        <Section\n          name=\"Usage\"\n          id=\"usage\"\n          href=\"/getting-started/react-native#usage\">\n          <ComponentDescription\n            text={\n              <div>\n                Simply wrap your app or root in the{' '}\n                <CodeInline code=\"BreadProvider\" type=\"element\" /> and start\n                developing. You can learn about customizing on the\n                <Link href=\"/style/theme\"> theme page</Link>.\n              </div>\n            }\n          />\n          <CodeBlock code={code} canCopy />\n        </Section>\n        <Section\n          name=\"Examples\"\n          id=\"examples\"\n          href=\"/getting-started/nextjs#examples\">\n          <ComponentDescription\n            text={\n              <div>\n                If you're confused, check out these example repos with Material\n                Bread set up, graciously provided by @fortezhuo\n              </div>\n            }\n          />\n          <div className=\"row\">\n            <Link\n              href=\"https://github.com/fortezhuo/material-bread-next-example\"\n              style={{ fontSize: 18 }}>\n              NextJS Example\n            </Link>\n          </div>\n        </Section>\n      </div>\n    );\n  }\n}\n\nconst styles = {\n  container: { marginBottom: 60 },\n  code: {},\n  subSection: { marginTop: 60 },\n};\n\nexport default Index;\n"
  },
  {
    "path": "docs/src/pages/getting-started/react-native.js",
    "content": "import React, { Component } from 'react';\n\nimport Prism from 'prismjs';\nimport {\n  CodeBlock,\n  Section,\n  Link,\n  ComponentDescription,\n  SideScrollMenu,\n  PageTitle,\n  ComponentSubtitle,\n  CodeInline,\n  Helmet,\n} from '@components';\n\nconst sections = [\n  { name: 'Install' },\n  { name: 'Setup' },\n  { name: 'Usage' },\n  { name: 'Examples' },\n];\n\nconst code = `import React, { Component } from \"react\";\nimport Root from \"./Root\";\nimport { BreadProvider } from \"material-bread\";\n\nexport default class App extends Component {\n  render() {\n    return (\n      <BreadProvider>\n        <Root />\n      </BreadProvider>\n    );\n  }\n}`;\n\nclass Index extends Component {\n  componentDidMount() {\n    Prism.highlightAll();\n  }\n  render() {\n    return (\n      <div style={styles.container}>\n        <Helmet title={'Get started on React Native'} />\n        <PageTitle>React Native</PageTitle>\n        <ComponentSubtitle\n          description={'Build native mobile apps using JavaScript and React'}\n        />\n\n        <SideScrollMenu items={sections} />\n        <Section\n          name=\"Install\"\n          id=\"install\"\n          href=\"/getting-started/react-native#install\">\n          <div className=\"row\">\n            <CodeBlock\n              code={'npm i material-bread'}\n              style={styles.code}\n              fontSize={12}\n              canCopy\n              small\n            />\n          </div>\n          <div className=\"row\">or</div>\n          <div className=\"row\">\n            <CodeBlock\n              code={'yarn add material-bread'}\n              style={styles.code}\n              fontSize={12}\n              canCopy\n              small\n            />\n          </div>\n        </Section>\n        <Section\n          name=\"Setup\"\n          id=\"setup\"\n          href=\"/getting-started/react-native#setup \">\n          <div>\n            <h3 style={styles.h3}>Dependencies</h3>\n            <ComponentDescription\n              text={\n                <div>\n                  Next, install and link {'  '}\n                  <Link href=\"https://github.com/oblador/react-native-vector-icons\">\n                    {' '}\n                    react-native-vector-icons{' '}\n                  </Link>{' '}\n                  and{' '}\n                  <Link href=\"https://github.com/react-native-community/react-native-svg\">\n                    {' '}\n                    react-native-svg{' '}\n                  </Link>\n                  .\n                </div>\n              }\n            />\n          </div>\n        </Section>\n        <Section\n          name=\"Usage\"\n          id=\"usage\"\n          href=\"/getting-started/react-native#usage\">\n          <ComponentDescription\n            text={\n              <div>\n                Simply wrap your app or root in the{' '}\n                <CodeInline code=\"BreadProvider\" type=\"element\" /> and start\n                developing. You can learn about customizing on the\n                <Link href=\"/style/theme\"> theme page</Link>.\n              </div>\n            }\n          />\n          <CodeBlock code={code} canCopy />\n        </Section>\n        <Section\n          name=\"Examples\"\n          id=\"examples\"\n          href=\"/getting-started/react-native#examples\">\n          <ComponentDescription\n            text={\n              <div>\n                If you're confused, check out these example repo with Material\n                Bread set up\n              </div>\n            }\n          />\n          <div className=\"row\">\n            <Link\n              href=\"https://github.com/codypearce/material-bread-rn-example\"\n              style={{ fontSize: 18 }}>\n              React Native Example\n            </Link>\n          </div>\n        </Section>\n      </div>\n    );\n  }\n}\n\nconst styles = {\n  container: { marginBottom: 60 },\n  code: {},\n};\n\nexport default Index;\n"
  },
  {
    "path": "docs/src/pages/getting-started/vue-native.js",
    "content": "import React, { Component } from 'react';\n\nimport Prism from 'prismjs';\nimport {\n  CodeBlock,\n  Section,\n  Link,\n  ComponentDescription,\n  SideScrollMenu,\n  PageTitle,\n  ComponentSubtitle,\n  CodeInline,\n  Helmet,\n} from '@components';\n\nconst sections = [{ name: 'Install' }, { name: 'Setup' }, { name: 'Examples' }];\n\nconst dependencies = `npm i react-native-svg react-native-vector-icons\nreact-native link react-native-svg\nreact-native link react-native-vector-icons\n`;\n\nconst appVue = `<template>\n    <app></app>\n</template>\n\n<script>\nimport Vue from \"vue-native-core\";\nimport { VueMaterialBread } from \"material-bread\";\n\nimport App from \"./src/App.vue\";\n// registering all components to the global scope of the Vue\nVue.use(VueMaterialBread);\n\nexport default {\n    components: { App }\n};\n</script>\n`;\n\nconst indexVue = `\n<template>\n  <view :style=\"{marginTop: 80}\">\n    <mb-fab />\n  </view>\n</template>\n`;\n\nconst code = `import React, { Component } from \"react\";\nimport Root from \"./Root\";\nimport { BreadProvider } from \"material-bread\";\n\nexport default class App extends Component {\n  render() {\n    return (\n      <BreadProvider>\n        <Root />\n      </BreadProvider>\n    );\n  }\n}`;\n\nconst fontCode = `@font-face {\n    src: url(./MaterialIcons.ttf);\n    font-family: MaterialIcons;\n}\n`;\n\nclass Index extends Component {\n  componentDidMount() {\n    Prism.highlightAll();\n  }\n  render() {\n    return (\n      <div style={styles.container}>\n        <Helmet title={'Get started with Vue native and Material Bread'} />\n        <PageTitle>Vue Native</PageTitle>\n        <ComponentSubtitle description={'Build mobile apps using Vue Native'} />\n\n        <SideScrollMenu items={sections} />\n        <Section\n          name=\"Install\"\n          id=\"install\"\n          href=\"/getting-started/vue-native#install\">\n          <div className=\"row\">\n            <CodeBlock\n              code={'npm i material-bread'}\n              style={styles.code}\n              fontSize={12}\n              canCopy\n              small\n            />\n          </div>\n          <div className=\"row\">or</div>\n          <div className=\"row\">\n            <CodeBlock\n              code={'yarn add material-bread'}\n              style={styles.code}\n              fontSize={12}\n              canCopy\n              small\n            />\n          </div>\n        </Section>\n        <Section\n          name=\"Setup\"\n          id=\"setup\"\n          href=\"/getting-started/vue-native#setup \">\n          <div>\n            <h3 style={styles.h3}>Install Vue Native</h3>\n            <ComponentDescription\n              text={\n                <div>\n                  Follow the instructions on Vue Native's\n                  <Link href=\"https://vue-native.io/docs/installation.html\">\n                    Installation\n                  </Link>{' '}\n                  guide to make sure you have everything installed. Vue Native\n                  can be set up with either Expo or React Native directly. Once\n                  you've initialized a project, move onto the next step.\n                </div>\n              }\n            />\n          </div>\n          <div>\n            <h3 style={styles.h3}>Dependencies</h3>\n            <ComponentDescription\n              text={\n                <div>\n                  Install and link both\n                  <Link href=\"https://github.com/oblador/react-native-vector-icons\">\n                    {' '}\n                    react-native-vector-icons{' '}\n                  </Link>\n                  and\n                  <Link href=\"https://github.com/react-native-community/react-native-svg\">\n                    {' '}\n                    react-native-svg{' '}\n                  </Link>\n                  .\n                  <CodeBlock code={dependencies} canCopy />\n                </div>\n              }\n            />\n          </div>\n\n          <div>\n            <h3 style={styles.h3}>Register Components</h3>\n            <ComponentDescription\n              text={\n                <div>\n                  Material Bread supports kebab-case components, we simply have\n                  to register them with Vue Native to use them. Edit{' '}\n                  <CodeInline code=\"App.vue\" type=\"file\" /> as follows\n                  <CodeBlock code={appVue} canCopy />\n                  <div style={{ marginTop: 16 }}>\n                    Next, create the{' '}\n                    <CodeInline code=\"src/App.vue\" type=\"file\" /> file and start\n                    using ecomponents\n                    <CodeBlock code={indexVue} canCopy />\n                  </div>\n                </div>\n              }\n            />\n          </div>\n        </Section>\n\n        <Section\n          name=\"Examples\"\n          id=\"examples\"\n          href=\"/getting-started/vue-native#examples\">\n          <ComponentDescription\n            text={\n              <div>\n                If you're confused, check out thes example repo with Material\n                Bread set up\n              </div>\n            }\n          />\n          <div className=\"row\">\n            <Link\n              href=\"https://github.com/codypearce/material-bread-vue-native-example\"\n              style={{ fontSize: 18 }}>\n              Vue Native Example\n            </Link>\n          </div>\n        </Section>\n      </div>\n    );\n  }\n}\n\nconst styles = {\n  container: { marginBottom: 60 },\n  code: {},\n};\n\nexport default Index;\n"
  },
  {
    "path": "docs/src/pages/getting-started/web.js",
    "content": "import React, { Component } from 'react';\n\nimport Prism from 'prismjs';\nimport {\n  CodeBlock,\n  Section,\n  Link,\n  ComponentDescription,\n  SideScrollMenu,\n  PageTitle,\n  ComponentSubtitle,\n  CodeInline,\n  Helmet,\n} from '@components';\n\nconst sections = [\n  { name: 'Install' },\n  { name: 'Setup' },\n  { name: 'Usage' },\n  { name: 'Examples' },\n];\n\nconst code = `\nimport React, { Component } from \"react\";\nimport Root from \"./Root\";\nimport { BreadProvider } from \"material-bread\";\n\nexport default class App extends Component {\n  render() {\n    return (\n      <BreadProvider>\n        <Root />\n      </BreadProvider>\n    );\n  }\n}`;\n\nconst alias = ` resolve: {\n  alias: {\n    \"react-native\": \"react-native-web\"\n  },\n  extensions: [\".web.js\", \".js\"]\n},`;\n\nconst cssFont = ` @font-face {\n  src: url(../../node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf);\n  font-family: MaterialIcons;\n}`;\n\nconst appJs = `import React, { Component } from \"react\";\nimport \"./styles/global.css\";\n\nclass App extends Component {\n  render() {\n    return <Router />;\n  }\n}\n\nexport default App;\n`;\n\nconst tffLoader = ` rules: [\n  {\n    test: /\\.(png|woff|woff2|eot|ttf|svg)$/,\n    loader: \"url-loader?limit=100000\"\n  }\n]`;\n\nconst webpack = `rules: [\n    {\n      test: /\\.(js|jsx)$/,\n      exclude: /node_modules\\/(?!(material-bread|react-native-vector-icons)\\/).*/,\n      use: {\n        loader: \"babel-loader\",\n        options: {\n          presets: [\"@babel/preset-env\", \"@babel/preset-react\"],\n          plugins: [\n            \"@babel/plugin-transform-flow-strip-types\",\n            \"@babel/plugin-proposal-class-properties\",\n            \"@babel/plugin-proposal-object-rest-spread\",\n            \"@babel/plugin-transform-runtime\",\n          ]\n        }\n      }\n},`;\n\nclass Index extends Component {\n  componentDidMount() {\n    Prism.highlightAll();\n  }\n  render() {\n    return (\n      <div style={styles.container}>\n        <Helmet title={'React Native web starter'} />\n        <PageTitle>Web</PageTitle>\n        <ComponentSubtitle\n          description={'Run React Native components on the web'}\n        />\n        <SideScrollMenu items={sections} />\n        <Section\n          name=\"Install\"\n          id=\"install\"\n          href=\"/getting-started/web#install\">\n          <div className=\"row\">\n            <CodeBlock\n              code={'npm i material-bread'}\n              style={styles.code}\n              fontSize={12}\n              canCopy\n              small\n            />\n          </div>\n          <div className=\"row\">or</div>\n          <div className=\"row\">\n            <CodeBlock\n              code={'yarn add material-bread'}\n              style={styles.code}\n              fontSize={12}\n              canCopy\n              small\n            />\n          </div>\n        </Section>\n\n        <Section name=\"Setup\" id=\"setup\" href=\"/getting-started/web#setup \">\n          <ComponentDescription\n            text={\n              <div>\n                The following guide is for setting up a minimal configuration\n                for\n                <Link\n                  href=\"https://github.com/necolas/react-native-web\"\n                  style={{ margin: '0 4px', display: 'inline' }}>\n                  {' '}\n                  react-native-web\n                </Link>\n                <span>\n                  and Material Bread. Please see the example repo for the full\n                  code.\n                </span>\n              </div>\n            }\n          />\n          <div>\n            <h3 style={styles.h3}>React Native Web</h3>\n            <ComponentDescription\n              text={\n                <div>\n                  First{' '}\n                  <CodeBlock\n                    code={\n                      'npm i react-native-web react-dom react-art modal-enhanced-react-native-web react-native-svg'\n                    }\n                    style={styles.code}\n                    fontSize={12}\n                    canCopy\n                    small\n                  />{' '}\n                  then set up webpack to alias{' '}\n                  <CodeInline code=\"react-native\" type=\"\" />\n                </div>\n              }\n            />\n            <CodeBlock code={alias} style={styles.code} canCopy />\n          </div>\n          <div style={styles.subSection}>\n            <h3 style={styles.h3}>Install Material Icons as font</h3>\n            <ComponentDescription\n              text={\n                <div>\n                  Material Icons need to be installed as a font, first add the\n                  font to a css file called{' '}\n                  <CodeInline code=\"global.css\" type=\"file\" />\n                </div>\n              }\n            />\n            <CodeBlock code={cssFont} style={styles.code} canCopy />\n            <ComponentDescription\n              text={\n                <div>\n                  Then include it in your{' '}\n                  <CodeInline code=\"App\" type=\"element\" /> component or include\n                  it as a link in <CodeInline code=\"index.html\" type=\"file\" />\n                </div>\n              }\n            />\n            <CodeBlock code={appJs} style={styles.code} canCopy />\n          </div>\n          <div style={styles.subSection}>\n            <h3 style={styles.h3}>TFF Loader</h3>\n            <ComponentDescription\n              text={\n                <div>You'll also need to add a TFF loader to load the font</div>\n              }\n            />\n            <CodeBlock code={tffLoader} style={styles.code} canCopy />\n          </div>\n          <div style={styles.subSection}>\n            <h3 style={styles.h3}>Babel Loader</h3>\n            <ComponentDescription\n              text={\n                <div>\n                  Finally you'll need to exclude both Material Bread and\n                  <CodeInline code=\"react-native-vector-icons\" type=\"\" />, as\n                  well as add a few babel packages.\n                </div>\n              }\n            />\n            <CodeBlock code={webpack} style={styles.code} canCopy />\n          </div>\n\n          <div style={styles.subSection}>\n            <h3 style={styles.h3}>Finish</h3>\n            <ComponentDescription\n              text={\n                <div>\n                  You should now be able to add Material Bread components. If\n                  you're stuck please checkout the example repo below\n                </div>\n              }\n            />\n          </div>\n        </Section>\n        <Section name=\"Usage\" id=\"usage\" href=\"/getting-started/web#usage\">\n          <ComponentDescription\n            text={\n              <div>\n                Simply wrap your app or root in the{' '}\n                <CodeInline code=\"BreadProvider\" type=\"element\" /> and start\n                developing. You can learn about customizing on the\n                <Link href=\"/style/theme\"> theme page</Link>.\n              </div>\n            }\n          />\n          <CodeBlock code={code} canCopy />\n        </Section>\n        <Section\n          name=\"Examples\"\n          id=\"examples\"\n          href=\"/getting-started/web#examples\">\n          <ComponentDescription\n            text={\n              <div>\n                For a quick start with minimal set up with{' '}\n                <CodeInline code=\"react-native-web\" type=\"\" /> and{' '}\n                <CodeInline code=\"materal-bread\" type=\"\" />, checkout the\n                example below\n              </div>\n            }\n          />\n          <div className=\"row\">\n            <Link\n              href=\"https://github.com/codypearce/material-bread-react-example\"\n              style={{ fontSize: 18 }}>\n              Minimal React Example\n            </Link>\n          </div>\n        </Section>\n      </div>\n    );\n  }\n}\n\nconst styles = {\n  container: { marginBottom: 60 },\n  code: {},\n  h3: {\n    fontWeight: 400,\n    marginBottom: 8,\n  },\n  subSection: {\n    marginTop: 40,\n  },\n};\n\nexport default Index;\n"
  },
  {
    "path": "docs/src/pages/getting-started/windows.js",
    "content": "import React, { Component } from 'react';\n\nimport Prism from 'prismjs';\nimport {\n  CodeBlock,\n  Section,\n  Link,\n  ComponentDescription,\n  SideScrollMenu,\n  PageTitle,\n  ComponentSubtitle,\n  CodeInline,\n  Helmet,\n} from '@components';\n\nconst sections = [\n  { name: 'Install' },\n  { name: 'Setup' },\n  { name: 'Usage' },\n  { name: 'Examples' },\n];\n\nconst code = `import React, { Component } from \"react\";\nimport Root from \"./Root\";\nimport { BreadProvider } from \"material-bread\";\n\nexport default class App extends Component {\n  render() {\n    return (\n      <BreadProvider>\n        <Root />\n      </BreadProvider>\n    );\n  }\n}`;\n\nconst depend = `npm install react-native-macos-cli -g\nreact-native-macos init MyProject\ncd MyProject\nreact-native-macos run-macos`;\n\nconst alias = `const withTM = require('next-transpile-modules')\nconst withFonts = require('next-fonts')\nmodule.exports = withFonts(\n  withTM({\n    transpileModules: ['material-bread', 'react-native-svg', 'react-native-vector-icons'],\n    webpack: config => {\n      config.resolve.extensions = ['.web.js', '.js']\n      config.resolve.alias = {\n        ...(config.resolve.alias || {}),\n        'react-native$': 'react-native-web',\n        'react-native-svg$': 'react-native-svg-web'\n      }\n      return config\n    }\n  })\n)`;\n\nconst appjson = `{\n    \"name\": \"material-bread-next\",\n    \"displayName\": \"material-bread-next\"\n}\n`;\n\nconst documentNext = `import Document, { Head, Main, NextScript } from 'next/document'\nimport React from 'react'\nimport { AppRegistry } from 'react-native'\nimport config from '../app.json'\n\nconst normalizeNextElements = \\`\nhtml,\nbody,\n#__next {\n  height: 100%;\n  font-family: Roboto, sans-serif;\n}\n@import url(\"https://fonts.googleapis.com/css?family=Roboto\");\n@font-face {\n  src: url(/static/MaterialIcons.ttf);\n  font-family: MaterialIcons;\n}  \n\\`\n\nexport default class MyDocument extends Document {\n  static async getInitialProps({ renderPage }) {\n    AppRegistry.registerComponent(config.name, () => Main)\n    const { getStyleElement } = AppRegistry.getApplication(config.name)\n    const page = renderPage()\n\n    const styles = [<style dangerouslySetInnerHTML={{ __html: normalizeNextElements }} />, getStyleElement()]\n    return { ...page, styles: React.Children.toArray(styles) }\n  }\n\n  render() {\n    return (\n      <html>\n        <Head />\n        <body>\n          <Main />\n          <NextScript />\n        </body>\n      </html>\n    )\n  }\n}\n`;\n\nconst indexjs = `import React, { Component } from \"react\";\nimport { View } from \"react-native\";\nimport { Fab } from \"material-bread\";\n\nclass App extends Component {\n    render() {\n        return (\n            <View>\n                <Fab />\n            </View>\n        );\n    }\n}\n\nexport default App;`;\n\nclass Index extends Component {\n  componentDidMount() {\n    Prism.highlightAll();\n  }\n  render() {\n    return (\n      <div style={styles.container}>\n        <Helmet title={'Get started with Material Bread and Windows'} />\n        <PageTitle>Windows</PageTitle>\n        <ComponentSubtitle\n          description={'Build Windows desktop applications using React Native.'}\n        />\n\n        <SideScrollMenu items={sections} />\n        <Section\n          name=\"Install\"\n          id=\"install\"\n          href=\"/getting-started/react-native#install\">\n          <div className=\"row\">\n            <CodeBlock\n              code={'npm i material-bread'}\n              style={styles.code}\n              fontSize={12}\n              canCopy\n              small\n            />\n          </div>\n          <div className=\"row\">or</div>\n          <div className=\"row\">\n            <CodeBlock\n              code={'yarn add material-bread'}\n              style={styles.code}\n              fontSize={12}\n              canCopy\n              small\n            />\n          </div>\n        </Section>\n        <Section name=\"Setup\" id=\"setup\" href=\"/getting-started/web#setup \">\n          <ComponentDescription\n            text={\n              <div>\n                React Naitve Windows has a particular\n                <Link\n                  href=\"https://github.com/microsoft/react-native-windows#system-requirements\"\n                  style={{ margin: '0 4px', display: 'inline' }}>\n                  {' '}\n                  set of requirements\n                </Link>\n                <span>\n                  and currently only supports up to `0.59.10` React Native.\n                  Learn more about setting up React Native Windows\n                  <Link\n                    href=\"https://github.com/microsoft/react-native-windows/blob/master/current/docs/GettingStarted.md\"\n                    style={{ margin: '0 4px', display: 'inline' }}>\n                    {' '}\n                    with their getting started guide.\n                  </Link>\n                  . Alternatively, you can generate a new project with React\n                  Native Windows and Material using the{' '}\n                  <Link\n                    href=\"https://github.com/codypearce/react-native-infinity\"\n                    style={{ margin: '0 4px', display: 'inline' }}>\n                    {' '}\n                    react-native-infinty cli\n                  </Link>{' '}\n                </span>\n              </div>\n            }\n          />\n          <div>\n            <h3 style={styles.h3}>Init a project</h3>\n            <ComponentDescription\n              text={\n                <div>\n                  After following the above getting started guide, simply run\n                  <CodeBlock\n                    code={`react-native run-windows`}\n                    style={styles.code}\n                    fontSize={12}\n                    canCopy\n                    small\n                  />{' '}\n                  to set up the remaining configuration.\n                </div>\n              }\n            />\n          </div>\n\n          <div style={styles.subSection}>\n            <h3 style={styles.h3}>Dependencies</h3>\n            <ComponentDescription\n              text={\n                <div>\n                  Next, simply install and link {'  '}\n                  <Link href=\"https://github.com/oblador/react-native-vector-icons\">\n                    {' '}\n                    react-native-vector-icons{' '}\n                  </Link>{' '}\n                  and{' '}\n                  <Link href=\"https://github.com/react-native-community/react-native-svg\">\n                    {' '}\n                    react-native-svg{' '}\n                  </Link>\n                  .\n                </div>\n              }\n            />\n          </div>\n        </Section>\n\n        <Section\n          name=\"Usage\"\n          id=\"usage\"\n          href=\"/getting-started/react-native#usage\">\n          <ComponentDescription\n            text={\n              <div>\n                Wrap your app or root in the{' '}\n                <CodeInline code=\"BreadProvider\" type=\"element\" /> and start\n                developing. You can learn about customizing on the\n                <Link href=\"/style/theme\"> theme page</Link>.\n              </div>\n            }\n          />\n          <CodeBlock code={code} canCopy />\n        </Section>\n        <Section\n          name=\"Examples\"\n          id=\"examples\"\n          href=\"/getting-started/windows#examples\">\n          <ComponentDescription\n            text={\n              <div>\n                If you're confused, check out this example repos with Material\n                Bread set up. Alternatively, you can use the{' '}\n                <Link\n                  href=\"https://github.com/codypearce/react-native-infinity\"\n                  style={{ margin: '0 4px', display: 'inline' }}>\n                  {' '}\n                  react-native-infinty cli\n                </Link>{' '}\n                to generate a project with Material Bread already setup.\n              </div>\n            }\n          />\n          <div className=\"row\">\n            <Link\n              href=\"https://github.com/codypearce/material-bread-windows-example\"\n              style={{ fontSize: 18 }}>\n              Windows Example\n            </Link>\n          </div>\n        </Section>\n      </div>\n    );\n  }\n}\n\nconst styles = {\n  container: { marginBottom: 60 },\n  code: {},\n  subSection: { marginTop: 60 },\n};\n\nexport default Index;\n"
  },
  {
    "path": "docs/src/pages/index.js",
    "content": "import React, { Component } from 'react';\n\nimport Prism from 'prismjs';\nimport { Logo } from '@components';\n\nimport { Button } from '../../../src/index';\n\nimport HomeLiveEdit from '../components/HomeLiveEdit/HomeLiveEdit';\nimport MediaQuery from 'react-responsive';\nimport Sponsored from '../components/Sponsored';\n\nclass Index extends Component {\n  componentDidMount() {\n    Prism.highlightAll();\n  }\n\n  state = {\n    preview: 'ios',\n  };\n\n  changePreview(preview) {\n    this.setState({ preview });\n  }\n\n  render() {\n    const { preview } = this.state;\n\n    return (\n      <div style={styles.container}>\n        <div className=\"home\">\n          <div className=\"home__half\" />\n          <div className=\"home__half--right\" />\n          <div className=\"home__half__content home__half__content--left\">\n            <div className=\"home__half__content__inner--left\">\n              <Logo\n                animated\n                width={246}\n                height={204}\n                style={{ margin: '0 auto', width: '100%' }}\n              />\n              <h1 className=\"home__title\">{'  '}Material Bread</h1>\n\n              <h2 className=\"home__subtitle\">\n                React Native Components that work on all platforms\n              </h2>\n              <div className=\"home__buttons\">\n                <a\n                  href={'/getting-started/react-native'}\n                  style={{ textDecoration: 'none' }}>\n                  <Button\n                    type={'contained'}\n                    text=\"React Native\"\n                    color=\"#E91E63\"\n                    style={{ width: '100%' }}\n                    containerStyle={{ width: '100%' }}\n                  />\n                </a>\n                <a\n                  href={'/getting-started/web'}\n                  style={{ textDecoration: 'none' }}>\n                  <Button\n                    type={'contained'}\n                    text=\"Web\"\n                    color=\"#009688\"\n                    style={{ width: '100%' }}\n                    containerStyle={{ width: '100%' }}\n                  />\n                </a>\n                <a\n                  href={'/getting-started/electron'}\n                  style={{ textDecoration: 'none' }}>\n                  <Button\n                    type={'contained'}\n                    color=\"#03A9F4\"\n                    text=\"Electron\"\n                    style={{ width: '100%' }}\n                    containerStyle={{ width: '100%' }}\n                  />\n                </a>\n                <a\n                  href={'/getting-started/macos'}\n                  style={{ textDecoration: 'none' }}>\n                  <Button\n                    type={'contained'}\n                    color=\"#34495e\"\n                    text=\"MacOS\"\n                    style={{ width: '100%' }}\n                    containerStyle={{ width: '100%' }}\n                  />\n                </a>\n                <a\n                  href={'/getting-started/windows'}\n                  style={{ textDecoration: 'none' }}>\n                  <Button\n                    type={'contained'}\n                    color=\"#9b59b6\"\n                    text=\"Windows\"\n                    style={{ width: '100%' }}\n                    containerStyle={{ width: '100%' }}\n                  />\n                </a>\n                <a\n                  href={'/getting-started/nextjs'}\n                  style={{ textDecoration: 'none' }}>\n                  <Button\n                    type={'contained'}\n                    color=\"#eb4d4b\"\n                    text=\"NextJS\"\n                    style={{ width: '100%' }}\n                    containerStyle={{ width: '100%' }}\n                  />\n                </a>\n                <a\n                  href={'/getting-started/expo'}\n                  style={{ textDecoration: 'none' }}>\n                  <Button\n                    type={'contained'}\n                    color=\"#40739e\"\n                    text=\"Expo\"\n                    style={{ width: '100%' }}\n                    containerStyle={{ width: '100%' }}\n                  />\n                </a>\n                <a\n                  href={'/getting-started/vue-native'}\n                  style={{ textDecoration: 'none' }}>\n                  <Button\n                    type={'contained'}\n                    color=\"#57c292\"\n                    text=\"Vue Native\"\n                    style={{ width: '100%' }}\n                    containerStyle={{ width: '100%' }}\n                  />\n                </a>\n              </div>\n            </div>\n          </div>\n          <div className=\"home__half__content home__half__content--right\">\n            <MediaQuery maxWidth={1000}>\n              <p\n                style={{\n                  marginTop: 80,\n                  color: 'white',\n                  fontSize: 24,\n                  textAlign: 'center',\n                }}>\n                The same components rendered across platforms\n              </p>\n            </MediaQuery>\n            <div\n              style={{\n                display: 'flex',\n                flexDirection: 'row',\n                justifyContent: 'center',\n                flexWrap: 'wrap',\n              }}>\n              <MediaQuery maxWidth={1000}>\n                {matches =>\n                  matches ? (\n                    <Button\n                      text=\"iOS\"\n                      textColor={'white'}\n                      textStyle={{\n                        fontWeight: preview == 'ios' ? '500' : '400',\n                        fontSize: preview == 'ios' ? 18 : 12,\n                      }}\n                      style={{ width: 120 }}\n                      onClick={() => this.changePreview('ios')}\n                    />\n                  ) : (\n                      <Button\n                        text=\"iOS\"\n                        textColor={'black'}\n                        textStyle={{\n                          fontWeight: preview == 'ios' ? '500' : '400',\n                          fontSize: preview == 'ios' ? 18 : 12,\n                        }}\n                        style={{ width: 120 }}\n                        onClick={() => this.changePreview('ios')}\n                      />\n                    )\n                }\n              </MediaQuery>\n\n              <MediaQuery maxWidth={1000}>\n                {matches =>\n                  matches ? (\n                    <Button\n                      text=\"Android\"\n                      textColor=\"white\"\n                      textStyle={{\n                        fontWeight: preview == 'android' ? '500' : '400',\n                        fontSize: preview == 'android' ? 18 : 12,\n                      }}\n                      style={{ width: 120 }}\n                      onClick={() => this.changePreview('android')}\n                    />\n                  ) : (\n                      <Button\n                        text=\"Android\"\n                        textColor=\"black\"\n                        textStyle={{\n                          fontWeight: preview == 'android' ? '500' : '400',\n                          fontSize: preview == 'android' ? 18 : 12,\n                        }}\n                        style={{ width: 120 }}\n                        onClick={() => this.changePreview('android')}\n                      />\n                    )\n                }\n              </MediaQuery>\n              <MediaQuery maxWidth={1000}>\n                {matches =>\n                  matches ? (\n                    <Button\n                      text=\"Web\"\n                      textColor=\"white\"\n                      textStyle={{\n                        fontWeight: preview == 'web' ? '500' : '400',\n                        fontSize: preview == 'web' ? 18 : 12,\n                      }}\n                      style={{ width: 120 }}\n                      onClick={() => this.changePreview('web')}\n                    />\n                  ) : (\n                      <Button\n                        text=\"Web\"\n                        textColor=\"black\"\n                        textStyle={{\n                          fontWeight: preview == 'web' ? '500' : '400',\n                          fontSize: preview == 'web' ? 18 : 12,\n                        }}\n                        style={{ width: 120 }}\n                        onClick={() => this.changePreview('web')}\n                      />\n                    )\n                }\n              </MediaQuery>\n              <MediaQuery maxWidth={1000}>\n                {matches =>\n                  matches ? (\n                    <Button\n                      text=\"Desktop\"\n                      textColor=\"white\"\n                      textStyle={{\n                        fontWeight: preview == 'desktop' ? '500' : '400',\n                        fontSize: preview == 'desktop' ? 18 : 12,\n                      }}\n                      style={{ width: 120 }}\n                      onClick={() => this.changePreview('desktop')}\n                    />\n                  ) : (\n                      <Button\n                        text=\"Desktop\"\n                        textColor=\"black\"\n                        textStyle={{\n                          fontWeight: preview == 'desktop' ? '500' : '400',\n                          fontSize: preview == 'desktop' ? 17 : 12,\n                        }}\n                        style={{ width: 120 }}\n                        onClick={() => this.changePreview('desktop')}\n                      />\n                    )\n                }\n              </MediaQuery>\n            </div>\n            <HomeLiveEdit preview={preview} />\n          </div>\n          <Sponsored />\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = {\n  container: {\n    display: 'flex',\n    flexDirection: 'column',\n    width: '100%',\n    height: '100%',\n    minHeight: '100vh',\n  },\n  code: {},\n};\n\nexport default Index;\n"
  },
  {
    "path": "docs/src/pages/showcase.js",
    "content": "import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport Prism from 'prismjs';\nimport {\n  PageTitle,\n  ComponentSubtitle,\n  Section,\n  ComponentDescription,\n  PlatformButton,\n  Helmet,\n} from '@components';\nimport materialBread from '../assets/material-bread-docs.png';\nimport rni from '../assets/rni.png';\nimport devtomaterial from '../assets/devtomaterial.png';\n\nclass Index extends Component {\n  componentDidMount() {\n    Prism.highlightAll();\n  }\n  render() {\n    return (\n      <div style={styles.container}>\n        <Helmet title={'Showcase'} />\n        <PageTitle>Showcase</PageTitle>\n        <ComponentSubtitle description={'Apps using Material Bread'} />\n\n        <Section\n          name=\"Apps\"\n          id=\"apps\"\n          href=\"/showcase#apps\"\n          style={{ marginTop: 0 }}>\n          <ComponentDescription text={<div />} />\n          <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>\n            <PlatformButton\n              href={'http://material-bread.org/'}\n              img={materialBread}\n              text={'Material Bread'}\n              width={250}\n              imgWidth={200}\n              height={225}\n              platforms={['Website']}\n            />\n\n            <PlatformButton\n              href={'https://www.reactnativeinfinity.com/'}\n              img={rni}\n              text={'React Native Infinity'}\n              width={250}\n              imgWidth={200}\n              height={225}\n              platforms={['Website']}\n            />\n\n            <PlatformButton\n              href={'https://github.com/codypearce/devto-material'}\n              img={devtomaterial}\n              text={'Dev.To.Material'}\n              width={250}\n              imgWidth={200}\n              height={225}\n              platforms={['Web, iOS, Android, Electron']}\n            />\n          </View>\n        </Section>\n      </div>\n    );\n  }\n}\n\nconst styles = {\n  container: {\n    display: 'flex',\n    flexDirection: 'column',\n    height: '100%',\n    width: '100%',\n    paddingBottom: 60,\n  },\n  code: {},\n};\n\nexport default Index;\n"
  },
  {
    "path": "docs/src/pages/style/font.js",
    "content": "import React, { Component } from 'react';\n\nimport { CodeBlock, Section, PageTitle, Link, P, Helmet } from '@components';\n\nexport default class FontPage extends Component {\n  render() {\n    return (\n      <div style={{ paddingBottom: 60 }}>\n        <Helmet title={'Material Font Roboto'} />\n        <PageTitle>Font</PageTitle>\n        <P>\n          The default font for Material Design and this package is Roboto,\n          however you can use any font you want. To use Roboto you must include\n          it in your project in addition to this package. The process to add a\n          font is different depending on what platform you are targeting.\n        </P>\n\n        <Section\n          name=\"React Native\"\n          href=\"/style/font#react-native\"\n          id=\"react-native\">\n          <div>\n            <P> To install Roboto for both platforms:</P>\n\n            <ol>\n              <li>\n                <P style={{ margin: 0 }}>\n                  Download Roboto from{' '}\n                  <Link href=\"https://fonts.google.com/specimen/Roboto\">\n                    Google Fonts\n                  </Link>\n                </P>\n              </li>\n              <li>\n                <P style={{ margin: 0 }}>\n                  Follow the steps provided here to add fonts to React Native\n                  for both{' '}\n                  <Link href=\"https://medium.com/react-native-training/react-native-custom-fonts-ccc9aacf9e5e\">\n                    iOS and Android\n                  </Link>\n                </P>\n              </li>\n            </ol>\n          </div>\n        </Section>\n        <Section name=\"Web\" href=\"/style/font#web\" id=\"web\">\n          <P>\n            There are many ways to install fonts in web projects, the quickest\n            way is to use the Google Fonts CDN.\n          </P>\n          <CodeBlock\n            code={`<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500\"></link>`}\n            canCopy\n            small\n          />\n        </Section>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/pages/style/icons.js",
    "content": "import React, { Component } from 'react';\nimport IconDirectory from '../../components/IconDirectory/IconDirectory';\nimport { CodeInline, Section, PageTitle, Link, P, Helmet } from '@components';\nexport default class IconPage extends Component {\n  render() {\n    return (\n      <div style={{ paddingBottom: 60 }}>\n        <Helmet title={'Material Icons'} />\n        <PageTitle>Icons</PageTitle>\n        <P>\n          Material Icons are provided by{' '}\n          <Link href=\"https://github.com/oblador/react-native-vector-icons\">\n            react-native-vector-icons\n          </Link>\n          . However some platforms might require extra steps to get working,\n          please visit the getting started pages to learn more.\n        </P>\n\n        <Section name=\"Using\" href=\"/style/icons#Using\" id=\"Using\">\n          <P>\n            Material Icon{' '}\n            <Link href=\"https://material.io/tools/icons\">documentation</Link>{' '}\n            shows icon names separated by dashes. To use icons with{' '}\n            <CodeInline code={'react-native-vector-icons'} /> you need to pass\n            them as dashes. For example <CodeInline code={'3d_rotation'} />{' '}\n            becomes <CodeInline code={'3d-rotation'} />.\n          </P>\n          <P>\n            All available icons are rendered with{' '}\n            <CodeInline code={'react-native-vector-icons'} />. Click an icon to\n            copy the icon name.\n          </P>\n          <IconDirectory />\n        </Section>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/pages/style/theme.js",
    "content": "import React, { Component } from 'react';\n\nimport { defaultTheme } from '../../../../src/index';\n\nimport {\n  CodeInline,\n  Section,\n  PageTitle,\n  CodeBlock,\n  P,\n  Helmet,\n} from '@components';\n\nconst themeCode = `import * as React from 'react';\nimport { BreadProvider, Colors } from 'material-bread';\nimport App from './App';\n\nconst theme = {\n    palette: {\n        primary: Colors.pink['500'],\n        secondary: Colors.blue['600'],\n        error: Colors.red['300'],\n    }\n};\n\nexport default function Root() {\n  return (\n    <BreadProvider value={theme}>\n      <App />\n    </BreadProvider>\n  );\n}`;\n\nconst withThemeCode = `import React from 'react';\nimport { View } from 'react-native';\nimport { withTheme } from 'material-bread';\n\nfunction AppButton(props) {\n  const { theme } = props;\n\n  return (\n    <View style={{backgroundColor: theme.primary.main }}>Click Me</View>\n  )\n}\n\nexport default withTheme(AppButton);`;\n\nexport default class IconPage extends Component {\n  render() {\n    return (\n      <div style={{ paddingBottom: 60 }}>\n        <Helmet title={'Material Theme'} />\n        <PageTitle>Theme</PageTitle>\n        <P>\n          The theme defines both global and component specific styles for color,\n          spacings, sizings, shadows, fonts, and more. You can customize as much\n          or as little as you want.\n        </P>\n        <Section name=\"Customizing\" href=\"/style/theme#custom\" id=\"custom\">\n          <div\n            style={{\n              marginBottom: 16,\n            }}>\n            <P> To apply a global custom theme:</P>\n            <ol>\n              <li>\n                <P style={{ margin: 0 }}>\n                  To apply a global custom theme:Wrap your app with the{' '}\n                  <CodeInline code={'BreadProvider'} type={'element'} />{' '}\n                  component\n                </P>\n              </li>\n              <li>\n                <P style={{ margin: 0 }}>\n                  Pass in a custom <CodeInline code={'theme'} /> object.\n                </P>\n              </li>\n            </ol>\n            <P>This will merge your custom changes with the default theme.</P>\n          </div>\n          <CodeBlock code={themeCode} canCopy />\n        </Section>\n        <Section\n          name=\"Apply theme to User Components\"\n          href=\"/style/theme#withTheme\"\n          id=\"withTheme\">\n          <P\n            style={{\n              marginBottom: 16,\n            }}>\n            Using the <CodeInline code={'withTheme'} /> utility function, you\n            can use the app theme in your own components.\n          </P>\n          <CodeBlock code={withThemeCode} canCopy small />\n        </Section>\n        <Section name=\"Default Theme\" href=\"/style/theme#default\" id=\"default\">\n          <P\n            style={{\n              marginBottom: 16,\n            }}>\n            Below is the full default theme. You can override any value by\n            either passing in theme object with that key specified, or directly\n            in components by changing that property with the style prop.\n          </P>\n          <CodeBlock\n            code={JSON.stringify(defaultTheme, null, 2)}\n            canCopy\n            small\n          />\n        </Section>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "docs/src/pages/utils/anchor.js",
    "content": "export default from '../../content/utils/anchor';\n"
  },
  {
    "path": "docs/src/pages/utils/color.js",
    "content": "export default from '../../content/utils/color';\n"
  },
  {
    "path": "docs/src/pages/utils/hoverable.js",
    "content": "export default from '../../content/utils/hoverable';\n"
  },
  {
    "path": "docs/src/pages/utils/shadow.js",
    "content": "export default from '../../content/utils/shadow';\n"
  },
  {
    "path": "docs/src/styles/components/CodeBlock.css",
    "content": ".CodeBlock {\n  border-radius: 6px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.23);\n  position: relative;\n\n  overflow: hidden;\n}\n\n.copied {\n  background-color: #1a63a3;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  left: 0;\n  transition: 0.6s all ease;\n  opacity: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: -1;\n}\n\n.copy__button {\n  position: absolute;\n  top: 0;\n  right: 0;\n  border: none;\n  outline: none;\n  color: #efefef;\n  background-color: #1e6caf;\n  border-bottom-left-radius: 6px;\n}\n.copy__button:hover {\n  background-color: #1a63a3;\n  cursor: pointer;\n}\n\n.copied.show {\n  transition: 0.6s all ease;\n  opacity: 1;\n  z-index: 1;\n}\n\n.copied__text {\n  color: white;\n  display: none;\n  font-family: Roboto;\n  letter-spacing: 1.4;\n  font-weight: 500;\n}\n.copied.show .copied__text {\n  display: block;\n}\n"
  },
  {
    "path": "docs/src/styles/components/Logo.css",
    "content": ".Logo {\n  overflow: hidden;\n}\n\n/*\n==== Hover Animation ====\n*/\n\n.Logo__crust,\n.Logo__middle {\n  transition: all 700ms ease-out;\n}\n\n.Logo__middle--1:hover {\n  fill: #e91e63;\n  stroke: #e91e63;\n}\n\n.Logo__middle--2:hover {\n  fill: #2196f3;\n  stroke: #2196f3;\n}\n.Logo__crust--1:hover {\n  fill: #ffeb3b;\n  stroke: #ffeb3b;\n}\n.Logo__crust--2:hover {\n  fill: #4caf50;\n  stroke: #4caf50;\n}\n.Logo__crust--3:hover {\n  fill: #00bcd4;\n  stroke: #00bcd4;\n}\n.Logo__crust--4:hover {\n  fill: #009688;\n  stroke: #009688;\n}\n.Logo__crust--5:hover {\n  fill: #9c27b0;\n  stroke: #9c27b0;\n}\n.Logo__crust--6:hover {\n  fill: #4527a0;\n  stroke: #4527a0;\n}\n.Logo__crust--7:hover {\n  fill: #3949ab;\n  stroke: #3949ab;\n}\n.Logo__crust--8:hover {\n  fill: #00796b;\n  stroke: #00796b;\n}\n.Logo__crust--9:hover {\n  fill: #d32f2f;\n  stroke: #d32f2f;\n}\n.Logo__crust--10:hover {\n  fill: #d81b60;\n  stroke: #d81b60;\n}\n\n/*\n ==== INTRO ANIMATION =====\n*/\n\n.Logo--animated .Logo__middle--1 {\n  transform: translateY(400px);\n  animation: middle 300ms ease-in-out 1800ms forwards;\n}\n.Logo--animated .Logo__middle--2 {\n  transform: translateY(400px);\n  animation: middle 300ms ease-in-out 1900ms forwards;\n}\n\n.Logo--animated .Logo__crust {\n  transform: translateY(-350px);\n}\n.Logo--animated .Logo__crust--1 {\n  animation: crust 300ms ease-in-out 800ms forwards;\n}\n.Logo--animated .Logo__crust--2 {\n  animation: crust 300ms ease-in-out 900ms forwards;\n}\n.Logo--animated .Logo__crust--3 {\n  animation: crust 300ms ease-in-out 1000ms forwards;\n}\n.Logo--animated .Logo__crust--4 {\n  animation: crust 300ms ease-in-out 1100ms forwards;\n}\n.Logo--animated .Logo__crust--5 {\n  animation: crust 300ms ease-in-out 1200ms forwards;\n}\n.Logo--animated .Logo__crust--6 {\n  animation: crust 300ms ease-in-out 1300ms forwards;\n}\n.Logo--animated .Logo__crust--7 {\n  animation: crust 300ms ease-in-out 1400ms forwards;\n}\n.Logo--animated .Logo__crust--8 {\n  animation: crust 300ms ease-in-out 1500ms forwards;\n}\n.Logo--animated .Logo__crust--9 {\n  animation: crust 300ms ease-in-out 1600ms forwards;\n}\n.Logo--animated .Logo__crust--10 {\n  animation: crust 300ms ease-in-out 1700ms forwards;\n}\n\n@keyframes crust {\n  0% {\n    transform: translateY(-200px);\n  }\n  90% {\n    transform: translateY(10px);\n  }\n  100% {\n    transform: translateY(0px);\n  }\n}\n\n@keyframes middle {\n  0% {\n    transform: translateY(400px);\n  }\n  90% {\n    transform: translateY(-10px);\n  }\n  100% {\n    transform: translateY(0px);\n  }\n}\n"
  },
  {
    "path": "docs/src/styles/global/global.css",
    "content": "html {\n  scroll-behavior: smooth;\n  height: 100%;\n}\nbody {\n  font-family: 'Roboto', sans-serif;\n  background-color: white !important;\n  height: 100%;\n}\n\n::-webkit-scrollbar {\n  width: 8px;\n  border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb {\n  background-color: #ddd;\n\n  border-radius: 6px;\n}\n\n#___gatsby {\n  height: 100%;\n}\n\n#___gatsby > div:first-child {\n  height: 100% !important;\n}\n\n#___gatsby > div:nth-child(2) {\n  height: 100%;\n}\n\ndiv[role='group'][tabindex] {\n  height: 100%;\n}\n\n.row {\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n}\n\n.is-current .SideMenu__ListItem {\n  color: #04023e;\n}\n\n.SideMenuWrapper {\n  position: fixed;\n  right: 50px;\n  top: 100px;\n}\n\n.SideMenu {\n  padding: 0px;\n}\n\n.SideMenu__ListItem {\n  list-style: none;\n  padding-left: 22px;\n  height: 30px;\n  display: flex;\n  align-items: center;\n}\n.SideMenu__Link {\n  text-decoration: none;\n  color: rgba(4, 2, 62, 0.5);\n  font-size: 14px;\n  font-weight: 500;\n  display: block;\n  height: 30px;\n}\n.SideMenu__Link:hover {\n  color: rgba(4, 2, 62, 0.8);\n}\n\n.SideMenu__ListItem--sub {\n  padding-left: 34px;\n}\n\n.SideMenu__ListItem--sub .SideMenu__Link {\n  font-size: 14px;\n}\n\n.Section__header:hover .HashLink {\n  opacity: 0.6;\n}\n.sliding-wrapper {\n  display: inline-block;\n  position: absolute;\n  width: 3px;\n  left: 0px;\n  top: 18px;\n  background-color: #eaf0f6;\n  border: none;\n  transition: all 0.3s ease-out;\n  border-radius: 8px;\n}\n\n.sliding-border {\n  display: inline-block;\n  position: absolute;\n  width: 3px;\n  left: 0px;\n  top: 18px;\n  background-color: #050342;\n  border: none;\n  transition: all 0.3s ease-out;\n  border-radius: 8px;\n  height: 30px;\n}\n\n.HashLink {\n  text-decoration: none;\n  color: black;\n  font-size: 18;\n  margin-left: 8;\n  opacity: 0;\n}\n.HashLink:hover {\n  opacity: 1 !important;\n}\n\n.LiveEdit {\n  position: relative;\n  display: inline-block;\n  height: 5px;\n  width: 5px;\n  border-radius: 30px;\n  top: 1px;\n  margin-right: 4px;\n  animation: pulsate 4s ease-out infinite;\n}\n\n@keyframes pulsate {\n  0% {\n    transform: scale(1.2, 1.2);\n    opacity: 1;\n  }\n  50% {\n    transform: scale(0.1, 0.1);\n    opacity: 0;\n  }\n  100% {\n    transform: scale(1.2, 1.2);\n    opacity: 1;\n  }\n}\n\n@media (max-width: 1360px) {\n  .SideMenuWrapper {\n    display: none;\n  }\n}\n\n@font-face {\n  src: url(../../../../node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf);\n  font-family: MaterialIcons;\n}\n@font-face {\n  src: url(../../../../node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf);\n  font-family: MaterialCommunityIcons;\n}\n\n/**\n * Add back the container background-color, border-radius, padding, margin\n * and overflow that we removed from <pre>.\n */\n.gatsby-highlight {\n  background-color: #fdf6e3;\n  border-radius: 0.3em;\n  margin: 0.5em 0;\n  padding: 1em;\n  overflow: auto;\n}\n\n/**\n   * Remove the default PrismJS theme background-color, border-radius, margin,\n   * padding and overflow.\n   * 1. Make the element just wide enough to fit its content.\n   * 2. Always fill the visible space in .gatsby-highlight.\n   * 3. Adjust the position of the line numbers\n   */\n.gatsby-highlight pre[class*='language-'] {\n  background-color: transparent;\n  margin: 0;\n  padding: 0;\n  overflow: initial;\n  float: left; /* 1 */\n  min-width: 100%; /* 2 */\n}\n\n.main {\n  max-width: 860px;\n  margin-left: 130px;\n  margin-right: 40px;\n  padding-top: 40px;\n  padding-left: 0px;\n  padding-right: 0px;\n  overflow-y: auto;\n}\n\n.main--permanentDrawer {\n  max-width: 860px;\n  margin-left: 80px;\n  margin-right: 40px;\n  padding-top: 100px;\n  padding-left: 0px;\n  padding-right: 16px;\n  overflow-y: auto;\n}\n.main--temporaryDrawer {\n  margin-left: 0;\n  margin-right: 0;\n  padding-top: 100px;\n  padding-left: 24px;\n  padding-right: 24px;\n  overflow-y: auto;\n}\n\n@media (max-width: 450px) {\n  .main--temporaryDrawer {\n    padding-left: 8px;\n    padding-right: 8px;\n  }\n}\n\n@import url('https://fonts.googleapis.com/css?family=Raleway');\n\n.browser {\n  max-width: 400px;\n  width: 100%;\n  height: 300px;\n  background: #f5f5f5;\n  margin: 20px auto;\n  border-radius: 8px;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n.browser_bar {\n  width: 100%;\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n  height: 30px;\n  background: #f5f5f5;\n  display: flex;\n  align-items: center;\n}\n.browser_bar_btns {\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  margin-left: 6px;\n}\n.browser_bar_btn {\n  height: 10px;\n  width: 10px;\n  line-height: 10px;\n  padding: 0;\n  border-radius: 100%;\n  background-color: #e74c3c;\n  margin-right: 8px;\n  display: inline-block;\n}\n.browser_bar_btn:hover {\n  cursor: pointer;\n}\n.browser_bar_btn--mini {\n  background-color: #27ae60;\n}\n.browser_bar_btn--resize {\n  background-color: #f1c40f;\n}\n\n.browser_body {\n  overflow-y: hidden;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  position: relative;\n  height: calc(100% - 30px);\n}\n.browser_body_title {\n  margin-top: 50px;\n  font-size: 30px;\n  color: #444;\n  font-weight: bold;\n}\n.browser_body_content:nth-child(1) {\n  margin-top: 50px;\n}\n.browser_body_content:last-child {\n  margin-bottom: 50px;\n}\n.browser_body_content {\n  min-height: 20px;\n  border-radius: 20px;\n  background-color: #ccc;\n  margin-top: 40px;\n  display: flex;\n}\n.browser_body::-webkit-scrollbar-track {\n  border-radius: 10px;\n  background-color: #f5f5f5;\n}\n\n.browser_body::-webkit-scrollbar {\n  width: 12px;\n  background-color: #f5f5f5;\n  border-radius: 10px;\n}\n\n.browser_body::-webkit-scrollbar-thumb {\n  border-radius: 10px;\n  background-color: #bbb;\n}\n\n.browser__bar__search {\n  width: 225px;\n  height: 15px;\n  border-radius: 20px;\n  background: #ddd;\n  margin: 0 auto;\n}\n.browser__bar__plus {\n  font-size: 12px !important;\n  color: #888;\n  margin-right: 10px;\n}\n\n.browser__appbar {\n  height: 20px;\n  width: 100%;\n  background: #03a9f4;\n}\n\n.browser_bar_tabs {\n  display: flex;\n  flex-direction: flex-row;\n}\n.browser_bar_tab {\n  border-bottom: 30px solid #ddd;\n  border-left: 20px solid transparent;\n  border-right: 20px solid transparent;\n  height: 0;\n  width: 50px;\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n}\n.browser_bar_tab:first-child {\n  margin-left: 10px;\n}\n.browser_bar_tab:nth-child(2) {\n  margin-left: -30px;\n}\n.browser_bar_tab:nth-child(3) {\n  margin-left: -30px;\n}\n.browser_bar_tab.active {\n  border-bottom: 30px solid #ccc;\n  z-index: 10;\n}\n.browser_bar_tab span {\n  position: absolute;\n  top: 6px;\n  font-size: 12px;\n  color: #333;\n}\n\n.browser__desktop__bar {\n  height: 20px;\n  position: relative;\n  border: 1px solid rgba(150, 150, 150, 0.3);\n  box-sizing: border-box;\n  background: #efeeef;\n}\n.browser__desktop__title {\n  text-align: center;\n  font-size: 11px;\n  color: #444;\n  position: absolute;\n  width: 100%;\n}\n\n.iphonex {\n  height: 475px;\n  width: 240px;\n  position: relative;\n}\n\n.iphonex__case {\n  position: absolute;\n  background: white;\n  width: 235px;\n  height: 475px;\n  border: 11px solid black;\n  box-sizing: border-box;\n  border-radius: 35px;\n  left: 3px;\n}\n\n.iphonex__top {\n  position: absolute;\n  background: transparent;\n  height: 15px;\n  width: 208px;\n  border-top-right-radius: 20px;\n  border-top-left-radius: 20px;\n}\n\n.iphonex__time {\n  position: absolute;\n  top: 3px;\n  left: 14px;\n  font-size: 10px;\n  font-weight: bold;\n  font-family: 'Roboto';\n}\n.iphonex__wifi {\n  position: absolute;\n  right: 25px;\n  font-size: 10px !important;\n\n  top: 3px;\n}\n.iphonex__battery {\n  position: absolute;\n  right: 8px;\n  font-size: 10px !important;\n  top: 3px;\n}\n\n.iphonex__notch {\n  background: black;\n  height: 15px;\n  width: 115px;\n  position: absolute;\n  left: 48px;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n}\n\n.iphonex__speaker {\n  background: rgb(51, 51, 51);\n  width: 30px;\n  height: 6px;\n  border-radius: 8px;\n  position: absolute;\n  left: 43px;\n}\n\n.iphonex__camera {\n  background: rgb(51, 51, 51);\n  width: 7px;\n  height: 7px;\n  border-radius: 8px;\n  position: absolute;\n  left: 80px;\n}\n\n.iphonex__screen {\n  width: 213px;\n  height: 435px;\n  background: transparent;\n  border-bottom-right-radius: 20px;\n  border-bottom-left-radius: 20px;\n  top: 20px;\n  position: absolute;\n  overflow: hidden;\n}\n\n.iphonex__power {\n  width: 3px;\n  height: 19px;\n  background: rgb(204, 204, 204);\n  position: absolute;\n  left: 0;\n  top: 62px;\n}\n.iphonex__volume {\n  width: 3px;\n  height: 32px;\n  background: rgb(204, 204, 204);\n  position: absolute;\n  left: 0px;\n  top: 98px;\n}\n.iphonex__volume--down {\n  top: 142px;\n}\n\n.pixel {\n  border: 9px solid #222;\n  height: 475px;\n  width: 229px;\n  border-radius: 25px;\n  transition: all 0.3s linear;\n  position: relative;\n  box-sizing: border-box;\n  background: #222;\n}\n.pixel__notch {\n  position: absolute;\n  height: 28px;\n  width: 74px;\n  background: #222;\n  left: 69px;\n  border-bottom-right-radius: 15px;\n  border-bottom-left-radius: 15px;\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n}\n\n.pixel__notch--background {\n  position: absolute;\n  height: 28px;\n  width: 100%;\n  background: #222;\n  left: 0px;\n}\n.pixel__notch--hole--left {\n  position: absolute;\n  height: 28px;\n  width: 71px;\n  background: white;\n  left: 0px;\n  top: 1px;\n  border-top-left-radius: 15px;\n  border-top-right-radius: 15px;\n  border-bottom-right-radius: 10px;\n}\n\n.pixel__notch--hole--right {\n  position: absolute;\n  height: 28px;\n  width: 71px;\n  background: white;\n  right: 0px;\n  top: 1px;\n  border-top-right-radius: 15px;\n  border-top-left-radius: 15px;\n  border-bottom-left-radius: 10px;\n}\n.pixel__notch--fill {\n  width: 100%;\n  height: 10px;\n  background: white;\n  position: absolute;\n  top: 20px;\n}\n.pixel__camera--left {\n  position: absolute;\n  height: 10px;\n  width: 10px;\n  background: white;\n  top: 9px;\n  left: 7px;\n  border-radius: 100px;\n}\n\n.pixel__camera--right {\n  position: absolute;\n  height: 10px;\n  width: 10px;\n  background: white;\n  top: 9px;\n  right: 7px;\n  border-radius: 100px;\n}\n\n.pixel__speaker--top {\n  position: absolute;\n  height: 5px;\n  width: 25px;\n  background: white;\n  top: 14px;\n  left: 24px;\n  border-radius: 2px;\n}\n.pixel__screen {\n  height: 397px;\n  left: 0;\n  top: 30px;\n  background: white;\n  border-bottom-right-radius: 8px;\n  border-bottom-left-radius: 8px;\n  border: none;\n  outline: none;\n  position: relative;\n  overflow: hidden;\n}\n.pixel__chin {\n  width: 100%;\n  height: 32px;\n  background: #222;\n  position: absolute;\n  bottom: -2px;\n  z-index: 100;\n  border: 0;\n}\n.pixel__speaker--bottom {\n  height: 5px;\n  width: 67px;\n  background: white;\n  bottom: 5px;\n  left: 72px;\n  border-radius: 2px;\n  position: absolute;\n}\n\n.home__half {\n  transform: skewX(-14deg) translateX(-300px);\n  height: 100vh;\n  position: absolute;\n  top: 0;\n  left: 0;\n  background: linear-gradient(\n    176deg,\n    rgba(5, 2, 65, 1) 34%,\n    rgba(1, 1, 31, 1) 100%\n  );\n  width: calc(50% + 300px);\n  z-index: -1;\n\n  animation: 700ms slideIn cubic-bezier(0.55, 0.055, 0.675, 0.19);\n}\n\n.home__half--right {\n  transform: skewX(-14deg) translateX(230px);\n  height: 100vh;\n  position: absolute;\n  top: 0;\n  right: 0;\n  background: #f5f5f5;\n  width: calc(50% + 230px);\n  z-index: -1;\n\n  animation: 700ms slideInTop cubic-bezier(0.55, 0.055, 0.675, 0.19);\n}\n\n.home__half__content__inner--left {\n  padding-right: 86px;\n  padding-left: 16px;\n  max-width: 500px;\n  margin: 0 auto;\n}\n\n@keyframes slideIn {\n  0% {\n    transform: skewX(-14deg) translateX(-300px) translateY(100%) scale(0.95);\n  }\n\n  100% {\n    transform: skewX(-14deg) translateX(-300px) translateY(0%) scale(1);\n  }\n}\n\n@keyframes slideInTop {\n  0% {\n    transform: skewX(-14deg) translateX(230px) translateY(-100%) scale(0.95);\n  }\n\n  100% {\n    transform: skewX(-14deg) translateX(230px) translateY(0%) scale(1);\n  }\n}\n\n.home__half__content {\n  animation: 1s 800ms opacity ease-in-out forwards;\n  opacity: 0;\n  margin: auto;\n  border-radius: 2px;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  height: 585px;\n}\n\n@keyframes opacity {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n@media (max-width: 1260px) {\n  .home__half__content {\n    margin-bottom: auto;\n    padding-top: 56px;\n  }\n  .home__half__content--right {\n    margin-top: auto;\n    padding-bottom: 10px;\n    padding-top: 20px;\n  }\n}\n\n.home {\n  display: flex;\n  height: 100%;\n  overflow-y: auto;\n  min-height: 100vh;\n}\n.home__title {\n  color: white;\n  font-size: 70px;\n  margin-bottom: 10px;\n  margin-top: 10px;\n  font-weight: 900;\n}\n\n.home__subtitle {\n  color: white;\n  font-weight: 400;\n  margin-bottom: 40px;\n  font-size: 18px;\n}\n.home__buttons {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n@media (max-width: 1079px) {\n  .home {\n    flex-direction: column;\n    background: #04023e;\n    padding: 0 8px;\n  }\n  .home__half__content {\n    flex-shrink: 0;\n    height: auto;\n  }\n  .home__half__content--left {\n    padding-right: 16px;\n  }\n  .home__title,\n  .home__subtitle {\n    text-align: center;\n  }\n  .home__title {\n    font-size: 58px;\n  }\n  .home__buttons {\n    justify-content: center;\n  }\n  .home__half--right {\n    background: salmon;\n    opacity: 0;\n  }\n  .home__half {\n    opacity: 0;\n  }\n}\n\n.home__buttons a {\n  display: block;\n}\n\n.home__buttons a {\n  margin-right: 4px;\n  margin-bottom: 4px;\n}\n.home__buttons a:first-of-type {\n  margin-left: 0px;\n}\n\n@media (max-width: 500px) {\n  .home__buttons {\n    flex-direction: column;\n  }\n  .home__buttons a {\n    margin: 8px 0;\n  }\n}\n\n.CardSection {\n  padding: 30px 50px;\n}\n\n@media (max-width: 500px) {\n  .CardSection {\n    padding: 20px 20px;\n  }\n}\n"
  },
  {
    "path": "docs/src/styles/pages/index.module.css",
    "content": ".container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.title {\n  font-size: 48px;\n  margin-top: 80px;\n  margin: 0;\n}\n"
  },
  {
    "path": "docs/src/styles/templates/Page.css",
    "content": ".Page p {\n  color: rgba(0, 0, 0, 0.9);\n  line-height: 1.6;\n  font-size: 14px;\n}\n\n.Page h1 {\n  font-size: 42px;\n  letter-spacing: 1.2px;\n}\n.Page h2 {\n  margin: 10px 0;\n  font-size: 28px;\n}\n\n.Page h4 {\n  margin: 10px 0;\n}\n\n.Page section {\n  margin: 40px 0;\n}\n\n.Page ol {\n  margin-left: 0;\n  padding-left: 18px;\n}\n.Page li {\n  font-size: 14px;\n}\n\n.Page li p {\n  font-size: 14px;\n  margin: 0;\n}\n"
  },
  {
    "path": "docs/src/styles/vendor/prism.css",
    "content": ""
  },
  {
    "path": "docs/src/templates/blog-post.js",
    "content": "import React from 'react';\nimport { Link, graphql } from 'gatsby';\n\nimport Layout from '../components/blog/Layout';\nimport SEO from '../components/blog/seo';\nimport Img from 'gatsby-image';\n\nclass BlogPostTemplate extends React.Component {\n  render() {\n    const data = this.props.data;\n    const post = data && data.markdownRemark;\n    const siteTitle = data && data.site.siteMetadata.title;\n    const { previous, next } = this.props.pageContext;\n    // const thumbnail = post.frontmatter && post.frontmatter.thumbnail;\n\n    return (\n      <Layout location={this.props.location} title={siteTitle}>\n        <SEO\n          title={post.frontmatter.title}\n          description={post.frontmatter.description || post.excerpt}\n          // thumbnail={post.frontmatter.thumbnail}\n        />\n        <article style={{ maxWidth: 780, margin: '20px auto', padding: 16 }}>\n          <header style={{ marginBottom: 50 }}>\n            {/* {thumbnail ? (\n              <Img\n                sizes={thumbnail.childImageSharp.sizes}\n                style={{ borderRadius: 10, maxHeight: 350 }}\n              />\n            ) : null} */}\n            <h1\n              style={{\n                marginBottom: 0,\n                fontWeight: 900,\n                fontSize: 54,\n                textAlign: 'center',\n              }}>\n              {post.frontmatter.title}\n            </h1>\n            <p\n              style={{\n                display: `block`,\n                fontSize: 16,\n                textAlign: 'center',\n              }}>\n              {post.frontmatter.date}\n            </p>\n          </header>\n          <section dangerouslySetInnerHTML={{ __html: post.html }} />\n          <hr\n            style={{\n              marginBottom: 12,\n            }}\n          />\n        </article>\n\n        <nav style={{ maxWidth: 780, margin: '0 auto' }}>\n          <ul\n            style={{\n              display: `flex`,\n              flexWrap: `wrap`,\n              justifyContent: `space-between`,\n              listStyle: `none`,\n              padding: 0,\n            }}>\n            <li>\n              {previous && (\n                <Link to={previous.fields.slug} rel=\"prev\">\n                  ← {previous.frontmatter.title}\n                </Link>\n              )}\n            </li>\n            <li>\n              {next && (\n                <Link to={next.fields.slug} rel=\"next\">\n                  {next.frontmatter.title} →\n                </Link>\n              )}\n            </li>\n          </ul>\n        </nav>\n      </Layout>\n    );\n  }\n}\n\nexport default BlogPostTemplate;\n\nexport const pageQuery = graphql`\n  query BlogPostBySlug($slug: String!) {\n    site {\n      siteMetadata {\n        title\n        author\n      }\n    }\n    markdownRemark(fields: { slug: { eq: $slug } }) {\n      id\n      excerpt(pruneLength: 160)\n      html\n      frontmatter {\n        title\n        date(formatString: \"MMMM DD, YYYY\")\n        description\n      }\n    }\n  }\n`;\n"
  },
  {
    "path": "docs/src/templates/component.js",
    "content": "import React from 'react';\n\nexport default ({ data }) => {\n  if (!data) return null;\n\n  const post = data.markdownRemark;\n  const { title, description, materialDocsLink } = post.frontmatter;\n  return (\n    <div>\n      <h2>{title}</h2>\n      <p>{description}</p>\n      <div>\n        <a href={materialDocsLink}>Material Docs</a>\n      </div>\n      <pre\n        style={{\n          padding: 12,\n        }}>\n        <code\n          className=\"language-javascript\"\n          style={{\n            width: 'auto',\n            fontSize: 14,\n          }}>{`import { appbar } from 'material-bread';`}</code>\n      </pre>\n      <div dangerouslySetInnerHTML={{ __html: post.html }} />\n    </div>\n  );\n};\n"
  },
  {
    "path": "docs/src/templates/page.js",
    "content": "import React from 'react';\nimport '../styles/templates/Page.css';\n\nexport default ({ data }) => {\n  if (!data) return null;\n  const post = data.markdownRemark;\n  return (\n    <div className=\"Page\">\n      <h1>{post.frontmatter.title}</h1>\n      <p\n        style={{\n          color: 'rgba(0,0,0,.67)',\n          marginBottom: 48,\n          lineHeight: 1.6,\n          fontSize: 16,\n        }}>\n        {post.frontmatter.description}\n      </p>\n      <div dangerouslySetInnerHTML={{ __html: post.html }} />\n    </div>\n  );\n};\n"
  },
  {
    "path": "docs/src/utils/createPropData.js",
    "content": "let id = 0;\nexport function createPropData(name, description, type, defaultValue) {\n  id += 1;\n  return { id, name, description, type, defaultValue };\n}\n\nexport function createTableData(data) {\n  const tableData = data.map(item =>\n    createPropData(item[0], item[1], item[2], item[3]),\n  );\n  return tableData;\n}\n"
  },
  {
    "path": "index.js",
    "content": "export default from './src/storybook';\nimport { YellowBox } from 'react-native';\nYellowBox.ignoreWarnings(['Remote debugger']);\n"
  },
  {
    "path": "ios/MaterialBread/AppDelegate.h",
    "content": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n#import <React/RCTBridgeDelegate.h>\n#import <UIKit/UIKit.h>\n\n@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate>\n\n@property (nonatomic, strong) UIWindow *window;\n\n@end\n"
  },
  {
    "path": "ios/MaterialBread/AppDelegate.m",
    "content": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n#import \"AppDelegate.h\"\n\n#import <React/RCTBridge.h>\n#import <React/RCTBundleURLProvider.h>\n#import <React/RCTRootView.h>\n\n@implementation AppDelegate\n\n- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions\n{\n  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];\n  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge\n                                                   moduleName:@\"MaterialBread\"\n                                            initialProperties:nil];\n\n  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];\n\n  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];\n  UIViewController *rootViewController = [UIViewController new];\n  rootViewController.view = rootView;\n  self.window.rootViewController = rootViewController;\n  [self.window makeKeyAndVisible];\n  return YES;\n}\n\n- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge\n{\n#if DEBUG\n  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@\"index\" fallbackResource:nil];\n#else\n  return [[NSBundle mainBundle] URLForResource:@\"main\" withExtension:@\"jsbundle\"];\n#endif\n}\n\n@end\n"
  },
  {
    "path": "ios/MaterialBread/Base.lproj/LaunchScreen.xib",
    "content": "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n<document type=\"com.apple.InterfaceBuilder3.CocoaTouch.XIB\" version=\"3.0\" toolsVersion=\"7702\" systemVersion=\"14D136\" targetRuntime=\"iOS.CocoaTouch\" propertyAccessControl=\"none\" useAutolayout=\"YES\" launchScreen=\"YES\" useTraitCollections=\"YES\">\n    <dependencies>\n        <deployment identifier=\"iOS\"/>\n        <plugIn identifier=\"com.apple.InterfaceBuilder.IBCocoaTouchPlugin\" version=\"7701\"/>\n        <capability name=\"Constraints with non-1.0 multipliers\" minToolsVersion=\"5.1\"/>\n    </dependencies>\n    <objects>\n        <placeholder placeholderIdentifier=\"IBFilesOwner\" id=\"-1\" userLabel=\"File's Owner\"/>\n        <placeholder placeholderIdentifier=\"IBFirstResponder\" id=\"-2\" customClass=\"UIResponder\"/>\n        <view contentMode=\"scaleToFill\" id=\"iN0-l3-epB\">\n            <rect key=\"frame\" x=\"0.0\" y=\"0.0\" width=\"480\" height=\"480\"/>\n            <autoresizingMask key=\"autoresizingMask\" widthSizable=\"YES\" heightSizable=\"YES\"/>\n            <subviews>\n                <label opaque=\"NO\" clipsSubviews=\"YES\" userInteractionEnabled=\"NO\" contentMode=\"left\" horizontalHuggingPriority=\"251\" verticalHuggingPriority=\"251\" text=\"Powered by React Native\" textAlignment=\"center\" lineBreakMode=\"tailTruncation\" baselineAdjustment=\"alignBaselines\" minimumFontSize=\"9\" translatesAutoresizingMaskIntoConstraints=\"NO\" id=\"8ie-xW-0ye\">\n                    <rect key=\"frame\" x=\"20\" y=\"439\" width=\"441\" height=\"21\"/>\n                    <fontDescription key=\"fontDescription\" type=\"system\" pointSize=\"17\"/>\n                    <color key=\"textColor\" cocoaTouchSystemColor=\"darkTextColor\"/>\n                    <nil key=\"highlightedColor\"/>\n                </label>\n                <label opaque=\"NO\" clipsSubviews=\"YES\" userInteractionEnabled=\"NO\" contentMode=\"left\" horizontalHuggingPriority=\"251\" verticalHuggingPriority=\"251\" text=\"MaterialBread\" textAlignment=\"center\" lineBreakMode=\"middleTruncation\" baselineAdjustment=\"alignBaselines\" minimumFontSize=\"18\" translatesAutoresizingMaskIntoConstraints=\"NO\" id=\"kId-c2-rCX\">\n                    <rect key=\"frame\" x=\"20\" y=\"140\" width=\"441\" height=\"43\"/>\n                    <fontDescription key=\"fontDescription\" type=\"boldSystem\" pointSize=\"36\"/>\n                    <color key=\"textColor\" cocoaTouchSystemColor=\"darkTextColor\"/>\n                    <nil key=\"highlightedColor\"/>\n                </label>\n            </subviews>\n            <color key=\"backgroundColor\" white=\"1\" alpha=\"1\" colorSpace=\"custom\" customColorSpace=\"calibratedWhite\"/>\n            <constraints>\n                <constraint firstItem=\"kId-c2-rCX\" firstAttribute=\"centerY\" secondItem=\"iN0-l3-epB\" secondAttribute=\"bottom\" multiplier=\"1/3\" constant=\"1\" id=\"5cJ-9S-tgC\"/>\n                <constraint firstAttribute=\"centerX\" secondItem=\"kId-c2-rCX\" secondAttribute=\"centerX\" id=\"Koa-jz-hwk\"/>\n                <constraint firstAttribute=\"bottom\" secondItem=\"8ie-xW-0ye\" secondAttribute=\"bottom\" constant=\"20\" id=\"Kzo-t9-V3l\"/>\n                <constraint firstItem=\"8ie-xW-0ye\" firstAttribute=\"leading\" secondItem=\"iN0-l3-epB\" secondAttribute=\"leading\" constant=\"20\" symbolic=\"YES\" id=\"MfP-vx-nX0\"/>\n                <constraint firstAttribute=\"centerX\" secondItem=\"8ie-xW-0ye\" secondAttribute=\"centerX\" id=\"ZEH-qu-HZ9\"/>\n                <constraint firstItem=\"kId-c2-rCX\" firstAttribute=\"leading\" secondItem=\"iN0-l3-epB\" secondAttribute=\"leading\" constant=\"20\" symbolic=\"YES\" id=\"fvb-Df-36g\"/>\n            </constraints>\n            <nil key=\"simulatedStatusBarMetrics\"/>\n            <freeformSimulatedSizeMetrics key=\"simulatedDestinationMetrics\"/>\n            <point key=\"canvasLocation\" x=\"548\" y=\"455\"/>\n        </view>\n    </objects>\n</document>\n"
  },
  {
    "path": "ios/MaterialBread/Images.xcassets/AppIcon.appiconset/Contents.json",
    "content": "{\n  \"images\" : [\n    {\n      \"idiom\" : \"iphone\",\n      \"size\" : \"20x20\",\n      \"scale\" : \"2x\"\n    },\n    {\n      \"idiom\" : \"iphone\",\n      \"size\" : \"20x20\",\n      \"scale\" : \"3x\"\n    },\n    {\n      \"idiom\" : \"iphone\",\n      \"size\" : \"29x29\",\n      \"scale\" : \"2x\"\n    },\n    {\n      \"idiom\" : \"iphone\",\n      \"size\" : \"29x29\",\n      \"scale\" : \"3x\"\n    },\n    {\n      \"idiom\" : \"iphone\",\n      \"size\" : \"40x40\",\n      \"scale\" : \"2x\"\n    },\n    {\n      \"idiom\" : \"iphone\",\n      \"size\" : \"40x40\",\n      \"scale\" : \"3x\"\n    },\n    {\n      \"idiom\" : \"iphone\",\n      \"size\" : \"60x60\",\n      \"scale\" : \"2x\"\n    },\n    {\n      \"idiom\" : \"iphone\",\n      \"size\" : \"60x60\",\n      \"scale\" : \"3x\"\n    },\n    {\n      \"idiom\" : \"ios-marketing\",\n      \"size\" : \"1024x1024\",\n      \"scale\" : \"1x\"\n    }\n  ],\n  \"info\" : {\n    \"version\" : 1,\n    \"author\" : \"xcode\"\n  }\n}"
  },
  {
    "path": "ios/MaterialBread/Images.xcassets/Contents.json",
    "content": "{\n  \"info\" : {\n    \"version\" : 1,\n    \"author\" : \"xcode\"\n  }\n}\n"
  },
  {
    "path": "ios/MaterialBread/Info.plist",
    "content": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">\n<plist version=\"1.0\">\n<dict>\n\t<key>CFBundleDevelopmentRegion</key>\n\t<string>en</string>\n\t<key>CFBundleDisplayName</key>\n\t<string>MaterialBread</string>\n\t<key>CFBundleExecutable</key>\n\t<string>$(EXECUTABLE_NAME)</string>\n\t<key>CFBundleIdentifier</key>\n\t<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>\n\t<key>CFBundleInfoDictionaryVersion</key>\n\t<string>6.0</string>\n\t<key>CFBundleName</key>\n\t<string>$(PRODUCT_NAME)</string>\n\t<key>CFBundlePackageType</key>\n\t<string>APPL</string>\n\t<key>CFBundleShortVersionString</key>\n\t<string>1.0</string>\n\t<key>CFBundleSignature</key>\n\t<string>????</string>\n\t<key>CFBundleVersion</key>\n\t<string>1</string>\n\t<key>LSRequiresIPhoneOS</key>\n\t<true/>\n\t<key>NSLocationWhenInUseUsageDescription</key>\n\t<string/>\n\t<key>UILaunchStoryboardName</key>\n\t<string>LaunchScreen</string>\n\t<key>UIRequiredDeviceCapabilities</key>\n\t<array>\n\t\t<string>armv7</string>\n\t</array>\n\t<key>UISupportedInterfaceOrientations</key>\n\t<array>\n\t\t<string>UIInterfaceOrientationPortrait</string>\n\t\t<string>UIInterfaceOrientationLandscapeLeft</string>\n\t\t<string>UIInterfaceOrientationLandscapeRight</string>\n\t</array>\n\t<key>UIViewControllerBasedStatusBarAppearance</key>\n\t<false/>\n\t<key>NSAppTransportSecurity</key>\n\t<dict>\n\t\t<key>NSAllowsArbitraryLoads</key>\n\t\t<true/>\n\t\t<key>NSExceptionDomains</key>\n\t\t<dict>\n\t\t\t<key>localhost</key>\n\t\t\t<dict>\n\t\t\t\t<key>NSExceptionAllowsInsecureHTTPLoads</key>\n\t\t\t\t<true/>\n\t\t\t</dict>\n\t\t</dict>\n\t</dict>\n\t<key>UIAppFonts</key>\n\t<array>\n\t\t<string>MaterialCommunityIcons.ttf</string>\n\t\t<string>MaterialIcons.ttf</string>\n\t</array>\n</dict>\n</plist>"
  },
  {
    "path": "ios/MaterialBread/main.m",
    "content": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n#import <UIKit/UIKit.h>\n\n#import \"AppDelegate.h\"\n\nint main(int argc, char * argv[]) {\n  @autoreleasepool {\n    return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));\n  }\n}\n"
  },
  {
    "path": "ios/MaterialBread-tvOS/Info.plist",
    "content": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">\n<plist version=\"1.0\">\n<dict>\n\t<key>CFBundleDevelopmentRegion</key>\n\t<string>en</string>\n\t<key>CFBundleExecutable</key>\n\t<string>$(EXECUTABLE_NAME)</string>\n\t<key>CFBundleIdentifier</key>\n\t<string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>\n\t<key>CFBundleInfoDictionaryVersion</key>\n\t<string>6.0</string>\n\t<key>CFBundleName</key>\n\t<string>$(PRODUCT_NAME)</string>\n\t<key>CFBundlePackageType</key>\n\t<string>APPL</string>\n\t<key>CFBundleShortVersionString</key>\n\t<string>1.0</string>\n\t<key>CFBundleSignature</key>\n\t<string>????</string>\n\t<key>CFBundleVersion</key>\n\t<string>1</string>\n\t<key>LSRequiresIPhoneOS</key>\n\t<true/>\n\t<key>UILaunchStoryboardName</key>\n\t<string>LaunchScreen</string>\n\t<key>UIRequiredDeviceCapabilities</key>\n\t<array>\n\t\t<string>armv7</string>\n\t</array>\n\t<key>UISupportedInterfaceOrientations</key>\n\t<array>\n\t\t<string>UIInterfaceOrientationPortrait</string>\n\t\t<string>UIInterfaceOrientationLandscapeLeft</string>\n\t\t<string>UIInterfaceOrientationLandscapeRight</string>\n\t</array>\n\t<key>UIViewControllerBasedStatusBarAppearance</key>\n\t<false/>\n\t<key>NSLocationWhenInUseUsageDescription</key>\n\t<string></string>\n\t<key>NSAppTransportSecurity</key>\n\t<!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->\n\t<dict>\n\t\t<key>NSExceptionDomains</key>\n\t\t<dict>\n\t\t\t<key>localhost</key>\n\t\t\t<dict>\n\t\t\t\t<key>NSExceptionAllowsInsecureHTTPLoads</key>\n\t\t\t\t<true/>\n\t\t\t</dict>\n\t\t</dict>\n\t</dict>\n</dict>\n</plist>\n"
  },
  {
    "path": "ios/MaterialBread-tvOSTests/Info.plist",
    "content": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">\n<plist version=\"1.0\">\n<dict>\n\t<key>CFBundleDevelopmentRegion</key>\n\t<string>en</string>\n\t<key>CFBundleExecutable</key>\n\t<string>$(EXECUTABLE_NAME)</string>\n\t<key>CFBundleIdentifier</key>\n\t<string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>\n\t<key>CFBundleInfoDictionaryVersion</key>\n\t<string>6.0</string>\n\t<key>CFBundleName</key>\n\t<string>$(PRODUCT_NAME)</string>\n\t<key>CFBundlePackageType</key>\n\t<string>BNDL</string>\n\t<key>CFBundleShortVersionString</key>\n\t<string>1.0</string>\n\t<key>CFBundleSignature</key>\n\t<string>????</string>\n\t<key>CFBundleVersion</key>\n\t<string>1</string>\n</dict>\n</plist>\n"
  },
  {
    "path": "ios/MaterialBread.xcodeproj/project.pbxproj",
    "content": "// !$*UTF8*$!\n{\n\tarchiveVersion = 1;\n\tclasses = {\n\t};\n\tobjectVersion = 46;\n\tobjects = {\n\n/* Begin PBXBuildFile section */\n\t\t00417B2A32664776967B9C87 /* libRNVectorIcons.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 71E3D4963CAD4981952B71A6 /* libRNVectorIcons.a */; };\n\t\t00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; };\n\t\t00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; };\n\t\t00C302E81ABCBA2D00DB3ED1 /* libRCTImage.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302C01ABCB91800DB3ED1 /* libRCTImage.a */; };\n\t\t00C302E91ABCBA2D00DB3ED1 /* libRCTNetwork.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */; };\n\t\t00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */; };\n\t\t00E356F31AD99517003FC87E /* MaterialBreadTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* MaterialBreadTests.m */; };\n\t\t00F5222314164BCA8AB5A847 /* AntDesign.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 038E20E3901E4963A7E72B0A /* AntDesign.ttf */; };\n\t\t06E97CE963BE4967AF8EEAB0 /* Zocial.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 91F185D509A24D40835BC8AD /* Zocial.ttf */; };\n\t\t0C6086951EA34002AE160A65 /* FontAwesome5_Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 19E8D3D83ECF44C9BB11D71A /* FontAwesome5_Regular.ttf */; };\n\t\t0F90128312BB423A83F663B0 /* EvilIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 465F1634374349C1A39223B9 /* EvilIcons.ttf */; };\n\t\t11D1A2F320CAFA9E000508D9 /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */; };\n\t\t133E29F31AD74F7200F7D852 /* libRCTLinking.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 78C398B91ACF4ADC00677621 /* libRCTLinking.a */; };\n\t\t139105C61AF99C1200B5F7CC /* libRCTSettings.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 139105C11AF99BAD00B5F7CC /* libRCTSettings.a */; };\n\t\t139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 139FDEF41B06529B00C62182 /* libRCTWebSocket.a */; };\n\t\t13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; };\n\t\t13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB11A68108700A75B9A /* LaunchScreen.xib */; };\n\t\t13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };\n\t\t13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };\n\t\t140ED2AC1D01E1AD002B40FF /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; };\n\t\t146834051AC3E58100842450 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; };\n\t\t26D0C21AC4E7455288D94A4F /* Foundation.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 7105CED6B07B4F89BE595D76 /* Foundation.ttf */; };\n\t\t2AC08AAF47704C778BE19C45 /* Feather.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 11038E24F7F24446B7153B7D /* Feather.ttf */; };\n\t\t2D02E4BC1E0B4A80006451C7 /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; };\n\t\t2D02E4BD1E0B4A84006451C7 /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };\n\t\t2D02E4BF1E0B4AB3006451C7 /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };\n\t\t2D02E4C21E0B4AEC006451C7 /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5E9157351DD0AC6500FF2AA8 /* libRCTAnimation.a */; };\n\t\t2D02E4C31E0B4AEC006451C7 /* libRCTImage-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3DAD3E841DF850E9000B6D8A /* libRCTImage-tvOS.a */; };\n\t\t2D02E4C41E0B4AEC006451C7 /* libRCTLinking-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3DAD3E881DF850E9000B6D8A /* libRCTLinking-tvOS.a */; };\n\t\t2D02E4C51E0B4AEC006451C7 /* libRCTNetwork-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3DAD3E8C1DF850E9000B6D8A /* libRCTNetwork-tvOS.a */; };\n\t\t2D02E4C61E0B4AEC006451C7 /* libRCTSettings-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3DAD3E901DF850E9000B6D8A /* libRCTSettings-tvOS.a */; };\n\t\t2D02E4C71E0B4AEC006451C7 /* libRCTText-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3DAD3E941DF850E9000B6D8A /* libRCTText-tvOS.a */; };\n\t\t2D02E4C81E0B4AEC006451C7 /* libRCTWebSocket-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3DAD3E991DF850E9000B6D8A /* libRCTWebSocket-tvOS.a */; };\n\t\t2D16E6881FA4F8E400B85C8A /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 2D16E6891FA4F8E400B85C8A /* libReact.a */; };\n\t\t2DCD954D1E0B4F2C00145EB5 /* MaterialBreadTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* MaterialBreadTests.m */; };\n\t\t2DF0FFEE2056DD460020B375 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3DAD3EA31DF850E9000B6D8A /* libReact.a */; };\n\t\t316FB15822F1821800AE848A /* libRNSVG.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 316FB15522F181D600AE848A /* libRNSVG.a */; };\n\t\t32BC5A94579D4B3CBBE654B0 /* libRNSVG-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 2578F5F9CD234B57ADCF5CBD /* libRNSVG-tvOS.a */; };\n\t\t3D7A5CA9A4BB4B9585DED3CD /* Octicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 738EAA38A94249DDBBBB4D7A /* Octicons.ttf */; };\n\t\t41795B8795F148BD9CE3D4E6 /* FontAwesome5_Brands.ttf in Resources */ = {isa = PBXBuildFile; fileRef = F2475E11FA404B7492E355C4 /* FontAwesome5_Brands.ttf */; };\n\t\t6169ACB0ADC04674A41AE8EA /* MaterialCommunityIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 7A9A7995D1BF4867AA1C0537 /* MaterialCommunityIcons.ttf */; };\n\t\t7A017304973D4E5AA2B3E2D0 /* Ionicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = F90EA4D5D94643779DADAF4A /* Ionicons.ttf */; };\n\t\t80F659E0DD8D43249E19490F /* Entypo.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 4C97F1E4A0474F53BC21A4E4 /* Entypo.ttf */; };\n\t\t832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };\n\t\t9271035B2A9D492E91C19635 /* MaterialIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = E667911E9B7C47339D6A1904 /* MaterialIcons.ttf */; };\n\t\t9FD26C7C235B48C8904C2667 /* SimpleLineIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = A9BB11E85CBD4445800D84A6 /* SimpleLineIcons.ttf */; };\n\t\tAC476C34E57843F7BBB2AFA0 /* libRNVectorIcons-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5C2490B630F74270AE73DDF6 /* libRNVectorIcons-tvOS.a */; };\n\t\tADBDB9381DFEBF1600ED6528 /* libRCTBlob.a in Frameworks */ = {isa = PBXBuildFile; fileRef = ADBDB9271DFEBF0700ED6528 /* libRCTBlob.a */; };\n\t\tC21A1556CDEB4F758612A693 /* libRNSVG.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 09888213D7614B06B1C1E438 /* libRNSVG.a */; };\n\t\tC74C9A3E419A467BBACF4C46 /* FontAwesome.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 157D7C26E820484DA11B8F1B /* FontAwesome.ttf */; };\n\t\tDDFB8B9E0DE14EFB9BAD1673 /* FontAwesome5_Solid.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 97724F71AF2947CAB82A998B /* FontAwesome5_Solid.ttf */; };\n\t\tED297163215061F000B7C4FE /* JavaScriptCore.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = ED297162215061F000B7C4FE /* JavaScriptCore.framework */; };\n\t\tED2971652150620600B7C4FE /* JavaScriptCore.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = ED2971642150620600B7C4FE /* JavaScriptCore.framework */; };\n/* End PBXBuildFile section */\n\n/* Begin PBXContainerItemProxy section */\n\t\t00C302AB1ABCB8CE00DB3ED1 /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = 134814201AA4EA6300B7C361;\n\t\t\tremoteInfo = RCTActionSheet;\n\t\t};\n\t\t00C302B91ABCB90400DB3ED1 /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = 134814201AA4EA6300B7C361;\n\t\t\tremoteInfo = RCTGeolocation;\n\t\t};\n\t\t00C302BF1ABCB91800DB3ED1 /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = 58B5115D1A9E6B3D00147676;\n\t\t\tremoteInfo = RCTImage;\n\t\t};\n\t\t00C302DB1ABCB9D200DB3ED1 /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = 58B511DB1A9E6C8500147676;\n\t\t\tremoteInfo = RCTNetwork;\n\t\t};\n\t\t00C302E31ABCB9EE00DB3ED1 /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = 832C81801AAF6DEF007FA2F7;\n\t\t\tremoteInfo = RCTVibration;\n\t\t};\n\t\t00E356F41AD99517003FC87E /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 83CBB9F71A601CBA00E9B192 /* Project object */;\n\t\t\tproxyType = 1;\n\t\t\tremoteGlobalIDString = 13B07F861A680F5B00A75B9A;\n\t\t\tremoteInfo = MaterialBread;\n\t\t};\n\t\t139105C01AF99BAD00B5F7CC /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = 134814201AA4EA6300B7C361;\n\t\t\tremoteInfo = RCTSettings;\n\t\t};\n\t\t139FDEF31B06529B00C62182 /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = 3C86DF461ADF2C930047B81A;\n\t\t\tremoteInfo = RCTWebSocket;\n\t\t};\n\t\t146834031AC3E56700842450 /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = 83CBBA2E1A601D0E00E9B192;\n\t\t\tremoteInfo = React;\n\t\t};\n\t\t2D02E4911E0B4A5D006451C7 /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 83CBB9F71A601CBA00E9B192 /* Project object */;\n\t\t\tproxyType = 1;\n\t\t\tremoteGlobalIDString = 2D02E47A1E0B4A5D006451C7;\n\t\t\tremoteInfo = \"MaterialBread-tvOS\";\n\t\t};\n\t\t2D16E6711FA4F8DC00B85C8A /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = ADD01A681E09402E00F6D226;\n\t\t\tremoteInfo = \"RCTBlob-tvOS\";\n\t\t};\n\t\t2D16E6831FA4F8DC00B85C8A /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = 3DBE0D001F3B181A0099AA32;\n\t\t\tremoteInfo = fishhook;\n\t\t};\n\t\t2D16E6851FA4F8DC00B85C8A /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = 3DBE0D0D1F3B181C0099AA32;\n\t\t\tremoteInfo = \"fishhook-tvOS\";\n\t\t};\n\t\t2DF0FFDE2056DD460020B375 /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = EBF21BDC1FC498900052F4D5;\n\t\t\tremoteInfo = jsinspector;\n\t\t};\n\t\t2DF0FFE02056DD460020B375 /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = EBF21BFA1FC4989A0052F4D5;\n\t\t\tremoteInfo = \"jsinspector-tvOS\";\n\t\t};\n\t\t2DF0FFE22056DD460020B375 /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = 139D7ECE1E25DB7D00323FB7;\n\t\t\tremoteInfo = \"third-party\";\n\t\t};\n\t\t2DF0FFE42056DD460020B375 /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = 3D383D3C1EBD27B6005632C8;\n\t\t\tremoteInfo = \"third-party-tvOS\";\n\t\t};\n\t\t2DF0FFE62056DD460020B375 /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = 139D7E881E25C6D100323FB7;\n\t\t\tremoteInfo = \"double-conversion\";\n\t\t};\n\t\t2DF0FFE82056DD460020B375 /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = 3D383D621EBD27B9005632C8;\n\t\t\tremoteInfo = \"double-conversion-tvOS\";\n\t\t};\n\t\t316FB14822F181D400AE848A /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = EDEBC6D6214B3E7000DD5AC8;\n\t\t\tremoteInfo = jsi;\n\t\t};\n\t\t316FB14A22F181D400AE848A /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = EDEBC73B214B45A300DD5AC8;\n\t\t\tremoteInfo = jsiexecutor;\n\t\t};\n\t\t316FB14C22F181D400AE848A /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = ED296FB6214C9A0900B7C4FE;\n\t\t\tremoteInfo = \"jsi-tvOS\";\n\t\t};\n\t\t316FB14E22F181D400AE848A /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = ED296FEE214C9CF800B7C4FE;\n\t\t\tremoteInfo = \"jsiexecutor-tvOS\";\n\t\t};\n\t\t316FB15422F181D600AE848A /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = DEDCB56B789E477E9D94176D /* RNSVG.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = 0CF68AC11AF0540F00FF9E5C;\n\t\t\tremoteInfo = RNSVG;\n\t\t};\n\t\t316FB15622F181D600AE848A /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = DEDCB56B789E477E9D94176D /* RNSVG.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = 94DDAC5C1F3D024300EED511;\n\t\t\tremoteInfo = \"RNSVG-tvOS\";\n\t\t};\n\t\t316FB19122F185E600AE848A /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 5F9DA5D7526A44499D596FC3 /* RNVectorIcons.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = 5DBEB1501B18CEA900B34395;\n\t\t\tremoteInfo = RNVectorIcons;\n\t\t};\n\t\t316FB19322F185E600AE848A /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 5F9DA5D7526A44499D596FC3 /* RNVectorIcons.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = A39873CE1EA65EE60051E01A;\n\t\t\tremoteInfo = \"RNVectorIcons-tvOS\";\n\t\t};\n\t\t3DAD3E831DF850E9000B6D8A /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = 2D2A283A1D9B042B00D4039D;\n\t\t\tremoteInfo = \"RCTImage-tvOS\";\n\t\t};\n\t\t3DAD3E871DF850E9000B6D8A /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = 2D2A28471D9B043800D4039D;\n\t\t\tremoteInfo = \"RCTLinking-tvOS\";\n\t\t};\n\t\t3DAD3E8B1DF850E9000B6D8A /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = 2D2A28541D9B044C00D4039D;\n\t\t\tremoteInfo = \"RCTNetwork-tvOS\";\n\t\t};\n\t\t3DAD3E8F1DF850E9000B6D8A /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = 2D2A28611D9B046600D4039D;\n\t\t\tremoteInfo = \"RCTSettings-tvOS\";\n\t\t};\n\t\t3DAD3E931DF850E9000B6D8A /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = 2D2A287B1D9B048500D4039D;\n\t\t\tremoteInfo = \"RCTText-tvOS\";\n\t\t};\n\t\t3DAD3E981DF850E9000B6D8A /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = 2D2A28881D9B049200D4039D;\n\t\t\tremoteInfo = \"RCTWebSocket-tvOS\";\n\t\t};\n\t\t3DAD3EA21DF850E9000B6D8A /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = 2D2A28131D9B038B00D4039D;\n\t\t\tremoteInfo = \"React-tvOS\";\n\t\t};\n\t\t3DAD3EA41DF850E9000B6D8A /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = 3D3C059A1DE3340900C268FA;\n\t\t\tremoteInfo = yoga;\n\t\t};\n\t\t3DAD3EA61DF850E9000B6D8A /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = 3D3C06751DE3340C00C268FA;\n\t\t\tremoteInfo = \"yoga-tvOS\";\n\t\t};\n\t\t3DAD3EA81DF850E9000B6D8A /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = 3D3CD9251DE5FBEC00167DC4;\n\t\t\tremoteInfo = cxxreact;\n\t\t};\n\t\t3DAD3EAA1DF850E9000B6D8A /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = 3D3CD9321DE5FBEE00167DC4;\n\t\t\tremoteInfo = \"cxxreact-tvOS\";\n\t\t};\n\t\t5E9157321DD0AC6500FF2AA8 /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = 134814201AA4EA6300B7C361;\n\t\t\tremoteInfo = RCTAnimation;\n\t\t};\n\t\t5E9157341DD0AC6500FF2AA8 /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = 2D2A28201D9B03D100D4039D;\n\t\t\tremoteInfo = \"RCTAnimation-tvOS\";\n\t\t};\n\t\t78C398B81ACF4ADC00677621 /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = 134814201AA4EA6300B7C361;\n\t\t\tremoteInfo = RCTLinking;\n\t\t};\n\t\t832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = 58B5119B1A9E6C1200147676;\n\t\t\tremoteInfo = RCTText;\n\t\t};\n\t\tADBDB9261DFEBF0700ED6528 /* PBXContainerItemProxy */ = {\n\t\t\tisa = PBXContainerItemProxy;\n\t\t\tcontainerPortal = ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */;\n\t\t\tproxyType = 2;\n\t\t\tremoteGlobalIDString = 358F4ED71D1E81A9004DF814;\n\t\t\tremoteInfo = RCTBlob;\n\t\t};\n/* End PBXContainerItemProxy section */\n\n/* Begin PBXFileReference section */\n\t\t008F07F21AC5B25A0029DE68 /* main.jsbundle */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = main.jsbundle; sourceTree = \"<group>\"; };\n\t\t00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = \"wrapper.pb-project\"; name = RCTActionSheet.xcodeproj; path = \"../node_modules/react-native/Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj\"; sourceTree = \"<group>\"; };\n\t\t00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = \"wrapper.pb-project\"; name = RCTGeolocation.xcodeproj; path = \"../node_modules/react-native/Libraries/Geolocation/RCTGeolocation.xcodeproj\"; sourceTree = \"<group>\"; };\n\t\t00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = \"wrapper.pb-project\"; name = RCTImage.xcodeproj; path = \"../node_modules/react-native/Libraries/Image/RCTImage.xcodeproj\"; sourceTree = \"<group>\"; };\n\t\t00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = \"wrapper.pb-project\"; name = RCTNetwork.xcodeproj; path = \"../node_modules/react-native/Libraries/Network/RCTNetwork.xcodeproj\"; sourceTree = \"<group>\"; };\n\t\t00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = \"wrapper.pb-project\"; name = RCTVibration.xcodeproj; path = \"../node_modules/react-native/Libraries/Vibration/RCTVibration.xcodeproj\"; sourceTree = \"<group>\"; };\n\t\t00E356EE1AD99517003FC87E /* MaterialBreadTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = MaterialBreadTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };\n\t\t00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = \"<group>\"; };\n\t\t00E356F21AD99517003FC87E /* MaterialBreadTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = MaterialBreadTests.m; sourceTree = \"<group>\"; };\n\t\t038E20E3901E4963A7E72B0A /* AntDesign.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = AntDesign.ttf; path = \"../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf\"; sourceTree = \"<group>\"; };\n\t\t09888213D7614B06B1C1E438 /* libRNSVG.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNSVG.a; sourceTree = \"<group>\"; };\n\t\t11038E24F7F24446B7153B7D /* Feather.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Feather.ttf; path = \"../node_modules/react-native-vector-icons/Fonts/Feather.ttf\"; sourceTree = \"<group>\"; };\n\t\t139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = \"wrapper.pb-project\"; name = RCTSettings.xcodeproj; path = \"../node_modules/react-native/Libraries/Settings/RCTSettings.xcodeproj\"; sourceTree = \"<group>\"; };\n\t\t139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = \"wrapper.pb-project\"; name = RCTWebSocket.xcodeproj; path = \"../node_modules/react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj\"; sourceTree = \"<group>\"; };\n\t\t13B07F961A680F5B00A75B9A /* MaterialBread.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = MaterialBread.app; sourceTree = BUILT_PRODUCTS_DIR; };\n\t\t13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = MaterialBread/AppDelegate.h; sourceTree = \"<group>\"; };\n\t\t13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AppDelegate.m; path = MaterialBread/AppDelegate.m; sourceTree = \"<group>\"; };\n\t\t13B07FB21A68108700A75B9A /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.xib; name = Base; path = Base.lproj/LaunchScreen.xib; sourceTree = \"<group>\"; };\n\t\t13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = MaterialBread/Images.xcassets; sourceTree = \"<group>\"; };\n\t\t13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = MaterialBread/Info.plist; sourceTree = \"<group>\"; };\n\t\t13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = MaterialBread/main.m; sourceTree = \"<group>\"; };\n\t\t146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = \"wrapper.pb-project\"; name = React.xcodeproj; path = \"../node_modules/react-native/React/React.xcodeproj\"; sourceTree = \"<group>\"; };\n\t\t157D7C26E820484DA11B8F1B /* FontAwesome.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = FontAwesome.ttf; path = \"../node_modules/react-native-vector-icons/Fonts/FontAwesome.ttf\"; sourceTree = \"<group>\"; };\n\t\t19E8D3D83ECF44C9BB11D71A /* FontAwesome5_Regular.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = FontAwesome5_Regular.ttf; path = \"../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Regular.ttf\"; sourceTree = \"<group>\"; };\n\t\t2578F5F9CD234B57ADCF5CBD /* libRNSVG-tvOS.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = \"libRNSVG-tvOS.a\"; sourceTree = \"<group>\"; };\n\t\t2D02E47B1E0B4A5D006451C7 /* MaterialBread-tvOS.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = \"MaterialBread-tvOS.app\"; sourceTree = BUILT_PRODUCTS_DIR; };\n\t\t2D02E4901E0B4A5D006451C7 /* MaterialBread-tvOSTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = \"MaterialBread-tvOSTests.xctest\"; sourceTree = BUILT_PRODUCTS_DIR; };\n\t\t2D16E6891FA4F8E400B85C8A /* libReact.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; path = libReact.a; sourceTree = BUILT_PRODUCTS_DIR; };\n\t\t465F1634374349C1A39223B9 /* EvilIcons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = EvilIcons.ttf; path = \"../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf\"; sourceTree = \"<group>\"; };\n\t\t4C97F1E4A0474F53BC21A4E4 /* Entypo.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Entypo.ttf; path = \"../node_modules/react-native-vector-icons/Fonts/Entypo.ttf\"; sourceTree = \"<group>\"; };\n\t\t5C2490B630F74270AE73DDF6 /* libRNVectorIcons-tvOS.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = \"libRNVectorIcons-tvOS.a\"; sourceTree = \"<group>\"; };\n\t\t5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = \"wrapper.pb-project\"; name = RCTAnimation.xcodeproj; path = \"../node_modules/react-native/Libraries/NativeAnimation/RCTAnimation.xcodeproj\"; sourceTree = \"<group>\"; };\n\t\t5F9DA5D7526A44499D596FC3 /* RNVectorIcons.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = \"wrapper.pb-project\"; name = RNVectorIcons.xcodeproj; path = \"../node_modules/react-native-vector-icons/RNVectorIcons.xcodeproj\"; sourceTree = \"<group>\"; };\n\t\t7105CED6B07B4F89BE595D76 /* Foundation.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Foundation.ttf; path = \"../node_modules/react-native-vector-icons/Fonts/Foundation.ttf\"; sourceTree = \"<group>\"; };\n\t\t71E3D4963CAD4981952B71A6 /* libRNVectorIcons.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNVectorIcons.a; sourceTree = \"<group>\"; };\n\t\t738EAA38A94249DDBBBB4D7A /* Octicons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Octicons.ttf; path = \"../node_modules/react-native-vector-icons/Fonts/Octicons.ttf\"; sourceTree = \"<group>\"; };\n\t\t78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = \"wrapper.pb-project\"; name = RCTLinking.xcodeproj; path = \"../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj\"; sourceTree = \"<group>\"; };\n\t\t7A9A7995D1BF4867AA1C0537 /* MaterialCommunityIcons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = MaterialCommunityIcons.ttf; path = \"../node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf\"; sourceTree = \"<group>\"; };\n\t\t832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = \"wrapper.pb-project\"; name = RCTText.xcodeproj; path = \"../node_modules/react-native/Libraries/Text/RCTText.xcodeproj\"; sourceTree = \"<group>\"; };\n\t\t91F185D509A24D40835BC8AD /* Zocial.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Zocial.ttf; path = \"../node_modules/react-native-vector-icons/Fonts/Zocial.ttf\"; sourceTree = \"<group>\"; };\n\t\t97724F71AF2947CAB82A998B /* FontAwesome5_Solid.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = FontAwesome5_Solid.ttf; path = \"../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Solid.ttf\"; sourceTree = \"<group>\"; };\n\t\tA9BB11E85CBD4445800D84A6 /* SimpleLineIcons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = SimpleLineIcons.ttf; path = \"../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf\"; sourceTree = \"<group>\"; };\n\t\tADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = \"wrapper.pb-project\"; name = RCTBlob.xcodeproj; path = \"../node_modules/react-native/Libraries/Blob/RCTBlob.xcodeproj\"; sourceTree = \"<group>\"; };\n\t\tDEDCB56B789E477E9D94176D /* RNSVG.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = \"wrapper.pb-project\"; name = RNSVG.xcodeproj; path = \"../node_modules/react-native-svg/ios/RNSVG.xcodeproj\"; sourceTree = \"<group>\"; };\n\t\tE667911E9B7C47339D6A1904 /* MaterialIcons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = MaterialIcons.ttf; path = \"../node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf\"; sourceTree = \"<group>\"; };\n\t\tED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };\n\t\tED2971642150620600B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = Platforms/AppleTVOS.platform/Developer/SDKs/AppleTVOS12.0.sdk/System/Library/Frameworks/JavaScriptCore.framework; sourceTree = DEVELOPER_DIR; };\n\t\tF2475E11FA404B7492E355C4 /* FontAwesome5_Brands.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = FontAwesome5_Brands.ttf; path = \"../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Brands.ttf\"; sourceTree = \"<group>\"; };\n\t\tF90EA4D5D94643779DADAF4A /* Ionicons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Ionicons.ttf; path = \"../node_modules/react-native-vector-icons/Fonts/Ionicons.ttf\"; sourceTree = \"<group>\"; };\n/* End PBXFileReference section */\n\n/* Begin PBXFrameworksBuildPhase section */\n\t\t00E356EB1AD99517003FC87E /* Frameworks */ = {\n\t\t\tisa = PBXFrameworksBuildPhase;\n\t\t\tbuildActionMask = 2147483647;\n\t\t\tfiles = (\n\t\t\t\t140ED2AC1D01E1AD002B40FF /* libReact.a in Frameworks */,\n\t\t\t);\n\t\t\trunOnlyForDeploymentPostprocessing = 0;\n\t\t};\n\t\t13B07F8C1A680F5B00A75B9A /* Frameworks */ = {\n\t\t\tisa = PBXFrameworksBuildPhase;\n\t\t\tbuildActionMask = 2147483647;\n\t\t\tfiles = (\n\t\t\t\tED297163215061F000B7C4FE /* JavaScriptCore.framework in Frameworks */,\n\t\t\t\tADBDB9381DFEBF1600ED6528 /* libRCTBlob.a in Frameworks */,\n\t\t\t\t11D1A2F320CAFA9E000508D9 /* libRCTAnimation.a in Frameworks */,\n\t\t\t\t146834051AC3E58100842450 /* libReact.a in Frameworks */,\n\t\t\t\t00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */,\n\t\t\t\t00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */,\n\t\t\t\t00C302E81ABCBA2D00DB3ED1 /* libRCTImage.a in Frameworks */,\n\t\t\t\t133E29F31AD74F7200F7D852 /* libRCTLinking.a in Frameworks */,\n\t\t\t\t00C302E91ABCBA2D00DB3ED1 /* libRCTNetwork.a in Frameworks */,\n\t\t\t\t139105C61AF99C1200B5F7CC /* libRCTSettings.a in Frameworks */,\n\t\t\t\t832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */,\n\t\t\t\t00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */,\n\t\t\t\t139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */,\n\t\t\t\t316FB15822F1821800AE848A /* libRNSVG.a in Frameworks */,\n\t\t\t\tC21A1556CDEB4F758612A693 /* libRNSVG.a in Frameworks */,\n\t\t\t\t00417B2A32664776967B9C87 /* libRNVectorIcons.a in Frameworks */,\n\t\t\t);\n\t\t\trunOnlyForDeploymentPostprocessing = 0;\n\t\t};\n\t\t2D02E4781E0B4A5D006451C7 /* Frameworks */ = {\n\t\t\tisa = PBXFrameworksBuildPhase;\n\t\t\tbuildActionMask = 2147483647;\n\t\t\tfiles = (\n\t\t\t\tED2971652150620600B7C4FE /* JavaScriptCore.framework in Frameworks */,\n\t\t\t\t2D16E6881FA4F8E400B85C8A /* libReact.a in Frameworks */,\n\t\t\t\t2D02E4C21E0B4AEC006451C7 /* libRCTAnimation.a in Frameworks */,\n\t\t\t\t2D02E4C31E0B4AEC006451C7 /* libRCTImage-tvOS.a in Frameworks */,\n\t\t\t\t2D02E4C41E0B4AEC006451C7 /* libRCTLinking-tvOS.a in Frameworks */,\n\t\t\t\t2D02E4C51E0B4AEC006451C7 /* libRCTNetwork-tvOS.a in Frameworks */,\n\t\t\t\t2D02E4C61E0B4AEC006451C7 /* libRCTSettings-tvOS.a in Frameworks */,\n\t\t\t\t2D02E4C71E0B4AEC006451C7 /* libRCTText-tvOS.a in Frameworks */,\n\t\t\t\t2D02E4C81E0B4AEC006451C7 /* libRCTWebSocket-tvOS.a in Frameworks */,\n\t\t\t\t32BC5A94579D4B3CBBE654B0 /* libRNSVG-tvOS.a in Frameworks */,\n\t\t\t\tAC476C34E57843F7BBB2AFA0 /* libRNVectorIcons-tvOS.a in Frameworks */,\n\t\t\t);\n\t\t\trunOnlyForDeploymentPostprocessing = 0;\n\t\t};\n\t\t2D02E48D1E0B4A5D006451C7 /* Frameworks */ = {\n\t\t\tisa = PBXFrameworksBuildPhase;\n\t\t\tbuildActionMask = 2147483647;\n\t\t\tfiles = (\n\t\t\t\t2DF0FFEE2056DD460020B375 /* libReact.a in Frameworks */,\n\t\t\t);\n\t\t\trunOnlyForDeploymentPostprocessing = 0;\n\t\t};\n/* End PBXFrameworksBuildPhase section */\n\n/* Begin PBXGroup section */\n\t\t00C302A81ABCB8CE00DB3ED1 /* Products */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\t00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */,\n\t\t\t);\n\t\t\tname = Products;\n\t\t\tsourceTree = \"<group>\";\n\t\t};\n\t\t00C302B61ABCB90400DB3ED1 /* Products */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\t00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */,\n\t\t\t);\n\t\t\tname = Products;\n\t\t\tsourceTree = \"<group>\";\n\t\t};\n\t\t00C302BC1ABCB91800DB3ED1 /* Products */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\t00C302C01ABCB91800DB3ED1 /* libRCTImage.a */,\n\t\t\t\t3DAD3E841DF850E9000B6D8A /* libRCTImage-tvOS.a */,\n\t\t\t);\n\t\t\tname = Products;\n\t\t\tsourceTree = \"<group>\";\n\t\t};\n\t\t00C302D41ABCB9D200DB3ED1 /* Products */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\t00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */,\n\t\t\t\t3DAD3E8C1DF850E9000B6D8A /* libRCTNetwork-tvOS.a */,\n\t\t\t);\n\t\t\tname = Products;\n\t\t\tsourceTree = \"<group>\";\n\t\t};\n\t\t00C302E01ABCB9EE00DB3ED1 /* Products */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\t00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */,\n\t\t\t);\n\t\t\tname = Products;\n\t\t\tsourceTree = \"<group>\";\n\t\t};\n\t\t00E356EF1AD99517003FC87E /* MaterialBreadTests */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\t00E356F21AD99517003FC87E /* MaterialBreadTests.m */,\n\t\t\t\t00E356F01AD99517003FC87E /* Supporting Files */,\n\t\t\t);\n\t\t\tpath = MaterialBreadTests;\n\t\t\tsourceTree = \"<group>\";\n\t\t};\n\t\t00E356F01AD99517003FC87E /* Supporting Files */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\t00E356F11AD99517003FC87E /* Info.plist */,\n\t\t\t);\n\t\t\tname = \"Supporting Files\";\n\t\t\tsourceTree = \"<group>\";\n\t\t};\n\t\t139105B71AF99BAD00B5F7CC /* Products */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\t139105C11AF99BAD00B5F7CC /* libRCTSettings.a */,\n\t\t\t\t3DAD3E901DF850E9000B6D8A /* libRCTSettings-tvOS.a */,\n\t\t\t);\n\t\t\tname = Products;\n\t\t\tsourceTree = \"<group>\";\n\t\t};\n\t\t139FDEE71B06529A00C62182 /* Products */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\t139FDEF41B06529B00C62182 /* libRCTWebSocket.a */,\n\t\t\t\t3DAD3E991DF850E9000B6D8A /* libRCTWebSocket-tvOS.a */,\n\t\t\t\t2D16E6841FA4F8DC00B85C8A /* libfishhook.a */,\n\t\t\t\t2D16E6861FA4F8DC00B85C8A /* libfishhook-tvOS.a */,\n\t\t\t);\n\t\t\tname = Products;\n\t\t\tsourceTree = \"<group>\";\n\t\t};\n\t\t13B07FAE1A68108700A75B9A /* MaterialBread */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\t008F07F21AC5B25A0029DE68 /* main.jsbundle */,\n\t\t\t\t13B07FAF1A68108700A75B9A /* AppDelegate.h */,\n\t\t\t\t13B07FB01A68108700A75B9A /* AppDelegate.m */,\n\t\t\t\t13B07FB51A68108700A75B9A /* Images.xcassets */,\n\t\t\t\t13B07FB61A68108700A75B9A /* Info.plist */,\n\t\t\t\t13B07FB11A68108700A75B9A /* LaunchScreen.xib */,\n\t\t\t\t13B07FB71A68108700A75B9A /* main.m */,\n\t\t\t);\n\t\t\tname = MaterialBread;\n\t\t\tsourceTree = \"<group>\";\n\t\t};\n\t\t146834001AC3E56700842450 /* Products */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\t146834041AC3E56700842450 /* libReact.a */,\n\t\t\t\t3DAD3EA31DF850E9000B6D8A /* libReact.a */,\n\t\t\t\t3DAD3EA51DF850E9000B6D8A /* libyoga.a */,\n\t\t\t\t3DAD3EA71DF850E9000B6D8A /* libyoga.a */,\n\t\t\t\t3DAD3EA91DF850E9000B6D8A /* libcxxreact.a */,\n\t\t\t\t3DAD3EAB1DF850E9000B6D8A /* libcxxreact.a */,\n\t\t\t\t2DF0FFDF2056DD460020B375 /* libjsinspector.a */,\n\t\t\t\t2DF0FFE12056DD460020B375 /* libjsinspector-tvOS.a */,\n\t\t\t\t2DF0FFE32056DD460020B375 /* libthird-party.a */,\n\t\t\t\t2DF0FFE52056DD460020B375 /* libthird-party.a */,\n\t\t\t\t2DF0FFE72056DD460020B375 /* libdouble-conversion.a */,\n\t\t\t\t2DF0FFE92056DD460020B375 /* libdouble-conversion.a */,\n\t\t\t\t316FB14922F181D400AE848A /* libjsi.a */,\n\t\t\t\t316FB14B22F181D400AE848A /* libjsiexecutor.a */,\n\t\t\t\t316FB14D22F181D400AE848A /* libjsi-tvOS.a */,\n\t\t\t\t316FB14F22F181D400AE848A /* libjsiexecutor-tvOS.a */,\n\t\t\t);\n\t\t\tname = Products;\n\t\t\tsourceTree = \"<group>\";\n\t\t};\n\t\t2D16E6871FA4F8E400B85C8A /* Frameworks */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\tED297162215061F000B7C4FE /* JavaScriptCore.framework */,\n\t\t\t\tED2971642150620600B7C4FE /* JavaScriptCore.framework */,\n\t\t\t\t2D16E6891FA4F8E400B85C8A /* libReact.a */,\n\t\t\t);\n\t\t\tname = Frameworks;\n\t\t\tsourceTree = \"<group>\";\n\t\t};\n\t\t316FB12222F181D200AE848A /* Recovered References */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\t09888213D7614B06B1C1E438 /* libRNSVG.a */,\n\t\t\t\t2578F5F9CD234B57ADCF5CBD /* libRNSVG-tvOS.a */,\n\t\t\t\t71E3D4963CAD4981952B71A6 /* libRNVectorIcons.a */,\n\t\t\t\t5C2490B630F74270AE73DDF6 /* libRNVectorIcons-tvOS.a */,\n\t\t\t);\n\t\t\tname = \"Recovered References\";\n\t\t\tsourceTree = \"<group>\";\n\t\t};\n\t\t316FB15022F181D500AE848A /* Products */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\t316FB15522F181D600AE848A /* libRNSVG.a */,\n\t\t\t\t316FB15722F181D600AE848A /* libRNSVG-tvOS.a */,\n\t\t\t);\n\t\t\tname = Products;\n\t\t\tsourceTree = \"<group>\";\n\t\t};\n\t\t316FB18D22F185E600AE848A /* Products */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\t316FB19222F185E600AE848A /* libRNVectorIcons.a */,\n\t\t\t\t316FB19422F185E600AE848A /* libRNVectorIcons-tvOS.a */,\n\t\t\t);\n\t\t\tname = Products;\n\t\t\tsourceTree = \"<group>\";\n\t\t};\n\t\t5E91572E1DD0AC6500FF2AA8 /* Products */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\t5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */,\n\t\t\t\t5E9157351DD0AC6500FF2AA8 /* libRCTAnimation.a */,\n\t\t\t);\n\t\t\tname = Products;\n\t\t\tsourceTree = \"<group>\";\n\t\t};\n\t\t78C398B11ACF4ADC00677621 /* Products */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\t78C398B91ACF4ADC00677621 /* libRCTLinking.a */,\n\t\t\t\t3DAD3E881DF850E9000B6D8A /* libRCTLinking-tvOS.a */,\n\t\t\t);\n\t\t\tname = Products;\n\t\t\tsourceTree = \"<group>\";\n\t\t};\n\t\t832341AE1AAA6A7D00B99B32 /* Libraries */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\t5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */,\n\t\t\t\t146833FF1AC3E56700842450 /* React.xcodeproj */,\n\t\t\t\t00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */,\n\t\t\t\tADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */,\n\t\t\t\t00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */,\n\t\t\t\t00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */,\n\t\t\t\t78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */,\n\t\t\t\t00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */,\n\t\t\t\t139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */,\n\t\t\t\t832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */,\n\t\t\t\t00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */,\n\t\t\t\t139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */,\n\t\t\t\tDEDCB56B789E477E9D94176D /* RNSVG.xcodeproj */,\n\t\t\t\t5F9DA5D7526A44499D596FC3 /* RNVectorIcons.xcodeproj */,\n\t\t\t);\n\t\t\tname = Libraries;\n\t\t\tsourceTree = \"<group>\";\n\t\t};\n\t\t832341B11AAA6A8300B99B32 /* Products */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\t832341B51AAA6A8300B99B32 /* libRCTText.a */,\n\t\t\t\t3DAD3E941DF850E9000B6D8A /* libRCTText-tvOS.a */,\n\t\t\t);\n\t\t\tname = Products;\n\t\t\tsourceTree = \"<group>\";\n\t\t};\n\t\t83CBB9F61A601CBA00E9B192 = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\t13B07FAE1A68108700A75B9A /* MaterialBread */,\n\t\t\t\t832341AE1AAA6A7D00B99B32 /* Libraries */,\n\t\t\t\t00E356EF1AD99517003FC87E /* MaterialBreadTests */,\n\t\t\t\t83CBBA001A601CBA00E9B192 /* Products */,\n\t\t\t\t2D16E6871FA4F8E400B85C8A /* Frameworks */,\n\t\t\t\t316FB12222F181D200AE848A /* Recovered References */,\n\t\t\t\tB9513CED0FB94624BF40777B /* Resources */,\n\t\t\t);\n\t\t\tindentWidth = 2;\n\t\t\tsourceTree = \"<group>\";\n\t\t\ttabWidth = 2;\n\t\t\tusesTabs = 0;\n\t\t};\n\t\t83CBBA001A601CBA00E9B192 /* Products */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\t13B07F961A680F5B00A75B9A /* MaterialBread.app */,\n\t\t\t\t00E356EE1AD99517003FC87E /* MaterialBreadTests.xctest */,\n\t\t\t\t2D02E47B1E0B4A5D006451C7 /* MaterialBread-tvOS.app */,\n\t\t\t\t2D02E4901E0B4A5D006451C7 /* MaterialBread-tvOSTests.xctest */,\n\t\t\t);\n\t\t\tname = Products;\n\t\t\tsourceTree = \"<group>\";\n\t\t};\n\t\tADBDB9201DFEBF0600ED6528 /* Products */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\tADBDB9271DFEBF0700ED6528 /* libRCTBlob.a */,\n\t\t\t\t2D16E6721FA4F8DC00B85C8A /* libRCTBlob-tvOS.a */,\n\t\t\t);\n\t\t\tname = Products;\n\t\t\tsourceTree = \"<group>\";\n\t\t};\n\t\tB9513CED0FB94624BF40777B /* Resources */ = {\n\t\t\tisa = PBXGroup;\n\t\t\tchildren = (\n\t\t\t\t038E20E3901E4963A7E72B0A /* AntDesign.ttf */,\n\t\t\t\t4C97F1E4A0474F53BC21A4E4 /* Entypo.ttf */,\n\t\t\t\t465F1634374349C1A39223B9 /* EvilIcons.ttf */,\n\t\t\t\t11038E24F7F24446B7153B7D /* Feather.ttf */,\n\t\t\t\t157D7C26E820484DA11B8F1B /* FontAwesome.ttf */,\n\t\t\t\tF2475E11FA404B7492E355C4 /* FontAwesome5_Brands.ttf */,\n\t\t\t\t19E8D3D83ECF44C9BB11D71A /* FontAwesome5_Regular.ttf */,\n\t\t\t\t97724F71AF2947CAB82A998B /* FontAwesome5_Solid.ttf */,\n\t\t\t\t7105CED6B07B4F89BE595D76 /* Foundation.ttf */,\n\t\t\t\tF90EA4D5D94643779DADAF4A /* Ionicons.ttf */,\n\t\t\t\t7A9A7995D1BF4867AA1C0537 /* MaterialCommunityIcons.ttf */,\n\t\t\t\tE667911E9B7C47339D6A1904 /* MaterialIcons.ttf */,\n\t\t\t\t738EAA38A94249DDBBBB4D7A /* Octicons.ttf */,\n\t\t\t\tA9BB11E85CBD4445800D84A6 /* SimpleLineIcons.ttf */,\n\t\t\t\t91F185D509A24D40835BC8AD /* Zocial.ttf */,\n\t\t\t);\n\t\t\tname = Resources;\n\t\t\tsourceTree = \"<group>\";\n\t\t};\n/* End PBXGroup section */\n\n/* Begin PBXNativeTarget section */\n\t\t00E356ED1AD99517003FC87E /* MaterialBreadTests */ = {\n\t\t\tisa = PBXNativeTarget;\n\t\t\tbuildConfigurationList = 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget \"MaterialBreadTests\" */;\n\t\t\tbuildPhases = (\n\t\t\t\t00E356EA1AD99517003FC87E /* Sources */,\n\t\t\t\t00E356EB1AD99517003FC87E /* Frameworks */,\n\t\t\t\t00E356EC1AD99517003FC87E /* Resources */,\n\t\t\t);\n\t\t\tbuildRules = (\n\t\t\t);\n\t\t\tdependencies = (\n\t\t\t\t00E356F51AD99517003FC87E /* PBXTargetDependency */,\n\t\t\t);\n\t\t\tname = MaterialBreadTests;\n\t\t\tproductName = MaterialBreadTests;\n\t\t\tproductReference = 00E356EE1AD99517003FC87E /* MaterialBreadTests.xctest */;\n\t\t\tproductType = \"com.apple.product-type.bundle.unit-test\";\n\t\t};\n\t\t13B07F861A680F5B00A75B9A /* MaterialBread */ = {\n\t\t\tisa = PBXNativeTarget;\n\t\t\tbuildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget \"MaterialBread\" */;\n\t\t\tbuildPhases = (\n\t\t\t\t13B07F871A680F5B00A75B9A /* Sources */,\n\t\t\t\t13B07F8C1A680F5B00A75B9A /* Frameworks */,\n\t\t\t\t13B07F8E1A680F5B00A75B9A /* Resources */,\n\t\t\t\t00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,\n\t\t\t);\n\t\t\tbuildRules = (\n\t\t\t);\n\t\t\tdependencies = (\n\t\t\t);\n\t\t\tname = MaterialBread;\n\t\t\tproductName = \"Hello World\";\n\t\t\tproductReference = 13B07F961A680F5B00A75B9A /* MaterialBread.app */;\n\t\t\tproductType = \"com.apple.product-type.application\";\n\t\t};\n\t\t2D02E47A1E0B4A5D006451C7 /* MaterialBread-tvOS */ = {\n\t\t\tisa = PBXNativeTarget;\n\t\t\tbuildConfigurationList = 2D02E4BA1E0B4A5E006451C7 /* Build configuration list for PBXNativeTarget \"MaterialBread-tvOS\" */;\n\t\t\tbuildPhases = (\n\t\t\t\t2D02E4771E0B4A5D006451C7 /* Sources */,\n\t\t\t\t2D02E4781E0B4A5D006451C7 /* Frameworks */,\n\t\t\t\t2D02E4791E0B4A5D006451C7 /* Resources */,\n\t\t\t\t2D02E4CB1E0B4B27006451C7 /* Bundle React Native Code And Images */,\n\t\t\t);\n\t\t\tbuildRules = (\n\t\t\t);\n\t\t\tdependencies = (\n\t\t\t);\n\t\t\tname = \"MaterialBread-tvOS\";\n\t\t\tproductName = \"MaterialBread-tvOS\";\n\t\t\tproductReference = 2D02E47B1E0B4A5D006451C7 /* MaterialBread-tvOS.app */;\n\t\t\tproductType = \"com.apple.product-type.application\";\n\t\t};\n\t\t2D02E48F1E0B4A5D006451C7 /* MaterialBread-tvOSTests */ = {\n\t\t\tisa = PBXNativeTarget;\n\t\t\tbuildConfigurationList = 2D02E4BB1E0B4A5E006451C7 /* Build configuration list for PBXNativeTarget \"MaterialBread-tvOSTests\" */;\n\t\t\tbuildPhases = (\n\t\t\t\t2D02E48C1E0B4A5D006451C7 /* Sources */,\n\t\t\t\t2D02E48D1E0B4A5D006451C7 /* Frameworks */,\n\t\t\t\t2D02E48E1E0B4A5D006451C7 /* Resources */,\n\t\t\t);\n\t\t\tbuildRules = (\n\t\t\t);\n\t\t\tdependencies = (\n\t\t\t\t2D02E4921E0B4A5D006451C7 /* PBXTargetDependency */,\n\t\t\t);\n\t\t\tname = \"MaterialBread-tvOSTests\";\n\t\t\tproductName = \"MaterialBread-tvOSTests\";\n\t\t\tproductReference = 2D02E4901E0B4A5D006451C7 /* MaterialBread-tvOSTests.xctest */;\n\t\t\tproductType = \"com.apple.product-type.bundle.unit-test\";\n\t\t};\n/* End PBXNativeTarget section */\n\n/* Begin PBXProject section */\n\t\t83CBB9F71A601CBA00E9B192 /* Project object */ = {\n\t\t\tisa = PBXProject;\n\t\t\tattributes = {\n\t\t\t\tKnownAssetTags = (\n\t\t\t\t\tNew,\n\t\t\t\t);\n\t\t\t\tLastUpgradeCheck = 940;\n\t\t\t\tORGANIZATIONNAME = Facebook;\n\t\t\t\tTargetAttributes = {\n\t\t\t\t\t00E356ED1AD99517003FC87E = {\n\t\t\t\t\t\tCreatedOnToolsVersion = 6.2;\n\t\t\t\t\t\tTestTargetID = 13B07F861A680F5B00A75B9A;\n\t\t\t\t\t};\n\t\t\t\t\t2D02E47A1E0B4A5D006451C7 = {\n\t\t\t\t\t\tCreatedOnToolsVersion = 8.2.1;\n\t\t\t\t\t\tProvisioningStyle = Automatic;\n\t\t\t\t\t};\n\t\t\t\t\t2D02E48F1E0B4A5D006451C7 = {\n\t\t\t\t\t\tCreatedOnToolsVersion = 8.2.1;\n\t\t\t\t\t\tProvisioningStyle = Automatic;\n\t\t\t\t\t\tTestTargetID = 2D02E47A1E0B4A5D006451C7;\n\t\t\t\t\t};\n\t\t\t\t};\n\t\t\t};\n\t\t\tbuildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject \"MaterialBread\" */;\n\t\t\tcompatibilityVersion = \"Xcode 3.2\";\n\t\t\tdevelopmentRegion = English;\n\t\t\thasScannedForEncodings = 0;\n\t\t\tknownRegions = (\n\t\t\t\tEnglish,\n\t\t\t\ten,\n\t\t\t\tBase,\n\t\t\t);\n\t\t\tmainGroup = 83CBB9F61A601CBA00E9B192;\n\t\t\tproductRefGroup = 83CBBA001A601CBA00E9B192 /* Products */;\n\t\t\tprojectDirPath = \"\";\n\t\t\tprojectReferences = (\n\t\t\t\t{\n\t\t\t\t\tProductGroup = 00C302A81ABCB8CE00DB3ED1 /* Products */;\n\t\t\t\t\tProjectRef = 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */;\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tProductGroup = 5E91572E1DD0AC6500FF2AA8 /* Products */;\n\t\t\t\t\tProjectRef = 5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */;\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tProductGroup = ADBDB9201DFEBF0600ED6528 /* Products */;\n\t\t\t\t\tProjectRef = ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */;\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tProductGroup = 00C302B61ABCB90400DB3ED1 /* Products */;\n\t\t\t\t\tProjectRef = 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */;\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tProductGroup = 00C302BC1ABCB91800DB3ED1 /* Products */;\n\t\t\t\t\tProjectRef = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */;\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tProductGroup = 78C398B11ACF4ADC00677621 /* Products */;\n\t\t\t\t\tProjectRef = 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */;\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tProductGroup = 00C302D41ABCB9D200DB3ED1 /* Products */;\n\t\t\t\t\tProjectRef = 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */;\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tProductGroup = 139105B71AF99BAD00B5F7CC /* Products */;\n\t\t\t\t\tProjectRef = 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */;\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tProductGroup = 832341B11AAA6A8300B99B32 /* Products */;\n\t\t\t\t\tProjectRef = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */;\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tProductGroup = 00C302E01ABCB9EE00DB3ED1 /* Products */;\n\t\t\t\t\tProjectRef = 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */;\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tProductGroup = 139FDEE71B06529A00C62182 /* Products */;\n\t\t\t\t\tProjectRef = 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */;\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tProductGroup = 146834001AC3E56700842450 /* Products */;\n\t\t\t\t\tProjectRef = 146833FF1AC3E56700842450 /* React.xcodeproj */;\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tProductGroup = 316FB15022F181D500AE848A /* Products */;\n\t\t\t\t\tProjectRef = DEDCB56B789E477E9D94176D /* RNSVG.xcodeproj */;\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tProductGroup = 316FB18D22F185E600AE848A /* Products */;\n\t\t\t\t\tProjectRef = 5F9DA5D7526A44499D596FC3 /* RNVectorIcons.xcodeproj */;\n\t\t\t\t},\n\t\t\t);\n\t\t\tprojectRoot = \"\";\n\t\t\ttargets = (\n\t\t\t\t13B07F861A680F5B00A75B9A /* MaterialBread */,\n\t\t\t\t00E356ED1AD99517003FC87E /* MaterialBreadTests */,\n\t\t\t\t2D02E47A1E0B4A5D006451C7 /* MaterialBread-tvOS */,\n\t\t\t\t2D02E48F1E0B4A5D006451C7 /* MaterialBread-tvOSTests */,\n\t\t\t);\n\t\t};\n/* End PBXProject section */\n\n/* Begin PBXReferenceProxy section */\n\t\t00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = libRCTActionSheet.a;\n\t\t\tremoteRef = 00C302AB1ABCB8CE00DB3ED1 /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = libRCTGeolocation.a;\n\t\t\tremoteRef = 00C302B91ABCB90400DB3ED1 /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t00C302C01ABCB91800DB3ED1 /* libRCTImage.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = libRCTImage.a;\n\t\t\tremoteRef = 00C302BF1ABCB91800DB3ED1 /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = libRCTNetwork.a;\n\t\t\tremoteRef = 00C302DB1ABCB9D200DB3ED1 /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = libRCTVibration.a;\n\t\t\tremoteRef = 00C302E31ABCB9EE00DB3ED1 /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t139105C11AF99BAD00B5F7CC /* libRCTSettings.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = libRCTSettings.a;\n\t\t\tremoteRef = 139105C01AF99BAD00B5F7CC /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t139FDEF41B06529B00C62182 /* libRCTWebSocket.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = libRCTWebSocket.a;\n\t\t\tremoteRef = 139FDEF31B06529B00C62182 /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t146834041AC3E56700842450 /* libReact.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = libReact.a;\n\t\t\tremoteRef = 146834031AC3E56700842450 /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t2D16E6721FA4F8DC00B85C8A /* libRCTBlob-tvOS.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = \"libRCTBlob-tvOS.a\";\n\t\t\tremoteRef = 2D16E6711FA4F8DC00B85C8A /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t2D16E6841FA4F8DC00B85C8A /* libfishhook.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = libfishhook.a;\n\t\t\tremoteRef = 2D16E6831FA4F8DC00B85C8A /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t2D16E6861FA4F8DC00B85C8A /* libfishhook-tvOS.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = \"libfishhook-tvOS.a\";\n\t\t\tremoteRef = 2D16E6851FA4F8DC00B85C8A /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t2DF0FFDF2056DD460020B375 /* libjsinspector.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = libjsinspector.a;\n\t\t\tremoteRef = 2DF0FFDE2056DD460020B375 /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t2DF0FFE12056DD460020B375 /* libjsinspector-tvOS.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = \"libjsinspector-tvOS.a\";\n\t\t\tremoteRef = 2DF0FFE02056DD460020B375 /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t2DF0FFE32056DD460020B375 /* libthird-party.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = \"libthird-party.a\";\n\t\t\tremoteRef = 2DF0FFE22056DD460020B375 /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t2DF0FFE52056DD460020B375 /* libthird-party.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = \"libthird-party.a\";\n\t\t\tremoteRef = 2DF0FFE42056DD460020B375 /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t2DF0FFE72056DD460020B375 /* libdouble-conversion.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = \"libdouble-conversion.a\";\n\t\t\tremoteRef = 2DF0FFE62056DD460020B375 /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t2DF0FFE92056DD460020B375 /* libdouble-conversion.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = \"libdouble-conversion.a\";\n\t\t\tremoteRef = 2DF0FFE82056DD460020B375 /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t316FB14922F181D400AE848A /* libjsi.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = libjsi.a;\n\t\t\tremoteRef = 316FB14822F181D400AE848A /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t316FB14B22F181D400AE848A /* libjsiexecutor.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = libjsiexecutor.a;\n\t\t\tremoteRef = 316FB14A22F181D400AE848A /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t316FB14D22F181D400AE848A /* libjsi-tvOS.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = \"libjsi-tvOS.a\";\n\t\t\tremoteRef = 316FB14C22F181D400AE848A /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t316FB14F22F181D400AE848A /* libjsiexecutor-tvOS.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = \"libjsiexecutor-tvOS.a\";\n\t\t\tremoteRef = 316FB14E22F181D400AE848A /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t316FB15522F181D600AE848A /* libRNSVG.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = libRNSVG.a;\n\t\t\tremoteRef = 316FB15422F181D600AE848A /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t316FB15722F181D600AE848A /* libRNSVG-tvOS.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = \"libRNSVG-tvOS.a\";\n\t\t\tremoteRef = 316FB15622F181D600AE848A /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t316FB19222F185E600AE848A /* libRNVectorIcons.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = libRNVectorIcons.a;\n\t\t\tremoteRef = 316FB19122F185E600AE848A /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t316FB19422F185E600AE848A /* libRNVectorIcons-tvOS.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = \"libRNVectorIcons-tvOS.a\";\n\t\t\tremoteRef = 316FB19322F185E600AE848A /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t3DAD3E841DF850E9000B6D8A /* libRCTImage-tvOS.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = \"libRCTImage-tvOS.a\";\n\t\t\tremoteRef = 3DAD3E831DF850E9000B6D8A /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t3DAD3E881DF850E9000B6D8A /* libRCTLinking-tvOS.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = \"libRCTLinking-tvOS.a\";\n\t\t\tremoteRef = 3DAD3E871DF850E9000B6D8A /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t3DAD3E8C1DF850E9000B6D8A /* libRCTNetwork-tvOS.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = \"libRCTNetwork-tvOS.a\";\n\t\t\tremoteRef = 3DAD3E8B1DF850E9000B6D8A /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t3DAD3E901DF850E9000B6D8A /* libRCTSettings-tvOS.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = \"libRCTSettings-tvOS.a\";\n\t\t\tremoteRef = 3DAD3E8F1DF850E9000B6D8A /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t3DAD3E941DF850E9000B6D8A /* libRCTText-tvOS.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = \"libRCTText-tvOS.a\";\n\t\t\tremoteRef = 3DAD3E931DF850E9000B6D8A /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t3DAD3E991DF850E9000B6D8A /* libRCTWebSocket-tvOS.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = \"libRCTWebSocket-tvOS.a\";\n\t\t\tremoteRef = 3DAD3E981DF850E9000B6D8A /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t3DAD3EA31DF850E9000B6D8A /* libReact.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = libReact.a;\n\t\t\tremoteRef = 3DAD3EA21DF850E9000B6D8A /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t3DAD3EA51DF850E9000B6D8A /* libyoga.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = libyoga.a;\n\t\t\tremoteRef = 3DAD3EA41DF850E9000B6D8A /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t3DAD3EA71DF850E9000B6D8A /* libyoga.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = libyoga.a;\n\t\t\tremoteRef = 3DAD3EA61DF850E9000B6D8A /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t3DAD3EA91DF850E9000B6D8A /* libcxxreact.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = libcxxreact.a;\n\t\t\tremoteRef = 3DAD3EA81DF850E9000B6D8A /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t3DAD3EAB1DF850E9000B6D8A /* libcxxreact.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = libcxxreact.a;\n\t\t\tremoteRef = 3DAD3EAA1DF850E9000B6D8A /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = libRCTAnimation.a;\n\t\t\tremoteRef = 5E9157321DD0AC6500FF2AA8 /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t5E9157351DD0AC6500FF2AA8 /* libRCTAnimation.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = libRCTAnimation.a;\n\t\t\tremoteRef = 5E9157341DD0AC6500FF2AA8 /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t78C398B91ACF4ADC00677621 /* libRCTLinking.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = libRCTLinking.a;\n\t\t\tremoteRef = 78C398B81ACF4ADC00677621 /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\t832341B51AAA6A8300B99B32 /* libRCTText.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = libRCTText.a;\n\t\t\tremoteRef = 832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n\t\tADBDB9271DFEBF0700ED6528 /* libRCTBlob.a */ = {\n\t\t\tisa = PBXReferenceProxy;\n\t\t\tfileType = archive.ar;\n\t\t\tpath = libRCTBlob.a;\n\t\t\tremoteRef = ADBDB9261DFEBF0700ED6528 /* PBXContainerItemProxy */;\n\t\t\tsourceTree = BUILT_PRODUCTS_DIR;\n\t\t};\n/* End PBXReferenceProxy section */\n\n/* Begin PBXResourcesBuildPhase section */\n\t\t00E356EC1AD99517003FC87E /* Resources */ = {\n\t\t\tisa = PBXResourcesBuildPhase;\n\t\t\tbuildActionMask = 2147483647;\n\t\t\tfiles = (\n\t\t\t);\n\t\t\trunOnlyForDeploymentPostprocessing = 0;\n\t\t};\n\t\t13B07F8E1A680F5B00A75B9A /* Resources */ = {\n\t\t\tisa = PBXResourcesBuildPhase;\n\t\t\tbuildActionMask = 2147483647;\n\t\t\tfiles = (\n\t\t\t\t13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,\n\t\t\t\t13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,\n\t\t\t\t00F5222314164BCA8AB5A847 /* AntDesign.ttf in Resources */,\n\t\t\t\t80F659E0DD8D43249E19490F /* Entypo.ttf in Resources */,\n\t\t\t\t0F90128312BB423A83F663B0 /* EvilIcons.ttf in Resources */,\n\t\t\t\t2AC08AAF47704C778BE19C45 /* Feather.ttf in Resources */,\n\t\t\t\tC74C9A3E419A467BBACF4C46 /* FontAwesome.ttf in Resources */,\n\t\t\t\t41795B8795F148BD9CE3D4E6 /* FontAwesome5_Brands.ttf in Resources */,\n\t\t\t\t0C6086951EA34002AE160A65 /* FontAwesome5_Regular.ttf in Resources */,\n\t\t\t\tDDFB8B9E0DE14EFB9BAD1673 /* FontAwesome5_Solid.ttf in Resources */,\n\t\t\t\t26D0C21AC4E7455288D94A4F /* Foundation.ttf in Resources */,\n\t\t\t\t7A017304973D4E5AA2B3E2D0 /* Ionicons.ttf in Resources */,\n\t\t\t\t6169ACB0ADC04674A41AE8EA /* MaterialCommunityIcons.ttf in Resources */,\n\t\t\t\t9271035B2A9D492E91C19635 /* MaterialIcons.ttf in Resources */,\n\t\t\t\t3D7A5CA9A4BB4B9585DED3CD /* Octicons.ttf in Resources */,\n\t\t\t\t9FD26C7C235B48C8904C2667 /* SimpleLineIcons.ttf in Resources */,\n\t\t\t\t06E97CE963BE4967AF8EEAB0 /* Zocial.ttf in Resources */,\n\t\t\t);\n\t\t\trunOnlyForDeploymentPostprocessing = 0;\n\t\t};\n\t\t2D02E4791E0B4A5D006451C7 /* Resources */ = {\n\t\t\tisa = PBXResourcesBuildPhase;\n\t\t\tbuildActionMask = 2147483647;\n\t\t\tfiles = (\n\t\t\t\t2D02E4BD1E0B4A84006451C7 /* Images.xcassets in Resources */,\n\t\t\t);\n\t\t\trunOnlyForDeploymentPostprocessing = 0;\n\t\t};\n\t\t2D02E48E1E0B4A5D006451C7 /* Resources */ = {\n\t\t\tisa = PBXResourcesBuildPhase;\n\t\t\tbuildActionMask = 2147483647;\n\t\t\tfiles = (\n\t\t\t);\n\t\t\trunOnlyForDeploymentPostprocessing = 0;\n\t\t};\n/* End PBXResourcesBuildPhase section */\n\n/* Begin PBXShellScriptBuildPhase section */\n\t\t00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */ = {\n\t\t\tisa = PBXShellScriptBuildPhase;\n\t\t\tbuildActionMask = 2147483647;\n\t\t\tfiles = (\n\t\t\t);\n\t\t\tinputPaths = (\n\t\t\t);\n\t\t\tname = \"Bundle React Native code and images\";\n\t\t\toutputPaths = (\n\t\t\t);\n\t\t\trunOnlyForDeploymentPostprocessing = 0;\n\t\t\tshellPath = /bin/sh;\n\t\t\tshellScript = \"export NODE_BINARY=node\\n../node_modules/react-native/scripts/react-native-xcode.sh\\n\";\n\t\t};\n\t\t2D02E4CB1E0B4B27006451C7 /* Bundle React Native Code And Images */ = {\n\t\t\tisa = PBXShellScriptBuildPhase;\n\t\t\tbuildActionMask = 2147483647;\n\t\t\tfiles = (\n\t\t\t);\n\t\t\tinputPaths = (\n\t\t\t);\n\t\t\tname = \"Bundle React Native Code And Images\";\n\t\t\toutputPaths = (\n\t\t\t);\n\t\t\trunOnlyForDeploymentPostprocessing = 0;\n\t\t\tshellPath = /bin/sh;\n\t\t\tshellScript = \"export NODE_BINARY=node\\n../node_modules/react-native/scripts/react-native-xcode.sh\";\n\t\t};\n/* End PBXShellScriptBuildPhase section */\n\n/* Begin PBXSourcesBuildPhase section */\n\t\t00E356EA1AD99517003FC87E /* Sources */ = {\n\t\t\tisa = PBXSourcesBuildPhase;\n\t\t\tbuildActionMask = 2147483647;\n\t\t\tfiles = (\n\t\t\t\t00E356F31AD99517003FC87E /* MaterialBreadTests.m in Sources */,\n\t\t\t);\n\t\t\trunOnlyForDeploymentPostprocessing = 0;\n\t\t};\n\t\t13B07F871A680F5B00A75B9A /* Sources */ = {\n\t\t\tisa = PBXSourcesBuildPhase;\n\t\t\tbuildActionMask = 2147483647;\n\t\t\tfiles = (\n\t\t\t\t13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */,\n\t\t\t\t13B07FC11A68108700A75B9A /* main.m in Sources */,\n\t\t\t);\n\t\t\trunOnlyForDeploymentPostprocessing = 0;\n\t\t};\n\t\t2D02E4771E0B4A5D006451C7 /* Sources */ = {\n\t\t\tisa = PBXSourcesBuildPhase;\n\t\t\tbuildActionMask = 2147483647;\n\t\t\tfiles = (\n\t\t\t\t2D02E4BF1E0B4AB3006451C7 /* main.m in Sources */,\n\t\t\t\t2D02E4BC1E0B4A80006451C7 /* AppDelegate.m in Sources */,\n\t\t\t);\n\t\t\trunOnlyForDeploymentPostprocessing = 0;\n\t\t};\n\t\t2D02E48C1E0B4A5D006451C7 /* Sources */ = {\n\t\t\tisa = PBXSourcesBuildPhase;\n\t\t\tbuildActionMask = 2147483647;\n\t\t\tfiles = (\n\t\t\t\t2DCD954D1E0B4F2C00145EB5 /* MaterialBreadTests.m in Sources */,\n\t\t\t);\n\t\t\trunOnlyForDeploymentPostprocessing = 0;\n\t\t};\n/* End PBXSourcesBuildPhase section */\n\n/* Begin PBXTargetDependency section */\n\t\t00E356F51AD99517003FC87E /* PBXTargetDependency */ = {\n\t\t\tisa = PBXTargetDependency;\n\t\t\ttarget = 13B07F861A680F5B00A75B9A /* MaterialBread */;\n\t\t\ttargetProxy = 00E356F41AD99517003FC87E /* PBXContainerItemProxy */;\n\t\t};\n\t\t2D02E4921E0B4A5D006451C7 /* PBXTargetDependency */ = {\n\t\t\tisa = PBXTargetDependency;\n\t\t\ttarget = 2D02E47A1E0B4A5D006451C7 /* MaterialBread-tvOS */;\n\t\t\ttargetProxy = 2D02E4911E0B4A5D006451C7 /* PBXContainerItemProxy */;\n\t\t};\n/* End PBXTargetDependency section */\n\n/* Begin PBXVariantGroup section */\n\t\t13B07FB11A68108700A75B9A /* LaunchScreen.xib */ = {\n\t\t\tisa = PBXVariantGroup;\n\t\t\tchildren = (\n\t\t\t\t13B07FB21A68108700A75B9A /* Base */,\n\t\t\t);\n\t\t\tname = LaunchScreen.xib;\n\t\t\tpath = MaterialBread;\n\t\t\tsourceTree = \"<group>\";\n\t\t};\n/* End PBXVariantGroup section */\n\n/* Begin XCBuildConfiguration section */\n\t\t00E356F61AD99517003FC87E /* Debug */ = {\n\t\t\tisa = XCBuildConfiguration;\n\t\t\tbuildSettings = {\n\t\t\t\tBUNDLE_LOADER = \"$(TEST_HOST)\";\n\t\t\t\tGCC_PREPROCESSOR_DEFINITIONS = (\n\t\t\t\t\t\"DEBUG=1\",\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t);\n\t\t\t\tHEADER_SEARCH_PATHS = (\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t\t\"$(SRCROOT)/../node_modules/react-native-svg/ios/**\",\n\t\t\t\t\t\"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager\",\n\t\t\t\t);\n\t\t\t\tINFOPLIST_FILE = MaterialBreadTests/Info.plist;\n\t\t\t\tIPHONEOS_DEPLOYMENT_TARGET = 9.0;\n\t\t\t\tLD_RUNPATH_SEARCH_PATHS = \"$(inherited) @executable_path/Frameworks @loader_path/Frameworks\";\n\t\t\t\tLIBRARY_SEARCH_PATHS = (\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t\t\"\\\"$(SRCROOT)/$(TARGET_NAME)\\\"\",\n\t\t\t\t\t\"\\\"$(SRCROOT)/$(TARGET_NAME)\\\"\",\n\t\t\t\t\t\"\\\"$(SRCROOT)/$(TARGET_NAME)\\\"\",\n\t\t\t\t\t\"\\\"$(SRCROOT)/$(TARGET_NAME)\\\"\",\n\t\t\t\t);\n\t\t\t\tOTHER_LDFLAGS = (\n\t\t\t\t\t\"-ObjC\",\n\t\t\t\t\t\"-lc++\",\n\t\t\t\t);\n\t\t\t\tPRODUCT_BUNDLE_IDENTIFIER = \"org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)\";\n\t\t\t\tPRODUCT_NAME = \"$(TARGET_NAME)\";\n\t\t\t\tTEST_HOST = \"$(BUILT_PRODUCTS_DIR)/MaterialBread.app/MaterialBread\";\n\t\t\t};\n\t\t\tname = Debug;\n\t\t};\n\t\t00E356F71AD99517003FC87E /* Release */ = {\n\t\t\tisa = XCBuildConfiguration;\n\t\t\tbuildSettings = {\n\t\t\t\tBUNDLE_LOADER = \"$(TEST_HOST)\";\n\t\t\t\tCOPY_PHASE_STRIP = NO;\n\t\t\t\tHEADER_SEARCH_PATHS = (\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t\t\"$(SRCROOT)/../node_modules/react-native-svg/ios/**\",\n\t\t\t\t\t\"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager\",\n\t\t\t\t);\n\t\t\t\tINFOPLIST_FILE = MaterialBreadTests/Info.plist;\n\t\t\t\tIPHONEOS_DEPLOYMENT_TARGET = 9.0;\n\t\t\t\tLD_RUNPATH_SEARCH_PATHS = \"$(inherited) @executable_path/Frameworks @loader_path/Frameworks\";\n\t\t\t\tLIBRARY_SEARCH_PATHS = (\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t\t\"\\\"$(SRCROOT)/$(TARGET_NAME)\\\"\",\n\t\t\t\t\t\"\\\"$(SRCROOT)/$(TARGET_NAME)\\\"\",\n\t\t\t\t\t\"\\\"$(SRCROOT)/$(TARGET_NAME)\\\"\",\n\t\t\t\t\t\"\\\"$(SRCROOT)/$(TARGET_NAME)\\\"\",\n\t\t\t\t);\n\t\t\t\tOTHER_LDFLAGS = (\n\t\t\t\t\t\"-ObjC\",\n\t\t\t\t\t\"-lc++\",\n\t\t\t\t);\n\t\t\t\tPRODUCT_BUNDLE_IDENTIFIER = \"org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)\";\n\t\t\t\tPRODUCT_NAME = \"$(TARGET_NAME)\";\n\t\t\t\tTEST_HOST = \"$(BUILT_PRODUCTS_DIR)/MaterialBread.app/MaterialBread\";\n\t\t\t};\n\t\t\tname = Release;\n\t\t};\n\t\t13B07F941A680F5B00A75B9A /* Debug */ = {\n\t\t\tisa = XCBuildConfiguration;\n\t\t\tbuildSettings = {\n\t\t\t\tASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;\n\t\t\t\tCURRENT_PROJECT_VERSION = 1;\n\t\t\t\tDEAD_CODE_STRIPPING = NO;\n\t\t\t\tHEADER_SEARCH_PATHS = (\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t\t\"$(SRCROOT)/../node_modules/react-native-svg/ios/**\",\n\t\t\t\t\t\"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager\",\n\t\t\t\t);\n\t\t\t\tINFOPLIST_FILE = MaterialBread/Info.plist;\n\t\t\t\tLD_RUNPATH_SEARCH_PATHS = \"$(inherited) @executable_path/Frameworks\";\n\t\t\t\tOTHER_LDFLAGS = (\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t\t\"-ObjC\",\n\t\t\t\t\t\"-lc++\",\n\t\t\t\t);\n\t\t\t\tPRODUCT_BUNDLE_IDENTIFIER = \"org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)\";\n\t\t\t\tPRODUCT_NAME = MaterialBread;\n\t\t\t\tVERSIONING_SYSTEM = \"apple-generic\";\n\t\t\t};\n\t\t\tname = Debug;\n\t\t};\n\t\t13B07F951A680F5B00A75B9A /* Release */ = {\n\t\t\tisa = XCBuildConfiguration;\n\t\t\tbuildSettings = {\n\t\t\t\tASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;\n\t\t\t\tCURRENT_PROJECT_VERSION = 1;\n\t\t\t\tHEADER_SEARCH_PATHS = (\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t\t\"$(SRCROOT)/../node_modules/react-native-svg/ios/**\",\n\t\t\t\t\t\"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager\",\n\t\t\t\t);\n\t\t\t\tINFOPLIST_FILE = MaterialBread/Info.plist;\n\t\t\t\tLD_RUNPATH_SEARCH_PATHS = \"$(inherited) @executable_path/Frameworks\";\n\t\t\t\tOTHER_LDFLAGS = (\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t\t\"-ObjC\",\n\t\t\t\t\t\"-lc++\",\n\t\t\t\t);\n\t\t\t\tPRODUCT_BUNDLE_IDENTIFIER = \"org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)\";\n\t\t\t\tPRODUCT_NAME = MaterialBread;\n\t\t\t\tVERSIONING_SYSTEM = \"apple-generic\";\n\t\t\t};\n\t\t\tname = Release;\n\t\t};\n\t\t2D02E4971E0B4A5E006451C7 /* Debug */ = {\n\t\t\tisa = XCBuildConfiguration;\n\t\t\tbuildSettings = {\n\t\t\t\tASSETCATALOG_COMPILER_APPICON_NAME = \"App Icon & Top Shelf Image\";\n\t\t\t\tASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME = LaunchImage;\n\t\t\t\tCLANG_ANALYZER_NONNULL = YES;\n\t\t\t\tCLANG_WARN_DOCUMENTATION_COMMENTS = YES;\n\t\t\t\tCLANG_WARN_INFINITE_RECURSION = YES;\n\t\t\t\tCLANG_WARN_SUSPICIOUS_MOVE = YES;\n\t\t\t\tDEBUG_INFORMATION_FORMAT = dwarf;\n\t\t\t\tENABLE_TESTABILITY = YES;\n\t\t\t\tGCC_NO_COMMON_BLOCKS = YES;\n\t\t\t\tHEADER_SEARCH_PATHS = (\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t\t\"$(SRCROOT)/../node_modules/react-native-svg/ios/**\",\n\t\t\t\t\t\"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager\",\n\t\t\t\t);\n\t\t\t\tINFOPLIST_FILE = \"MaterialBread-tvOS/Info.plist\";\n\t\t\t\tLD_RUNPATH_SEARCH_PATHS = \"$(inherited) @executable_path/Frameworks\";\n\t\t\t\tLIBRARY_SEARCH_PATHS = (\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t\t\"\\\"$(SRCROOT)/$(TARGET_NAME)\\\"\",\n\t\t\t\t\t\"\\\"$(SRCROOT)/$(TARGET_NAME)\\\"\",\n\t\t\t\t\t\"\\\"$(SRCROOT)/$(TARGET_NAME)\\\"\",\n\t\t\t\t\t\"\\\"$(SRCROOT)/$(TARGET_NAME)\\\"\",\n\t\t\t\t);\n\t\t\t\tOTHER_LDFLAGS = (\n\t\t\t\t\t\"-ObjC\",\n\t\t\t\t\t\"-lc++\",\n\t\t\t\t);\n\t\t\t\tPRODUCT_BUNDLE_IDENTIFIER = \"com.facebook.REACT.MaterialBread-tvOS\";\n\t\t\t\tPRODUCT_NAME = \"$(TARGET_NAME)\";\n\t\t\t\tSDKROOT = appletvos;\n\t\t\t\tTARGETED_DEVICE_FAMILY = 3;\n\t\t\t\tTVOS_DEPLOYMENT_TARGET = 9.2;\n\t\t\t};\n\t\t\tname = Debug;\n\t\t};\n\t\t2D02E4981E0B4A5E006451C7 /* Release */ = {\n\t\t\tisa = XCBuildConfiguration;\n\t\t\tbuildSettings = {\n\t\t\t\tASSETCATALOG_COMPILER_APPICON_NAME = \"App Icon & Top Shelf Image\";\n\t\t\t\tASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME = LaunchImage;\n\t\t\t\tCLANG_ANALYZER_NONNULL = YES;\n\t\t\t\tCLANG_WARN_DOCUMENTATION_COMMENTS = YES;\n\t\t\t\tCLANG_WARN_INFINITE_RECURSION = YES;\n\t\t\t\tCLANG_WARN_SUSPICIOUS_MOVE = YES;\n\t\t\t\tCOPY_PHASE_STRIP = NO;\n\t\t\t\tDEBUG_INFORMATION_FORMAT = \"dwarf-with-dsym\";\n\t\t\t\tGCC_NO_COMMON_BLOCKS = YES;\n\t\t\t\tHEADER_SEARCH_PATHS = (\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t\t\"$(SRCROOT)/../node_modules/react-native-svg/ios/**\",\n\t\t\t\t\t\"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager\",\n\t\t\t\t);\n\t\t\t\tINFOPLIST_FILE = \"MaterialBread-tvOS/Info.plist\";\n\t\t\t\tLD_RUNPATH_SEARCH_PATHS = \"$(inherited) @executable_path/Frameworks\";\n\t\t\t\tLIBRARY_SEARCH_PATHS = (\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t\t\"\\\"$(SRCROOT)/$(TARGET_NAME)\\\"\",\n\t\t\t\t\t\"\\\"$(SRCROOT)/$(TARGET_NAME)\\\"\",\n\t\t\t\t\t\"\\\"$(SRCROOT)/$(TARGET_NAME)\\\"\",\n\t\t\t\t\t\"\\\"$(SRCROOT)/$(TARGET_NAME)\\\"\",\n\t\t\t\t);\n\t\t\t\tOTHER_LDFLAGS = (\n\t\t\t\t\t\"-ObjC\",\n\t\t\t\t\t\"-lc++\",\n\t\t\t\t);\n\t\t\t\tPRODUCT_BUNDLE_IDENTIFIER = \"com.facebook.REACT.MaterialBread-tvOS\";\n\t\t\t\tPRODUCT_NAME = \"$(TARGET_NAME)\";\n\t\t\t\tSDKROOT = appletvos;\n\t\t\t\tTARGETED_DEVICE_FAMILY = 3;\n\t\t\t\tTVOS_DEPLOYMENT_TARGET = 9.2;\n\t\t\t};\n\t\t\tname = Release;\n\t\t};\n\t\t2D02E4991E0B4A5E006451C7 /* Debug */ = {\n\t\t\tisa = XCBuildConfiguration;\n\t\t\tbuildSettings = {\n\t\t\t\tBUNDLE_LOADER = \"$(TEST_HOST)\";\n\t\t\t\tCLANG_ANALYZER_NONNULL = YES;\n\t\t\t\tCLANG_WARN_DOCUMENTATION_COMMENTS = YES;\n\t\t\t\tCLANG_WARN_INFINITE_RECURSION = YES;\n\t\t\t\tCLANG_WARN_SUSPICIOUS_MOVE = YES;\n\t\t\t\tDEBUG_INFORMATION_FORMAT = dwarf;\n\t\t\t\tENABLE_TESTABILITY = YES;\n\t\t\t\tGCC_NO_COMMON_BLOCKS = YES;\n\t\t\t\tHEADER_SEARCH_PATHS = (\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t\t\"$(SRCROOT)/../node_modules/react-native-svg/ios/**\",\n\t\t\t\t\t\"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager\",\n\t\t\t\t);\n\t\t\t\tINFOPLIST_FILE = \"MaterialBread-tvOSTests/Info.plist\";\n\t\t\t\tLD_RUNPATH_SEARCH_PATHS = \"$(inherited) @executable_path/Frameworks @loader_path/Frameworks\";\n\t\t\t\tLIBRARY_SEARCH_PATHS = (\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t\t\"\\\"$(SRCROOT)/$(TARGET_NAME)\\\"\",\n\t\t\t\t\t\"\\\"$(SRCROOT)/$(TARGET_NAME)\\\"\",\n\t\t\t\t\t\"\\\"$(SRCROOT)/$(TARGET_NAME)\\\"\",\n\t\t\t\t\t\"\\\"$(SRCROOT)/$(TARGET_NAME)\\\"\",\n\t\t\t\t);\n\t\t\t\tOTHER_LDFLAGS = (\n\t\t\t\t\t\"-ObjC\",\n\t\t\t\t\t\"-lc++\",\n\t\t\t\t);\n\t\t\t\tPRODUCT_BUNDLE_IDENTIFIER = \"com.facebook.REACT.MaterialBread-tvOSTests\";\n\t\t\t\tPRODUCT_NAME = \"$(TARGET_NAME)\";\n\t\t\t\tSDKROOT = appletvos;\n\t\t\t\tTEST_HOST = \"$(BUILT_PRODUCTS_DIR)/MaterialBread-tvOS.app/MaterialBread-tvOS\";\n\t\t\t\tTVOS_DEPLOYMENT_TARGET = 10.1;\n\t\t\t};\n\t\t\tname = Debug;\n\t\t};\n\t\t2D02E49A1E0B4A5E006451C7 /* Release */ = {\n\t\t\tisa = XCBuildConfiguration;\n\t\t\tbuildSettings = {\n\t\t\t\tBUNDLE_LOADER = \"$(TEST_HOST)\";\n\t\t\t\tCLANG_ANALYZER_NONNULL = YES;\n\t\t\t\tCLANG_WARN_DOCUMENTATION_COMMENTS = YES;\n\t\t\t\tCLANG_WARN_INFINITE_RECURSION = YES;\n\t\t\t\tCLANG_WARN_SUSPICIOUS_MOVE = YES;\n\t\t\t\tCOPY_PHASE_STRIP = NO;\n\t\t\t\tDEBUG_INFORMATION_FORMAT = \"dwarf-with-dsym\";\n\t\t\t\tGCC_NO_COMMON_BLOCKS = YES;\n\t\t\t\tHEADER_SEARCH_PATHS = (\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t\t\"$(SRCROOT)/../node_modules/react-native-svg/ios/**\",\n\t\t\t\t\t\"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager\",\n\t\t\t\t);\n\t\t\t\tINFOPLIST_FILE = \"MaterialBread-tvOSTests/Info.plist\";\n\t\t\t\tLD_RUNPATH_SEARCH_PATHS = \"$(inherited) @executable_path/Frameworks @loader_path/Frameworks\";\n\t\t\t\tLIBRARY_SEARCH_PATHS = (\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t\t\"\\\"$(SRCROOT)/$(TARGET_NAME)\\\"\",\n\t\t\t\t\t\"\\\"$(SRCROOT)/$(TARGET_NAME)\\\"\",\n\t\t\t\t\t\"\\\"$(SRCROOT)/$(TARGET_NAME)\\\"\",\n\t\t\t\t\t\"\\\"$(SRCROOT)/$(TARGET_NAME)\\\"\",\n\t\t\t\t);\n\t\t\t\tOTHER_LDFLAGS = (\n\t\t\t\t\t\"-ObjC\",\n\t\t\t\t\t\"-lc++\",\n\t\t\t\t);\n\t\t\t\tPRODUCT_BUNDLE_IDENTIFIER = \"com.facebook.REACT.MaterialBread-tvOSTests\";\n\t\t\t\tPRODUCT_NAME = \"$(TARGET_NAME)\";\n\t\t\t\tSDKROOT = appletvos;\n\t\t\t\tTEST_HOST = \"$(BUILT_PRODUCTS_DIR)/MaterialBread-tvOS.app/MaterialBread-tvOS\";\n\t\t\t\tTVOS_DEPLOYMENT_TARGET = 10.1;\n\t\t\t};\n\t\t\tname = Release;\n\t\t};\n\t\t83CBBA201A601CBA00E9B192 /* Debug */ = {\n\t\t\tisa = XCBuildConfiguration;\n\t\t\tbuildSettings = {\n\t\t\t\tALWAYS_SEARCH_USER_PATHS = NO;\n\t\t\t\tCLANG_CXX_LANGUAGE_STANDARD = \"gnu++0x\";\n\t\t\t\tCLANG_CXX_LIBRARY = \"libc++\";\n\t\t\t\tCLANG_ENABLE_MODULES = YES;\n\t\t\t\tCLANG_ENABLE_OBJC_ARC = YES;\n\t\t\t\tCLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;\n\t\t\t\tCLANG_WARN_BOOL_CONVERSION = YES;\n\t\t\t\tCLANG_WARN_COMMA = YES;\n\t\t\t\tCLANG_WARN_CONSTANT_CONVERSION = YES;\n\t\t\t\tCLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES;\n\t\t\t\tCLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;\n\t\t\t\tCLANG_WARN_EMPTY_BODY = YES;\n\t\t\t\tCLANG_WARN_ENUM_CONVERSION = YES;\n\t\t\t\tCLANG_WARN_INFINITE_RECURSION = YES;\n\t\t\t\tCLANG_WARN_INT_CONVERSION = YES;\n\t\t\t\tCLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;\n\t\t\t\tCLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES;\n\t\t\t\tCLANG_WARN_OBJC_LITERAL_CONVERSION = YES;\n\t\t\t\tCLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;\n\t\t\t\tCLANG_WARN_RANGE_LOOP_ANALYSIS = YES;\n\t\t\t\tCLANG_WARN_STRICT_PROTOTYPES = YES;\n\t\t\t\tCLANG_WARN_SUSPICIOUS_MOVE = YES;\n\t\t\t\tCLANG_WARN_UNREACHABLE_CODE = YES;\n\t\t\t\tCLANG_WARN__DUPLICATE_METHOD_MATCH = YES;\n\t\t\t\t\"CODE_SIGN_IDENTITY[sdk=iphoneos*]\" = \"iPhone Developer\";\n\t\t\t\tCOPY_PHASE_STRIP = NO;\n\t\t\t\tENABLE_STRICT_OBJC_MSGSEND = YES;\n\t\t\t\tENABLE_TESTABILITY = YES;\n\t\t\t\tGCC_C_LANGUAGE_STANDARD = gnu99;\n\t\t\t\tGCC_DYNAMIC_NO_PIC = NO;\n\t\t\t\tGCC_NO_COMMON_BLOCKS = YES;\n\t\t\t\tGCC_OPTIMIZATION_LEVEL = 0;\n\t\t\t\tGCC_PREPROCESSOR_DEFINITIONS = (\n\t\t\t\t\t\"DEBUG=1\",\n\t\t\t\t\t\"$(inherited)\",\n\t\t\t\t);\n\t\t\t\tGCC_SYMBOLS_PRIVATE_EXTERN = NO;\n\t\t\t\tGCC_WARN_64_TO_32_BIT_CONVERSION = YES;\n\t\t\t\tGCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;\n\t\t\t\tGCC_WARN_UNDECLARED_SELECTOR = YES;\n\t\t\t\tGCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;\n\t\t\t\tGCC_WARN_UNUSED_FUNCTION = YES;\n\t\t\t\tGCC_WARN_UNUSED_VARIABLE = YES;\n\t\t\t\tIPHONEOS_DEPLOYMENT_TARGET = 9.0;\n\t\t\t\tMTL_ENABLE_DEBUG_INFO = YES;\n\t\t\t\tONLY_ACTIVE_ARCH = YES;\n\t\t\t\tSDKROOT = iphoneos;\n\t\t\t};\n\t\t\tname = Debug;\n\t\t};\n\t\t83CBBA211A601CBA00E9B192 /* Release */ = {\n\t\t\tisa = XCBuildConfiguration;\n\t\t\tbuildSettings = {\n\t\t\t\tALWAYS_SEARCH_USER_PATHS = NO;\n\t\t\t\tCLANG_CXX_LANGUAGE_STANDARD = \"gnu++0x\";\n\t\t\t\tCLANG_CXX_LIBRARY = \"libc++\";\n\t\t\t\tCLANG_ENABLE_MODULES = YES;\n\t\t\t\tCLANG_ENABLE_OBJC_ARC = YES;\n\t\t\t\tCLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;\n\t\t\t\tCLANG_WARN_BOOL_CONVERSION = YES;\n\t\t\t\tCLANG_WARN_COMMA = YES;\n\t\t\t\tCLANG_WARN_CONSTANT_CONVERSION = YES;\n\t\t\t\tCLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES;\n\t\t\t\tCLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;\n\t\t\t\tCLANG_WARN_EMPTY_BODY = YES;\n\t\t\t\tCLANG_WARN_ENUM_CONVERSION = YES;\n\t\t\t\tCLANG_WARN_INFINITE_RECURSION = YES;\n\t\t\t\tCLANG_WARN_INT_CONVERSION = YES;\n\t\t\t\tCLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;\n\t\t\t\tCLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES;\n\t\t\t\tCLANG_WARN_OBJC_LITERAL_CONVERSION = YES;\n\t\t\t\tCLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;\n\t\t\t\tCLANG_WARN_RANGE_LOOP_ANALYSIS = YES;\n\t\t\t\tCLANG_WARN_STRICT_PROTOTYPES = YES;\n\t\t\t\tCLANG_WARN_SUSPICIOUS_MOVE = YES;\n\t\t\t\tCLANG_WARN_UNREACHABLE_CODE = YES;\n\t\t\t\tCLANG_WARN__DUPLICATE_METHOD_MATCH = YES;\n\t\t\t\t\"CODE_SIGN_IDENTITY[sdk=iphoneos*]\" = \"iPhone Developer\";\n\t\t\t\tCOPY_PHASE_STRIP = YES;\n\t\t\t\tENABLE_NS_ASSERTIONS = NO;\n\t\t\t\tENABLE_STRICT_OBJC_MSGSEND = YES;\n\t\t\t\tGCC_C_LANGUAGE_STANDARD = gnu99;\n\t\t\t\tGCC_NO_COMMON_BLOCKS = YES;\n\t\t\t\tGCC_WARN_64_TO_32_BIT_CONVERSION = YES;\n\t\t\t\tGCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;\n\t\t\t\tGCC_WARN_UNDECLARED_SELECTOR = YES;\n\t\t\t\tGCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;\n\t\t\t\tGCC_WARN_UNUSED_FUNCTION = YES;\n\t\t\t\tGCC_WARN_UNUSED_VARIABLE = YES;\n\t\t\t\tIPHONEOS_DEPLOYMENT_TARGET = 9.0;\n\t\t\t\tMTL_ENABLE_DEBUG_INFO = NO;\n\t\t\t\tSDKROOT = iphoneos;\n\t\t\t\tVALIDATE_PRODUCT = YES;\n\t\t\t};\n\t\t\tname = Release;\n\t\t};\n/* End XCBuildConfiguration section */\n\n/* Begin XCConfigurationList section */\n\t\t00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget \"MaterialBreadTests\" */ = {\n\t\t\tisa = XCConfigurationList;\n\t\t\tbuildConfigurations = (\n\t\t\t\t00E356F61AD99517003FC87E /* Debug */,\n\t\t\t\t00E356F71AD99517003FC87E /* Release */,\n\t\t\t);\n\t\t\tdefaultConfigurationIsVisible = 0;\n\t\t\tdefaultConfigurationName = Release;\n\t\t};\n\t\t13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget \"MaterialBread\" */ = {\n\t\t\tisa = XCConfigurationList;\n\t\t\tbuildConfigurations = (\n\t\t\t\t13B07F941A680F5B00A75B9A /* Debug */,\n\t\t\t\t13B07F951A680F5B00A75B9A /* Release */,\n\t\t\t);\n\t\t\tdefaultConfigurationIsVisible = 0;\n\t\t\tdefaultConfigurationName = Release;\n\t\t};\n\t\t2D02E4BA1E0B4A5E006451C7 /* Build configuration list for PBXNativeTarget \"MaterialBread-tvOS\" */ = {\n\t\t\tisa = XCConfigurationList;\n\t\t\tbuildConfigurations = (\n\t\t\t\t2D02E4971E0B4A5E006451C7 /* Debug */,\n\t\t\t\t2D02E4981E0B4A5E006451C7 /* Release */,\n\t\t\t);\n\t\t\tdefaultConfigurationIsVisible = 0;\n\t\t\tdefaultConfigurationName = Release;\n\t\t};\n\t\t2D02E4BB1E0B4A5E006451C7 /* Build configuration list for PBXNativeTarget \"MaterialBread-tvOSTests\" */ = {\n\t\t\tisa = XCConfigurationList;\n\t\t\tbuildConfigurations = (\n\t\t\t\t2D02E4991E0B4A5E006451C7 /* Debug */,\n\t\t\t\t2D02E49A1E0B4A5E006451C7 /* Release */,\n\t\t\t);\n\t\t\tdefaultConfigurationIsVisible = 0;\n\t\t\tdefaultConfigurationName = Release;\n\t\t};\n\t\t83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject \"MaterialBread\" */ = {\n\t\t\tisa = XCConfigurationList;\n\t\t\tbuildConfigurations = (\n\t\t\t\t83CBBA201A601CBA00E9B192 /* Debug */,\n\t\t\t\t83CBBA211A601CBA00E9B192 /* Release */,\n\t\t\t);\n\t\t\tdefaultConfigurationIsVisible = 0;\n\t\t\tdefaultConfigurationName = Release;\n\t\t};\n/* End XCConfigurationList section */\n\t};\n\trootObject = 83CBB9F71A601CBA00E9B192 /* Project object */;\n}"
  },
  {
    "path": "ios/MaterialBread.xcodeproj/xcshareddata/xcschemes/MaterialBread-tvOS.xcscheme",
    "content": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<Scheme\n   LastUpgradeVersion = \"0940\"\n   version = \"1.3\">\n   <BuildAction\n      parallelizeBuildables = \"NO\"\n      buildImplicitDependencies = \"YES\">\n      <BuildActionEntries>\n         <BuildActionEntry\n            buildForTesting = \"YES\"\n            buildForRunning = \"YES\"\n            buildForProfiling = \"YES\"\n            buildForArchiving = \"YES\"\n            buildForAnalyzing = \"YES\">\n            <BuildableReference\n               BuildableIdentifier = \"primary\"\n               BlueprintIdentifier = \"2D2A28121D9B038B00D4039D\"\n               BuildableName = \"libReact.a\"\n               BlueprintName = \"React-tvOS\"\n               ReferencedContainer = \"container:../node_modules/react-native/React/React.xcodeproj\">\n            </BuildableReference>\n         </BuildActionEntry>\n         <BuildActionEntry\n            buildForTesting = \"YES\"\n            buildForRunning = \"YES\"\n            buildForProfiling = \"YES\"\n            buildForArchiving = \"YES\"\n            buildForAnalyzing = \"YES\">\n            <BuildableReference\n               BuildableIdentifier = \"primary\"\n               BlueprintIdentifier = \"2D02E47A1E0B4A5D006451C7\"\n               BuildableName = \"MaterialBread-tvOS.app\"\n               BlueprintName = \"MaterialBread-tvOS\"\n               ReferencedContainer = \"container:MaterialBread.xcodeproj\">\n            </BuildableReference>\n         </BuildActionEntry>\n         <BuildActionEntry\n            buildForTesting = \"YES\"\n            buildForRunning = \"YES\"\n            buildForProfiling = \"NO\"\n            buildForArchiving = \"NO\"\n            buildForAnalyzing = \"YES\">\n            <BuildableReference\n               BuildableIdentifier = \"primary\"\n               BlueprintIdentifier = \"2D02E48F1E0B4A5D006451C7\"\n               BuildableName = \"MaterialBread-tvOSTests.xctest\"\n               BlueprintName = \"MaterialBread-tvOSTests\"\n               ReferencedContainer = \"container:MaterialBread.xcodeproj\">\n            </BuildableReference>\n         </BuildActionEntry>\n      </BuildActionEntries>\n   </BuildAction>\n   <TestAction\n      buildConfiguration = \"Debug\"\n      selectedDebuggerIdentifier = \"Xcode.DebuggerFoundation.Debugger.LLDB\"\n      selectedLauncherIdentifier = \"Xcode.DebuggerFoundation.Launcher.LLDB\"\n      shouldUseLaunchSchemeArgsEnv = \"YES\">\n      <Testables>\n         <TestableReference\n            skipped = \"NO\">\n            <BuildableReference\n               BuildableIdentifier = \"primary\"\n               BlueprintIdentifier = \"2D02E48F1E0B4A5D006451C7\"\n               BuildableName = \"MaterialBread-tvOSTests.xctest\"\n               BlueprintName = \"MaterialBread-tvOSTests\"\n               ReferencedContainer = \"container:MaterialBread.xcodeproj\">\n            </BuildableReference>\n         </TestableReference>\n      </Testables>\n      <MacroExpansion>\n         <BuildableReference\n            BuildableIdentifier = \"primary\"\n            BlueprintIdentifier = \"2D02E47A1E0B4A5D006451C7\"\n            BuildableName = \"MaterialBread-tvOS.app\"\n            BlueprintName = \"MaterialBread-tvOS\"\n            ReferencedContainer = \"container:MaterialBread.xcodeproj\">\n         </BuildableReference>\n      </MacroExpansion>\n      <AdditionalOptions>\n      </AdditionalOptions>\n   </TestAction>\n   <LaunchAction\n      buildConfiguration = \"Debug\"\n      selectedDebuggerIdentifier = \"Xcode.DebuggerFoundation.Debugger.LLDB\"\n      selectedLauncherIdentifier = \"Xcode.DebuggerFoundation.Launcher.LLDB\"\n      launchStyle = \"0\"\n      useCustomWorkingDirectory = \"NO\"\n      ignoresPersistentStateOnLaunch = \"NO\"\n      debugDocumentVersioning = \"YES\"\n      debugServiceExtension = \"internal\"\n      allowLocationSimulation = \"YES\">\n      <BuildableProductRunnable\n         runnableDebuggingMode = \"0\">\n         <BuildableReference\n            BuildableIdentifier = \"primary\"\n            BlueprintIdentifier = \"2D02E47A1E0B4A5D006451C7\"\n            BuildableName = \"MaterialBread-tvOS.app\"\n            BlueprintName = \"MaterialBread-tvOS\"\n            ReferencedContainer = \"container:MaterialBread.xcodeproj\">\n         </BuildableReference>\n      </BuildableProductRunnable>\n      <AdditionalOptions>\n      </AdditionalOptions>\n   </LaunchAction>\n   <ProfileAction\n      buildConfiguration = \"Release\"\n      shouldUseLaunchSchemeArgsEnv = \"YES\"\n      savedToolIdentifier = \"\"\n      useCustomWorkingDirectory = \"NO\"\n      debugDocumentVersioning = \"YES\">\n      <BuildableProductRunnable\n         runnableDebuggingMode = \"0\">\n         <BuildableReference\n            BuildableIdentifier = \"primary\"\n            BlueprintIdentifier = \"2D02E47A1E0B4A5D006451C7\"\n            BuildableName = \"MaterialBread-tvOS.app\"\n            BlueprintName = \"MaterialBread-tvOS\"\n            ReferencedContainer = \"container:MaterialBread.xcodeproj\">\n         </BuildableReference>\n      </BuildableProductRunnable>\n   </ProfileAction>\n   <AnalyzeAction\n      buildConfiguration = \"Debug\">\n   </AnalyzeAction>\n   <ArchiveAction\n      buildConfiguration = \"Release\"\n      revealArchiveInOrganizer = \"YES\">\n   </ArchiveAction>\n</Scheme>\n"
  },
  {
    "path": "ios/MaterialBread.xcodeproj/xcshareddata/xcschemes/MaterialBread.xcscheme",
    "content": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<Scheme\n   LastUpgradeVersion = \"0940\"\n   version = \"1.3\">\n   <BuildAction\n      parallelizeBuildables = \"NO\"\n      buildImplicitDependencies = \"YES\">\n      <BuildActionEntries>\n         <BuildActionEntry\n            buildForTesting = \"YES\"\n            buildForRunning = \"YES\"\n            buildForProfiling = \"YES\"\n            buildForArchiving = \"YES\"\n            buildForAnalyzing = \"YES\">\n            <BuildableReference\n               BuildableIdentifier = \"primary\"\n               BlueprintIdentifier = \"83CBBA2D1A601D0E00E9B192\"\n               BuildableName = \"libReact.a\"\n               BlueprintName = \"React\"\n               ReferencedContainer = \"container:../node_modules/react-native/React/React.xcodeproj\">\n            </BuildableReference>\n         </BuildActionEntry>\n         <BuildActionEntry\n            buildForTesting = \"YES\"\n            buildForRunning = \"YES\"\n            buildForProfiling = \"YES\"\n            buildForArchiving = \"YES\"\n            buildForAnalyzing = \"YES\">\n            <BuildableReference\n               BuildableIdentifier = \"primary\"\n               BlueprintIdentifier = \"13B07F861A680F5B00A75B9A\"\n               BuildableName = \"MaterialBread.app\"\n               BlueprintName = \"MaterialBread\"\n               ReferencedContainer = \"container:MaterialBread.xcodeproj\">\n            </BuildableReference>\n         </BuildActionEntry>\n         <BuildActionEntry\n            buildForTesting = \"YES\"\n            buildForRunning = \"YES\"\n            buildForProfiling = \"NO\"\n            buildForArchiving = \"NO\"\n            buildForAnalyzing = \"YES\">\n            <BuildableReference\n               BuildableIdentifier = \"primary\"\n               BlueprintIdentifier = \"00E356ED1AD99517003FC87E\"\n               BuildableName = \"MaterialBreadTests.xctest\"\n               BlueprintName = \"MaterialBreadTests\"\n               ReferencedContainer = \"container:MaterialBread.xcodeproj\">\n            </BuildableReference>\n         </BuildActionEntry>\n      </BuildActionEntries>\n   </BuildAction>\n   <TestAction\n      buildConfiguration = \"Debug\"\n      selectedDebuggerIdentifier = \"Xcode.DebuggerFoundation.Debugger.LLDB\"\n      selectedLauncherIdentifier = \"Xcode.DebuggerFoundation.Launcher.LLDB\"\n      shouldUseLaunchSchemeArgsEnv = \"YES\">\n      <Testables>\n         <TestableReference\n            skipped = \"NO\">\n            <BuildableReference\n               BuildableIdentifier = \"primary\"\n               BlueprintIdentifier = \"00E356ED1AD99517003FC87E\"\n               BuildableName = \"MaterialBreadTests.xctest\"\n               BlueprintName = \"MaterialBreadTests\"\n               ReferencedContainer = \"container:MaterialBread.xcodeproj\">\n            </BuildableReference>\n         </TestableReference>\n      </Testables>\n      <MacroExpansion>\n         <BuildableReference\n            BuildableIdentifier = \"primary\"\n            BlueprintIdentifier = \"13B07F861A680F5B00A75B9A\"\n            BuildableName = \"MaterialBread.app\"\n            BlueprintName = \"MaterialBread\"\n            ReferencedContainer = \"container:MaterialBread.xcodeproj\">\n         </BuildableReference>\n      </MacroExpansion>\n      <AdditionalOptions>\n      </AdditionalOptions>\n   </TestAction>\n   <LaunchAction\n      buildConfiguration = \"Debug\"\n      selectedDebuggerIdentifier = \"Xcode.DebuggerFoundation.Debugger.LLDB\"\n      selectedLauncherIdentifier = \"Xcode.DebuggerFoundation.Launcher.LLDB\"\n      launchStyle = \"0\"\n      useCustomWorkingDirectory = \"NO\"\n      ignoresPersistentStateOnLaunch = \"NO\"\n      debugDocumentVersioning = \"YES\"\n      debugServiceExtension = \"internal\"\n      allowLocationSimulation = \"YES\">\n      <BuildableProductRunnable\n         runnableDebuggingMode = \"0\">\n         <BuildableReference\n            BuildableIdentifier = \"primary\"\n            BlueprintIdentifier = \"13B07F861A680F5B00A75B9A\"\n            BuildableName = \"MaterialBread.app\"\n            BlueprintName = \"MaterialBread\"\n            ReferencedContainer = \"container:MaterialBread.xcodeproj\">\n         </BuildableReference>\n      </BuildableProductRunnable>\n      <AdditionalOptions>\n      </AdditionalOptions>\n   </LaunchAction>\n   <ProfileAction\n      buildConfiguration = \"Release\"\n      shouldUseLaunchSchemeArgsEnv = \"YES\"\n      savedToolIdentifier = \"\"\n      useCustomWorkingDirectory = \"NO\"\n      debugDocumentVersioning = \"YES\">\n      <BuildableProductRunnable\n         runnableDebuggingMode = \"0\">\n         <BuildableReference\n            BuildableIdentifier = \"primary\"\n            BlueprintIdentifier = \"13B07F861A680F5B00A75B9A\"\n            BuildableName = \"MaterialBread.app\"\n            BlueprintName = \"MaterialBread\"\n            ReferencedContainer = \"container:MaterialBread.xcodeproj\">\n         </BuildableReference>\n      </BuildableProductRunnable>\n   </ProfileAction>\n   <AnalyzeAction\n      buildConfiguration = \"Debug\">\n   </AnalyzeAction>\n   <ArchiveAction\n      buildConfiguration = \"Release\"\n      revealArchiveInOrganizer = \"YES\">\n   </ArchiveAction>\n</Scheme>\n"
  },
  {
    "path": "ios/MaterialBreadTests/Info.plist",
    "content": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">\n<plist version=\"1.0\">\n<dict>\n\t<key>CFBundleDevelopmentRegion</key>\n\t<string>en</string>\n\t<key>CFBundleExecutable</key>\n\t<string>$(EXECUTABLE_NAME)</string>\n\t<key>CFBundleIdentifier</key>\n\t<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>\n\t<key>CFBundleInfoDictionaryVersion</key>\n\t<string>6.0</string>\n\t<key>CFBundleName</key>\n\t<string>$(PRODUCT_NAME)</string>\n\t<key>CFBundlePackageType</key>\n\t<string>BNDL</string>\n\t<key>CFBundleShortVersionString</key>\n\t<string>1.0</string>\n\t<key>CFBundleSignature</key>\n\t<string>????</string>\n\t<key>CFBundleVersion</key>\n\t<string>1</string>\n</dict>\n</plist>\n"
  },
  {
    "path": "ios/MaterialBreadTests/MaterialBreadTests.m",
    "content": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n#import <UIKit/UIKit.h>\n#import <XCTest/XCTest.h>\n\n#import <React/RCTLog.h>\n#import <React/RCTRootView.h>\n\n#define TIMEOUT_SECONDS 600\n#define TEXT_TO_LOOK_FOR @\"Welcome to React Native!\"\n\n@interface MaterialBreadTests : XCTestCase\n\n@end\n\n@implementation MaterialBreadTests\n\n- (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test\n{\n  if (test(view)) {\n    return YES;\n  }\n  for (UIView *subview in [view subviews]) {\n    if ([self findSubviewInView:subview matching:test]) {\n      return YES;\n    }\n  }\n  return NO;\n}\n\n- (void)testRendersWelcomeScreen\n{\n  UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController];\n  NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS];\n  BOOL foundElement = NO;\n\n  __block NSString *redboxError = nil;\n  RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) {\n    if (level >= RCTLogLevelError) {\n      redboxError = message;\n    }\n  });\n\n  while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) {\n    [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];\n    [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];\n\n    foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) {\n      if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) {\n        return YES;\n      }\n      return NO;\n    }];\n  }\n\n  RCTSetLogFunction(RCTDefaultLogFunction);\n\n  XCTAssertNil(redboxError, @\"RedBox error: %@\", redboxError);\n  XCTAssertTrue(foundElement, @\"Couldn't find element with text '%@' in %d seconds\", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS);\n}\n\n\n@end\n"
  },
  {
    "path": "netlify.toml",
    "content": "[build]\n    base = \"/\"\n    publish = \"docs/public/\"\n    command = \"npm run build-site\""
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"material-bread\",\n  \"version\": \"0.2.10\",\n  \"scripts\": {\n    \"start\": \"node node_modules/react-native/local-cli/cli.js start\",\n    \"test\": \"jest -w 1 --forceExit\",\n    \"ios\": \"react-native run-ios --simulator='iPhone X'\",\n    \"lint\": \"./node_modules/.bin/eslint './src'\",\n    \"storybook\": \"storybook start -p 7007\",\n    \"storybook-web\": \"start-storybook -p 9009 -s public\",\n    \"build-storybook\": \"build-storybook -c .storybook -s ./public -o gh\",\n    \"deploy-docs\": \"gh-pages -d gh\",\n    \"test:generate-output\": \"jest --json --outputFile=.jest-test-results.json || true\",\n    \"see-npm-package\": \"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz\",\n    \"build-package\": \"babel src --out-dir dist --ignore \\\"**/*.test.js\\\" && cp src/index.d.ts dist/index.d.ts\",\n    \"build-site\": \"cd docs && npm i && npm run build\"\n  },\n  \"dependencies\": {\n    \"@babel/runtime\": \"^7.5.5\",\n    \"color\": \"^3.1.0\",\n    \"react-native-vector-icons\": \"^6.2.0\",\n    \"modal-enhanced-react-native-web\": \"^0.2.0\"\n  },\n  \"devDependencies\": {\n    \"@babel/cli\": \"^7.5.5\",\n    \"@babel/core\": \"^7.5.5\",\n    \"@babel/plugin-proposal-class-properties\": \"^7.5.5\",\n    \"@babel/plugin-proposal-export-namespace-from\": \"^7.2.0\",\n    \"@babel/plugin-proposal-object-rest-spread\": \"^7.3.4\",\n    \"@babel/plugin-transform-flow-strip-types\": \"^7.2.3\",\n    \"@babel/plugin-transform-runtime\": \"^7.5.5\",\n    \"@sambego/storybook-state\": \"^1.3.4\",\n    \"@storybook/addon-a11y\": \"^5.0.6\",\n    \"@storybook/addon-actions\": \"^5.0.6\",\n    \"@storybook/addon-backgrounds\": \"^5.0.6\",\n    \"@storybook/addon-console\": \"^1.1.0\",\n    \"@storybook/addon-google-analytics\": \"^5.0.6\",\n    \"@storybook/addon-jest\": \"^ 5.0.6\",\n    \"@storybook/addon-links\": \"^5.0.6\",\n    \"@storybook/addon-storyshots\": \"^5.0.6\",\n    \"@storybook/addon-storysource\": \"^5.0.6\",\n    \"@storybook/addon-viewport\": \"^5.0.6\",\n    \"@storybook/react\": \"^5.0.6\",\n    \"@storybook/react-native\": \"^4.1.16\",\n    \"@storybook/theming\": \"^5.0.6\",\n    \"babel-eslint\": \"^10.0.1\",\n    \"babel-plugin-module-resolver\": \"^3.2.0\",\n    \"babel-preset-expo\": \"^5.0.0\",\n    \"babel-preset-react-app\": \"^7.0.1\",\n    \"core-js\": \"^2.6.1\",\n    \"eslint\": \"^5.12.1\",\n    \"eslint-config-prettier\": \"3.6.0\",\n    \"eslint-plugin-import\": \"^2.14.0\",\n    \"eslint-plugin-prettier\": \"3.0.1\",\n    \"eslint-plugin-react\": \"^7.12.4\",\n    \"gh-pages\": \"^2.0.1\",\n    \"husky\": \"^1.3.1\",\n    \"jest\": \"^23.6.0\",\n    \"metro-react-native-babel-preset\": \"^0.52.0\",\n    \"modal-enhanced-react-native-web\": \"^0.2.0\",\n    \"modal-react-native-web\": \"^0.2.0\",\n    \"prettier\": \"1.16.0\",\n    \"react\": \"16.6.3\",\n    \"react-art\": \"^16.8.3\",\n    \"react-dom\": \"^16.8.6\",\n    \"react-native\": \"^0.59.10\",\n    \"react-native-svg\": \"^9.5.3\",\n    \"react-native-web\": \"^0.11.2\",\n    \"react-test-renderer\": \"16.6.3\"\n  },\n  \"peerDependencies\": {\n    \"react\": \"*\",\n    \"react-native\": \"*\",\n    \"react-native-vector-icons\": \"*\",\n    \"react-dom\": \"16.8.1\",\n    \"react-native-web\": \"0.11.2\",\n    \"react-native-svg\": \"^9.5.3\"\n  },\n  \"main\": \"dist/index.js\",\n  \"types\": \"dist/index.d.ts\",\n  \"jest\": {\n    \"preset\": \"react-native\",\n    \"transformIgnorePatterns\": [\n      \"/node_modules/(?!(react-native|react-native-swipe-gestures|react-native-vector-icons|react-native-svg)/)\"\n    ],\n    \"testMatch\": [\n      \"<rootDir>/**/*.test.js\"\n    ],\n    \"transform\": {\n      \"^.+\\\\.js$\": \"<rootDir>/node_modules/react-native/jest/preprocessor.js\"\n    }\n  },\n  \"keywords\": [\n    \"react native\",\n    \"material design\",\n    \"component library\",\n    \"ui kit\",\n    \"react\",\n    \"ios\",\n    \"android\",\n    \"web\",\n    \"electron\"\n  ],\n  \"description\": \"Highly customizable React Native Material Design Components.\",\n  \"homepage\": \"http://material-bread.org\",\n  \"sideEffects\": false,\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/codypearce/material-bread.git\"\n  },\n  \"author\": \"\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/codypearce/material-bread/issues\"\n  },\n  \"husky\": {\n    \"hooks\": {\n      \"pre-commit\": \"npm run lint\"\n    }\n  }\n}\n"
  },
  {
    "path": "public/index.js",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n    <meta name=\"theme-color\" content=\"#000000\">\n    <!--\n      manifest.json provides metadata used when your web app is added to the\n      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/\n    -->\n    <link rel=\"manifest\" href=\"%PUBLIC_URL%/manifest.json\">\n    <link rel=\"shortcut icon\" href=\"%PUBLIC_URL%/favicon.ico\">\n    <!--\n      Notice the use of %PUBLIC_URL% in the tags above.\n      It will be replaced with the URL of the `public` folder during the build.\n      Only files inside the `public` folder can be referenced from the HTML.\n      Unlike \"/favicon.ico\" or \"favicon.ico\", \"%PUBLIC_URL%/favicon.ico\" will\n      work correctly both with client-side routing and a non-root public URL.\n      Learn how to configure a non-root public URL by running `npm run build`.\n    -->\n    <title>React App</title>\n  </head>\n  <body>\n    <noscript>\n      You need to enable JavaScript to run this app.\n    </noscript>\n    <div id=\"root\"></div>\n    <!--\n      This HTML file is a template.\n      If you open it directly in the browser, you will see an empty page.\n      You can add webfonts, meta tags, or analytics to this file.\n      The build step will place the bundled scripts into the <body> tag.\n      To begin the development, run `npm start` or `yarn start`.\n      To create a production bundle, use `npm run build` or `yarn build`.\n    -->\n  </body>\n</html>"
  },
  {
    "path": "public/manifest.json",
    "content": "{\n  \"short_name\": \"React App\",\n  \"name\": \"Create React App Sample\",\n  \"icons\": [\n    {\n      \"src\": \"favicon.ico\",\n      \"sizes\": \"64x64 32x32 24x24 16x16\",\n      \"type\": \"image/x-icon\"\n    }\n  ],\n  \"start_url\": \"./index.html\",\n  \"display\": \"standalone\",\n  \"theme_color\": \"#000000\",\n  \"background_color\": \"#ffffff\"\n}\n"
  },
  {
    "path": "rn-cli.config.js",
    "content": "// const blacklist = require('metro-config/src/defaults/blacklist');\n\n// // blacklist is a function that takes an array of regexes and combines\n// // them with the default blacklist to return a single regex.\n\n// module.exports = {\n//   resolver: {\n//     blacklistRE: blacklist([/dist\\/.*/]),\n//   },\n// };\n"
  },
  {
    "path": "src/Components/Appbar/Appbar.js",
    "content": "import React, { Component, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { Text, View, TouchableWithoutFeedback } from 'react-native';\nimport withTheme from '../../Theme/withTheme';\nimport Paper from '../Paper/Paper';\nimport IconButton from '../IconButton/IconButton';\nimport styles from './Appbar.styles';\nimport { shadow } from '../../';\n\nclass Appbar extends Component {\n  static propTypes = {\n    color: PropTypes.string,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    theme: PropTypes.object,\n    barType: PropTypes.string,\n    backgroundImage: PropTypes.node,\n    position: PropTypes.string,\n    elevation: PropTypes.number,\n\n    navigation: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),\n    onNavigation: PropTypes.func,\n\n    title: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),\n    titleStyles: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    onTitle: PropTypes.func,\n    subtitle: PropTypes.string,\n    subtitleStyles: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    textContainerStyles: PropTypes.oneOfType([\n      PropTypes.object,\n      PropTypes.array,\n    ]),\n\n    actionItems: PropTypes.oneOfType([PropTypes.node, PropTypes.array]),\n    actionItemsStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    children: PropTypes.node,\n  };\n\n  _renderAppbarContent() {\n    const { barType, title, actionItemsStyle } = this.props;\n\n    return (\n      <Fragment>\n        <View\n          style={[\n            styles.left,\n            {\n              height:\n                barType === 'prominent' || barType === 'prominent dense'\n                  ? '100%'\n                  : 'auto',\n            },\n          ]}>\n          {this._renderNavigation()}\n          {title && this._renderTitle()}\n        </View>\n        <View style={[styles.right, actionItemsStyle]}>\n          {this._renderActionItems()}\n        </View>\n      </Fragment>\n    );\n  }\n\n  _renderNavigation() {\n    const { navigation, onNavigation, barType } = this.props;\n\n    if (typeof navigation === 'string' || navigation instanceof String) {\n      return (\n        <IconButton\n          name={navigation || 'menu'}\n          size={24}\n          color={'white'}\n          onPress={onNavigation}\n          style={{\n            alignSelf:\n              barType === 'prominent' || barType === 'prominent dense'\n                ? 'flex-start'\n                : 'center',\n          }}\n        />\n      );\n    } else {\n      return navigation;\n    }\n  }\n\n  _renderTitle() {\n    const { onTitle } = this.props;\n    if (onTitle) {\n      return (\n        <TouchableWithoutFeedback onPress={onTitle}>\n          {this._renderTitleInner()}\n        </TouchableWithoutFeedback>\n      );\n    } else {\n      return this._renderTitleInner();\n    }\n  }\n\n  _renderTitleInner() {\n    const {\n      barType,\n      title,\n      navigation,\n      titleStyles,\n      subtitle,\n      subtitleStyles,\n      textContainerStyles,\n    } = this.props;\n\n    const titleComponent =\n      typeof title == 'string' || title instanceof String ? (\n        <Text\n          numberOfLines={\n            barType === 'prominent' || barType === 'prominent dense' ? 3 : 1\n          }\n          style={[styles.pageTitle, titleStyles]}>\n          {title}\n        </Text>\n      ) : (\n        title\n      );\n\n    return (\n      <View\n        style={[\n          {\n            marginLeft: navigation ? 32 : 0,\n            marginBottom: barType === 'prominent' ? 12 : 0,\n            alignSelf:\n              barType === 'prominent' || barType === 'prominent dense'\n                ? 'flex-end'\n                : 'center',\n            zIndex: 100,\n          },\n          textContainerStyles,\n        ]}>\n        {titleComponent}\n        {subtitle && barType !== 'dense' ? (\n          <Text\n            style={[\n              { fontSize: 14 },\n              { color: 'rgba(255,255,255,.87)' },\n              subtitleStyles,\n            ]}>\n            {subtitle}\n          </Text>\n        ) : null}\n      </View>\n    );\n  }\n\n  _renderActionItems() {\n    const { actionItems } = this.props;\n    if (!actionItems) return null;\n    return (\n      <Fragment>\n        {actionItems.map((item, index) => {\n          if (item.name) {\n            return (\n              <IconButton\n                key={item.name}\n                name={item.name}\n                size={24}\n                color={'white'}\n                style={{\n                  marginRight: index + 1 === actionItems.length ? 0 : 16,\n                }}\n                onPress={item.onPress}\n              />\n            );\n          } else {\n            return item;\n          }\n        })}\n      </Fragment>\n    );\n  }\n\n  appbarHeight() {\n    const { barType } = this.props;\n    let height = 56;\n    if (barType === 'prominent') {\n      height = 128;\n    } else if (barType === 'dense') {\n      height = 48;\n    } else if (barType == 'prominent dense') {\n      height = 96;\n    }\n    return height;\n  }\n\n  render() {\n    const {\n      barType,\n      color,\n      backgroundImage,\n      theme,\n      style,\n      children,\n      position,\n      elevation,\n      ...rest\n    } = this.props;\n\n    let backgroundColor = color ? color : theme.primary.main;\n    const implementedShadow =\n      elevation != undefined || elevation != null\n        ? shadow(elevation)\n        : shadow(4);\n\n    return (\n      <Paper\n        style={[\n          styles.appbar,\n\n          {\n            width: '100%',\n            backgroundColor: backgroundColor,\n            height: this.appbarHeight(),\n            padding: barType == 'dense' ? 12 : 16,\n            position: position || 'relative',\n            alignItems:\n              barType == 'prominent' || barType === 'prominent dense'\n                ? 'flex-start'\n                : 'center',\n            ...implementedShadow,\n          },\n\n          style,\n        ]}\n        {...rest}>\n        {backgroundImage &&\n          React.cloneElement(backgroundImage, {\n            style: [\n              // For some reason importing styles here means they  don't get applied\n              {\n                position: 'absolute',\n                top: 0,\n                left: 0,\n                right: 0,\n                bottom: 0,\n              },\n            ],\n          })}\n        {children ? children : this._renderAppbarContent()}\n      </Paper>\n    );\n  }\n}\n\nexport default withTheme(Appbar);\n"
  },
  {
    "path": "src/Components/Appbar/Appbar.stories.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\n\nimport { Appbar, Badge, IconButton, Menu, Button, MenuItem } from '../..';\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\nimport { State, Store } from '@sambego/storybook-state';\n\nconst store = new Store({\n  visibleOne: false,\n  visibleTwo: false,\n});\n\n/*  eslint-disable no-console */\nexport default storiesOf('Components|Appbar', module)\n  .addParameters({ jest: ['Appbar'] })\n  .add('Simple', () => (\n    <Container scroll>\n      <Header title={'Appbar Simple'} />\n\n      <Appbar\n        barType={'normal'}\n        title={'Page Title'}\n        style={{ marginBottom: 20 }}\n      />\n      <Appbar\n        barType={'normal'}\n        title={'Appbar colored'}\n        color={'#E91E63'}\n        style={{ marginBottom: 20 }}\n      />\n      <Appbar\n        barType={'normal'}\n        title={'Navigation Type'}\n        navigation={'menu'}\n        color={'#9C27B0'}\n        style={{ marginBottom: 20 }}\n      />\n      <Appbar\n        barType={'normal'}\n        title={'Different Icon'}\n        navigation={'arrow-back'}\n        color={'#673AB7'}\n        style={{ marginBottom: 20 }}\n      />\n      <Appbar\n        barType={'normal'}\n        navigation={'menu'}\n        color={'#00BCD4'}\n        style={{ marginBottom: 20 }}\n        actionItems={[\n          { name: 'search', onPress: () => console.log('onSearch') },\n          { name: 'more-vert' },\n        ]}\n      />\n      <Appbar\n        barType={'normal'}\n        color={'#009688'}\n        style={{ marginBottom: 20 }}\n        actionItems={[\n          { name: 'add' },\n          { name: 'edit' },\n          { name: 'archive' },\n          { name: 'delete' },\n        ]}\n      />\n      <Appbar\n        barType={'normal'}\n        title={'Page Title'}\n        color={'#4CAF50'}\n        navigation={'menu'}\n        onNavigation={() => console.log('onNavigation!')}\n        actionItems={[\n          <Badge\n            key={1}\n            containerStyle={{ marginRight: 16, flex: 1 }}\n            color={'#e10050'}\n            textColor={'white'}\n            size={14}\n            content={77}>\n            <IconButton name=\"favorite\" size={24} color={'white'} />\n          </Badge>,\n          { name: 'search', onPress: () => console.log('onSearch') },\n          { name: 'more-vert' },\n        ]}\n        style={{ marginBottom: 20 }}\n      />\n      <Appbar\n        barType={'simple'}\n        title={'Page Title'}\n        backgroundImage={\n          <Image\n            source={{\n              uri:\n                'https://images.pexels.com/photos/355465/pexels-photo-355465.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',\n            }}\n          />\n        }\n        navigation={'menu'}\n        actionItems={[\n          { name: 'favorite' },\n          { name: 'search', onPress: () => console.log('onSearch') },\n          <IconButton key={3} name=\"more-vert\" size={24} color={'white'} />,\n        ]}\n        style={{ marginBottom: 20 }}\n      />\n      <Appbar\n        barType={'simple'}\n        title={'PAGE TITLE'}\n        titleStyles={{ fontSize: 18, fontWeight: '300', letterSpacing: 2 }}\n        backgroundImage={\n          <Image\n            source={{\n              uri:\n                'https://images.pexels.com/photos/355465/pexels-photo-355465.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',\n            }}\n          />\n        }\n        navigation={'menu'}\n        actionItems={[\n          { name: 'favorite' },\n          { name: 'search', onPress: () => console.log('onSearch') },\n          <IconButton key={1} name=\"more-vert\" size={24} color={'white'} />,\n        ]}\n        style={{ marginBottom: 20 }}\n      />\n    </Container>\n  ))\n\n  .add('Prominent', () => (\n    <Container scroll>\n      <Header title={'Appbar Prominent'} />\n      <Appbar\n        barType={'prominent'}\n        navigation={'menu'}\n        title={'Prominent'}\n        style={{ marginBottom: 20 }}\n      />\n      <Appbar\n        barType={'prominent'}\n        title={'Actions'}\n        color={'#E91E63'}\n        navigation={'menu'}\n        onNavigation={() => console.log('onNavigation!')}\n        actionItems={[{ name: 'more-vert' }]}\n        style={{ marginBottom: 20 }}\n      />\n      <Appbar\n        barType={'prominent'}\n        title={'Badge and icons'}\n        color={'#9C27B0'}\n        navigation={'menu'}\n        onNavigation={() => console.log('onNavigation!')}\n        actionItems={[\n          <Badge\n            key={1}\n            containerStyle={{ marginRight: 16, flex: 1 }}\n            color={'#e10050'}\n            textColor={'white'}\n            size={14}\n            content={77}>\n            <IconButton name=\"favorite\" size={24} color={'white'} />\n          </Badge>,\n          { name: 'search', onPress: () => console.log('onSearch') },\n          { name: 'more-vert' },\n        ]}\n        style={{ marginBottom: 20 }}\n      />\n      <Appbar\n        barType={'prominent'}\n        title={'Subtitle'}\n        subtitle={'Subtitle'}\n        color={'#009688'}\n        navigation={'menu'}\n        onNavigation={() => console.log('onNavigation!')}\n        actionItems={[\n          <Badge\n            key={1}\n            containerStyle={{ marginRight: 16, flex: 1 }}\n            color={'#e10050'}\n            textColor={'white'}\n            size={14}\n            content={77}>\n            <IconButton name=\"favorite\" size={24} color={'white'} />\n          </Badge>,\n          { name: 'search', onPress: () => console.log('onSearch') },\n          { name: 'more-vert' },\n        ]}\n        style={{ marginBottom: 20 }}\n      />\n      <Appbar\n        barType={'prominent'}\n        title={'Background image'}\n        subtitle={'Subtitle'}\n        color={'#9C27B0'}\n        navigation={'menu'}\n        backgroundImage={\n          <Image\n            source={{\n              uri:\n                'https://images.pexels.com/photos/355465/pexels-photo-355465.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',\n            }}\n          />\n        }\n        onNavigation={() => console.log('onNavigation!')}\n        actionItems={[\n          <Badge\n            key={1}\n            containerStyle={{ marginRight: 16, flex: 1 }}\n            color={'#e10050'}\n            textColor={'white'}\n            size={14}\n            content={77}>\n            <IconButton name=\"favorite\" size={24} color={'white'} />\n          </Badge>,\n          { name: 'search', onPress: () => console.log('onSearch') },\n          { name: 'more-vert' },\n        ]}\n      />\n    </Container>\n  ))\n  .add('Dense', () => (\n    <Container scroll>\n      <Header title={'Appbar Dense'} />\n      <Appbar\n        barType={'dense'}\n        title={'Page Title'}\n        style={{ marginBottom: 20 }}\n      />\n      <Appbar\n        barType={'dense'}\n        title={'Appbar colored'}\n        color={'#E91E63'}\n        style={{ marginBottom: 20 }}\n      />\n      <Appbar\n        barType={'dense'}\n        title={'Navigation Type'}\n        navigation={'menu'}\n        color={'#9C27B0'}\n        style={{ marginBottom: 20 }}\n      />\n      <Appbar\n        barType={'dense'}\n        title={'Different Icon'}\n        navigation={'arrow-back'}\n        color={'#673AB7'}\n        style={{ marginBottom: 20 }}\n      />\n      <Appbar\n        barType={'dense'}\n        navigation={'menu'}\n        color={'#00BCD4'}\n        style={{ marginBottom: 20 }}\n        actionItems={[\n          { name: 'search', onPress: () => console.log('onSearch') },\n          { name: 'more-vert' },\n        ]}\n      />\n      <Appbar\n        barType={'dense'}\n        color={'#009688'}\n        style={{ marginBottom: 20 }}\n        actionItems={[\n          { name: 'add' },\n          { name: 'edit' },\n          { name: 'archive' },\n          { name: 'delete' },\n        ]}\n      />\n      <Appbar\n        barType={'dense'}\n        title={'Page Title'}\n        color={'#4CAF50'}\n        navigation={'menu'}\n        onNavigation={() => console.log('onNavigation!')}\n        actionItems={[\n          <Badge\n            key={1}\n            containerStyle={{ marginRight: 16, flex: 1 }}\n            color={'#e10050'}\n            textColor={'white'}\n            size={14}\n            content={77}>\n            <IconButton name=\"favorite\" size={24} color={'white'} />\n          </Badge>,\n          { name: 'search', onPress: () => console.log('onSearch') },\n          { name: 'more-vert' },\n        ]}\n        style={{ marginBottom: 20 }}\n      />\n      <Appbar\n        barType={'dense'}\n        title={'Page Title'}\n        backgroundImage={\n          <Image\n            source={{\n              uri:\n                'https://images.pexels.com/photos/355465/pexels-photo-355465.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',\n            }}\n          />\n        }\n        navigation={'menu'}\n        actionItems={[\n          { name: 'favorite' },\n          { name: 'search', onPress: () => console.log('onSearch') },\n          <IconButton key={3} name=\"more-vert\" size={24} color={'white'} />,\n        ]}\n      />\n    </Container>\n  ))\n  .add('Prominent Dense', () => (\n    <Container scroll>\n      <Header title={'Appbar Prominent Dense'} />\n      <Appbar\n        barType={'prominent dense'}\n        title={'Page Title'}\n        style={{ marginBottom: 20 }}\n      />\n      <Appbar\n        barType={'prominent dense'}\n        title={'Appbar colored'}\n        color={'#E91E63'}\n        style={{ marginBottom: 20 }}\n      />\n      <Appbar\n        barType={'prominent dense'}\n        title={'Navigation Type'}\n        navigation={'menu'}\n        color={'#9C27B0'}\n        style={{ marginBottom: 20 }}\n      />\n      <Appbar\n        barType={'prominent dense'}\n        title={'Different Icon'}\n        navigation={'arrow-back'}\n        color={'#673AB7'}\n        style={{ marginBottom: 20 }}\n      />\n      <Appbar\n        barType={'prominent dense'}\n        navigation={'menu'}\n        color={'#00BCD4'}\n        style={{ marginBottom: 20 }}\n        actionItems={[\n          { name: 'search', onPress: () => console.log('onSearch') },\n          { name: 'more-vert' },\n        ]}\n      />\n      <Appbar\n        barType={'prominent dense'}\n        color={'#009688'}\n        style={{ marginBottom: 20 }}\n        actionItems={[\n          { name: 'add' },\n          { name: 'edit' },\n          { name: 'archive' },\n          { name: 'delete' },\n        ]}\n      />\n      <Appbar\n        barType={'prominent dense'}\n        title={'Page Title'}\n        color={'#4CAF50'}\n        navigation={'menu'}\n        onNavigation={() => console.log('onNavigation!')}\n        actionItems={[\n          <Badge\n            key={1}\n            containerStyle={{ marginRight: 16, flex: 1 }}\n            color={'#e10050'}\n            textColor={'white'}\n            size={14}\n            content={77}>\n            <IconButton name=\"favorite\" size={24} color={'white'} />\n          </Badge>,\n          { name: 'search', onPress: () => console.log('onSearch') },\n          { name: 'more-vert' },\n        ]}\n        style={{ marginBottom: 20 }}\n      />\n      <Appbar\n        barType={'prominent dense'}\n        title={'Page Title'}\n        backgroundImage={\n          <Image\n            source={{\n              uri:\n                'https://images.pexels.com/photos/355465/pexels-photo-355465.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',\n            }}\n          />\n        }\n        navigation={'menu'}\n        actionItems={[\n          { name: 'favorite' },\n          { name: 'search', onPress: () => console.log('onSearch') },\n          <IconButton key={3} name=\"more-vert\" size={24} color={'white'} />,\n        ]}\n      />\n    </Container>\n  ))\n  .add('with menu', () => (\n    <Container scroll>\n      <Header title={'With Overflow Menu'} />\n\n      <Appbar\n        barType={'normal'}\n        navigation={'menu'}\n        color={'#00BCD4'}\n        style={{ marginBottom: 20 }}\n        actionItems={[\n          { name: 'search', onPress: () => console.log('onSearch') },\n          <ExampleMenu key={1} />,\n        ]}\n      />\n      <Appbar\n        barType={'normal'}\n        color={'#009688'}\n        style={{ marginBottom: 20 }}\n        actionItems={[\n          { name: 'add' },\n          { name: 'edit' },\n          { name: 'archive' },\n          <ExampleOverflowMenu key={1} />,\n        ]}\n      />\n    </Container>\n  ));\n\nconst ExampleMenu = () => {\n  return (\n    <State store={store}>\n      {state => {\n        const isVisible = state.visibleOne;\n        const dismissMenu = () => store.set({ visibleOne: false });\n        const toggleMenu = () => store.set({ visibleOne: !isVisible });\n\n        return (\n          <View>\n            <Menu\n              visible={isVisible}\n              onBackdropPress={dismissMenu}\n              button={\n                <Button\n                  textColor={'white'}\n                  text={'Show menu'}\n                  onPress={toggleMenu}\n                  type=\"text\"\n                />\n              }>\n              <MenuItem text={'Menu Item 1'} onPress={dismissMenu} />\n              <MenuItem text={'Menu Item 2'} onPress={dismissMenu} />\n              <MenuItem text={'Menu Item 3'} onPress={dismissMenu} />\n            </Menu>\n          </View>\n        );\n      }}\n    </State>\n  );\n};\n\nconst ExampleOverflowMenu = () => {\n  return (\n    <State store={store}>\n      {state => {\n        const isVisible = state.visibleTwo;\n        const dismissMenu = () => store.set({ visibleTwo: false });\n        const toggleMenu = () => store.set({ visibleTwo: !state.visibleTwo });\n\n        return (\n          <View>\n            <Menu\n              visible={isVisible}\n              onBackdropPress={dismissMenu}\n              button={\n                <IconButton\n                  name={'more-vert'}\n                  onPress={toggleMenu}\n                  size={24}\n                  color={'white'}\n                />\n              }>\n              <MenuItem text={'Menu Item 1'} onPress={dismissMenu} />\n              <MenuItem text={'Menu Item 2'} onPress={dismissMenu} />\n              <MenuItem text={'Menu Item 3'} onPress={dismissMenu} />\n            </Menu>\n          </View>\n        );\n      }}\n    </State>\n  );\n};\n"
  },
  {
    "path": "src/Components/Appbar/Appbar.styles.js",
    "content": "import { StyleSheet } from 'react-native';\nconst styles = StyleSheet.create({\n  appbar: {\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    minWidth: 'auto',\n    zIndex: 2,\n  },\n  backgroundImage: {\n    flex: 1,\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n    width: '100%',\n    height: '100%',\n  },\n  pageTitle: {\n    fontSize: 18,\n    color: 'white',\n  },\n  left: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    minWidth: 'auto',\n  },\n  right: {\n    flex: 1,\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n    minWidth: 'auto',\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Appbar/Appbar.test.js",
    "content": "import React from 'react';\nimport Appbar from './Appbar';\n\nimport renderer from 'react-test-renderer';\n\ntest('Appbar Renders', () => {\n  const tree = renderer.create(<Appbar />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Appbar/Searchbar/Searchbar.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { View, TextInput } from 'react-native';\nimport withTheme from '../../../Theme/withTheme';\nimport IconButton from '../../IconButton/IconButton';\n\nclass Searchbar extends Component {\n  static propTypes = {\n    value: PropTypes.string,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    onChangeText: PropTypes.func,\n    onCloseIcon: PropTypes.func,\n    onNavigation: PropTypes.func,\n    placeholder: PropTypes.string,\n    navigationIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),\n    navigationIconComponent: PropTypes.func,\n    closeIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),\n    closeIconComponent: PropTypes.func,\n    theme: PropTypes.object,\n  };\n\n  _renderNavigation() {\n    const {\n      navigationIcon = '',\n      onNavigation,\n      navigationIconComponent,\n      theme,\n    } = this.props;\n\n    if (\n      typeof navigationIcon === 'string' ||\n      navigationIcon instanceof String\n    ) {\n      return (\n        <IconButton\n          name={navigationIcon || 'arrow-back'}\n          size={theme.searchBarNavigationIcon.size}\n          color={theme.searchBarNavigationIcon.color}\n          onPress={onNavigation}\n          iconComponent={navigationIconComponent}\n        />\n      );\n    } else {\n      return navigationIcon;\n    }\n  }\n\n  _renderClose() {\n    const { closeIcon, onCloseIcon, closeIconComponent, theme } = this.props;\n    // To hide close icon send closeIcon={false}\n    if (typeof closeIcon === 'string' || closeIcon instanceof String) {\n      return (\n        <IconButton\n          name={closeIcon || 'close'}\n          size={theme.searchBarcloseIcon.size}\n          color={theme.searchBarcloseIcon.color}\n          onPress={onCloseIcon}\n          iconComponent={closeIconComponent}\n        />\n      );\n    } else if (closeIcon) {\n      return closeIcon;\n    }\n  }\n\n  render() {\n    const { style, onChangeText, value, placeholder, theme } = this.props;\n    return (\n      <View style={[theme.searchBar, style]}>\n        {this._renderNavigation()}\n        <TextInput\n          style={theme.searchInput}\n          placeholder={placeholder ? placeholder : 'Search'}\n          onChangeText={onChangeText}\n          value={value}\n        />\n        {this._renderClose()}\n      </View>\n    );\n  }\n}\n\nexport default withTheme(Searchbar);\n"
  },
  {
    "path": "src/Components/Appbar/Searchbar/Searchbar.stories.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\n\nimport { Searchbar } from '../../..';\nimport { State, Store } from '@sambego/storybook-state';\nimport Header from '../../../storybook/components/Header';\nimport Container from '../../../storybook/components/Container';\nimport { storiesOf } from '../../../storybook/helpers/storiesOf';\n\nconst store = new Store({\n  searchOne: '',\n});\n\nexport default storiesOf('Components|Appbar/Searchbar', module)\n  .addParameters({ jest: ['Searchbar'] })\n  .add('Simple', () => (\n    <Container>\n      <Header title={'Searchbar'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <Searchbar\n              label={'Label'}\n              value={state.searchOne}\n              onChangeText={value => store.set({ searchOne: value })}\n              onCloseIcon={() => store.set({ searchOne: '' })}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/Appbar/Searchbar/Searchbar.styles.js",
    "content": "import { StyleSheet } from 'react-native';\nimport shadow from '../../../Utils/Shadow/shadow.js';\n\nconst styles = StyleSheet.create({\n  container: {},\n  searchInput: {\n    ...shadow(1),\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Appbar/Searchbar/Searchbar.test.js",
    "content": "import React from 'react';\nimport { Searchbar } from '../../../';\n\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\n\ntest('Searchbar Renders', () => {\n  const tree = renderer.render(<Searchbar />);\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Appbar/Searchbar/__snapshots__/Searchbar.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Searchbar Renders 1`] = `\n<Context.Consumer>\n  [Function]\n</Context.Consumer>\n`;\n"
  },
  {
    "path": "src/Components/Appbar/__snapshots__/Appbar.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Appbar Renders 1`] = `\n<View\n  style={\n    Object {\n      \"alignItems\": \"center\",\n      \"backgroundColor\": \"#1e88e5\",\n      \"borderRadius\": 2,\n      \"flexDirection\": \"row\",\n      \"height\": 56,\n      \"justifyContent\": \"space-between\",\n      \"minWidth\": \"auto\",\n      \"padding\": 16,\n      \"position\": \"relative\",\n      \"shadowColor\": \"#000\",\n      \"shadowOffset\": Object {\n        \"height\": 2,\n        \"width\": 0,\n      },\n      \"shadowOpacity\": 0.23,\n      \"shadowRadius\": 2.62,\n      \"width\": \"100%\",\n      \"zIndex\": 2,\n    }\n  }\n  useNativeDriver={true}\n>\n  <View\n    style={\n      Array [\n        Object {\n          \"alignItems\": \"center\",\n          \"flexDirection\": \"row\",\n          \"minWidth\": \"auto\",\n        },\n        Object {\n          \"height\": \"auto\",\n        },\n      ]\n    }\n  />\n  <View\n    style={\n      Array [\n        Object {\n          \"alignItems\": \"center\",\n          \"flex\": 1,\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"flex-end\",\n          \"minWidth\": \"auto\",\n        },\n        undefined,\n      ]\n    }\n  />\n</View>\n`;\n"
  },
  {
    "path": "src/Components/Appbar/index.js",
    "content": "export { default } from './Appbar';\n"
  },
  {
    "path": "src/Components/AppbarBottom/AppbarBottom.js",
    "content": "import React, { Component, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { View } from 'react-native';\nimport withTheme from '../../Theme/withTheme';\nimport { IconButton } from '../../';\nimport styles from './AppbarBottom.styles';\nimport AppbarBottomSVG from './AppbarBottom.svg.js';\n\nclass AppbarBottom extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    color: PropTypes.string,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    theme: PropTypes.object,\n\n    fab: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),\n    fabPosition: PropTypes.string,\n    fabCutout: PropTypes.bool,\n\n    navigation: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),\n    onNavigation: PropTypes.func,\n\n    actionItems: PropTypes.oneOfType([PropTypes.node, PropTypes.array]),\n\n    children: PropTypes.node,\n    appbarStyles: PropTypes.object,\n  };\n\n  state = {\n    appbarWidth: 0,\n    appbarHeight: 0,\n  };\n\n  _renderNavigation() {\n    const { navigation, onNavigation, fabPosition } = this.props;\n\n    if (typeof navigation === 'string' || navigation instanceof String) {\n      return (\n        <IconButton\n          name={navigation || 'menu'}\n          size={24}\n          color={'white'}\n          onPress={onNavigation}\n          style={{ marginRight: fabPosition === 'end' ? 24 : 0 }}\n        />\n      );\n    } else {\n      return navigation;\n    }\n  }\n\n  _renderFab() {\n    const { fab, fabPosition, fabCutout } = this.props;\n    if (!fab) return null;\n\n    const isEnd = fabPosition === 'end';\n    const cutOutPadding = fabCutout ? 18 : 16;\n\n    const fabRightStyle = {\n      right: cutOutPadding,\n    };\n    const fabCenterStyle = {\n      right: 'auto',\n    };\n    const fabPosStyles = isEnd ? fabRightStyle : fabCenterStyle;\n\n    const isFabSpeedial = fab && fab.props && fab.props.actions;\n\n    return React.cloneElement(fab, {\n      shadow: 12,\n      style: [styles.fabPos, fabPosStyles],\n      containerStyle: {\n        position: 'absolute',\n        width: '100%',\n        paddingRight: isFabSpeedial && isEnd ? cutOutPadding : 0,\n        transform: [{ translateY: -28 }],\n      },\n    });\n  }\n\n  _renderCutout() {\n    const { fabCutout, fabPosition, color, theme } = this.props;\n    const backgroundColor = color ? color : theme.primary.main;\n    if (!fabCutout) return null;\n\n    return (\n      <AppbarBottomSVG\n        fabPosition={fabPosition}\n        paddingHorizontal={32}\n        backgroundColor={backgroundColor}\n        width={this.state.appbarWidth}\n      />\n    );\n  }\n\n  _renderActionItems() {\n    const { actionItems } = this.props;\n    if (!actionItems) return null;\n    return (\n      <Fragment>\n        {actionItems.map((item, index) => {\n          if (item.name) {\n            return (\n              <IconButton\n                key={item.name}\n                name={item.name}\n                size={24}\n                color={'white'}\n                style={{\n                  marginRight: index + 1 === actionItems.length ? 0 : 16,\n                }}\n                onPress={item.onPress}\n              />\n            );\n          } else {\n            return item;\n          }\n        })}\n      </Fragment>\n    );\n  }\n\n  _renderAppBarContent() {\n    return (\n      <Fragment>\n        {this._renderNavigation()}\n\n        <View style={styles.right}>{this._renderActionItems()}</View>\n      </Fragment>\n    );\n  }\n\n  measureAppbar = e => {\n    const { width, height } = e.nativeEvent.layout;\n\n    this.setState({\n      appbarWidth: width,\n      appbarHeight: height,\n    });\n  };\n\n  render() {\n    const {\n      color,\n      children,\n      style,\n      appbarStyles,\n      fabPosition,\n      theme,\n      fabCutout,\n      ...rest\n    } = this.props;\n    const { appbarWidth } = this.state;\n    const backgroundColor = color ? color : theme.primary.main;\n\n    return (\n      <View style={style}>\n        <View\n          style={[styles.contianer, { opacity: appbarWidth == 0 ? 0 : 1 }]}\n          onLayout={this.measureAppbar}>\n          {this._renderCutout()}\n          <View\n            style={[\n              styles.appbar,\n              {\n                justifyContent:\n                  fabPosition === 'end' ? 'flex-start' : 'space-between',\n                backgroundColor: !fabCutout ? backgroundColor : 'transparent',\n              },\n              appbarStyles,\n            ]}\n            {...rest}>\n            {children ? children : this._renderAppBarContent()}\n          </View>\n        </View>\n        {this._renderFab()}\n      </View>\n    );\n  }\n}\n\nexport default withTheme(AppbarBottom);\n"
  },
  {
    "path": "src/Components/AppbarBottom/AppbarBottom.stories.js",
    "content": "import React from 'react';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\nimport { View, Platform, Dimensions, StyleSheet } from 'react-native';\nimport {\n  AppbarBottom,\n  Badge,\n  IconButton,\n  Fab,\n  FabSpeedDial,\n  Drawer,\n  DrawerItem,\n  DrawerHeader,\n  DrawerSection,\n  BodyText,\n  Heading,\n  DrawerBottom,\n} from '../..';\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\n\nimport { State, Store } from '@sambego/storybook-state';\n\nconst store = new Store({\n  isOpen: false,\n  isOpenPermanent: true,\n});\n\nconst pageWidth = Platform.OS == 'web' ? 600 : Dimensions.get('window').width;\n\n/*  eslint-disable no-console */\nexport default storiesOf('Components|AppbarBottom', module)\n  .addParameters({ jest: ['AppbarBottom'] })\n  .add('Center Fab', () => (\n    <Container scroll>\n      <Header title={'Center Fab'} />\n      <AppbarBottom\n        fab={<Fab backgroundColor={'#04D5BF'} />}\n        color={'#6E2CFA'}\n        style={{ marginBottom: 50 }}\n      />\n      <AppbarBottom\n        fab={<Fab backgroundColor={'#04D5BF'} />}\n        fabCutout\n        color={'#6E2CFA'}\n        style={{ marginBottom: 50 }}\n      />\n      <AppbarBottom\n        fab={<Fab icon={'change-history'} backgroundColor={'#009688'} />}\n        fabPosition={'center'}\n        navigation={'menu'}\n        color={'#E91E63'}\n        style={{ marginBottom: 50 }}\n      />\n      <AppbarBottom\n        fab={<Fab icon={'change-history'} backgroundColor={'#009688'} />}\n        fabCutout\n        fabPosition={'center'}\n        navigation={'menu'}\n        color={'#E91E63'}\n        style={{ marginBottom: 50 }}\n      />\n      <AppbarBottom\n        fab={<Fab icon={'drafts'} backgroundColor={'#8BC34A'} />}\n        fabPosition={'center'}\n        navigation={'arrow-back'}\n        actionItems={[\n          { name: 'search', onPress: () => console.log('onSearch') },\n          { name: 'more-vert' },\n        ]}\n        color={'#9C27B0'}\n        style={{ marginBottom: 50 }}\n      />\n      <AppbarBottom\n        fab={<Fab icon={'drafts'} backgroundColor={'#8BC34A'} />}\n        fabCutout\n        fabPosition={'center'}\n        navigation={'arrow-back'}\n        actionItems={[\n          { name: 'search', onPress: () => console.log('onSearch') },\n          { name: 'more-vert' },\n        ]}\n        color={'#9C27B0'}\n        style={{ marginBottom: 50 }}\n      />\n      <AppbarBottom\n        fab={<Fab icon={'favorite'} backgroundColor={'#E91E63'} />}\n        fabPosition={'center'}\n        navigation={'menu'}\n        actionItems={[\n          <Badge\n            key={1}\n            containerStyle={{ marginRight: 16, flex: 1 }}\n            color={'#e10050'}\n            textColor={'white'}\n            size={14}\n            content={77}>\n            <IconButton name=\"favorite\" size={24} color={'white'} />\n          </Badge>,\n          { name: 'search', onPress: () => console.log('onSearch') },\n          { name: 'more-vert' },\n        ]}\n        color={'#009688'}\n        style={{ marginBottom: 50 }}\n      />\n      <AppbarBottom\n        fab={<Fab icon={'favorite'} backgroundColor={'#E91E63'} />}\n        fabPosition={'center'}\n        fabCutout\n        navigation={'menu'}\n        actionItems={[\n          <Badge\n            key={1}\n            containerStyle={{ marginRight: 16, flex: 1 }}\n            color={'#e10050'}\n            textColor={'white'}\n            size={14}\n            content={77}>\n            <IconButton name=\"favorite\" size={24} color={'white'} />\n          </Badge>,\n          { name: 'search', onPress: () => console.log('onSearch') },\n          { name: 'more-vert' },\n        ]}\n        color={'#009688'}\n        style={{ marginBottom: 50 }}\n      />\n    </Container>\n  ))\n  .add('End Fab', () => (\n    <Container scroll>\n      <Header title={'End Fab'} />\n      <AppbarBottom\n        fab={<Fab backgroundColor={'#04D5BF'} />}\n        fabPosition={'end'}\n        color={'#6E2CFA'}\n        style={{ marginBottom: 50 }}\n      />\n      <AppbarBottom\n        fab={<Fab backgroundColor={'#04D5BF'} />}\n        fabCutout\n        fabPosition={'end'}\n        color={'#6E2CFA'}\n        style={{ marginBottom: 50 }}\n      />\n      <AppbarBottom\n        fab={<Fab icon={'change-history'} backgroundColor={'#009688'} />}\n        fabPosition={'end'}\n        navigation={'menu'}\n        color={'#E91E63'}\n        style={{ marginBottom: 50 }}\n      />\n      <AppbarBottom\n        fab={<Fab icon={'change-history'} backgroundColor={'#009688'} />}\n        fabCutout\n        fabPosition={'end'}\n        navigation={'menu'}\n        color={'#E91E63'}\n        style={{ marginBottom: 50 }}\n      />\n      <AppbarBottom\n        fab={<Fab icon={'drafts'} backgroundColor={'#8BC34A'} />}\n        fabPosition={'end'}\n        navigation={'arrow-back'}\n        actionItems={[\n          { name: 'search', onPress: () => console.log('onSearch') },\n          { name: 'more-vert' },\n        ]}\n        color={'#9C27B0'}\n        style={{ marginBottom: 50 }}\n      />\n      <AppbarBottom\n        fab={<Fab icon={'drafts'} backgroundColor={'#8BC34A'} />}\n        fabCutout\n        fabPosition={'end'}\n        navigation={'arrow-back'}\n        actionItems={[\n          { name: 'search', onPress: () => console.log('onSearch') },\n          { name: 'more-vert' },\n        ]}\n        color={'#9C27B0'}\n        style={{ marginBottom: 50 }}\n      />\n      <AppbarBottom\n        fab={<Fab icon={'favorite'} backgroundColor={'#E91E63'} />}\n        fabPosition={'end'}\n        navigation={'menu'}\n        actionItems={[\n          <Badge\n            key={1}\n            containerStyle={{ marginRight: 16, flex: 1 }}\n            color={'#e10050'}\n            textColor={'white'}\n            size={14}\n            content={77}>\n            <IconButton name=\"favorite\" size={24} color={'white'} />\n          </Badge>,\n          { name: 'search', onPress: () => console.log('onSearch') },\n          { name: 'more-vert' },\n        ]}\n        color={'#009688'}\n        style={{ marginBottom: 50 }}\n      />\n      <AppbarBottom\n        fab={<Fab icon={'favorite'} backgroundColor={'#E91E63'} />}\n        fabPosition={'end'}\n        fabCutout\n        navigation={'menu'}\n        actionItems={[\n          <Badge\n            key={1}\n            containerStyle={{ marginRight: 16, flex: 1 }}\n            color={'#e10050'}\n            textColor={'white'}\n            size={14}\n            content={77}>\n            <IconButton name=\"favorite\" size={24} color={'white'} />\n          </Badge>,\n          { name: 'search', onPress: () => console.log('onSearch') },\n          { name: 'more-vert' },\n        ]}\n        color={'#009688'}\n        style={{ marginBottom: 50 }}\n      />\n    </Container>\n  ))\n  .add('No Fab', () => (\n    <Container scroll>\n      <Header title={'No Fab'} />\n      <AppbarBottom\n        color={'#6E2CFA'}\n        style={{ marginBottom: 50 }}\n        actionItems={[\n          { name: 'add' },\n          { name: 'edit' },\n          { name: 'archive' },\n          { name: 'delete' },\n        ]}\n      />\n\n      <AppbarBottom\n        fabStyles={{ backgroundColor: '#009688' }}\n        navigation={'menu'}\n        color={'#E91E63'}\n        style={{ marginBottom: 50 }}\n        actionItems={[\n          { name: 'add' },\n          { name: 'edit' },\n          { name: 'archive' },\n          { name: 'delete' },\n        ]}\n      />\n\n      <AppbarBottom\n        navigation={'arrow-back'}\n        actionItems={[\n          { name: 'search', onPress: () => console.log('onSearch') },\n          { name: 'more-vert' },\n        ]}\n        color={'#9C27B0'}\n        style={{ marginBottom: 50 }}\n      />\n\n      <AppbarBottom\n        navigation={'menu'}\n        actionItems={[\n          <Badge\n            key={1}\n            containerStyle={{ marginRight: 16, flex: 1 }}\n            color={'#e10050'}\n            textColor={'white'}\n            size={14}\n            content={77}>\n            <IconButton name=\"favorite\" size={24} color={'white'} />\n          </Badge>,\n          { name: 'search', onPress: () => console.log('onSearch') },\n          { name: 'more-vert' },\n        ]}\n        color={'#009688'}\n        style={{ marginBottom: 50 }}\n      />\n    </Container>\n  ))\n  .add('with speeddial', () => (\n    <Container scroll>\n      <Header title={'SpeedDial'} />\n\n      <AppbarBottom\n        fab={\n          <FabSpeedDial\n            actions={actions}\n            fab={<Fab backgroundColor={'#04D5BF'} />}\n          />\n        }\n        color={'#6E2CFA'}\n        fabCutout\n        fabPosition={'end'}\n        navigation={'arrow-back'}\n        fabStyles={{}}\n        actionItems={[\n          { name: 'search', onPress: () => console.log('onSearch') },\n          { name: 'more-vert' },\n        ]}\n        style={{ marginTop: 300 }}\n      />\n    </Container>\n  ))\n  .add('open sidebar', () => (\n    <State store={store} style={{ flex: 1 }}>\n      {state => (\n        <View style={styles.container}>\n          <Drawer\n            open={state.isOpen}\n            pageWidth={pageWidth}\n            pageHeight={400}\n            drawerContent={<DrawerContent />}\n            onClose={() => store.set({ isOpen: false })}\n            animationTime={250}\n            opacity={0.33}>\n            <View style={styles.body}>\n              <PageContent />\n              <AppbarBottom\n                color={'#6E2CFA'}\n                fab={<Fab backgroundColor={'#04D5BF'} />}\n                fabCutout\n                fabPosition={'center'}\n                navigation={'menu'}\n                onNavigation={() => store.set({ isOpen: !state.isOpen })}\n                actionItems={[\n                  { name: 'search', onPress: () => console.log('onSearch') },\n                  { name: 'more-vert' },\n                ]}\n              />\n            </View>\n          </Drawer>\n        </View>\n      )}\n    </State>\n  ))\n  .add('open drawer bottom', () => (\n    <State store={store} style={{ flex: 1 }}>\n      {state => (\n        <View style={{ height: 500, position: 'relative' }}>\n          <AppbarBottom\n            fab={<Fab backgroundColor={'#04D5BF'} />}\n            fabCutout\n            color={'#6E2CFA'}\n            fabPosition={'center'}\n            navigation={'menu'}\n            style={{ marginTop: 300 }}\n            onNavigation={() =>\n              store.set({ isOpenBottom: !state.isOpenBottom })\n            }\n            actionItems={[\n              { name: 'search', onPress: () => console.log('onSearch') },\n              { name: 'more-vert' },\n            ]}\n          />\n          <DrawerBottom\n            visible={state.isOpenBottom}\n            onBackdropPress={() => store.set({ isOpenBottom: false })}\n            onSwipeDown={() => store.set({ isOpenBottom: false })}>\n            <View>\n              <DrawerHeader title={'Jon Snow'} subtitle={'Knows nothing'} />\n              <DrawerSection bottomDivider>\n                <DrawerItem text={'Inbox'} icon={'mail'} active />\n                <DrawerItem text={'Outbox'} icon={'send'} />\n                <DrawerItem text={'Favorites'} icon={'favorite'} />\n              </DrawerSection>\n            </View>\n          </DrawerBottom>\n        </View>\n      )}\n    </State>\n  ));\n\nconst DrawerContent = () => {\n  return (\n    <View>\n      <DrawerHeader title={'Jon Snow'} subtitle={'Knows nothing'} />\n      <DrawerSection bottomDivider>\n        <DrawerItem text={'Inbox'} icon={'mail'} active />\n        <DrawerItem text={'Outbox'} icon={'send'} />\n        <DrawerItem text={'Favorites'} icon={'favorite'} />\n      </DrawerSection>\n    </View>\n  );\n};\n\nconst PageContent = () => {\n  return (\n    <View style={{ marginTop: 20, alignItems: 'center', height: 325 }}>\n      <Heading type={4} style={{ marginBottom: 20 }}>\n        This is a page\n      </Heading>\n      <BodyText text=\"Click the menu button to open the drawer\" />\n      <BodyText text=\"Click outside the drawer to close it\" />\n    </View>\n  );\n};\n\nconst actions = [\n  <Fab key={1} backgroundColor={'#E91E63'} icon={'archive'} />,\n  <Fab key={2} backgroundColor={'#F44336'} icon={'delete'} />,\n  <Fab key={3} backgroundColor={'#009688'} icon={'edit'} />,\n  <Fab key={4} backgroundColor={'black'} icon={'attach-money'} />,\n];\n\nconst styles = StyleSheet.create({\n  container: {\n    zIndex: 1,\n    position: 'relative',\n  },\n  body: {\n    width: pageWidth,\n    height: 400,\n  },\n});\n"
  },
  {
    "path": "src/Components/AppbarBottom/AppbarBottom.styles.js",
    "content": "import { StyleSheet, Platform } from 'react-native';\nimport shadow from '../../Utils/Shadow/shadow';\n\nconst styles = StyleSheet.create({\n  contianer: {},\n  appbar: {\n    height: 56,\n    padding: 16,\n    flexDirection: 'row',\n    alignItems: 'center',\n    position: 'relative',\n    minWidth: 'auto',\n\n    ...shadow(8),\n  },\n\n  left: {\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  right: {\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  fabPos: {\n    position: Platform.OS === 'android' ? 'relative' : 'absolute',\n    zIndex: 100,\n    elevation: Platform.OS === 'android' ? 10 : 0,\n  },\n  centerCut: {\n    position: 'absolute',\n    zIndex: 10,\n    backgroundColor: Platform.OS === 'web' ? 'rgba(255,255,255,1)' : 'white',\n    borderRadius: 56 + 16,\n    transform: [{ translateY: -65 / 2 }],\n    width: 56 + 16,\n    height: 56 + 16,\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/AppbarBottom/AppbarBottom.svg.js",
    "content": "import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Dimensions } from 'react-native';\nimport Svg, { G, Path, Rect } from 'react-native-svg';\n\nconst AppbarBottomSVG = ({\n  paddingHorizontal,\n  width,\n  backgroundColor,\n  fabPosition,\n}) => {\n  if (!width) {\n    width = Dimensions.get('screen').width - paddingHorizontal;\n  }\n\n  const widthOfPath = 92;\n\n  let rectWidth = width / 2 - widthOfPath / 2;\n  let middlePosition = width / 2 - widthOfPath / 2;\n  let rightPosition = width / 2 + widthOfPath / 2;\n\n  if (fabPosition == 'end') {\n    rectWidth = width - widthOfPath;\n    middlePosition = width - widthOfPath;\n  }\n\n  return (\n    <Svg width={'100%'} height={56} style={{ position: 'absolute' }}>\n      <Rect\n        height={56}\n        width={rectWidth + 1}\n        fill={backgroundColor}\n        x={0}\n        y={0}\n      />\n      <G x={middlePosition}>\n        <Path\n          fill={backgroundColor}\n          d=\"M0 0v56h92V0h-7.125c-1.662 0-3 1.338-3 3h-.025C80.29 21.644 64.71 35.987 46 36c-18.711-.011-34.294-14.354-35.854-33h-.033c0-1.662-1.338-3-3-3H0z\"\n          fillRule=\"evenodd\"\n        />\n      </G>\n      {fabPosition == 'end' ? null : (\n        <Rect\n          height={56}\n          width={rectWidth + 1}\n          fill={backgroundColor}\n          x={rightPosition - 1}\n          y={0}\n        />\n      )}\n    </Svg>\n  );\n};\n\nAppbarBottomSVG.propTypes = {\n  paddingHorizontal: PropTypes.number,\n  width: PropTypes.number,\n  backgroundColor: PropTypes.string,\n  fabPosition: PropTypes.string,\n};\n\nexport default AppbarBottomSVG;\n"
  },
  {
    "path": "src/Components/AppbarBottom/AppbarBottom.test.js",
    "content": "import React from 'react';\nimport AppbarBottom from './AppbarBottom';\n\nimport renderer from 'react-test-renderer';\n\ntest('AppbarBottom Renders', () => {\n  const tree = renderer.create(<AppbarBottom />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/AppbarBottom/__snapshots__/AppbarBottom.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`AppbarBottom Renders 1`] = `\n<View>\n  <View\n    onLayout={[Function]}\n    style={\n      Array [\n        Object {},\n        Object {\n          \"opacity\": 0,\n        },\n      ]\n    }\n  >\n    <View\n      style={\n        Array [\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n            \"height\": 56,\n            \"minWidth\": \"auto\",\n            \"padding\": 16,\n            \"position\": \"relative\",\n            \"shadowColor\": \"#000\",\n            \"shadowOffset\": Object {\n              \"height\": 4,\n              \"width\": 0,\n            },\n            \"shadowOpacity\": 0.3,\n            \"shadowRadius\": 4.65,\n          },\n          Object {\n            \"backgroundColor\": \"#1e88e5\",\n            \"justifyContent\": \"space-between\",\n          },\n          undefined,\n        ]\n      }\n    >\n      <View\n        style={\n          Object {\n            \"alignItems\": \"center\",\n            \"flexDirection\": \"row\",\n          }\n        }\n      />\n    </View>\n  </View>\n</View>\n`;\n"
  },
  {
    "path": "src/Components/AppbarBottom/index.js",
    "content": "export { default } from './AppbarBottom';\n"
  },
  {
    "path": "src/Components/Avatar/Avatar.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { View } from 'react-native';\nimport withTheme from '../../Theme/withTheme';\nimport Icon from '../Icon/Icon';\nimport Ripple from '../Ripple/Ripple';\nimport { BodyText } from '../Typography';\n\nclass Avatar extends Component {\n  static propTypes = {\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    theme: PropTypes.object,\n    color: PropTypes.string,\n\n    type: PropTypes.string,\n    size: PropTypes.number,\n\n    contentSize: PropTypes.number,\n    contentColor: PropTypes.string,\n    contentStyles: PropTypes.object,\n    content: PropTypes.string,\n\n    image: PropTypes.node,\n\n    onPress: PropTypes.func,\n    ripple: PropTypes.bool,\n    rippleProps: PropTypes.object,\n    testID: PropTypes.string,\n\n    children: PropTypes.node,\n  };\n\n  static defaultProps = {\n    size: 24,\n  };\n\n  _renderImage() {\n    const { image, size } = this.props;\n\n    return React.cloneElement(image, {\n      style: { width: size, height: size, borderRadius: size / 2 },\n    });\n  }\n\n  _renderIcon() {\n    const {\n      content,\n      contentSize,\n      contentStyles,\n      size,\n      contentColor,\n    } = this.props;\n\n    return (\n      <Icon\n        name={content}\n        size={contentSize ? contentSize : size / 1.5}\n        style={contentStyles}\n        color={contentColor}\n      />\n    );\n  }\n\n  _renderTypographyText() {\n    const {\n      content,\n      contentColor,\n      contentSize,\n      contentStyles,\n      size,\n    } = this.props;\n\n    return (\n      <BodyText\n        type={1}\n        style={[\n          {\n            color: contentColor ? contentColor : 'white',\n            fontSize: contentSize ? contentSize : size / 2,\n          },\n          contentStyles,\n        ]}>\n        {content}\n      </BodyText>\n    );\n  }\n\n  _renderItem() {\n    const { type } = this.props;\n    if (type == 'image') {\n      return this._renderImage();\n    } else if (type == 'icon') {\n      return this._renderIcon();\n    } else if (type == 'text') {\n      return this._renderTypographyText();\n    }\n  }\n\n  _renderAvatarContent() {\n    const { style, color, size, children, theme } = this.props;\n    return (\n      <View\n        style={[\n          {\n            width: size,\n            height: size,\n            borderRadius: size / 2,\n            backgroundColor: color ? color : theme.primary.main,\n            alignItems: 'center',\n            justifyContent: 'center',\n          },\n          style,\n        ]}>\n        {children ? children : this._renderItem()}\n      </View>\n    );\n  }\n\n  render() {\n    const { onPress, ripple, rippleProps } = this.props;\n\n    if (onPress) {\n      return (\n        <Ripple\n          onPress={onPress}\n          disable={!ripple}\n          rippleContainerBorderRadius={100}\n          {...rippleProps}>\n          {this._renderAvatarContent()}\n        </Ripple>\n      );\n    }\n\n    return this._renderAvatarContent();\n  }\n}\n\nexport default withTheme(Avatar);\n"
  },
  {
    "path": "src/Components/Avatar/Avatar.stories.js",
    "content": "import React from 'react';\nimport { Image, View } from 'react-native';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\n\nimport { Avatar } from '../..';\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\n\n/* eslint-disable no-console */\n\nexport default storiesOf('Components|Avatars', module)\n  .addParameters({ jest: ['Avatar'] })\n  .add('Image', () => (\n    <Container>\n      <Header title={'Image Avatar'} />\n      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>\n        <Avatar\n          type=\"image\"\n          image={\n            <Image\n              source={{\n                uri:\n                  'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4',\n              }}\n            />\n          }\n          size={16}\n        />\n        <Avatar\n          type=\"image\"\n          image={\n            <Image\n              source={{\n                uri:\n                  'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4',\n              }}\n            />\n          }\n          size={24}\n        />\n        <Avatar\n          type=\"image\"\n          image={\n            <Image\n              source={{\n                uri:\n                  'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4',\n              }}\n            />\n          }\n          size={38}\n          onPress={() => console.log('avatar')}\n          ripple\n        />\n        <Avatar\n          type=\"image\"\n          image={\n            <Image\n              source={{\n                uri:\n                  'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4',\n              }}\n            />\n          }\n          size={56}\n        />\n        <Avatar\n          type=\"image\"\n          image={\n            <Image\n              source={{\n                uri:\n                  'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4',\n              }}\n            />\n          }\n          size={80}\n        />\n        <Avatar\n          type=\"image\"\n          image={\n            <Image\n              source={{\n                uri:\n                  'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4',\n              }}\n            />\n          }\n          size={70}\n        />\n      </View>\n    </Container>\n  ))\n  .add('Icon', () => (\n    <Container>\n      <Header title={'Icon Avatar'} />\n      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>\n        <Avatar\n          type=\"icon\"\n          content=\"arrow-back\"\n          contentColor={'#c2185b'}\n          color={'black'}\n          size={16}\n        />\n        <Avatar type=\"icon\" content=\"alarm\" size={24} color={'#c2185b'} />\n        <Avatar\n          type=\"icon\"\n          content=\"add\"\n          contentColor={'#E91E63'}\n          size={48}\n          color={'#8BC34A'}\n        />\n        <Avatar\n          type=\"icon\"\n          content=\"face\"\n          contentColor={'white'}\n          size={64}\n          color={'#42a5f5'}\n        />\n      </View>\n    </Container>\n  ))\n  .add('Text', () => (\n    <Container>\n      <Header title={'Text Avatar'} />\n\n      <Avatar\n        type=\"text\"\n        content=\"CP\"\n        contentColor={'white'}\n        size={64}\n        color={'#42a5f5'}\n      />\n      <Avatar type=\"text\" content=\"MB\" size={48} color={'#c2185b'} />\n      <Avatar\n        type=\"text\"\n        content=\"NP\"\n        contentColor={'#c2185b'}\n        color={'#f4511e'}\n      />\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/Avatar/Avatar.styles.js",
    "content": "import { StyleSheet } from 'react-native';\nconst styles = StyleSheet.create({});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Avatar/Avatar.test.js",
    "content": "import React from 'react';\nimport Avatar from './Avatar';\n\nimport renderer from 'react-test-renderer';\n\ntest('Avatar Renders', () => {\n  const tree = renderer.create(<Avatar />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Avatar/__snapshots__/Avatar.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Avatar Renders 1`] = `\n<View\n  style={\n    Array [\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#1e88e5\",\n        \"borderRadius\": 12,\n        \"height\": 24,\n        \"justifyContent\": \"center\",\n        \"width\": 24,\n      },\n      undefined,\n    ]\n  }\n/>\n`;\n"
  },
  {
    "path": "src/Components/Avatar/index.js",
    "content": "export { default } from './Avatar';\n"
  },
  {
    "path": "src/Components/Backdrop/BackLayer/BackLayer.js",
    "content": "import React, { Component, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { Animated } from 'react-native';\nimport withTheme from '../../../Theme/withTheme';\nimport styles from './BackLayer.styles';\n\nclass BackLayer extends Component {\n  constructor(props) {\n    super(props);\n  }\n  static propTypes = {\n    backLayerConcealed: PropTypes.node,\n    backLayerRevealed: PropTypes.node,\n    backRevealed: PropTypes.bool,\n    animate: PropTypes.object,\n    internalAnimate: PropTypes.object,\n  };\n\n  renderBackLayerConcealed = () => {\n    const { backLayerConcealed, backRevealed, animate } = this.props;\n\n    if (!backLayerConcealed || backRevealed) {\n      return null;\n    }\n    const md = backRevealed ? 0 : 1;\n    const opacity = animate.interpolate({\n      inputRange: [0, 0.6, 1],\n      outputRange: [1, md, 0],\n    });\n\n    return (\n      <Animated.View\n        style={[styles.backLayer, { opacity }]}\n        useNativeDriver={true}>\n        {backLayerConcealed}\n      </Animated.View>\n    );\n  };\n\n  renderBackLayerRevealed = () => {\n    const { backLayerRevealed, backRevealed, animate } = this.props;\n    if (!backLayerRevealed || !backRevealed) {\n      return null;\n    }\n    const md = backRevealed ? 1 : 0;\n    const opacity = animate.interpolate({\n      inputRange: [0, 0.6, 1],\n      outputRange: [0, md, 1],\n    });\n\n    return (\n      <Animated.View\n        style={[styles.backLayer, { opacity }]}\n        useNativeDriver={true}>\n        {this.renderBackElements()}\n      </Animated.View>\n    );\n  };\n\n  renderBackElements = () => {\n    const { backLayerRevealed, internalAnimate } = this.props;\n\n    const opacity = internalAnimate.interpolate({\n      inputRange: [0, 0.5, 1],\n      outputRange: [1, 0, 1],\n    });\n\n    return (\n      <Animated.View style={{ flex: 1, opacity }} useNativeDriver={true}>\n        {backLayerRevealed}\n      </Animated.View>\n    );\n  };\n\n  render() {\n    return (\n      <Fragment>\n        {this.renderBackLayerConcealed()}\n        {this.renderBackLayerRevealed()}\n      </Fragment>\n    );\n  }\n}\n\nexport default withTheme(BackLayer);\n"
  },
  {
    "path": "src/Components/Backdrop/BackLayer/BackLayer.styles.js",
    "content": "import { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  backLayer: {\n    position: 'absolute',\n    top: 0,\n    bottom: 0,\n    width: '100%',\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Backdrop/Backdrop.js",
    "content": "import React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\nimport { Dimensions, Animated, Easing, SafeAreaView } from 'react-native';\nimport withTheme from '../../Theme/withTheme';\nimport styles from './Backdrop.styles';\nimport HeaderButton from './HeaderButton/HeaderButton';\nimport FrontLayer from './FrontLayer/FrontLayer';\nimport BackLayer from './BackLayer/BackLayer';\n\nclass Backdrop extends PureComponent {\n  static propTypes = {\n    backLayerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    frontLayerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    headerButtonStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    backLayerConcealed: PropTypes.node,\n    offset: PropTypes.number,\n    initialOffset: PropTypes.number,\n    children: PropTypes.node,\n    backLayerRevealed: PropTypes.node,\n    theme: PropTypes.object,\n    subheader: PropTypes.string,\n    testID: PropTypes.string,\n  };\n\n  static defaultProps = {\n    initialOffset: 56,\n    buttonRippleColor: 'rgba(255,255,255,0.3)',\n  };\n\n  constructor(props) {\n    super(props);\n    const window = Dimensions.get('window');\n    this.state = {\n      window,\n      backConcealed: true,\n      backRevealed: false,\n      iconName: 'menu',\n    };\n  }\n\n  animate = new Animated.Value(0);\n  internalAnimate = new Animated.Value(0);\n  internalOffsetAnimate = new Animated.Value(0);\n  isInternalAnimate = false;\n\n  toggleLayout() {\n    const { backConcealed } = this.state;\n\n    if (backConcealed) {\n      this.setState({ backRevealed: true, iconName: 'close' });\n    } else {\n      this.setState({ backConcealed: true, iconName: 'menu' });\n    }\n\n    this.isInternalAnimate = false;\n\n    Animated.timing(this.animate, {\n      toValue: backConcealed ? 1 : 0,\n      duration: 196,\n      easing: Easing.ease,\n      useNativeDriver: true,\n    }).start(() => {\n      if (backConcealed) {\n        this.setState({ backConcealed: false });\n      } else {\n        this.setState({\n          backRevealed: false,\n        });\n      }\n    });\n  }\n\n  render() {\n    const {\n      backLayerStyle,\n      headerButtonStyle,\n      frontLayerStyle,\n      children,\n      initialOffset,\n      offset,\n      backLayerRevealed,\n      backLayerConcealed,\n      theme,\n      subheader,\n      testID,\n    } = this.props;\n    const { backConcealed, backRevealed, window, iconName } = this.state;\n\n    return (\n      <SafeAreaView\n        style={[\n          styles.backLayerContainer,\n          { backgroundColor: theme.primary.main },\n          backLayerStyle,\n        ]}\n        testID={testID}>\n        <BackLayer\n          backLayerConcealed={backLayerConcealed}\n          animate={this.animate}\n          internalAnimate={this.internalAnimate}\n          backConcealed={backConcealed}\n          backLayerRevealed={backLayerRevealed}\n          backRevealed={backRevealed}\n        />\n        <FrontLayer\n          toggleLayout={() => this.toggleLayout()}\n          animate={this.animate}\n          frontLayerStyle={frontLayerStyle}\n          initialOffset={initialOffset}\n          window={window}\n          offset={offset}\n          backRevealed={backRevealed}\n          backLayerRevealed={backLayerRevealed}\n          internalOffsetAnimate={this.internalOffsetAnimate}\n          isInternalAnimate={this.isInternalAnimate}\n          subheader={subheader}>\n          {children}\n        </FrontLayer>\n        <HeaderButton\n          backConcealed={backConcealed}\n          headerButtonStyle={headerButtonStyle}\n          toggleLayout={() => this.toggleLayout()}\n          iconName={iconName}\n        />\n      </SafeAreaView>\n    );\n  }\n}\n\nexport default withTheme(Backdrop);\n"
  },
  {
    "path": "src/Components/Backdrop/Backdrop.stories.js",
    "content": "import React from 'react';\nimport { View, StyleSheet, Text } from 'react-native';\n\nimport {\n  Backdrop,\n  List,\n  ListItem,\n  Icon,\n  IconButton,\n  Avatar,\n  Heading,\n} from '../..';\nimport Container from '../../storybook/components/Container';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\n\nexport default storiesOf('Components|Backdrop', module)\n  .addParameters({ jest: ['Backdrop'] })\n  .add('Simple', () => (\n    <Container style={{ flex: 1, padding: 0 }}>\n      <View\n        style={{\n          flex: 1,\n          width: '100%',\n        }}>\n        <Backdrop\n          backLayerConcealed={\n            <View style={styles.backdropHeader}>\n              <Text style={styles.backdropHeaderTitle}>App</Text>\n            </View>\n          }\n          backLayerRevealed={\n            <View style={{ flex: 1, width: '100%' }}>\n              <View style={styles.backdropHeader}>\n                <Text style={styles.backdropHeaderTitle}>Navigation</Text>\n              </View>\n\n              <List\n                style={{\n                  width: '100%',\n                  backgroundColor: 'transparent',\n                }}>\n                <ListItem\n                  text={'Home'}\n                  textStyle={{ color: 'white' }}\n                  selected\n                  style={{ backgroundColor: 'transparent' }}\n                  icon={<Icon name={'home'} size={24} color={'white'} />}\n                />\n                <ListItem\n                  text={'Music'}\n                  textStyle={{ color: 'white' }}\n                  style={{ backgroundColor: 'transparent' }}\n                  icon={<Icon name={'music-note'} size={24} color={'white'} />}\n                />\n                <ListItem\n                  text={'Favorites'}\n                  textStyle={{ color: 'white' }}\n                  style={{ backgroundColor: 'transparent' }}\n                  icon={<Icon name={'favorite'} size={24} color={'white'} />}\n                />\n                <ListItem\n                  text={'Settings'}\n                  textStyle={{ color: 'white' }}\n                  style={{ backgroundColor: 'transparent' }}\n                  icon={<Icon name={'settings'} size={24} color={'white'} />}\n                />\n              </List>\n            </View>\n          }\n          offset={260}>\n          <View style={styles.container}>\n            <Heading\n              text={'Albums'}\n              style={{\n                alignSelf: 'flex-start',\n                marginLeft: 20,\n                fontSize: 20,\n              }}\n            />\n            <ListItem\n              text={'Back in Black'}\n              secondaryText={'AC/DC'}\n              media={\n                <Avatar\n                  type=\"icon\"\n                  content=\"album\"\n                  contentColor={'#ececec'}\n                  color={'#a3a3a3'}\n                  size={40}\n                />\n              }\n              actionItem={\n                <IconButton name=\"favorite\" size={24} color=\"#6e6e6e\" />\n              }\n            />\n            <ListItem\n              text={'Hotel California'}\n              secondaryText={'Eagles'}\n              media={\n                <Avatar\n                  type=\"icon\"\n                  content=\"album\"\n                  contentColor={'#ececec'}\n                  color={'#a3a3a3'}\n                  size={40}\n                />\n              }\n              actionItem={\n                <IconButton name=\"favorite\" size={24} color=\"#6e6e6e\" />\n              }\n            />\n            <ListItem\n              text={'Dark Side of the Moon'}\n              secondaryText={'Pink Floyd '}\n              media={\n                <Avatar\n                  type=\"icon\"\n                  content=\"album\"\n                  contentColor={'#ececec'}\n                  color={'#a3a3a3'}\n                  size={40}\n                />\n              }\n              actionItem={\n                <IconButton name=\"favorite\" size={24} color=\"#6e6e6e\" />\n              }\n            />\n            <ListItem\n              text={'Led Zeppelin IV'}\n              secondaryText={'Led Zeppelin'}\n              media={\n                <Avatar\n                  type=\"icon\"\n                  content=\"album\"\n                  contentColor={'#ececec'}\n                  color={'#a3a3a3'}\n                  size={40}\n                />\n              }\n              actionItem={\n                <IconButton name=\"favorite\" size={24} color=\"#6e6e6e\" />\n              }\n            />\n          </View>\n        </Backdrop>\n      </View>\n    </Container>\n  ))\n  .add('Subheader', () => (\n    <Container style={{ flex: 1, padding: 0 }}>\n      <View\n        style={{\n          flex: 1,\n          width: '100%',\n        }}>\n        <Backdrop\n          subheader={'Music'}\n          backLayerConcealed={\n            <View style={styles.backdropHeader}>\n              <Text style={styles.backdropHeaderTitle}>App</Text>\n            </View>\n          }\n          backLayerRevealed={\n            <View style={{ flex: 1, width: '100%' }}>\n              <View style={styles.backdropHeader}>\n                <Text style={styles.backdropHeaderTitle}>Navigation</Text>\n              </View>\n\n              <List\n                style={{\n                  width: '100%',\n                  backgroundColor: 'transparent',\n                }}>\n                <ListItem\n                  text={'Home'}\n                  textStyle={{ color: 'white' }}\n                  selected\n                  style={{ backgroundColor: 'transparent' }}\n                  icon={<Icon name={'home'} size={24} color={'white'} />}\n                />\n                <ListItem\n                  text={'Music'}\n                  textStyle={{ color: 'white' }}\n                  style={{ backgroundColor: 'transparent' }}\n                  icon={<Icon name={'music-note'} size={24} color={'white'} />}\n                />\n                <ListItem\n                  text={'Favorites'}\n                  textStyle={{ color: 'white' }}\n                  style={{ backgroundColor: 'transparent' }}\n                  icon={<Icon name={'favorite'} size={24} color={'white'} />}\n                />\n                <ListItem\n                  text={'Settings'}\n                  textStyle={{ color: 'white' }}\n                  style={{ backgroundColor: 'transparent' }}\n                  icon={<Icon name={'settings'} size={24} color={'white'} />}\n                />\n              </List>\n            </View>\n          }\n          offset={260}>\n          <View style={styles.container}>\n            <Heading\n              text={'Albums'}\n              style={{\n                alignSelf: 'flex-start',\n                marginLeft: 20,\n                fontSize: 20,\n              }}\n            />\n            <ListItem\n              text={'Back in Black'}\n              secondaryText={'AC/DC'}\n              media={\n                <Avatar\n                  type=\"icon\"\n                  content=\"album\"\n                  contentColor={'#ececec'}\n                  color={'#a3a3a3'}\n                  size={40}\n                />\n              }\n              actionItem={\n                <IconButton name=\"favorite\" size={24} color=\"#6e6e6e\" />\n              }\n            />\n            <ListItem\n              text={'Hotel California'}\n              secondaryText={'Eagles'}\n              media={\n                <Avatar\n                  type=\"icon\"\n                  content=\"album\"\n                  contentColor={'#ececec'}\n                  color={'#a3a3a3'}\n                  size={40}\n                />\n              }\n              actionItem={\n                <IconButton name=\"favorite\" size={24} color=\"#6e6e6e\" />\n              }\n            />\n            <ListItem\n              text={'Dark Side of the Moon'}\n              secondaryText={'Pink Floyd '}\n              media={\n                <Avatar\n                  type=\"icon\"\n                  content=\"album\"\n                  contentColor={'#ececec'}\n                  color={'#a3a3a3'}\n                  size={40}\n                />\n              }\n              actionItem={\n                <IconButton name=\"favorite\" size={24} color=\"#6e6e6e\" />\n              }\n            />\n            <ListItem\n              text={'Led Zeppelin IV'}\n              secondaryText={'Led Zeppelin'}\n              media={\n                <Avatar\n                  type=\"icon\"\n                  content=\"album\"\n                  contentColor={'#ececec'}\n                  color={'#a3a3a3'}\n                  size={40}\n                />\n              }\n              actionItem={\n                <IconButton name=\"favorite\" size={24} color=\"#6e6e6e\" />\n              }\n            />\n          </View>\n        </Backdrop>\n      </View>\n    </Container>\n  ));\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    paddingTop: 30,\n    alignItems: 'center',\n  },\n\n  contentText: {\n    color: 'black',\n    alignSelf: 'center',\n  },\n  backdropHeader: {\n    height: 56,\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  backdropHeaderTitle: {\n    fontSize: 18,\n    color: 'white',\n    fontWeight: '500',\n    marginLeft: 72,\n  },\n});\n"
  },
  {
    "path": "src/Components/Backdrop/Backdrop.styles.js",
    "content": "import { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  backLayerContainer: {\n    flex: 1,\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Backdrop/Backdrop.test.js",
    "content": "import React from 'react';\nimport { Backdrop } from '../../';\n\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\n\ntest('Backdrop Renders', () => {\n  const tree = renderer.render(<Backdrop />);\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Backdrop/FrontLayer/FrontLayer.js",
    "content": "import React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\nimport { Platform, Animated } from 'react-native';\nimport withTheme from '../../../Theme/withTheme';\nimport styles from './FrontLayer.styles';\nimport FrontLayerScrim from '../FrontLayerScrim/FrontLayerScrim';\nimport { Subtitle } from '../../..';\n\nconst IOS = Platform.OS === 'ios';\n\nclass FrontLayer extends PureComponent {\n  constructor(props) {\n    super(props);\n  }\n  static propTypes = {\n    offset: PropTypes.number,\n    initialOffset: PropTypes.number,\n    children: PropTypes.node,\n    backLayerRevealed: PropTypes.object,\n    frontLayerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    theme: PropTypes.object,\n    toggleLayout: PropTypes.func,\n    animate: PropTypes.object,\n    backRevealed: PropTypes.bool,\n    isInternalAnimate: PropTypes.bool,\n    internalOffsetAnimate: PropTypes.object,\n    window: PropTypes.object,\n    subheader: PropTypes.string,\n  };\n\n  getFrontLayerTranslateY = () => {\n    const { animate, initialOffset } = this.props;\n\n    const offset = this.getOffset();\n    return animate.interpolate({\n      inputRange: [0, 1],\n      outputRange: [initialOffset, offset],\n    });\n  };\n\n  getOffset = (ignoreElement = false) => {\n    const { backLayerRevealed, offset, window } = this.props;\n\n    if (!ignoreElement && backLayerRevealed && offset) {\n      return offset;\n    }\n\n    if (offset) return offset;\n\n    const y = this.getY();\n\n    return window.height - y;\n  };\n\n  getY = () => {\n    const { initialOffset } = this.props;\n    const y = IOS ? 20 : 24;\n    return y + initialOffset;\n  };\n\n  render() {\n    const {\n      children,\n      toggleLayout,\n      animate,\n      frontLayerStyle,\n      backRevealed,\n      subheader,\n    } = this.props;\n\n    const translateY = this.getFrontLayerTranslateY();\n\n    return (\n      <Animated.View\n        useNativeDriver={true}\n        style={[\n          styles.frontLayerContainer,\n          frontLayerStyle,\n          { transform: [{ translateY }] },\n        ]}>\n        <Subtitle text={subheader} style={styles.subheader} />\n        {children}\n        <FrontLayerScrim\n          toggleLayout={() => toggleLayout()}\n          animate={animate}\n          backRevealed={backRevealed}\n        />\n      </Animated.View>\n    );\n  }\n}\n\nexport default withTheme(FrontLayer);\n"
  },
  {
    "path": "src/Components/Backdrop/FrontLayer/FrontLayer.styles.js",
    "content": "import { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  frontLayerContainer: {\n    flex: 1,\n    backgroundColor: 'white',\n    borderTopLeftRadius: 16,\n    borderTopRightRadius: 16,\n  },\n  subheader: {\n    fontSize: 16,\n    color: 'rgba(0,0,0,.8)',\n    marginLeft: 20,\n    marginTop: 16,\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Backdrop/FrontLayerScrim/FrontLayerScrim.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Animated, TouchableWithoutFeedback } from 'react-native';\nimport { Icon } from '../../../';\nimport withTheme from '../../../Theme/withTheme';\nimport styles from './FrontLayerScrim.styles';\n\nclass FrontLayerScrim extends Component {\n  constructor(props) {\n    super(props);\n  }\n  static propTypes = {\n    backRevealed: PropTypes.bool,\n    toggleLayout: PropTypes.func,\n    animate: PropTypes.object,\n  };\n\n  render() {\n    const { backRevealed, toggleLayout, animate } = this.props;\n\n    if (!backRevealed) return null;\n\n    return (\n      <TouchableWithoutFeedback onPress={() => toggleLayout()}>\n        <Animated.View\n          style={[styles.scrimLayer, { opacity: animate }]}\n          useNativeDriver={true}>\n          <Icon\n            name=\"expand-less\"\n            size={24}\n            color=\"rgba(0,0,0,0.56)\"\n            style={styles.scrimLayerIcon}\n          />\n        </Animated.View>\n      </TouchableWithoutFeedback>\n    );\n  }\n}\n\nexport default withTheme(FrontLayerScrim);\n"
  },
  {
    "path": "src/Components/Backdrop/FrontLayerScrim/FrontLayerScrim.styles.js",
    "content": "import { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  scrimLayer: {\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    backgroundColor: 'rgba(255,255,255,0.8)',\n    borderTopLeftRadius: 16,\n    borderTopRightRadius: 16,\n  },\n  scrimLayerIcon: {\n    position: 'absolute',\n    top: 12,\n    right: 16,\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Backdrop/HeaderButton/HeaderButton.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Animated, Easing } from 'react-native';\nimport { Icon, Ripple } from '../../../';\nimport withTheme from '../../../Theme/withTheme';\nimport styles from './HeaderButton.styles';\n\nclass HeaderButton extends Component {\n  constructor(props) {\n    super(props);\n  }\n  static propTypes = {\n    headerButtonStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    toggleLayout: PropTypes.func,\n    backConcealed: PropTypes.bool,\n    iconName: PropTypes.string,\n  };\n\n  spinValue = new Animated.Value(0);\n\n  _handleSpin() {\n    const { backConcealed, toggleLayout } = this.props;\n    toggleLayout();\n    Animated.timing(this.spinValue, {\n      toValue: 0.5,\n      duration: 94,\n      easing: Easing.linear,\n      useNativeDriver: true,\n    }).start(() => {\n      Animated.timing(this.spinValue, {\n        toValue: backConcealed ? 1 : 0,\n        duration: 94,\n        easing: Easing.linear,\n        useNativeDriver: true,\n      }).start();\n    });\n  }\n\n  render() {\n    const { headerButtonStyle, iconName } = this.props;\n\n    const spin = this.spinValue.interpolate({\n      inputRange: [0, 1],\n      outputRange: ['180deg', '0deg'],\n    });\n    const style = [\n      styles.container,\n      headerButtonStyle,\n      { transform: [{ rotate: spin }] },\n    ];\n\n    return (\n      <Animated.View style={style} useNativeDriver={true}>\n        <Ripple\n          rippleContainerBorderRadius={100}\n          onPress={() => this._handleSpin()}\n          style={styles.ripple}>\n          <Icon name={iconName} size={24} color=\"white\" style={styles.icon} />\n        </Ripple>\n      </Animated.View>\n    );\n  }\n}\n\nexport default withTheme(HeaderButton);\n"
  },
  {
    "path": "src/Components/Backdrop/HeaderButton/HeaderButton.styles.js",
    "content": "import { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  container: {\n    height: 56,\n    width: 56,\n    justifyContent: 'center',\n    alignItems: 'center',\n    position: 'absolute',\n  },\n  ripple: {\n    height: 32,\n    width: 32,\n    justifyContent: 'center',\n  },\n  icon: {\n    alignSelf: 'center',\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Backdrop/__snapshots__/Backdrop.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Backdrop Renders 1`] = `\n<Context.Consumer>\n  [Function]\n</Context.Consumer>\n`;\n"
  },
  {
    "path": "src/Components/Backdrop/index.js",
    "content": "export { default } from './Backdrop';\n"
  },
  {
    "path": "src/Components/Backdrop/utils.js",
    "content": ""
  },
  {
    "path": "src/Components/Badge/Badge.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Text, View, Animated } from 'react-native';\nimport withTheme from '../../Theme/withTheme';\nimport Ripple from '../Ripple/Ripple';\nimport styles from './Badge.styles';\n\nclass Badge extends Component {\n  constructor(props) {\n    super(props);\n  }\n  static propTypes = {\n    color: PropTypes.string,\n    textColor: PropTypes.string,\n    content: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    maxValue: PropTypes.number,\n    children: PropTypes.node,\n    size: PropTypes.number,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    position: PropTypes.string,\n    onPress: PropTypes.func,\n\n    theme: PropTypes.object,\n    containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    right: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n    left: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n    top: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n\n    visible: PropTypes.bool,\n    testID: PropTypes.string,\n  };\n\n  static defaultProps = {\n    position: 'right',\n    size: 16,\n    right: 0,\n    left: 'auto',\n    visible: true,\n  };\n\n  state = {\n    childrenWidth: 0,\n    childrenHeight: 0,\n    scale: new Animated.Value(0),\n  };\n\n  componentDidMount() {\n    const { visible } = this.props;\n\n    if (visible) {\n      this._animateBadge();\n    }\n  }\n\n  componentDidUpdate(prevProps) {\n    const { visible } = this.props;\n\n    if (visible != prevProps.visible) {\n      this._animateBadge();\n    }\n  }\n\n  getFontSize(content, maxed) {\n    const { size } = this.props;\n    let scaleFactor = 0.5;\n    if (content && String(content).length > 3 && !maxed) {\n      scaleFactor = 0.3;\n    }\n    return size * scaleFactor;\n  }\n\n  getBadgeWidth(content) {\n    const { size } = this.props;\n    const isLong = String(content).length > 3;\n    let scaleFactor = isLong ? 1.75 : 1.5;\n\n    return scaleFactor * size;\n  }\n\n  onChildrenLayout = e => {\n    const { width, height } = e.nativeEvent.layout;\n\n    this.setState({\n      childrenWidth: width,\n      childrenHeight: height,\n    });\n  };\n\n  _animateBadge() {\n    const { visible } = this.props;\n    const { scale } = this.state;\n\n    const scaleValue = visible ? 1 : 0;\n\n    Animated.spring(scale, {\n      toValue: scaleValue,\n      speed: 7,\n      useNativeDriver: true,\n    }).start();\n  }\n\n  _renderBadge() {\n    const {\n      size,\n      textColor,\n      color,\n      style,\n      theme,\n      children,\n      content,\n      position,\n      right,\n      left,\n      top,\n      maxValue = 0,\n      ...rest\n    } = this.props;\n\n    let positionStyle = {\n      right: children ? 0 : 'auto',\n    };\n\n    if (position === 'left') {\n      positionStyle = {\n        left: children ? 0 : 'auto',\n      };\n    }\n\n    if (right) positionStyle.right = right;\n    if (left) positionStyle.left = left;\n\n    let maxedContent = parseInt(content, 10);\n    const maxed = !isNaN(maxedContent) && maxValue && maxedContent > maxValue;\n    maxedContent = maxed ? `${maxValue}+` : content;\n\n    return (\n      <Animated.View\n        useNativeDriver={true}\n        style={[\n          {\n            height: size,\n            width: maxed ? this.getBadgeWidth(maxedContent) : size,\n            borderRadius: size,\n            backgroundColor: color ? color : theme.primary.main,\n\n            alignItems: 'center',\n            justifyContent: 'center',\n            position: children ? 'absolute' : 'relative',\n            top: top ? top : 0,\n            transform: [{ scale: this.state.scale }],\n          },\n          positionStyle,\n          style,\n        ]}\n        numberOfLines={1}\n        {...rest}>\n        <Text\n          style={[\n            styles.content,\n            {\n              fontSize: this.getFontSize(maxedContent, maxed),\n              color: textColor ? textColor : 'white',\n            },\n          ]}>\n          {maxedContent}\n        </Text>\n      </Animated.View>\n    );\n  }\n\n  render() {\n    const { children, containerStyle, onPress, testID } = this.props;\n    const { childrenHeight, childrenWidth } = this.state;\n\n    return (\n      <View\n        style={[\n          {\n            position: 'relative',\n            alignSelf: 'flex-start',\n            alignItems: 'flex-start',\n            height: children ? childrenHeight : 'auto',\n            width: children ? childrenWidth : 'auto',\n            maxHeight: children ? childrenHeight : 'auto',\n            maxWidth: children ? childrenWidth : 'auto',\n            minHeight: children ? childrenHeight : 'auto',\n            minWidth: children ? childrenWidth : 'auto',\n          },\n          containerStyle,\n        ]}\n        testID={testID}>\n        <View onLayout={this.onChildrenLayout}>{children}</View>\n        {onPress ? (\n          <Ripple onPress>{this._renderBadge()}</Ripple>\n        ) : (\n          this._renderBadge()\n        )}\n      </View>\n    );\n  }\n}\n\nexport default withTheme(Badge);\n"
  },
  {
    "path": "src/Components/Badge/Badge.stories.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\n\nimport { Badge, Icon, IconButton, Button } from '../..';\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\nimport { State, Store } from '@sambego/storybook-state';\nconst store = new Store({\n  visible: true,\n});\n\nexport default storiesOf('Components|Badge', module)\n  .addParameters({ jest: ['Badge'] })\n  .add('Standalone', () => (\n    <Container>\n      <Header title={'Standalone'} />\n\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          marginBottom: 40,\n        }}>\n        <Badge size={12} content={24} />\n        <Badge size={24} content={99} color={'#E91E63'} />\n        <Badge size={36} content={2} color={'#9C27B0'} />\n        <Badge size={48} content={102} color={'#009688'} />\n        <Badge size={60} content={35} color={'#3F51B5'} />\n      </View>\n\n      <View style={{ flexDirection: 'row', alignItems: 'center' }}>\n        <Badge size={12} content={24} color={'black'} textColor={'#E91E63'} />\n        <Badge size={24} content={99} color={'black'} textColor={'#E91E63'} />\n        <Badge size={36} content={2} color={'black'} textColor={'#9C27B0'} />\n        <Badge\n          size={48}\n          content={102}\n          color={'black'}\n          t\n          textColor={'#009688'}\n        />\n        <Badge size={60} content={35} color={'black'} textColor={'#3F51B5'} />\n      </View>\n    </Container>\n  ))\n  .add('With Max Value', () => (\n    <Container>\n      <Header title={'Standalone'} />\n\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          marginBottom: 40,\n        }}>\n        <Badge size={36} content={'MB'} maxValue={99} />\n        <Badge size={36} content={99} />\n        <Badge size={36} content={100} maxValue={99} />\n        <Badge size={36} content={1000} maxValue={999} />\n      </View>\n    </Container>\n  ))\n  .add('On Icons', () => (\n    <Container>\n      <Header title={'On Icons'} />\n\n      <View\n        style={{\n          flex: 1,\n          flexDirection: 'row',\n          alignItems: 'center',\n          marginBottom: 80,\n        }}>\n        <Badge size={14} content={4}>\n          <Icon name=\"favorite\" size={24} />\n        </Badge>\n        <Badge size={16} content={77} color={'red'}>\n          <IconButton name=\"mail\" size={32} />\n        </Badge>\n        <Badge size={20} content={22} color={'#8BC34A'}>\n          <IconButton name=\"album\" size={46} />\n        </Badge>\n        <Badge size={25} content={99} color={'#03A9F4'}>\n          <IconButton name=\"bookmark\" size={64} color={'#E91E63'} />\n        </Badge>\n      </View>\n\n      <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>\n        <Badge size={14} content={7} position={'left'} textColor={'pink'}>\n          <IconButton name=\"info\" size={24} />\n        </Badge>\n        <Badge size={18} content={1023} position={'left'}>\n          <IconButton name=\"message\" size={32} color={'#8BC34A'} />\n        </Badge>\n        <Badge size={24} content={123} position={'left'} color={'black'}>\n          <IconButton name=\"error\" size={48} color={'#F44336'} />\n        </Badge>\n        <Badge size={24} content={23} position={'left'} color={'#FFC107'}>\n          <IconButton name=\"favorite\" size={64} color={'#9C27B0'} />\n        </Badge>\n      </View>\n    </Container>\n  ))\n  .add('Dot', () => (\n    <Container>\n      <Header title={'Dots'} />\n\n      <View\n        style={{\n          flex: 1,\n          flexDirection: 'row',\n          alignItems: 'center',\n          marginBottom: 80,\n        }}>\n        <Badge size={7}>\n          <Icon name=\"favorite\" size={24} />\n        </Badge>\n        <Badge size={8} color={'red'}>\n          <IconButton name=\"mail\" size={32} />\n        </Badge>\n        <Badge size={10} color={'#8BC34A'}>\n          <IconButton name=\"album\" size={46} />\n        </Badge>\n        <Badge size={12} color={'#03A9F4'}>\n          <IconButton name=\"bookmark\" size={64} color={'#E91E63'} />\n        </Badge>\n      </View>\n\n      <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>\n        <Badge size={7} position={'left'} textColor={'pink'}>\n          <IconButton name=\"info\" size={24} />\n        </Badge>\n        <Badge size={8} position={'left'}>\n          <IconButton name=\"message\" size={32} color={'#8BC34A'} />\n        </Badge>\n        <Badge size={9} position={'left'} color={'black'}>\n          <IconButton name=\"error\" size={48} color={'#F44336'} />\n        </Badge>\n        <Badge size={10} position={'left'} color={'#FFC107'}>\n          <IconButton name=\"favorite\" size={64} color={'#9C27B0'} />\n        </Badge>\n      </View>\n    </Container>\n  ))\n  .add('Animated', () => (\n    <Container>\n      <Header title={'On Icons'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <View\n              style={{\n                flex: 1,\n                flexDirection: 'row',\n                alignItems: 'center',\n                marginBottom: 80,\n              }}>\n              <Badge size={14} content={4} visible={state.visible}>\n                <Icon name=\"favorite\" size={24} />\n              </Badge>\n              <Badge\n                size={16}\n                content={77}\n                color={'red'}\n                visible={state.visible}>\n                <IconButton name=\"mail\" size={32} />\n              </Badge>\n              <Badge size={8} position={'left'} visible={state.visible}>\n                <IconButton name=\"message\" size={32} color={'#8BC34A'} />\n              </Badge>\n              <Badge\n                size={24}\n                content={99}\n                color={'black'}\n                textColor={'#E91E63'}\n                visible={state.visible}\n              />\n            </View>\n            <Button\n              text={'Toggle visibility'}\n              onPress={() => store.set({ visible: !state.visible })}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('custom', () => (\n    <Container>\n      <Header title={'Custom'} />\n\n      <View\n        style={{\n          flex: 1,\n          flexDirection: 'row',\n          alignItems: 'center',\n          marginBottom: 80,\n        }}>\n        <Badge size={14} content={4} left={10} style={{ borderRadius: 3 }}>\n          <Icon name=\"favorite\" size={24} />\n        </Badge>\n        <Badge size={14} color={'red'} style={{ borderRadius: 3, height: 10 }}>\n          <IconButton name=\"mail\" size={32} />\n        </Badge>\n        <Badge\n          size={20}\n          content={22}\n          color={'#8BC34A'}\n          style={{ borderRadius: 2, transform: [{ rotate: '40deg' }] }}>\n          <IconButton name=\"album\" size={46} />\n        </Badge>\n        <Badge\n          size={25}\n          content={'99+'}\n          color={'#03A9F4'}\n          style={{ borderRadius: 10, width: 40 }}>\n          <IconButton name=\"bookmark\" size={64} color={'#E91E63'} />\n        </Badge>\n      </View>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/Badge/Badge.styles.js",
    "content": "import { StyleSheet } from 'react-native';\nconst styles = StyleSheet.create({\n  content: {\n    alignSelf: 'center',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Badge/Badge.test.js",
    "content": "import React from 'react';\nimport Badge from './Badge';\n\nimport renderer from 'react-test-renderer';\n\ntest('Badge Renders', () => {\n  const tree = renderer.create(<Badge />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Badge/__snapshots__/Badge.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Badge Renders 1`] = `\n<View\n  style={\n    Array [\n      Object {\n        \"alignItems\": \"flex-start\",\n        \"alignSelf\": \"flex-start\",\n        \"height\": \"auto\",\n        \"maxHeight\": \"auto\",\n        \"maxWidth\": \"auto\",\n        \"minHeight\": \"auto\",\n        \"minWidth\": \"auto\",\n        \"position\": \"relative\",\n        \"width\": \"auto\",\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    onLayout={[Function]}\n  />\n  <View\n    numberOfLines={1}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": \"#1e88e5\",\n        \"borderRadius\": 16,\n        \"height\": 16,\n        \"justifyContent\": \"center\",\n        \"left\": \"auto\",\n        \"position\": \"relative\",\n        \"right\": \"auto\",\n        \"top\": 0,\n        \"transform\": Array [\n          Object {\n            \"scale\": 0,\n          },\n        ],\n        \"width\": 16,\n      }\n    }\n    useNativeDriver={true}\n    visible={true}\n  >\n    <Text\n      style={\n        Array [\n          Object {\n            \"alignItems\": \"center\",\n            \"alignSelf\": \"center\",\n            \"justifyContent\": \"center\",\n          },\n          Object {\n            \"color\": \"white\",\n            \"fontSize\": 8,\n          },\n        ]\n      }\n    />\n  </View>\n</View>\n`;\n"
  },
  {
    "path": "src/Components/Badge/index.js",
    "content": "export { default } from './Badge';\n"
  },
  {
    "path": "src/Components/Banner/Banner.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { View, Platform, Dimensions, Animated } from 'react-native';\nimport withTheme from '../../Theme/withTheme';\nimport shadow from '../../Utils/Shadow/shadow.js';\nimport Button from '../Button/Button';\nimport { BodyText } from '../../';\nimport styles from './Banner.styles';\n\nclass Banner extends Component {\n  static propTypes = {\n    mobileLayout: PropTypes.bool,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    actionItems: PropTypes.array,\n    singleLine: PropTypes.bool,\n    media: PropTypes.node,\n    visible: PropTypes.bool,\n    message: PropTypes.string,\n    position: PropTypes.string,\n    testID: PropTypes.string,\n  };\n\n  state = {\n    isWideScreen: false,\n    width: 0,\n    maxHeight: 0,\n    height: new Animated.Value(10),\n    shouldHide: false,\n  };\n\n  componentDidUpdate(prevProps, prevState) {\n    const { visible } = this.props;\n    const { shouldHide } = this.state;\n\n    if (!prevProps.visible && visible) {\n      this.setState({ shouldHide: false });\n      this.animateBanner(true);\n    } else if (\n      (prevProps.visible && !visible) ||\n      (!prevState.shouldHide && shouldHide)\n    ) {\n      this.animateBanner(false);\n    }\n  }\n\n  componentDidMount() {\n    if (this.props.visible) {\n      this.animateBanner(true);\n    }\n    this._handleLayout();\n    Dimensions.addEventListener('change', this._handleLayout);\n  }\n\n  componentWillUnmount() {\n    Dimensions.removeEventListener('change', this._handleLayout);\n  }\n\n  _handleLayout = () => {\n    const width = Dimensions.get('window').width;\n\n    if (width == this.state.width) return;\n\n    this.setState({\n      isWideScreen: width > 1024,\n      width,\n    });\n  };\n\n  animateBanner(show) {\n    const { maxHeight } = this.state;\n    const newHeight = show ? maxHeight : 0;\n\n    Animated.parallel([\n      Animated.spring(this.state.height, {\n        toValue: newHeight,\n      }),\n    ]).start();\n  }\n\n  _renderActionItems() {\n    const { actionItems } = this.props;\n\n    if (!actionItems) return null;\n    const platformStyles = this.getPlatformStyles();\n\n    return (\n      <View style={[styles.buttons, platformStyles.actions]}>\n        {actionItems.map(item => {\n          if (item.name && item.name.length > 0) {\n            return (\n              <Button\n                key={item.name}\n                text={item.name}\n                compact={true}\n                type=\"text\"\n                onPress={() => {\n                  item.onPress && item.onPress();\n                  this.setState({ shouldHide: true });\n                }}\n                style={[styles.button]}\n              />\n            );\n          } else {\n            return null;\n          }\n        })}\n      </View>\n    );\n  }\n\n  _renderContent() {\n    const { media, message } = this.props;\n    const platformStyles = this.getPlatformStyles();\n\n    return (\n      <View style={[styles.content, platformStyles.content]}>\n        {media ? <View style={platformStyles.image}>{media}</View> : null}\n        <BodyText\n          type={2}\n          style={{\n            lineHeight: 20,\n            maxWidth: 460,\n            flexShrink: 1,\n          }}>\n          {message}\n        </BodyText>\n      </View>\n    );\n  }\n\n  _renderBody() {\n    const getPlatformStyles = this.getPlatformStyles();\n    return (\n      <View style={[styles.body, getPlatformStyles.body]}>\n        {this._renderContent()}\n\n        {this._renderActionItems()}\n      </View>\n    );\n  }\n\n  getPlatformStyles() {\n    const { mobileLayout, media, singleLine } = this.props;\n    const { isWideScreen, width } = this.state;\n    const isWeb = Platform.OS == 'web';\n    let styles = {\n      body: {\n        alignItems: singleLine ? 'center' : 'flex-start',\n        justifyContent: singleLine ? 'space-between' : 'space-between',\n        marginTop: singleLine ? 8 : 24,\n        marginLeft: 16,\n        flexDirection: singleLine ? 'row' : 'column',\n      },\n      content: {\n        marginBottom: 8,\n        marginRight: width < 400 ? 8 : 0,\n      },\n      actions: {\n        justifyContent: singleLine ? 'center' : 'flex-end',\n        alignItems: singleLine ? 'center' : 'flex-end',\n        alignSelf: singleLine ? 'center' : 'flex-end',\n        marginRight: 8,\n      },\n      image: {\n        marginRight: 16,\n      },\n    };\n    if (isWeb && isWideScreen && !mobileLayout) {\n      styles = {\n        body: {\n          alignItems: singleLine ? 'center' : 'flex-start',\n          justifyContent: singleLine ? 'space-between' : 'space-between',\n          marginTop: singleLine ? 8 : 16,\n          marginLeft: media ? 16 : 24,\n          flexDirection: 'row',\n        },\n        content: {\n          marginBottom: singleLine ? 8 : 16,\n        },\n        actions: {\n          justifyContent: singleLine ? 'center' : 'flex-end',\n          alignItems: singleLine ? 'center' : 'flex-end',\n          alignSelf: singleLine ? 'center' : 'flex-end',\n        },\n        image: {\n          marginRight: 24,\n        },\n      };\n    }\n\n    return styles;\n  }\n\n  _onLayout = event => {\n    this.setState(\n      {\n        maxHeight: event.nativeEvent.layout.height,\n      },\n      () => {\n        if (this.props.visible) this.animateBanner(true);\n      },\n    );\n  };\n\n  render() {\n    const { style, position, visible, testID } = this.props;\n    const { shouldHide } = this.state;\n    const appliedShadow = visible && !shouldHide ? 1 : 0;\n\n    return (\n      <Animated.View\n        useNativeDriver={true}\n        style={[\n          styles.container,\n          {\n            position: position ? position : 'relative',\n            height: this.state.height,\n            ...shadow(appliedShadow),\n          },\n          style,\n        ]}\n        testID={testID}>\n        <View onLayout={this._onLayout}>{this._renderBody()}</View>\n      </Animated.View>\n    );\n  }\n}\n\nexport default withTheme(Banner);\n"
  },
  {
    "path": "src/Components/Banner/Banner.stories.js",
    "content": "import React from 'react';\nimport { View, StyleSheet, Platform, Dimensions } from 'react-native';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\n\nimport { Banner, Avatar, Appbar, Heading, BodyText } from '../../';\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\n\nconst pageWidth = Platform.OS == 'web' ? 400 : Dimensions.get('window').width;\n\n/* eslint-disable no-console */\nexport default storiesOf('Components|Banner', module)\n  .addParameters({ jest: ['Banner'] })\n  .add('Single line', () => (\n    <Container scroll>\n      <Header title={'Banner Single Line'} />\n\n      <Banner\n        actionItems={[\n          { name: 'Sign in', onPress: () => console.log('sign in') },\n        ]}\n        singleLine\n        message={'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'}\n        visible\n        style={{ marginBottom: 20 }}\n      />\n      <Banner\n        actionItems={[{ name: 'Continue' }]}\n        singleLine\n        message={'New Action here'}\n        visible\n        style={{ marginBottom: 20 }}\n      />\n      <Banner\n        actionItems={[{ name: 'Cancel' }, { name: 'Continue' }]}\n        singleLine\n        message={'Two Actions here'}\n        visible\n      />\n    </Container>\n  ))\n  .add('Multi line', () => (\n    <Container scroll>\n      <Header title={'Banner Multi line'} />\n      <Banner\n        visible\n        actionItems={[{ name: 'Continue' }, { name: 'Sign in' }]}\n        message={\n          'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'\n        }\n        style={{ marginBottom: 40 }}\n      />\n      <Banner\n        visible\n        actionItems={[{ name: 'Continue' }, { name: 'Sign in' }]}\n        message={\n          'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco'\n        }\n        style={{ marginBottom: 40 }}\n      />\n\n      <Banner\n        visible\n        actionItems={[{ name: 'Continue' }, { name: 'Sign in' }]}\n        media={\n          <Avatar\n            type=\"icon\"\n            content=\"notifications\"\n            size={40}\n            contentColor={'white'}\n            color={'#42a5f5'}\n          />\n        }\n        message={\n          'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'\n        }\n        style={{ marginBottom: 40 }}\n      />\n\n      <Banner\n        visible\n        actionItems={[{ name: 'Continue' }, { name: 'Sign in' }]}\n        media={\n          <Avatar\n            type=\"icon\"\n            content=\"favorite\"\n            size={40}\n            contentColor={'white'}\n            color={'#E91E63'}\n          />\n        }\n        message={\n          'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco'\n        }\n        style={{ marginBottom: 40 }}\n      />\n    </Container>\n  ))\n  .add('With Appbar', () => (\n    <Container scroll style={{ padding: 0 }}>\n      <View style={styles.container}>\n        <View style={styles.body}>\n          <Appbar\n            barType={'normal'}\n            title={'Trivia App'}\n            navigation={'menu'}\n            actionItems={[{ name: 'search' }, { name: 'more-vert' }]}\n          />\n          <Banner\n            visible\n            mobileLayout\n            actionItems={[{ name: 'Fix it' }, { name: 'Learn more' }]}\n            message={\n              'There was a problem processsing a transaction on your card. '\n            }\n          />\n          <View\n            style={{\n              marginTop: 20,\n              alignItems: 'center',\n              paddingLeft: 24,\n              paddingRight: 24,\n            }}>\n            <Heading type={4} style={{ marginBottom: 20 }}>\n              Trivia Page Content\n            </Heading>\n            <BodyText text=\"Cassowaries cannot fly due to lack of chest bone that supports muscles used for flying.\" />\n          </View>\n        </View>\n      </View>\n    </Container>\n  ));\n\nconst styles = StyleSheet.create({\n  container: {\n    zIndex: 1,\n    position: 'relative',\n  },\n  body: {\n    width: pageWidth,\n    height: 500,\n  },\n});\n"
  },
  {
    "path": "src/Components/Banner/Banner.styles.js",
    "content": "import { StyleSheet } from 'react-native';\nconst styles = StyleSheet.create({\n  container: {\n    overflow: 'hidden',\n    backgroundColor: 'white',\n  },\n\n  content: {\n    flexDirection: 'row',\n    flex: 1,\n  },\n\n  buttons: {\n    flexDirection: 'row',\n    marginRight: 8,\n    marginBottom: 8,\n    flexShrink: 1,\n    minWidth: 'auto',\n  },\n  button: {\n    width: 'auto',\n    marginLeft: 8,\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Banner/Banner.test.js",
    "content": "import React from 'react';\nimport Banner from './Banner';\n\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\n\ntest('Banner Renders', () => {\n  const tree = renderer.render(<Banner />);\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Banner/__snapshots__/Banner.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Banner Renders 1`] = `\n<Context.Consumer>\n  [Function]\n</Context.Consumer>\n`;\n"
  },
  {
    "path": "src/Components/Banner/index.js",
    "content": "export { default } from './Banner';\n"
  },
  {
    "path": "src/Components/BottomNavigation/BottomNavigation.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { View, Dimensions } from 'react-native';\nimport withTheme from '../../Theme/withTheme';\nimport BottomNavigationItem from './BottomNavigationItem/BottomNavigationItem.js';\nimport styles from './BottomNavigation.styles';\n\nexport const BottomNavContext = React.createContext();\n\nclass BottomNavigation extends Component {\n  static propTypes = {\n    backgroundColor: PropTypes.string,\n    children: PropTypes.node,\n    style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),\n    actionItems: PropTypes.array,\n    showOneItem: PropTypes.bool,\n    showLabels: PropTypes.bool,\n    handleChange: PropTypes.func,\n    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    horizontalWhenLandscape: PropTypes.bool,\n    testID: PropTypes.string,\n  };\n\n  static defaultProps = {\n    showOneItem: false,\n    showLabels: true,\n  };\n\n  constructor(props) {\n    super(props);\n\n    const dimensions = Dimensions.get('window');\n    const isLandscape = this.isOrientationLandscape(dimensions);\n    const itemMaxWidth = this.getItemMaxWidth(isLandscape, dimensions);\n\n    this.state = {\n      backgroundColor: '#2196f3',\n      isLandscape,\n      itemMaxWidth,\n    };\n  }\n\n  componentDidMount = () => {\n    Dimensions.addEventListener('change', this.handleOrientationChange);\n  };\n\n  componentWillUnmount() {\n    Dimensions.removeEventListener('change', this.handleOrientationChange);\n  }\n\n  getItemMaxWidth = (isLandscape, { height, width }) => {\n    const { actionItems } = this.props;\n\n    return (isLandscape ? height : width) / actionItems.length;\n  };\n\n  isOrientationLandscape = ({ width, height }) => width > height;\n\n  handleOrientationChange = ({ window }) => {\n    const isLandscape = this.isOrientationLandscape(window);\n    const itemMaxWidth = this.getItemMaxWidth(isLandscape, window);\n    this.setState({ isLandscape, itemMaxWidth });\n  };\n\n  handleInternalChange = (value, backgroundColor) => {\n    const { handleChange } = this.props;\n    if (handleChange) handleChange(value);\n    this.setState({ backgroundColor: backgroundColor });\n  };\n\n  _renderActionItems() {\n    const {\n      backgroundColor,\n      actionItems,\n      showLabels,\n      horizontalWhenLandscape,\n    } = this.props;\n    const { isLandscape, itemMaxWidth } = this.state;\n    const backgroundColorActual = backgroundColor ? backgroundColor : '#2196f3';\n\n    return (\n      <BottomNavContext.Provider\n        value={{ backgroundColor: backgroundColorActual }}>\n        {actionItems.map((item, index) => {\n          if (!item.props) {\n            return (\n              <BottomNavigationItem\n                key={item.label}\n                icon={item.icon}\n                label={item.label}\n                showOneItem={this.props.showOneItem}\n                onPress={item.onPress}\n                handleChange={this.handleInternalChange}\n                value={index || index === 0 ? index : item.value}\n                showLabel={showLabels}\n                active={index === this.props.value}\n                isLandscape={isLandscape}\n                maxWidth={itemMaxWidth}\n                horizontal={horizontalWhenLandscape}\n              />\n            );\n          } else {\n            return React.cloneElement(item, {\n              key: item.label,\n              handleChange: item.props.handleChange\n                ? item.props.handleChange\n                : this.handleInternalChange,\n              value: item.props.value ? item.props.value : index,\n              showLabel: this.props.showLabels,\n              active: item.props.active\n                ? item.props.active\n                : index === this.props.value,\n              isLandscape,\n              maxWidth: itemMaxWidth,\n              horizontal: horizontalWhenLandscape,\n            });\n          }\n        })}\n      </BottomNavContext.Provider>\n    );\n  }\n\n  render() {\n    const { children, backgroundColor, style, testID } = this.props;\n\n    const backgroundColorActual = backgroundColor ? backgroundColor : '#2196f3';\n\n    return (\n      <View\n        style={[\n          styles.bottomNavigation,\n          {\n            backgroundColor: backgroundColorActual,\n          },\n          style,\n        ]}\n        testID={testID}>\n        {children ? children : this._renderActionItems()}\n      </View>\n    );\n  }\n}\n\nexport default withTheme(BottomNavigation);\n"
  },
  {
    "path": "src/Components/BottomNavigation/BottomNavigation.stories.js",
    "content": "import React from 'react';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\n\nimport { BottomNavigation, BottomNavigationItem } from '../../';\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\nimport { State, Store } from '@sambego/storybook-state';\nconst store = new Store({\n  one: 0,\n  two: 0,\n  three: 0,\n  four: 0,\n  five: 0,\n  showOne: 0,\n});\n\nexport default storiesOf('Components|Bottom Navigation', module)\n  .addParameters({ jest: ['BottomNavigation'] })\n  .add('Label', () => (\n    <Container scroll>\n      <Header title={'Bottom Navigation'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <BottomNavigation\n            style={{ maxWidth: 672, width: '100%', marginBottom: 40 }}\n            value={state.one}\n            handleChange={value => store.set({ one: value })}\n            showAllLabels\n            actionItems={[\n              { label: 'Buy' },\n              { label: 'Sell' },\n              { label: 'Settings' },\n            ]}\n          />\n        )}\n      </State>\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <BottomNavigation\n            style={{ maxWidth: 672, width: '100%', marginBottom: 40 }}\n            value={state.two}\n            handleChange={value => store.set({ two: value })}\n            showAllLabels\n            backgroundColor={'#E91E63'}\n            actionItems={[\n              { label: 'Home' },\n              { label: 'Favorite' },\n              { label: 'Info' },\n              <BottomNavigationItem key={4} label={'Settings'} />,\n            ]}\n          />\n        )}\n      </State>\n\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <BottomNavigation\n            style={{ maxWidth: 672, width: '100%', marginBottom: 40 }}\n            value={state.three}\n            showAllLabels\n            handleChange={value => store.set({ three: value })}\n            backgroundColor={'#9C27B0'}\n            horizontalWhenLandscape\n            actionItems={[\n              { label: 'Home' },\n              { label: 'Favorite' },\n              { label: 'Info' },\n              { label: 'Profile' },\n              <BottomNavigationItem key={4} label={'Settings'} />,\n            ]}\n          />\n        )}\n      </State>\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <BottomNavigation\n            style={{ maxWidth: 672, width: '100%' }}\n            backgroundColor={'black'}\n            value={state.four}\n            handleChange={value => store.set({ four: value })}\n            showAllLabels\n            actionItems={[\n              <BottomNavigationItem key={1} label={'Home'} />,\n              <BottomNavigationItem key={2} label={'Favorite'} />,\n              <BottomNavigationItem key={3} label={'Info'} />,\n              <BottomNavigationItem key={4} label={'Settings'} />,\n            ]}\n          />\n        )}\n      </State>\n    </Container>\n  ))\n  .add('Icons', () => (\n    <Container scroll>\n      <Header title={'Bottom Navigation'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <BottomNavigation\n            style={{ maxWidth: 672, width: '100%', marginBottom: 40 }}\n            value={state.two}\n            handleChange={value => store.set({ two: value })}\n            showLabels\n            backgroundColor={'#E91E63'}\n            actionItems={[\n              { icon: 'album' },\n              { icon: 'place' },\n              <BottomNavigationItem key={4} icon={'assignment'} />,\n            ]}\n          />\n        )}\n      </State>\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <BottomNavigation\n            style={{ maxWidth: 672, width: '100%', marginBottom: 40 }}\n            value={state.one}\n            handleChange={value => store.set({ one: value })}\n            actionItems={[\n              { icon: 'home' },\n              { icon: 'favorite' },\n              { icon: 'info' },\n              <BottomNavigationItem key={4} icon={'settings'} />,\n            ]}\n          />\n        )}\n      </State>\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <BottomNavigation\n            style={{ maxWidth: 672, width: '100%', marginBottom: 40 }}\n            value={state.three}\n            handleChange={value => store.set({ three: value })}\n            backgroundColor={'#009688'}\n            actionItems={[\n              { icon: 'home' },\n              { icon: 'attach-money' },\n              { icon: 'favorite' },\n              { icon: 'info' },\n              <BottomNavigationItem key={4} icon={'settings'} />,\n            ]}\n          />\n        )}\n      </State>\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <BottomNavigation\n            style={{ maxWidth: 672, width: '100%', marginBottom: 40 }}\n            value={state.four}\n            handleChange={value => store.set({ four: value })}\n            backgroundColor={'#009688'}\n            horizontalWhenLandscape\n            actionItems={[\n              { icon: 'home' },\n              { icon: 'attach-money' },\n              { icon: 'favorite' },\n              { icon: 'info' },\n              <BottomNavigationItem key={4} icon={'settings'} />,\n            ]}\n          />\n        )}\n      </State>\n\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <BottomNavigation\n            style={{ maxWidth: 672, width: '100%' }}\n            backgroundColor={'black'}\n            value={state.five}\n            handleChange={value => store.set({ five: value })}\n            actionItems={[\n              <BottomNavigationItem key={1} icon={'home'} />,\n              <BottomNavigationItem\n                key={2}\n                icon={'favorite'}\n                badgeProps={{\n                  size: 7,\n                  color: 'red',\n                  right: 1,\n                  top: 2,\n                }}\n              />,\n              <BottomNavigationItem key={3} icon={'info'} />,\n              <BottomNavigationItem\n                key={4}\n                icon={'settings'}\n                badgeProps={{\n                  content: 72,\n                  size: 14,\n                  color: 'red',\n                }}\n              />,\n            ]}\n          />\n        )}\n      </State>\n    </Container>\n  ))\n  .add('Icon + Label', () => {\n    return (\n      <Container scroll>\n        <Header title={'Bottom Navigation'} />\n        <State store={store} style={{ flex: 1 }}>\n          {state => (\n            <BottomNavigation\n              style={{ maxWidth: 672, width: '100%', marginBottom: 40 }}\n              value={state.two}\n              showLabels\n              handleChange={value => store.set({ two: value })}\n              backgroundColor={'#E91E63'}\n              actionItems={[\n                { icon: 'home', label: 'Home' },\n                { icon: 'favorite', label: 'Favorite' },\n                { icon: 'info', label: 'Info' },\n              ]}\n            />\n          )}\n        </State>\n        <State store={store} style={{ flex: 1 }}>\n          {state => (\n            <BottomNavigation\n              style={{ maxWidth: 672, width: '100%', marginBottom: 40 }}\n              value={state.showOne}\n              showOneItem\n              handleChange={value => store.set({ showOne: value })}\n              backgroundColor={'#E91E63'}\n              actionItems={[\n                { icon: 'home', label: 'Home' },\n                { icon: 'favorite', label: 'Favorite' },\n                { icon: 'info', label: 'Info' },\n              ]}\n            />\n          )}\n        </State>\n        <State store={store} style={{ flex: 1 }}>\n          {state => (\n            <BottomNavigation\n              style={{ maxWidth: 672, width: '100%', marginBottom: 40 }}\n              value={state.one}\n              handleChange={value => store.set({ one: value })}\n              showLabels\n              actionItems={[\n                { icon: 'home', label: 'Home' },\n                { icon: 'favorite', label: 'Favorite' },\n                { icon: 'info', label: 'Info' },\n                <BottomNavigationItem\n                  showLabel\n                  key={4}\n                  icon={'settings'}\n                  label={'Settings'}\n                />,\n              ]}\n            />\n          )}\n        </State>\n        <State store={store} style={{ flex: 1 }}>\n          {state => (\n            <BottomNavigation\n              style={{ maxWidth: 672, width: '100%', marginBottom: 40 }}\n              value={state.three}\n              handleChange={value => store.set({ three: value })}\n              backgroundColor={'#9C27B0'}\n              showOneItem\n              actionItems={[\n                { icon: 'home', label: 'Home' },\n                { icon: 'attach-money', label: 'Buy' },\n                { icon: 'favorite', label: 'Favorite' },\n                { icon: 'info', label: 'Info' },\n                <BottomNavigationItem\n                  showOneItem\n                  key={4}\n                  icon={'settings'}\n                  label={'Settings'}\n                />,\n              ]}\n            />\n          )}\n        </State>\n        <State store={store} style={{ flex: 1 }}>\n          {state => (\n            <BottomNavigation\n              style={{ maxWidth: 672, width: '100%', marginBottom: 40 }}\n              value={state.four}\n              handleChange={value => store.set({ four: value })}\n              backgroundColor={'#9C27B0'}\n              horizontalWhenLandscape\n              actionItems={[\n                { icon: 'home', label: 'Home' },\n                { icon: 'attach-money', label: 'Buy' },\n                { icon: 'favorite', label: 'Favorite' },\n                { icon: 'info', label: 'Info' },\n                <BottomNavigationItem\n                  showLabel\n                  key={4}\n                  icon={'settings'}\n                  label={'Settings'}\n                />,\n              ]}\n            />\n          )}\n        </State>\n        <State store={store} style={{ flex: 1 }}>\n          {state => (\n            <BottomNavigation\n              style={{ maxWidth: 672, width: '100%' }}\n              backgroundColor={'black'}\n              value={state.five}\n              handleChange={value => store.set({ five: value })}\n              actionItems={[\n                <BottomNavigationItem key={1} icon={'home'} label={'Home'} />,\n                <BottomNavigationItem\n                  key={2}\n                  icon={'favorite'}\n                  label={'Favorite'}\n                  badgeProps={{\n                    size: 7,\n                    color: 'red',\n                    right: 1,\n                    top: 2,\n                  }}\n                />,\n                <BottomNavigationItem key={3} icon={'info'} label={'Info'} />,\n                <BottomNavigationItem\n                  key={4}\n                  icon={'settings'}\n                  label={'Settings'}\n                  badgeProps={{\n                    content: 72,\n                    size: 14,\n                    color: 'red',\n                  }}\n                />,\n              ]}\n            />\n          )}\n        </State>\n      </Container>\n    );\n  })\n  .add('Landscape', () => {\n    return (\n      <Container scroll>\n        <Header title={'Bottom Navigation'} />\n\n        <State store={store} style={{ flex: 1 }}>\n          {state => (\n            <BottomNavigation\n              style={{ width: '100%', marginBottom: 40 }}\n              value={state.three}\n              handleChange={value => store.set({ three: value })}\n              backgroundColor={'#9C27B0'}\n              actionItems={[\n                { icon: 'home', label: 'Home' },\n                { icon: 'attach-money', label: 'Buy' },\n                { icon: 'favorite', label: 'Favorite' },\n                { icon: 'info', label: 'Info' },\n                <BottomNavigationItem\n                  key={4}\n                  icon={'settings'}\n                  label={'Settings'}\n                />,\n              ]}\n            />\n          )}\n        </State>\n        <State store={store} style={{ flex: 1 }}>\n          {state => (\n            <BottomNavigation\n              style={{ width: '100%', marginBottom: 40 }}\n              value={state.four}\n              handleChange={value => store.set({ four: value })}\n              backgroundColor={'#9C27B0'}\n              horizontalWhenLandscape\n              actionItems={[\n                { icon: 'home', label: 'Home' },\n                { icon: 'attach-money', label: 'Buy' },\n                { icon: 'favorite', label: 'Favorite' },\n                { icon: 'info', label: 'Info' },\n                <BottomNavigationItem\n                  key={4}\n                  icon={'settings'}\n                  label={'Settings'}\n                />,\n              ]}\n            />\n          )}\n        </State>\n        <State store={store} style={{ flex: 1 }}>\n          {state => (\n            <BottomNavigation\n              style={{ width: '100%' }}\n              backgroundColor={'black'}\n              value={state.five}\n              handleChange={value => store.set({ five: value })}\n              horizontalWhenLandscape\n              actionItems={[\n                <BottomNavigationItem key={1} icon={'home'} label={'Home'} />,\n                <BottomNavigationItem\n                  key={2}\n                  icon={'favorite'}\n                  label={'Favorite'}\n                  badgeProps={{\n                    size: 7,\n                    color: 'red',\n                    right: 1,\n                    top: 2,\n                  }}\n                />,\n                <BottomNavigationItem key={3} icon={'info'} label={'Info'} />,\n                <BottomNavigationItem\n                  key={4}\n                  icon={'settings'}\n                  label={'Settings'}\n                  badgeProps={{\n                    content: 72,\n                    size: 14,\n                    color: 'red',\n                  }}\n                />,\n              ]}\n            />\n          )}\n        </State>\n      </Container>\n    );\n  })\n  .add('Custom', () => (\n    <Container scroll>\n      <Header title={'Bottom Navigation'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <BottomNavigation\n            style={{\n              maxWidth: 672,\n              width: '100%',\n              marginBottom: 40,\n              borderRadius: 50,\n            }}\n            value={state.one}\n            handleChange={value => store.set({ one: value })}\n            showAllLabels\n            actionItems={[\n              <BottomNavigationItem\n                key={1}\n                icon={'home'}\n                label={'Home'}\n                rippleProps={{ rippleContainerBorderRadius: 50 }}\n              />,\n              <BottomNavigationItem\n                key={2}\n                icon={'favorite'}\n                label={'Favorite'}\n                rippleProps={{ rippleContainerBorderRadius: 50 }}\n              />,\n              <BottomNavigationItem\n                key={3}\n                icon={'info'}\n                label={'Settings'}\n                rippleProps={{ rippleContainerBorderRadius: 50 }}\n              />,\n              <BottomNavigationItem\n                key={4}\n                icon={'settings'}\n                label={'Settings'}\n                rippleProps={{ rippleContainerBorderRadius: 50 }}\n              />,\n            ]}\n          />\n        )}\n      </State>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/BottomNavigation/BottomNavigation.styles.js",
    "content": "import { StyleSheet } from 'react-native';\nimport shadow from '../../Utils/Shadow/shadow';\n\nconst styles = StyleSheet.create({\n  bottomNavigation: {\n    height: 56,\n    flexDirection: 'row',\n    justifyContent: 'center',\n\n    ...shadow(8),\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/BottomNavigation/BottomNavigation.test.js",
    "content": "import React from 'react';\nimport { BottomNavigation } from '../..';\n\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\n\ntest('BottomNavigation Renders', () => {\n  const tree = renderer.render(<BottomNavigation />);\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/BottomNavigation/BottomNavigationItem/BottomNavigationItem.js",
    "content": "import React, { Component, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { Animated } from 'react-native';\nimport withTheme from '../../../Theme/withTheme';\nimport Icon from '../../Icon/Icon';\nimport Ripple from '../../Ripple/Ripple';\nimport Badge from '../../Badge/Badge';\nimport { BottomNavContext } from '../BottomNavigation';\nimport styles from './BottomNavigationItem.styles';\n\nclass BottomNavigationItem extends Component {\n  static propTypes = {\n    children: PropTypes.node,\n    active: PropTypes.bool,\n    icon: PropTypes.string,\n    label: PropTypes.string,\n    showOneItem: PropTypes.bool,\n    onPress: PropTypes.func,\n    handleChange: PropTypes.func,\n    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n    showLabel: PropTypes.bool,\n    style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),\n    badgeProps: PropTypes.object,\n    rippleProps: PropTypes.object,\n    testID: PropTypes.string,\n    isLandscape: PropTypes.bool,\n    onItemLayout: PropTypes.func,\n    maxWidth: PropTypes.number,\n    horizontal: PropTypes.bool,\n  };\n\n  static defaultProps = {\n    showLabel: true,\n  };\n\n  state = {\n    scaleText: new Animated.Value(0),\n  };\n\n  componentDidMount() {\n    const { showOneItem, showLabel, active } = this.props;\n    if (showOneItem || active || showLabel) {\n      this._animateActive(true);\n    }\n  }\n\n  componentDidUpdate(prevProps) {\n    if (!prevProps.active && this.props.active) {\n      this._animateActive(true);\n    } else if (prevProps.active && !this.props.active) {\n      this._animateActive(false);\n    }\n  }\n\n  _animateActive(show) {\n    const { scaleText } = this.state;\n    let scale = show ? 12 : 0;\n\n    if (this.props.showLabel || this.props.showOneItem) {\n      scale = show ? 12 : 10;\n    }\n\n    Animated.parallel([\n      Animated.timing(scaleText, {\n        toValue: scale,\n        duration: 150,\n      }),\n    ]).start();\n  }\n\n  _renderText(containerColor) {\n    const {\n      isLandscape,\n      horizontal,\n      showOneItem,\n      showLabel,\n      active,\n      icon,\n    } = this.props;\n    const isHorizontal = isLandscape && horizontal;\n    const showOneItemsWithoutDefault = !showOneItem;\n    const showActiveLabel = showOneItem && active;\n\n    let color = 'white';\n    if (containerColor == 'white' || containerColor == '#fff')\n      color = '#DADADA';\n\n    const { label } = this.props;\n    let activeLabel = label;\n\n    if (!showOneItemsWithoutDefault && !showActiveLabel) {\n      activeLabel = '';\n    }\n\n    return (\n      <Animated.Text\n        style={{\n          color: color,\n          fontSize: this.state.scaleText,\n          marginLeft: isHorizontal && showLabel && icon ? 12 : 0,\n        }}>\n        {activeLabel}\n      </Animated.Text>\n    );\n  }\n\n  _handleIconColor(containerColor) {\n    if (containerColor == 'white' || containerColor == '#fff') {\n      return '#DADADA';\n    } else {\n      return 'white';\n    }\n  }\n\n  onChange = () => {\n    const { handleChange, onPress, value } = this.props;\n\n    if (handleChange) handleChange(value);\n    if (onPress) onPress();\n  };\n\n  _renderWrapper(context) {\n    const {\n      active,\n      children,\n      style,\n      testID,\n      rippleProps,\n      isLandscape,\n      maxWidth,\n      horizontal,\n      showOneItem,\n    } = this.props;\n\n    const actualMaxWidth = Math.min(maxWidth, 192);\n    let opacity = showOneItem ? 1 : 0.6;\n\n    return (\n      <Ripple\n        style={[\n          styles.bottomNavigationItem,\n          { opacity: active ? 1 : opacity },\n          isLandscape &&\n            !horizontal && [\n              styles.bottomNavigationItemLandscape,\n              { maxWidth: actualMaxWidth },\n            ],\n          isLandscape &&\n            horizontal && {\n              flexDirection: 'row',\n              paddingHorizontal: 12,\n            },\n          style,\n        ]}\n        onPress={this.onChange}\n        testID={testID}\n        {...rippleProps}>\n        {children ? children : this._renderContent(context)}\n      </Ripple>\n    );\n  }\n\n  _renderContent(context) {\n    const { label, badgeProps, icon } = this.props;\n    let iconImplemented = this._renderIcon(context);\n\n    if (badgeProps) {\n      iconImplemented = (\n        <Badge\n          containerStyle={{\n            alignItems: 'center',\n            justifyContent: 'center',\n            alignSelf: 'center',\n            display: 'flex',\n          }}\n          style={[\n            {\n              right: badgeProps.right ? badgeProps.right : -4,\n              top: badgeProps.top ? badgeProps.top : -4,\n            },\n          ]}\n          {...badgeProps}>\n          {this._renderIcon(context)}\n        </Badge>\n      );\n    }\n    return (\n      <Fragment>\n        {icon ? iconImplemented : null}\n        {label ? this._renderText(context.backgroundColor) : null}\n      </Fragment>\n    );\n  }\n\n  _renderIcon(context) {\n    const { icon } = this.props;\n    return (\n      <Icon\n        name={icon}\n        size={24}\n        color={this._handleIconColor(context.backgroundColor)}\n      />\n    );\n  }\n\n  render() {\n    return (\n      <BottomNavContext.Consumer>\n        {context => this._renderWrapper(context)}\n      </BottomNavContext.Consumer>\n    );\n  }\n}\n\nexport default withTheme(BottomNavigationItem);\n"
  },
  {
    "path": "src/Components/BottomNavigation/BottomNavigationItem/BottomNavigationItem.stories.js",
    "content": "import React from 'react';\nimport { Image } from 'react-native';\n\nimport { storiesOf } from '../../../storybook/helpers/storiesOf';\n\nimport {\n  BottomNavigation,\n  BottomNavigationItem,\n  Icon,\n  Avatar,\n} from '../../../';\nimport Header from '../../../storybook/components/Header';\nimport Container from '../../../storybook/components/Container';\nimport { State, Store } from '@sambego/storybook-state';\nconst store = new Store({\n  one: 0,\n  two: 0,\n  three: 0,\n  four: 0,\n  five: 0,\n});\n\nexport default storiesOf(\n  'Components|Bottom Navigation/Bottom Navigation Item',\n  module,\n)\n  .addParameters({ jest: ['BottomNavigationItem'] })\n  .add('as objects', () => (\n    <Container>\n      <Header title={'Bottom Navigation Item'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <BottomNavigation\n            style={{ maxWidth: 672, width: '100%', marginBottom: 40 }}\n            value={state.one}\n            handleChange={value => store.set({ one: value })}\n            showLabels\n            actionItems={[\n              { label: 'Buy' },\n              { label: 'Sell' },\n              { label: 'Settings' },\n            ]}\n          />\n        )}\n      </State>\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <BottomNavigation\n            style={{ maxWidth: 672, width: '100%', marginBottom: 40 }}\n            value={state.two}\n            handleChange={value => store.set({ two: value })}\n            showLabels\n            backgroundColor={'#E91E63'}\n            actionItems={[\n              { icon: 'home' },\n              { icon: 'favorite' },\n              { icon: 'info' },\n              { icon: 'settings' },\n            ]}\n          />\n        )}\n      </State>\n\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <BottomNavigation\n            style={{ maxWidth: 672, width: '100%', marginBottom: 40 }}\n            value={state.four}\n            showLabels\n            handleChange={value => store.set({ four: value })}\n            backgroundColor={'#9C27B0'}\n            actionItems={[\n              { icon: 'home', label: 'Home' },\n              { icon: 'attach-money', label: 'Buy' },\n              { icon: 'favorite', label: 'Favorite' },\n              { icon: 'info', label: 'Info' },\n              { icon: 'settings', label: 'Settings' },\n            ]}\n          />\n        )}\n      </State>\n    </Container>\n  ))\n  .add('as components', () => (\n    <Container>\n      <Header title={'Bottom Navigation'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <BottomNavigation\n            style={{ maxWidth: 672, width: '100%', marginBottom: 40 }}\n            value={state.one}\n            handleChange={value => store.set({ one: value })}\n            showLabels\n            actionItems={[\n              <BottomNavigationItem key={1} label={'Album'} />,\n              <BottomNavigationItem key={2} label={'Place'} />,\n              <BottomNavigationItem key={3} label={'News'} />,\n            ]}\n          />\n        )}\n      </State>\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <BottomNavigation\n            style={{ maxWidth: 672, width: '100%', marginBottom: 40 }}\n            value={state.two}\n            handleChange={value => store.set({ two: value })}\n            showLabels\n            backgroundColor={'#E91E63'}\n            actionItems={[\n              <BottomNavigationItem key={1} icon={'home'} />,\n              <BottomNavigationItem key={2} icon={'album'} />,\n              <BottomNavigationItem key={3} icon={'place'} />,\n              <BottomNavigationItem key={4} icon={'assignment'} />,\n            ]}\n          />\n        )}\n      </State>\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <BottomNavigation\n            style={{ maxWidth: 672, width: '100%', marginBottom: 40 }}\n            value={state.three}\n            handleChange={value => store.set({ three: value })}\n            backgroundColor={'#009688'}\n            actionItems={[\n              <BottomNavigationItem key={1} icon={'home'} label={'Home'} />,\n              <BottomNavigationItem key={2} icon={'album'} label={'Music'} />,\n              <BottomNavigationItem key={3} icon={'place'} label={'Place'} />,\n              <BottomNavigationItem\n                key={4}\n                icon={'assignment'}\n                label={'News'}\n              />,\n              <BottomNavigationItem\n                key={4}\n                icon={'settings'}\n                label={'Settings'}\n              />,\n            ]}\n          />\n        )}\n      </State>\n    </Container>\n  ))\n\n  .add('with badge', () => (\n    <Container>\n      <Header title={'Bottom Navigation'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <BottomNavigation\n            style={{ maxWidth: 672, width: '100%', marginBottom: 40 }}\n            value={state.one}\n            handleChange={value => store.set({ one: value })}\n            showLabels\n            actionItems={[\n              <BottomNavigationItem key={1} label={'Album'} />,\n              <BottomNavigationItem key={2} label={'Place'} />,\n              <BottomNavigationItem key={3} label={'News'} />,\n            ]}\n          />\n        )}\n      </State>\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <BottomNavigation\n            style={{ maxWidth: 672, width: '100%', marginBottom: 40 }}\n            value={state.two}\n            handleChange={value => store.set({ two: value })}\n            showLabels\n            backgroundColor={'#E91E63'}\n            actionItems={[\n              <BottomNavigationItem key={1} icon={'home'} />,\n              <BottomNavigationItem\n                key={2}\n                icon={'album'}\n                badgeProps={{\n                  content: 72,\n                  size: 14,\n                  color: 'blue',\n                }}\n              />,\n              <BottomNavigationItem key={3} icon={'place'} />,\n              <BottomNavigationItem\n                key={4}\n                icon={'assignment'}\n                badgeProps={{\n                  size: 7,\n                  color: 'blue',\n                  right: 1,\n                  top: 2,\n                }}\n              />,\n            ]}\n          />\n        )}\n      </State>\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <BottomNavigation\n            style={{ maxWidth: 672, width: '100%', marginBottom: 40 }}\n            value={state.three}\n            handleChange={value => store.set({ three: value })}\n            backgroundColor={'#009688'}\n            actionItems={[\n              <BottomNavigationItem key={1} icon={'home'} label={'Home'} />,\n              <BottomNavigationItem key={2} icon={'album'} label={'Music'} />,\n              <BottomNavigationItem\n                key={3}\n                icon={'place'}\n                label={'Place'}\n                badgeProps={{\n                  content: 2,\n                  size: 14,\n                  color: 'red',\n                }}\n              />,\n              <BottomNavigationItem\n                key={4}\n                icon={'assignment'}\n                label={'News'}\n                badgeProps={{\n                  content: 99,\n                  size: 14,\n                  color: 'red',\n                }}\n              />,\n              <BottomNavigationItem\n                key={4}\n                icon={'settings'}\n                label={'Settings'}\n                badgeProps={{\n                  size: 10,\n                  color: 'red',\n                }}\n              />,\n            ]}\n          />\n        )}\n      </State>\n    </Container>\n  ))\n  .add('custom', () => (\n    <Container>\n      <Header title={'Bottom Navigation'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <BottomNavigation\n            style={{ maxWidth: 672, width: '100%', marginBottom: 40 }}\n            value={state.one}\n            handleChange={value => store.set({ one: value })}\n            showLabels\n            actionItems={[\n              <BottomNavigationItem\n                key={1}\n                icon={'home'}\n                label={'Home'}\n                style={{ backgroundColor: '#3F51B5' }}\n              />,\n              <BottomNavigationItem\n                key={2}\n                icon={'favorite'}\n                label={'Favorite'}\n                style={{ backgroundColor: '#009688' }}\n              />,\n              <BottomNavigationItem\n                key={3}\n                icon={'info'}\n                label={'Info'}\n                style={{ backgroundColor: '#2196F3' }}\n              />,\n              <BottomNavigationItem\n                key={4}\n                icon={'settings'}\n                label={'Settings'}\n                style={{ backgroundColor: '#F44336' }}\n              />,\n            ]}\n          />\n        )}\n      </State>\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <BottomNavigation\n            style={{\n              maxWidth: 672,\n              width: '100%',\n              height: 42,\n              borderTopRightRadius: 6,\n              borderTopLeftRadius: 6,\n            }}\n            value={state.two}\n            handleChange={value => store.set({ two: value })}\n            backgroundColor={'black'}\n            actionItems={[\n              <BottomNavigationItem key={1} style={{ height: 42 }}>\n                <Icon name=\"home\" size={30} color={'white'} />\n              </BottomNavigationItem>,\n              <BottomNavigationItem key={2} style={{ height: 42 }}>\n                <Icon name=\"favorite\" size={30} color={'white'} />\n              </BottomNavigationItem>,\n              <BottomNavigationItem key={3} style={{ height: 42 }}>\n                <Icon name=\"info\" size={30} color={'white'} />\n              </BottomNavigationItem>,\n\n              <BottomNavigationItem\n                key={4}\n                style={{ height: 42, flexDirection: 'row' }}>\n                <Avatar\n                  type=\"image\"\n                  image={\n                    <Image\n                      source={{\n                        uri:\n                          'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4',\n                      }}\n                    />\n                  }\n                  size={30}\n                />\n                <Icon\n                  name=\"expand-more\"\n                  size={20}\n                  color={'white'}\n                  style={{ alignSelf: 'flex-end', marginBottom: 4 }}\n                />\n              </BottomNavigationItem>,\n            ]}\n          />\n        )}\n      </State>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/BottomNavigation/BottomNavigationItem/BottomNavigationItem.styles.js",
    "content": "import { StyleSheet } from 'react-native';\nconst styles = StyleSheet.create({\n  bottomNavigationItem: {\n    maxWidth: 192,\n    minWidth: 56,\n    height: 56,\n    paddingTop: 8,\n    paddingBottom: 12,\n    flexDirection: 'column',\n    justifyContent: 'center',\n    alignItems: 'center',\n    flex: 1,\n    position: 'relative',\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/BottomNavigation/BottomNavigationItem/BottomNavigationItem.test.js",
    "content": "import React from 'react';\nimport BottomNavigationItem from './BottomNavigationItem';\n\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\n\ntest('BottomNavigationItem Renders', () => {\n  const tree = renderer.render(<BottomNavigationItem />);\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/BottomNavigation/BottomNavigationItem/__snapshots__/BottomNavigationItem.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`BottomNavigationItem Renders 1`] = `\n<Context.Consumer>\n  [Function]\n</Context.Consumer>\n`;\n"
  },
  {
    "path": "src/Components/BottomNavigation/BottomNavigationItem/index.js",
    "content": "export { default } from './BottomNavigationItem';\n"
  },
  {
    "path": "src/Components/BottomNavigation/__snapshots__/BottomNavigation.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`BottomNavigation Renders 1`] = `\n<Context.Consumer>\n  [Function]\n</Context.Consumer>\n`;\n"
  },
  {
    "path": "src/Components/BottomNavigation/index.js",
    "content": "export { default } from './BottomNavigation';\nexport { default as BottomNavigationItem } from './BottomNavigationItem';\n"
  },
  {
    "path": "src/Components/Button/Button.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport withTheme from '../../Theme/withTheme';\nimport TextButton from './TextButton/TextButton.js';\nimport OutlinedButton from './OutlinedButton/OutlinedButton.js';\nimport ContainedButton from './ContainedButton/ContainedButton.js';\nimport FlatButton from './FlatButton/FlatButton.js';\n\nclass Button extends Component {\n  static propTypes = {\n    type: PropTypes.string,\n  };\n\n  render() {\n    const { type, ...rest } = this.props;\n\n    if (type == 'outlined') {\n      return <OutlinedButton {...rest} />;\n    } else if (type == 'contained') {\n      return <ContainedButton {...rest} />;\n    } else if (type === 'flat') {\n      return <FlatButton {...rest} />;\n    } else {\n      return <TextButton {...rest} />;\n    }\n  }\n}\n\nexport default withTheme(Button);\n"
  },
  {
    "path": "src/Components/Button/Button.stories.js",
    "content": "import React from 'react';\nimport { View, Text } from 'react-native';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\n\nimport { Button, Icon } from '../../';\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\n\nexport default storiesOf('Components|Buttons', module)\n  .addParameters({ jest: ['Button'] })\n\n  .add('Custom', () => (\n    <Container>\n      <Header title={'Custom Button'} />\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n        }}>\n        <Button\n          style={{\n            height: 100,\n            width: 100,\n            flexDirection: 'column',\n            marginRight: 24,\n          }}\n          type={'outlined'}\n          borderSize={4}\n          radius={10}>\n          <Icon name=\"cloud-upload\" size={34} />\n          <Text style={{ fontWeight: '600', textAlign: 'center' }}>\n            Upload files\n          </Text>\n        </Button>\n      </View>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/Button/Button.styles.js",
    "content": ""
  },
  {
    "path": "src/Components/Button/Button.test.js",
    "content": "import React from 'react';\nimport Button from './Button';\n\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\n\ntest('Button Renders', () => {\n  const tree = renderer.render(<Button />);\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Button/ButtonBase/ButtonBase.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Text, ActivityIndicator } from 'react-native';\nimport withTheme from '../../../Theme/withTheme';\n\nimport Ripple from '../../Ripple/Ripple';\n\nclass ButtonBase extends Component {\n  static propTypes = {\n    theme: PropTypes.object,\n    style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),\n    children: PropTypes.node,\n\n    type: PropTypes.string,\n    onPress: PropTypes.func,\n\n    loading: PropTypes.bool,\n    loader: PropTypes.node,\n    hideLabel: PropTypes.bool,\n\n    color: PropTypes.string,\n    radius: PropTypes.number,\n\n    fullWidth: PropTypes.bool,\n    density: PropTypes.number,\n\n    icon: PropTypes.node,\n    iconPosition: PropTypes.string,\n    iconSize: PropTypes.number,\n\n    disabled: PropTypes.bool,\n    disableRipple: PropTypes.bool,\n\n    text: PropTypes.string,\n    textStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    useInputCasing: PropTypes.bool,\n\n    typeTextColor: PropTypes.string,\n    typeButtonStyles: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),\n    typeRippleColor: PropTypes.string,\n    onPressIn: PropTypes.func,\n    onPressOut: PropTypes.func,\n    testID: PropTypes.string,\n  };\n\n  static defaultProps = {\n    iconPosition: 'left',\n    density: 0,\n    useInputCasing: false,\n  };\n\n  _renderText() {\n    const {\n      text,\n      textStyle,\n      typeTextColor,\n      theme,\n      hideLabel,\n      useInputCasing,\n    } = this.props;\n\n    let modifiedText = text || ' ';\n    return (\n      <Text\n        numberOfLines={1}\n        style={[\n          theme.buttonText,\n          {\n            color: hideLabel ? 'transparent' : typeTextColor,\n            fontSize: theme.buttonText.fontSize,\n            letterSpacing: theme.buttonText.letterSpacing,\n          },\n          textStyle,\n        ]}>\n        {useInputCasing ? modifiedText : modifiedText.toUpperCase()}\n      </Text>\n    );\n  }\n  _renderLoader() {\n    const { loading, typeTextColor, hideLabel } = this.props;\n\n    if (!loading) return null;\n    return (\n      <ActivityIndicator\n        size=\"small\"\n        color={typeTextColor}\n        style={{\n          width: 18,\n          flexDirection: 'row',\n          alignItems: 'center',\n          alignSelf: 'center',\n          justifyContent: 'center',\n          marginRight: hideLabel ? 0 : 8,\n        }}\n      />\n    );\n  }\n  _renderIcon() {\n    const { icon, iconPosition, iconSize, typeTextColor, loading } = this.props;\n\n    if (loading) {\n      return this._renderLoader();\n    }\n    if (icon) {\n      return React.cloneElement(icon, {\n        style: {\n          marginRight: iconPosition == 'left' ? 12 : 0,\n          marginLeft: iconPosition == 'right' ? 12 : 0,\n        },\n        size: iconSize || 18,\n        color: typeTextColor ? typeTextColor : 'white',\n      });\n    }\n    return null;\n  }\n\n  getDensityHeight() {\n    const { theme, density } = this.props;\n    let densityHeight = theme.button.height;\n\n    if (density <= -1) {\n      densityHeight = Math.max(24, densityHeight + 4 * density);\n    }\n    return densityHeight;\n  }\n\n  render() {\n    const {\n      disabled,\n      disableRipple,\n      loading,\n      children,\n      onPress,\n      theme,\n      typeButtonStyles,\n      fullWidth,\n      typeRippleColor,\n      style,\n      onPressIn,\n      onPressOut,\n      hideLabel,\n      radius,\n      icon,\n      iconPosition,\n      testID,\n      ...props\n    } = this.props;\n\n    let densityHeight = this.getDensityHeight();\n    return (\n      <Ripple\n        onPress={onPress}\n        disabled={disabled || disableRipple || loading}\n        rippleColor={typeRippleColor}\n        rippleContainerBorderRadius={\n          radius ? radius : theme.button.borderRadius\n        }\n        style={[\n          theme.button,\n          {\n            alignItems: 'center',\n            justifyContent: 'center',\n            flexDirection: hideLabel ? 'column' : 'row',\n            padding: hideLabel ? 18 : 0,\n            width: fullWidth ? '100%' : 'auto',\n            minWidth: 64,\n            height: densityHeight,\n            minHeight: densityHeight,\n            paddingLeft: iconPosition === 'left' && icon ? 12 : 16,\n            paddingRight: iconPosition === 'right' && icon ? 12 : 16,\n            borderRadius: radius ? radius : theme.button.borderRadius,\n          },\n          typeButtonStyles,\n          style,\n        ]}\n        testID={testID}\n        {...props}\n        onPressIn={onPressIn}\n        onPressOut={onPressOut}>\n        {iconPosition === 'left' ? this._renderIcon() : null}\n        {children ? children : this._renderText()}\n        {iconPosition === 'right' ? this._renderIcon() : null}\n      </Ripple>\n    );\n  }\n}\n\nexport default withTheme(ButtonBase);\n"
  },
  {
    "path": "src/Components/Button/ContainedButton/ContainedButton.js",
    "content": "import React, { Component } from 'react';\nimport { Animated, Platform } from 'react-native';\n\nimport PropTypes from 'prop-types';\nimport withTheme from '../../../Theme/withTheme';\n\nimport ButtonBase from '../ButtonBase/ButtonBase';\nimport { Hoverable } from '../../../';\nimport color from 'color';\n\nclass ContainedButton extends Component {\n  static propTypes = {\n    disabled: PropTypes.bool,\n    color: PropTypes.string,\n    textColor: PropTypes.string,\n    rippleColor: PropTypes.string,\n    theme: PropTypes.object,\n    onPressIn: PropTypes.func,\n    onPressOut: PropTypes.func,\n    containerStyle: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),\n    radius: PropTypes.number,\n    fullWidth: PropTypes.bool,\n  };\n  state = {\n    stateBackgroundColor: null,\n    elevation: new Animated.Value(8),\n    animatedShadowRadius: new Animated.Value(4.65),\n    animatedShadowOpacity: new Animated.Value(0.27),\n    animatedShadowHeight: new Animated.Value(2),\n    animatedShadowWidth: new Animated.Value(-1.5),\n  };\n\n  animateShadow(active) {\n    const animationDuration = active ? 200 : 50;\n    if (Platform.OS === 'android') {\n      const elevation = active ? 8 : 2;\n      Animated.timing(this.state.elevation, {\n        useNativeDriver: true,\n        toValue: elevation,\n        duration: animationDuration,\n      });\n    } else {\n      const {\n        animatedShadowRadius,\n        animatedShadowOpacity,\n        animatedShadowHeight,\n        animatedShadowWidth,\n      } = this.state;\n\n      const shadowRadius = active ? 6.65 : 4.65;\n      const shadowShadowOpacity = active ? 0.27 : 0.35;\n      const shadowHeight = active ? 4 : 2;\n      const shadowWidth = active ? -1.5 : -0.5;\n\n      Animated.parallel([\n        Animated.timing(animatedShadowRadius, {\n          toValue: shadowRadius,\n          duration: animationDuration,\n          useNativeDriver: true,\n        }),\n        Animated.timing(animatedShadowOpacity, {\n          toValue: shadowShadowOpacity,\n          duration: animationDuration,\n          useNativeDriver: true,\n        }),\n        Animated.timing(animatedShadowHeight, {\n          toValue: shadowHeight,\n          duration: animationDuration,\n        }),\n        Animated.timing(animatedShadowWidth, {\n          toValue: shadowWidth,\n          duration: animationDuration,\n        }),\n      ]).start();\n    }\n  }\n\n  getShadowStyle() {\n    const { theme } = this.props;\n    const {\n      animatedShadowRadius,\n      animatedShadowOpacity,\n      animatedShadowHeight,\n      animatedShadowWidth,\n      elevation,\n    } = this.state;\n\n    const style = {\n      shadowColor: '#000',\n      shadowOffset: {\n        width: animatedShadowWidth,\n        height: animatedShadowHeight,\n      },\n      shadowOpacity: animatedShadowOpacity,\n      shadowRadius: animatedShadowRadius,\n      elevation: elevation,\n      backgroundColor: 'transparent',\n      borderRadius: theme.button.borderRadius,\n    };\n    return style;\n  }\n\n  getButtonStyles() {\n    const { theme } = this.props;\n\n    const buttonStyles = {\n      ...theme.containedButton,\n      backgroundColor: this.getBackgroundColor(),\n    };\n\n    return buttonStyles;\n  }\n\n  getBackgroundColor() {\n    const { color: userColor, disabled, theme } = this.props;\n    const { stateBackgroundColor } = this.state;\n\n    let backgroundColor = userColor ? userColor : theme.primary.main;\n\n    backgroundColor = disabled ? 'rgba(0, 0, 0, 0.12)' : backgroundColor;\n\n    return stateBackgroundColor ? stateBackgroundColor : backgroundColor;\n  }\n\n  getRippleColor() {\n    const { rippleColor } = this.props;\n    const bgColor = this.getBackgroundColor();\n\n    let implementedRippleColor = this.getOverlayColor(bgColor, 0.12, 0.32);\n\n    return rippleColor ? rippleColor : implementedRippleColor;\n  }\n\n  getTextColor() {\n    const { textColor, disabled } = this.props;\n\n    let implementedTextColor = disabled ? 'rgba(0, 0, 0, 0.26)' : 'white';\n    if (textColor) implementedTextColor = textColor;\n\n    return implementedTextColor;\n  }\n\n  getOverlayColor(normalColor, lightOverlay, darkOverlay) {\n    let modifiedColor;\n\n    if (color(normalColor).isDark()) {\n      modifiedColor = color(normalColor)\n        .lighten(darkOverlay)\n        .rgb()\n        .string();\n    } else {\n      modifiedColor = color(normalColor)\n        .darken(lightOverlay)\n        .rgb()\n        .string();\n    }\n    return modifiedColor;\n  }\n\n  handleHover(toggle) {\n    const bgColor = this.getBackgroundColor();\n    let implementedColor = toggle\n      ? this.getOverlayColor(bgColor, 0.08, 0.08)\n      : null;\n\n    this.setState({ stateBackgroundColor: implementedColor });\n  }\n\n  handleOnPressIn = (...args) => {\n    const { onPressIn } = this.props;\n    this.animateShadow(true);\n\n    if (onPressIn) onPressIn(args);\n  };\n  handleOnPressOut = (...args) => {\n    const { onPressOut } = this.props;\n\n    this.animateShadow(false);\n\n    if (onPressOut) onPressOut(args);\n  };\n\n  render() {\n    const {\n      disabled,\n      radius,\n      theme,\n      containerStyle,\n      fullWidth,\n      ...props\n    } = this.props;\n\n    return (\n      <Hoverable\n        onHoverIn={() => this.handleHover(true)}\n        onHoverOut={() => this.handleHover(false)}\n        style={[containerStyle]}>\n        {() => (\n          <Animated.View\n            style={[\n              disabled ? {} : this.getShadowStyle(),\n              {\n                alignSelf: fullWidth ? 'auto' : 'flex-start',\n                borderRadius: radius ? radius : theme.button.borderRadius,\n              },\n              containerStyle,\n            ]}>\n            <ButtonBase\n              typeRippleColor={this.getRippleColor()}\n              typeTextColor={this.getTextColor()}\n              typeButtonStyles={this.getButtonStyles()}\n              onPressIn={this.handleOnPressIn}\n              onPressOut={this.handleOnPressOut}\n              disabled={disabled}\n              radius={radius}\n              theme={theme}\n              fullWidth={fullWidth}\n              {...props}\n            />\n          </Animated.View>\n        )}\n      </Hoverable>\n    );\n  }\n}\n\nexport default withTheme(ContainedButton);\n"
  },
  {
    "path": "src/Components/Button/ContainedButton/ContainedButton.stories.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { storiesOf } from '../../../storybook/helpers/storiesOf';\n\nimport { Button, Icon, BodyText } from '../../..';\nimport Header from '../../../storybook/components/Header';\nimport Container from '../../../storybook/components/Container';\n\nexport default storiesOf('Components|Buttons/Contained Button', module)\n  .addParameters({ jest: ['Button'] })\n  .add('Simple', () => (\n    <Container>\n      <Header title={'Simple Contained Button'} />\n\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 20,\n        }}>\n        <Button text={'Text'} type=\"contained\" />\n        <Button text={'Button'} color={'#E91E63'} type=\"contained\" />\n        <Button text={'Buy'} color={'#FF5722'} type=\"contained\" />\n        <Button text={'Click Here'} color={'#673AB7'} type=\"contained\" />\n        <Button text={'Do not click'} color={'#009688'} type=\"contained\" />\n      </View>\n    </Container>\n  ))\n  .add('with left icon', () => (\n    <Container>\n      <Header title={'Left Icon Contained Button'} />\n\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 20,\n        }}>\n        <Button text={'Home'} icon={<Icon name=\"home\" />} type=\"contained\" />\n        <Button\n          text={'Favorite'}\n          color={'#E91E63'}\n          borderSize={2}\n          type=\"contained\"\n          icon={<Icon name=\"favorite\" />}\n        />\n        <Button\n          text={'Settings'}\n          icon={<Icon name=\"settings\" />}\n          color={'#FF5722'}\n          radius={20}\n          type=\"contained\"\n        />\n        <Button\n          text={'Buy'}\n          color={'#673AB7'}\n          density={-2}\n          icon={<Icon name=\"attach-money\" />}\n          type=\"contained\"\n        />\n        <Button\n          text={'Archive'}\n          color={'#009688'}\n          icon={<Icon name=\"archive\" />}\n          type=\"contained\"\n        />\n      </View>\n    </Container>\n  ))\n  .add('with right icon', () => (\n    <Container>\n      <Header title={'Right Icon Contained Button'} />\n\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 20,\n        }}>\n        <Button\n          text={'Home'}\n          icon={<Icon name=\"home\" />}\n          type=\"contained\"\n          iconPosition={'right'}\n        />\n        <Button\n          text={'Favorite'}\n          color={'#E91E63'}\n          borderSize={2}\n          type=\"contained\"\n          icon={<Icon name=\"favorite\" />}\n          iconPosition={'right'}\n        />\n        <Button\n          text={'Settings'}\n          icon={<Icon name=\"settings\" />}\n          color={'#FF5722'}\n          radius={20}\n          type=\"contained\"\n          iconPosition={'right'}\n        />\n        <Button\n          text={'Buy'}\n          color={'#673AB7'}\n          density={-2}\n          icon={<Icon name=\"attach-money\" />}\n          type=\"contained\"\n          iconPosition={'right'}\n        />\n        <Button\n          text={'Archive'}\n          color={'#009688'}\n          icon={<Icon name=\"archive\" />}\n          type=\"contained\"\n          iconPosition={'right'}\n        />\n      </View>\n    </Container>\n  ))\n  .add('radius', () => (\n    <Container>\n      <Header title={'Radius Contained Button'} />\n\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 20,\n        }}>\n        <Button text={'Home'} radius={20} type=\"contained\" />\n        <Button\n          text={'Favorite'}\n          color={'#E91E63'}\n          borderSize={2}\n          radius={40}\n          icon={<Icon name=\"favorite\" />}\n          type=\"contained\"\n        />\n        <Button\n          text={'Settings'}\n          color={'#FF5722'}\n          radius={60}\n          type=\"contained\"\n        />\n        <Button\n          text={'Buy'}\n          tcolor={'#673AB7'}\n          density={-2}\n          radius={0}\n          icon={<Icon name=\"attach-money\" />}\n          type=\"contained\"\n        />\n        <Button\n          text={'Archive'}\n          color={'#009688'}\n          radius={0}\n          icon={<Icon name=\"archive\" />}\n          type=\"contained\"\n        />\n      </View>\n    </Container>\n  ))\n  .add('density', () => (\n    <Container>\n      <Header title={'Density Contained Button'} />\n\n      <BodyText text={'Density -1: 32px'} style={{ marginBottom: 15 }} />\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 30,\n        }}>\n        <Button text={'Home'} density={-1} type=\"contained\" />\n        <Button\n          text={'Favorite'}\n          color={'#E91E63'}\n          borderSize={2}\n          density={-1}\n          type=\"contained\"\n          icon={<Icon name=\"favorite\" />}\n        />\n        <Button\n          text={'Settings'}\n          color={'#FF5722'}\n          density={-1}\n          radius={60}\n          type=\"contained\"\n        />\n        <Button\n          text={'Buy'}\n          tcolor={'#673AB7'}\n          density={-1}\n          radius={0}\n          type=\"contained\"\n          icon={<Icon name=\"attach-money\" />}\n        />\n        <Button\n          text={'Archive'}\n          color={'#009688'}\n          density={-1}\n          icon={<Icon name=\"archive\" />}\n          type=\"contained\"\n        />\n      </View>\n\n      <BodyText text={'Density -2: 28px'} style={{ marginBottom: 15 }} />\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 30,\n        }}>\n        <Button text={'Home'} density={-2} type=\"contained\" />\n        <Button\n          text={'Favorite'}\n          color={'#E91E63'}\n          borderSize={2}\n          density={-2}\n          type=\"contained\"\n          icon={<Icon name=\"favorite\" />}\n        />\n        <Button\n          text={'Settings'}\n          color={'#FF5722'}\n          density={-2}\n          radius={60}\n          type=\"contained\"\n        />\n        <Button\n          text={'Buy'}\n          tcolor={'#673AB7'}\n          density={-2}\n          radius={0}\n          type=\"contained\"\n          icon={<Icon name=\"attach-money\" />}\n        />\n        <Button\n          text={'Archive'}\n          color={'#009688'}\n          density={-2}\n          icon={<Icon name=\"archive\" />}\n          type=\"contained\"\n        />\n      </View>\n\n      <BodyText text={'Density -3: 24px'} style={{ marginBottom: 15 }} />\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 30,\n        }}>\n        <Button text={'Home'} density={-3} type=\"contained\" />\n        <Button\n          text={'Favorite'}\n          color={'#E91E63'}\n          borderSize={2}\n          density={-3}\n          type=\"contained\"\n          icon={<Icon name=\"favorite\" />}\n        />\n        <Button\n          text={'Settings'}\n          color={'#FF5722'}\n          density={-3}\n          radius={60}\n          type=\"contained\"\n        />\n        <Button\n          text={'Buy'}\n          tcolor={'#673AB7'}\n          density={-3}\n          radius={0}\n          type=\"contained\"\n          icon={<Icon name=\"attach-money\" />}\n        />\n        <Button\n          text={'Archive'}\n          color={'#009688'}\n          density={-3}\n          icon={<Icon name=\"archive\" />}\n          type=\"contained\"\n        />\n      </View>\n    </Container>\n  ))\n  .add('loading', () => (\n    <Container>\n      <Header title={'Loading Contained Button'} />\n\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 20,\n        }}>\n        <Button text={'Home'} loading hideLabel type=\"contained\" />\n        <Button\n          text={'Favorite'}\n          color={'#E91E63'}\n          borderSize={2}\n          loading\n          hideLabel\n          type=\"contained\"\n          icon={<Icon name=\"favorite\" />}\n        />\n        <Button\n          text={'Settings'}\n          color={'#FF5722'}\n          loading\n          hideLabel\n          radius={60}\n          type=\"contained\"\n        />\n        <Button\n          text={'Buy'}\n          tcolor={'#673AB7'}\n          density={-2}\n          radius={0}\n          loading\n          hideLabel\n          type=\"contained\"\n        />\n        <Button\n          text={'Archive'}\n          color={'#009688'}\n          loading\n          hideLabel\n          type=\"contained\"\n          icon={<Icon name=\"archive\" />}\n        />\n      </View>\n    </Container>\n  ))\n  .add('disabled', () => (\n    <Container>\n      <Header title={'Disabled Contained Button'} />\n\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 20,\n        }}>\n        <Button text={'Home'} disabled type=\"contained\" />\n        <Button\n          color={'#E91E63'}\n          borderSize={2}\n          loading\n          disabled\n          type=\"contained\"\n        />\n        <Button\n          text={'Settings'}\n          color={'#FF5722'}\n          type=\"contained\"\n          disabled\n          radius={60}\n        />\n        <Button\n          text={'Buy'}\n          tcolor={'#673AB7'}\n          density={-2}\n          radius={0}\n          disabled\n          type=\"contained\"\n          icon={<Icon name=\"attach-money\" />}\n        />\n        <Button\n          text={'Archive'}\n          color={'#009688'}\n          disabled\n          type=\"contained\"\n          icon={<Icon name=\"archive\" />}\n        />\n      </View>\n    </Container>\n  ))\n  .add('full width', () => (\n    <Container>\n      <Header title={'Full Width Contained Button'} />\n      <Button\n        fullWidth\n        text={'Contained'}\n        type=\"contained\"\n        containerStyle={{ marginBottom: 8 }}\n      />\n\n      <Button\n        fullWidth\n        text={'Radius'}\n        color={'#009688'}\n        type=\"contained\"\n        containerStyle={{ marginBottom: 8 }}\n        radius={40}\n      />\n      <Button\n        fullWidth\n        text={'Icon'}\n        color={'#E91E63'}\n        type=\"contained\"\n        containerStyle={{ marginBottom: 8 }}\n        icon={<Icon name=\"favorite\" />}\n      />\n      <Button\n        fullWidth\n        color={'#FF5722'}\n        type=\"contained\"\n        loading\n        containerStyle={{ marginBottom: 8 }}\n      />\n      <Button\n        fullWidth\n        text={'Disabled'}\n        color={'#673AB7'}\n        type=\"contained\"\n        containerStyle={{ marginBottom: 8 }}\n        disabled\n      />\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/Button/FlatButton/FlatButton.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport withTheme from '../../../Theme/withTheme';\n\nimport ButtonBase from '../ButtonBase/ButtonBase';\nimport { Hoverable } from '../../../';\nimport color from 'color';\n\nclass FlatButton extends Component {\n  static propTypes = {\n    disabled: PropTypes.bool,\n    color: PropTypes.string,\n    textColor: PropTypes.string,\n    rippleColor: PropTypes.string,\n    theme: PropTypes.object,\n    onPressIn: PropTypes.func,\n    onPressOut: PropTypes.func,\n    containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n  };\n\n  state = {\n    stateBackgroundColor: null,\n  };\n\n  getButtonStyles() {\n    const { theme } = this.props;\n\n    const buttonStyles = {\n      ...theme.containedButton,\n      backgroundColor: this.getBackgroundColor(),\n    };\n\n    return buttonStyles;\n  }\n\n  getBackgroundColor() {\n    const { color: userColor, disabled, theme } = this.props;\n    const { stateBackgroundColor } = this.state;\n\n    let backgroundColor = userColor ? userColor : theme.primary.main;\n\n    backgroundColor = disabled ? 'rgba(0, 0, 0, 0.12)' : backgroundColor;\n\n    return stateBackgroundColor ? stateBackgroundColor : backgroundColor;\n  }\n\n  getRippleColor() {\n    const { rippleColor } = this.props;\n    const bgColor = this.getBackgroundColor();\n\n    let implementedRippleColor = this.getOverlayColor(bgColor, 0.12, 0.32);\n\n    return rippleColor ? rippleColor : implementedRippleColor;\n  }\n\n  getTextColor() {\n    const { textColor, disabled } = this.props;\n\n    let implementedTextColor = disabled ? 'rgba(0, 0, 0, 0.26)' : 'white';\n    if (textColor) implementedTextColor = textColor;\n\n    return implementedTextColor;\n  }\n\n  getOverlayColor(bgColor, lightOverlay, darkOverlay) {\n    let modifiedColor;\n\n    if (color(bgColor).isDark()) {\n      modifiedColor = color(bgColor)\n        .lighten(darkOverlay)\n        .rgb()\n        .string();\n    } else {\n      modifiedColor = color(bgColor)\n        .darken(lightOverlay)\n        .rgb()\n        .string();\n    }\n    return modifiedColor;\n  }\n\n  handleHover(toggle) {\n    const bgColor = this.getBackgroundColor();\n    let implementedColor = toggle\n      ? this.getOverlayColor(bgColor, 0.08, 0.08)\n      : null;\n\n    this.setState({ stateBackgroundColor: implementedColor });\n  }\n\n  render() {\n    const { containerStyle, ...props } = this.props;\n\n    return (\n      <Hoverable\n        onHoverIn={() => this.handleHover(true)}\n        onHoverOut={() => this.handleHover(false)}\n        style={containerStyle}>\n        {() => (\n          <ButtonBase\n            typeRippleColor={this.getRippleColor()}\n            typeTextColor={this.getTextColor()}\n            typeButtonStyles={this.getButtonStyles()}\n            {...props}\n          />\n        )}\n      </Hoverable>\n    );\n  }\n}\n\nexport default withTheme(FlatButton);\n"
  },
  {
    "path": "src/Components/Button/FlatButton/FlatButton.stories.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { storiesOf } from '../../../storybook/helpers/storiesOf';\n\nimport { Button, Icon, BodyText } from '../../..';\nimport Header from '../../../storybook/components/Header';\nimport Container from '../../../storybook/components/Container';\n\nexport default storiesOf('Components|Buttons/Flat Button', module)\n  .addParameters({ jest: ['Button'] })\n  .add('Simple', () => (\n    <Container>\n      <Header title={'Simple Flat Button'} />\n\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 20,\n        }}>\n        <Button text={'Text'} type=\"flat\" />\n        <Button text={'Button'} color={'#E91E63'} type=\"flat\" />\n        <Button text={'Buy'} color={'#FF5722'} type=\"flat\" />\n        <Button text={'Click Here'} color={'#673AB7'} type=\"flat\" />\n        <Button text={'Do not click'} color={'#009688'} type=\"flat\" />\n      </View>\n    </Container>\n  ))\n  .add('with left icon', () => (\n    <Container>\n      <Header title={'Left Icon Flat Button'} />\n\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 20,\n        }}>\n        <Button text={'Home'} icon={<Icon name=\"home\" />} type=\"flat\" />\n        <Button\n          text={'Favorite'}\n          color={'#E91E63'}\n          borderSize={2}\n          type=\"flat\"\n          icon={<Icon name=\"favorite\" />}\n        />\n        <Button\n          text={'Settings'}\n          icon={<Icon name=\"settings\" />}\n          color={'#FF5722'}\n          radius={20}\n          type=\"flat\"\n        />\n        <Button\n          text={'Buy'}\n          color={'#673AB7'}\n          density={-2}\n          icon={<Icon name=\"attach-money\" />}\n          type=\"flat\"\n        />\n        <Button\n          text={'Archive'}\n          color={'#009688'}\n          icon={<Icon name=\"archive\" />}\n          type=\"flat\"\n        />\n      </View>\n    </Container>\n  ))\n  .add('with right icon', () => (\n    <Container>\n      <Header title={'Right Icon Flat Button'} />\n\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 20,\n        }}>\n        <Button\n          text={'Home'}\n          icon={<Icon name=\"home\" />}\n          type=\"flat\"\n          iconPosition={'right'}\n        />\n        <Button\n          text={'Favorite'}\n          color={'#E91E63'}\n          borderSize={2}\n          type=\"flat\"\n          icon={<Icon name=\"favorite\" />}\n          iconPosition={'right'}\n        />\n        <Button\n          text={'Settings'}\n          icon={<Icon name=\"settings\" />}\n          color={'#FF5722'}\n          radius={20}\n          type=\"flat\"\n          iconPosition={'right'}\n        />\n        <Button\n          text={'Buy'}\n          color={'#673AB7'}\n          dense\n          icon={<Icon name=\"attach-money\" />}\n          type=\"flat\"\n          iconPosition={'right'}\n        />\n        <Button\n          text={'Archive'}\n          color={'#009688'}\n          icon={<Icon name=\"archive\" />}\n          type=\"flat\"\n          iconPosition={'right'}\n        />\n      </View>\n    </Container>\n  ))\n  .add('radius', () => (\n    <Container>\n      <Header title={'Radius Flat Button'} />\n\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 20,\n        }}>\n        <Button text={'Home'} radius={20} type=\"flat\" />\n        <Button\n          text={'Favorite'}\n          color={'#E91E63'}\n          borderSize={2}\n          radius={40}\n          icon={<Icon name=\"favorite\" />}\n          type=\"flat\"\n        />\n        <Button text={'Settings'} color={'#FF5722'} radius={60} type=\"flat\" />\n        <Button\n          text={'Buy'}\n          tcolor={'#673AB7'}\n          density={-2}\n          radius={0}\n          icon={<Icon name=\"attach-money\" />}\n          type=\"flat\"\n        />\n        <Button\n          text={'Archive'}\n          color={'#009688'}\n          radius={0}\n          icon={<Icon name=\"archive\" />}\n          type=\"flat\"\n        />\n      </View>\n    </Container>\n  ))\n  .add('density', () => (\n    <Container>\n      <Header title={'Dense Flat Button'} />\n\n      <BodyText text={'Density -1: 32px'} style={{ marginBottom: 15 }} />\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 30,\n        }}>\n        <Button text={'Home'} density={-1} type=\"flat\" />\n        <Button\n          text={'Favorite'}\n          color={'#E91E63'}\n          borderSize={2}\n          density={-1}\n          type=\"flat\"\n          icon={<Icon name=\"favorite\" />}\n        />\n        <Button\n          text={'Settings'}\n          color={'#FF5722'}\n          density={-1}\n          radius={60}\n          type=\"flat\"\n        />\n        <Button\n          text={'Buy'}\n          tcolor={'#673AB7'}\n          density={-1}\n          radius={0}\n          type=\"flat\"\n          icon={<Icon name=\"attach-money\" />}\n        />\n        <Button\n          text={'Archive'}\n          color={'#009688'}\n          density={-1}\n          icon={<Icon name=\"archive\" />}\n          type=\"flat\"\n        />\n      </View>\n\n      <BodyText text={'Density -2: 28px'} style={{ marginBottom: 15 }} />\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 30,\n        }}>\n        <Button text={'Home'} density={-2} type=\"flat\" />\n        <Button\n          text={'Favorite'}\n          color={'#E91E63'}\n          borderSize={2}\n          density={-2}\n          type=\"flat\"\n          icon={<Icon name=\"favorite\" />}\n        />\n        <Button\n          text={'Settings'}\n          color={'#FF5722'}\n          density={-2}\n          radius={60}\n          type=\"flat\"\n        />\n        <Button\n          text={'Buy'}\n          tcolor={'#673AB7'}\n          density={-2}\n          radius={0}\n          type=\"flat\"\n          icon={<Icon name=\"attach-money\" />}\n        />\n        <Button\n          text={'Archive'}\n          color={'#009688'}\n          density={-2}\n          icon={<Icon name=\"archive\" />}\n          type=\"flat\"\n        />\n      </View>\n\n      <BodyText text={'Density -3: 24px'} style={{ marginBottom: 15 }} />\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 30,\n        }}>\n        <Button text={'Home'} density={-3} type=\"flat\" />\n        <Button\n          text={'Favorite'}\n          color={'#E91E63'}\n          borderSize={2}\n          density={-3}\n          type=\"flat\"\n          icon={<Icon name=\"favorite\" />}\n        />\n        <Button\n          text={'Settings'}\n          color={'#FF5722'}\n          density={-3}\n          radius={60}\n          type=\"flat\"\n        />\n        <Button\n          text={'Buy'}\n          tcolor={'#673AB7'}\n          density={-3}\n          radius={0}\n          type=\"flat\"\n          icon={<Icon name=\"attach-money\" />}\n        />\n        <Button\n          text={'Archive'}\n          color={'#009688'}\n          density={-3}\n          icon={<Icon name=\"archive\" />}\n          type=\"flat\"\n        />\n      </View>\n    </Container>\n  ))\n  .add('loading', () => (\n    <Container>\n      <Header title={'Loading Flat Button'} />\n\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 20,\n        }}>\n        <Button text={'Home'} loading hideLabel type=\"flat\" />\n        <Button\n          text={'Favorite'}\n          color={'#E91E63'}\n          borderSize={2}\n          loading\n          hideLabel\n          type=\"flat\"\n          icon={<Icon name=\"favorite\" />}\n        />\n        <Button\n          text={'Settings'}\n          color={'#FF5722'}\n          loading\n          hideLabel\n          radius={60}\n          type=\"flat\"\n        />\n        <Button\n          text={'Buy'}\n          tcolor={'#673AB7'}\n          density={-2}\n          radius={0}\n          loading\n          hideLabel\n          type=\"flat\"\n          icon={<Icon name=\"attach-money\" />}\n        />\n        <Button\n          text={'Archive'}\n          color={'#009688'}\n          loading\n          hideLabel\n          type=\"flat\"\n          icon={<Icon name=\"archive\" />}\n        />\n      </View>\n    </Container>\n  ))\n  .add('disabled', () => (\n    <Container>\n      <Header title={'Disabled Flat Button'} />\n\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 20,\n        }}>\n        <Button\n          text={'Home'}\n          icon={<Icon name=\"home\" />}\n          disabled\n          type=\"flat\"\n        />\n        <Button color={'#E91E63'} borderSize={2} loading disabled type=\"flat\" />\n        <Button\n          text={'Settings'}\n          color={'#FF5722'}\n          type=\"flat\"\n          disabled\n          radius={60}\n        />\n        <Button\n          text={'Buy'}\n          tcolor={'#673AB7'}\n          density={-2}\n          radius={0}\n          disabled\n          type=\"flat\"\n          icon={<Icon name=\"attach-money\" />}\n        />\n        <Button\n          text={'Archive'}\n          color={'#009688'}\n          disabled\n          type=\"flat\"\n          icon={<Icon name=\"archive\" />}\n        />\n      </View>\n    </Container>\n  ))\n  .add('full width', () => (\n    <Container>\n      <Header title={'Full Width Flat Button'} />\n      <Button fullWidth text={'Flat'} type=\"flat\" style={{ marginBottom: 8 }} />\n\n      <Button\n        fullWidth\n        text={'Radius'}\n        color={'#009688'}\n        type=\"flat\"\n        style={{ marginBottom: 8 }}\n        radius={40}\n      />\n      <Button\n        fullWidth\n        text={'Icon'}\n        color={'#E91E63'}\n        type=\"flat\"\n        style={{ marginBottom: 8 }}\n        icon={<Icon name=\"favorite\" />}\n      />\n      <Button\n        fullWidth\n        color={'#FF5722'}\n        type=\"flat\"\n        loading\n        style={{ marginBottom: 8 }}\n      />\n      <Button\n        fullWidth\n        text={'Disabled'}\n        color={'#673AB7'}\n        type=\"flat\"\n        style={{ marginBottom: 8 }}\n        disabled\n      />\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/Button/OutlinedButton/OutlinedButton.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport withTheme from '../../../Theme/withTheme';\n\nimport ButtonBase from '../ButtonBase/ButtonBase';\nimport color from 'color';\nimport { Hoverable } from '../../../';\n\nclass OutlinedButton extends Component {\n  static propTypes = {\n    disabled: PropTypes.bool,\n    color: PropTypes.string,\n    textColor: PropTypes.string,\n    rippleColor: PropTypes.string,\n    theme: PropTypes.object,\n    borderSize: PropTypes.number,\n    containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n  };\n\n  state = {\n    stateBackgroundColor: null,\n  };\n\n  getButtonStyles() {\n    const { theme, textColor, disabled, borderSize } = this.props;\n\n    let borderColor = textColor ? textColor : theme.primary.main;\n\n    const buttonStyles = [\n      theme.outlinedButton,\n      {\n        backgroundColor: this.getBackgroundColor(),\n        borderColor: disabled ? 'rgba(0, 0, 0, 0.26)' : borderColor,\n        borderWidth: borderSize ? borderSize : theme.outlinedButton.borderWidth,\n      },\n    ];\n    return buttonStyles;\n  }\n\n  getBackgroundColor = () => {\n    const { color: userColor, disabled } = this.props;\n    const { stateBackgroundColor } = this.state;\n\n    let backgroundColor = userColor ? userColor : 'transparent';\n\n    backgroundColor = stateBackgroundColor\n      ? stateBackgroundColor\n      : backgroundColor;\n\n    return disabled ? 'transparent' : backgroundColor;\n  };\n\n  getRippleColor() {\n    const { textColor, theme, rippleColor } = this.props;\n    let implementedRippleColor = textColor ? textColor : theme.primary.main;\n\n    implementedRippleColor = color(implementedRippleColor)\n      .alpha(0.12)\n      .rgb()\n      .string();\n\n    return rippleColor ? rippleColor : implementedRippleColor;\n  }\n\n  getTextColor() {\n    const { textColor, disabled, theme } = this.props;\n\n    let implementedTextColor = textColor ? textColor : theme.primary.main;\n\n    return disabled ? 'rgba(0, 0, 0, 0.26)' : implementedTextColor;\n  }\n\n  handleHover(toggle) {\n    let implementedColor = toggle\n      ? color(this.getTextColor())\n          .alpha(0.08)\n          .rgb()\n          .string()\n      : null;\n\n    this.setState({ stateBackgroundColor: implementedColor });\n  }\n\n  render() {\n    const { containerStyle, ...props } = this.props;\n\n    return (\n      <Hoverable\n        onHoverIn={() => this.handleHover(true)}\n        onHoverOut={() => this.handleHover(false)}\n        style={containerStyle}>\n        {() => (\n          <ButtonBase\n            typeRippleColor={this.getRippleColor()}\n            typeTextColor={this.getTextColor()}\n            typeButtonStyles={this.getButtonStyles()}\n            {...props}\n          />\n        )}\n      </Hoverable>\n    );\n  }\n}\n\nexport default withTheme(OutlinedButton);\n"
  },
  {
    "path": "src/Components/Button/OutlinedButton/OutlinedButton.stories.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { storiesOf } from '../../../storybook/helpers/storiesOf';\n\nimport { Button, Icon, BodyText } from '../../..';\nimport Header from '../../../storybook/components/Header';\nimport Container from '../../../storybook/components/Container';\n\nexport default storiesOf('Components|Buttons/Outlined Button', module)\n  .addParameters({ jest: ['Button'] })\n  .add('Simple', () => (\n    <Container>\n      <Header title={'Simple Outlined Button'} />\n\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 20,\n        }}>\n        <Button text={'Text'} type=\"outlined\" />\n        <Button text={'Button'} textColor={'#E91E63'} type=\"outlined\" />\n        <Button text={'Buy'} textColor={'#FF5722'} type=\"outlined\" />\n        <Button text={'Click Here'} textColor={'#673AB7'} type=\"outlined\" />\n        <Button text={'Do not click'} textColor={'#009688'} type=\"outlined\" />\n      </View>\n    </Container>\n  ))\n  .add('with left icon', () => (\n    <Container>\n      <Header title={'Left Icon Outlined Button'} />\n\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 20,\n        }}>\n        <Button text={'Home'} icon={<Icon name=\"home\" />} type=\"outlined\" />\n        <Button\n          text={'Favorite'}\n          textColor={'#E91E63'}\n          borderSize={2}\n          type=\"outlined\"\n          icon={<Icon name=\"favorite\" />}\n        />\n        <Button\n          text={'Settings'}\n          icon={<Icon name=\"settings\" />}\n          textColor={'#FF5722'}\n          radius={20}\n          type=\"outlined\"\n        />\n        <Button\n          text={'Buy'}\n          textColor={'#673AB7'}\n          density={-2}\n          icon={<Icon name=\"attach-money\" />}\n          type=\"outlined\"\n        />\n        <Button\n          text={'Archive'}\n          textColor={'#009688'}\n          icon={<Icon name=\"archive\" />}\n          type=\"outlined\"\n        />\n      </View>\n    </Container>\n  ))\n  .add('with right icon', () => (\n    <Container>\n      <Header title={'Right Icon Outlined Button'} />\n\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 20,\n        }}>\n        <Button\n          text={'Home'}\n          icon={<Icon name=\"home\" />}\n          type=\"outlined\"\n          iconPosition={'right'}\n        />\n        <Button\n          text={'Favorite'}\n          textColor={'#E91E63'}\n          borderSize={2}\n          type=\"outlined\"\n          icon={<Icon name=\"favorite\" />}\n          iconPosition={'right'}\n        />\n        <Button\n          text={'Settings'}\n          icon={<Icon name=\"settings\" />}\n          textColor={'#FF5722'}\n          radius={20}\n          type=\"outlined\"\n          iconPosition={'right'}\n        />\n        <Button\n          text={'Buy'}\n          textColor={'#673AB7'}\n          density={-2}\n          icon={<Icon name=\"attach-money\" />}\n          type=\"outlined\"\n          iconPosition={'right'}\n        />\n        <Button\n          text={'Archive'}\n          textColor={'#009688'}\n          icon={<Icon name=\"archive\" />}\n          type=\"outlined\"\n          iconPosition={'right'}\n        />\n      </View>\n    </Container>\n  ))\n  .add('radius', () => (\n    <Container>\n      <Header title={'Radius Outlined Button'} />\n\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 20,\n        }}>\n        <Button text={'Home'} radius={20} type=\"outlined\" />\n        <Button\n          text={'Favorite'}\n          textColor={'#E91E63'}\n          borderSize={2}\n          radius={40}\n          icon={<Icon name=\"favorite\" />}\n          type=\"outlined\"\n        />\n        <Button\n          text={'Settings'}\n          textColor={'#FF5722'}\n          radius={60}\n          type=\"outlined\"\n        />\n        <Button\n          text={'Buy'}\n          ttextColor={'#673AB7'}\n          density={-2}\n          radius={0}\n          icon={<Icon name=\"attach-money\" />}\n          type=\"outlined\"\n        />\n        <Button\n          text={'Archive'}\n          textColor={'#009688'}\n          radius={0}\n          icon={<Icon name=\"archive\" />}\n          type=\"outlined\"\n        />\n      </View>\n    </Container>\n  ))\n  .add('density', () => (\n    <Container>\n      <Header title={'Density Outlined Button'} />\n\n      <BodyText text={'Density -1: 32px'} style={{ marginBottom: 15 }} />\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 30,\n        }}>\n        <Button text={'Home'} density={-1} type=\"outlined\" />\n        <Button\n          text={'Favorite'}\n          textColor={'#E91E63'}\n          borderSize={2}\n          density={-1}\n          type=\"outlined\"\n          icon={<Icon name=\"favorite\" />}\n        />\n        <Button\n          text={'Settings'}\n          textColor={'#FF5722'}\n          density={-1}\n          radius={60}\n          type=\"outlined\"\n        />\n        <Button\n          text={'Buy'}\n          ttextColor={'#673AB7'}\n          density={-1}\n          radius={0}\n          type=\"outlined\"\n          icon={<Icon name=\"attach-money\" />}\n        />\n        <Button\n          text={'Archive'}\n          textColor={'#009688'}\n          density={-1}\n          icon={<Icon name=\"archive\" />}\n          type=\"outlined\"\n        />\n      </View>\n\n      <BodyText text={'Density -2: 28px'} style={{ marginBottom: 15 }} />\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 30,\n        }}>\n        <Button text={'Home'} density={-2} type=\"outlined\" />\n        <Button\n          text={'Favorite'}\n          textColor={'#E91E63'}\n          borderSize={2}\n          density={-2}\n          type=\"outlined\"\n          icon={<Icon name=\"favorite\" />}\n        />\n        <Button\n          text={'Settings'}\n          textColor={'#FF5722'}\n          density={-2}\n          radius={60}\n          type=\"outlined\"\n        />\n        <Button\n          text={'Buy'}\n          ttextColor={'#673AB7'}\n          density={-2}\n          radius={0}\n          type=\"outlined\"\n          icon={<Icon name=\"attach-money\" />}\n        />\n        <Button\n          text={'Archive'}\n          textColor={'#009688'}\n          density={-2}\n          icon={<Icon name=\"archive\" />}\n          type=\"outlined\"\n        />\n      </View>\n\n      <BodyText text={'Density -3: 24px'} style={{ marginBottom: 15 }} />\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 30,\n        }}>\n        <Button text={'Home'} density={-3} type=\"outlined\" />\n        <Button\n          text={'Favorite'}\n          textColor={'#E91E63'}\n          borderSize={2}\n          density={-3}\n          type=\"outlined\"\n          icon={<Icon name=\"favorite\" />}\n        />\n        <Button\n          text={'Settings'}\n          textColor={'#FF5722'}\n          density={-3}\n          radius={60}\n          type=\"outlined\"\n        />\n        <Button\n          text={'Buy'}\n          ttextColor={'#673AB7'}\n          density={-3}\n          radius={0}\n          type=\"outlined\"\n          icon={<Icon name=\"attach-money\" />}\n        />\n        <Button\n          text={'Archive'}\n          textColor={'#009688'}\n          density={-3}\n          icon={<Icon name=\"archive\" />}\n          type=\"outlined\"\n        />\n      </View>\n    </Container>\n  ))\n  .add('loading', () => (\n    <Container>\n      <Header title={'Loading Outlined Button'} />\n\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 20,\n        }}>\n        <Button text={'Home'} loading hideLabel type=\"outlined\" />\n        <Button\n          textColor={'#E91E63'}\n          borderSize={2}\n          loading\n          hideLabel\n          text={'Favorite'}\n          type=\"outlined\"\n        />\n        <Button\n          text={'Settings'}\n          textColor={'#FF5722'}\n          loading\n          hideLabel\n          radius={60}\n          type=\"outlined\"\n        />\n        <Button\n          text={'Buy'}\n          ttextColor={'#673AB7'}\n          density={-2}\n          radius={0}\n          loading\n          hideLabel\n          type=\"outlined\"\n        />\n        <Button\n          text={'Archive'}\n          textColor={'#009688'}\n          loading\n          hideLabel\n          type=\"outlined\"\n        />\n      </View>\n    </Container>\n  ))\n  .add('disabled', () => (\n    <Container>\n      <Header title={'Disabled Outlined Button'} />\n\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 20,\n        }}>\n        <Button text={'Home'} disabled type=\"outlined\" />\n        <Button\n          textColor={'#E91E63'}\n          borderSize={2}\n          loading\n          disabled\n          type=\"outlined\"\n        />\n        <Button\n          text={'Settings'}\n          textColor={'#FF5722'}\n          type=\"outlined\"\n          disabled\n          radius={60}\n        />\n        <Button\n          text={'Buy'}\n          ttextColor={'#673AB7'}\n          density={-2}\n          radius={0}\n          disabled\n          type=\"outlined\"\n          icon={<Icon name=\"attach-money\" />}\n        />\n        <Button\n          text={'Archive'}\n          textColor={'#009688'}\n          disabled\n          type=\"outlined\"\n          icon={<Icon name=\"archive\" />}\n        />\n      </View>\n    </Container>\n  ))\n  .add('full width', () => (\n    <Container>\n      <Header title={'Full Width Outlined Button'} />\n      <Button\n        fullWidth\n        text={'Outlined'}\n        type=\"outlined\"\n        style={{ marginBottom: 8 }}\n      />\n\n      <Button\n        fullWidth\n        text={'Radius'}\n        textColor={'#009688'}\n        type=\"outlined\"\n        style={{ marginBottom: 8 }}\n        radius={40}\n      />\n      <Button\n        fullWidth\n        text={'Icon'}\n        textColor={'#E91E63'}\n        type=\"outlined\"\n        style={{ marginBottom: 8 }}\n        icon={<Icon name=\"favorite\" />}\n      />\n      <Button\n        fullWidth\n        textColor={'#FF5722'}\n        type=\"outlined\"\n        loading\n        style={{ marginBottom: 8 }}\n      />\n      <Button\n        fullWidth\n        text={'Disabled'}\n        textColor={'#673AB7'}\n        type=\"outlined\"\n        style={{ marginBottom: 8 }}\n        disabled\n      />\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/Button/TextButton/TextButton.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport withTheme from '../../../Theme/withTheme';\n\nimport ButtonBase from '../ButtonBase/ButtonBase';\nimport color from 'color';\nimport { Hoverable } from '../../../';\n\nclass TextButton extends Component {\n  static propTypes = {\n    disabled: PropTypes.bool,\n    color: PropTypes.string,\n    textColor: PropTypes.string,\n    rippleColor: PropTypes.string,\n    theme: PropTypes.object,\n    containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n  };\n\n  state = {\n    stateBackgroundColor: null,\n  };\n\n  getButtonStyles() {\n    const { theme } = this.props;\n\n    const buttonStyles = [\n      theme.textButton,\n      {\n        backgroundColor: this.getBackgroundColor(),\n      },\n    ];\n    return buttonStyles;\n  }\n\n  getBackgroundColor = () => {\n    const { color: userColor, disabled } = this.props;\n    const { stateBackgroundColor } = this.state;\n\n    let backgroundColor = userColor ? userColor : 'transparent';\n\n    backgroundColor = stateBackgroundColor\n      ? stateBackgroundColor\n      : backgroundColor;\n\n    return disabled ? 'transparent' : backgroundColor;\n  };\n\n  getRippleColor() {\n    const { textColor, theme, rippleColor } = this.props;\n    let implementedRippleColor = textColor ? textColor : theme.primary.main;\n\n    implementedRippleColor = color(implementedRippleColor)\n      .alpha(0.12)\n      .rgb()\n      .string();\n\n    return rippleColor ? rippleColor : implementedRippleColor;\n  }\n\n  getTextColor() {\n    const { textColor, disabled, theme } = this.props;\n\n    let implementedTextColor = textColor ? textColor : theme.primary.main;\n\n    return disabled ? 'rgba(0, 0, 0, 0.26)' : implementedTextColor;\n  }\n\n  handleHover(toggle) {\n    let implementedColor = toggle\n      ? color(this.getTextColor())\n          .alpha(0.08)\n          .rgb()\n          .string()\n      : null;\n\n    this.setState({ stateBackgroundColor: implementedColor });\n  }\n  render() {\n    const { containerStyle, ...props } = this.props;\n\n    return (\n      <Hoverable\n        onHoverIn={() => this.handleHover(true)}\n        onHoverOut={() => this.handleHover(false)}\n        style={containerStyle}>\n        {() => (\n          <ButtonBase\n            typeRippleColor={this.getRippleColor()}\n            typeTextColor={this.getTextColor()}\n            typeButtonStyles={this.getButtonStyles()}\n            {...props}\n          />\n        )}\n      </Hoverable>\n    );\n  }\n}\n\nexport default withTheme(TextButton);\n"
  },
  {
    "path": "src/Components/Button/TextButton/TextButton.stories.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { storiesOf } from '../../../storybook/helpers/storiesOf';\n\nimport { Button, Icon, BodyText } from '../../..';\nimport Header from '../../../storybook/components/Header';\nimport Container from '../../../storybook/components/Container';\n\nexport default storiesOf('Components|Buttons/Text Button', module)\n  .addParameters({ jest: ['Button'] })\n  .add('simple', () => (\n    <Container>\n      <Header title={'Simple Text Button'} />\n\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 20,\n        }}>\n        <Button text={'Text'} />\n        <Button text={'Button'} textColor={'#E91E63'} />\n        <Button text={'Buy'} textColor={'#FF5722'} />\n        <Button text={'Click Here'} textColor={'#673AB7'} />\n        <Button text={'Do not click'} textColor={'#009688'} />\n      </View>\n    </Container>\n  ))\n  .add('with left icon', () => (\n    <Container>\n      <Header title={'Left Icon Text Button'} />\n\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 20,\n        }}>\n        <Button text={'Home'} icon={<Icon name=\"home\" />} />\n        <Button\n          text={'Favorite'}\n          textColor={'#E91E63'}\n          borderSize={2}\n          icon={<Icon name=\"favorite\" />}\n        />\n        <Button\n          text={'Settings'}\n          icon={<Icon name=\"settings\" />}\n          textColor={'#FF5722'}\n          radius={20}\n        />\n        <Button\n          text={'Buy'}\n          ttextColor={'#673AB7'}\n          density={-2}\n          icon={<Icon name=\"attach-money\" />}\n        />\n        <Button\n          text={'Archive'}\n          textColor={'#009688'}\n          icon={<Icon name=\"archive\" />}\n        />\n      </View>\n    </Container>\n  ))\n  .add('with right icon', () => (\n    <Container>\n      <Header title={'Right Icon Text Button'} />\n\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 20,\n        }}>\n        <Button\n          text={'Home'}\n          icon={<Icon name=\"home\" />}\n          iconPosition={'right'}\n        />\n        <Button\n          text={'Favorite'}\n          textColor={'#E91E63'}\n          borderSize={2}\n          icon={<Icon name=\"favorite\" />}\n          iconPosition={'right'}\n        />\n        <Button\n          text={'Settings'}\n          icon={<Icon name=\"settings\" />}\n          textColor={'#FF5722'}\n          radius={20}\n          iconPosition={'right'}\n        />\n        <Button\n          text={'Buy'}\n          ttextColor={'#673AB7'}\n          density={-2}\n          icon={<Icon name=\"attach-money\" />}\n          iconPosition={'right'}\n        />\n        <Button\n          text={'Archive'}\n          textColor={'#009688'}\n          icon={<Icon name=\"archive\" />}\n          iconPosition={'right'}\n        />\n      </View>\n    </Container>\n  ))\n  .add('radius', () => (\n    <Container>\n      <Header title={'Radius Text Button'} />\n\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 20,\n        }}>\n        <Button text={'Home'} radius={20} />\n        <Button\n          text={'Favorite'}\n          textColor={'#E91E63'}\n          borderSize={2}\n          radius={40}\n          icon={<Icon name=\"favorite\" />}\n        />\n        <Button text={'Settings'} textColor={'#FF5722'} radius={60} />\n        <Button\n          text={'Buy'}\n          ttextColor={'#673AB7'}\n          density={-2}\n          radius={0}\n          icon={<Icon name=\"attach-money\" />}\n        />\n        <Button\n          text={'Archive'}\n          textColor={'#009688'}\n          radius={0}\n          icon={<Icon name=\"archive\" />}\n        />\n      </View>\n    </Container>\n  ))\n  .add('density', () => (\n    <Container>\n      <Header title={'Density Text Button'} />\n\n      <BodyText text={'Density -1: 32px'} style={{ marginBottom: 15 }} />\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 30,\n        }}>\n        <Button text={'Home'} density={-1} />\n        <Button\n          text={'Favorite'}\n          textColor={'#E91E63'}\n          borderSize={2}\n          density={-1}\n          icon={<Icon name=\"favorite\" />}\n        />\n        <Button\n          text={'Settings'}\n          textColor={'#FF5722'}\n          density={-1}\n          radius={60}\n        />\n        <Button\n          text={'Buy'}\n          ttextColor={'#673AB7'}\n          density={-1}\n          radius={0}\n          icon={<Icon name=\"attach-money\" />}\n        />\n        <Button\n          text={'Archive'}\n          textColor={'#009688'}\n          density={-1}\n          icon={<Icon name=\"archive\" />}\n        />\n      </View>\n\n      <BodyText text={'Density -2: 28px'} style={{ marginBottom: 15 }} />\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 30,\n        }}>\n        <Button text={'Home'} density={-2} />\n        <Button\n          text={'Favorite'}\n          textColor={'#E91E63'}\n          borderSize={2}\n          density={-2}\n          icon={<Icon name=\"favorite\" />}\n        />\n        <Button\n          text={'Settings'}\n          textColor={'#FF5722'}\n          density={-2}\n          radius={60}\n        />\n        <Button\n          text={'Buy'}\n          ttextColor={'#673AB7'}\n          density={-2}\n          radius={0}\n          icon={<Icon name=\"attach-money\" />}\n        />\n        <Button\n          text={'Archive'}\n          textColor={'#009688'}\n          density={-2}\n          icon={<Icon name=\"archive\" />}\n        />\n      </View>\n\n      <BodyText text={'Density -3: 24px'} style={{ marginBottom: 15 }} />\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 30,\n        }}>\n        <Button text={'Home'} density={-3} />\n        <Button\n          text={'Favorite'}\n          textColor={'#E91E63'}\n          borderSize={2}\n          density={-3}\n          icon={<Icon name=\"favorite\" />}\n        />\n        <Button\n          text={'Settings'}\n          textColor={'#FF5722'}\n          density={-3}\n          radius={60}\n        />\n        <Button\n          text={'Buy'}\n          ttextColor={'#673AB7'}\n          density={-3}\n          radius={0}\n          icon={<Icon name=\"attach-money\" />}\n        />\n        <Button\n          text={'Archive'}\n          textColor={'#009688'}\n          density={-3}\n          icon={<Icon name=\"archive\" />}\n        />\n      </View>\n    </Container>\n  ))\n  .add('loading', () => (\n    <Container>\n      <Header title={'Loading Text Button'} />\n\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 20,\n        }}>\n        <Button text={'Home'} loading hideLabel />\n        <Button\n          text={'Favorite'}\n          textColor={'#E91E63'}\n          borderSize={2}\n          loading\n          hideLabel\n          icon={<Icon name=\"favorite\" />}\n        />\n        <Button\n          text={'Settings'}\n          textColor={'#FF5722'}\n          loading\n          hideLabel\n          radius={60}\n        />\n        <Button\n          text={'Buy'}\n          ttextColor={'#673AB7'}\n          density={-2}\n          radius={0}\n          loading\n          hideLabel\n          icon={<Icon name=\"attach-money\" />}\n        />\n        <Button\n          text={'Archive'}\n          textColor={'#009688'}\n          loading\n          hideLabel\n          icon={<Icon name=\"archive\" />}\n        />\n      </View>\n    </Container>\n  ))\n  .add('disabled', () => (\n    <Container>\n      <Header title={'Disabled Text Button'} />\n\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          flexWrap: 'wrap',\n          marginBottom: 20,\n        }}>\n        <Button text={'Home'} disabled />\n        <Button textColor={'#E91E63'} borderSize={2} loading disabled />\n        <Button text={'Settings'} textColor={'#FF5722'} disabled radius={60} />\n        <Button\n          text={'Buy'}\n          ttextColor={'#673AB7'}\n          density={-2}\n          radius={0}\n          disabled\n          icon={<Icon name=\"attach-money\" />}\n        />\n        <Button\n          text={'Archive'}\n          textColor={'#009688'}\n          disabled\n          icon={<Icon name=\"archive\" />}\n        />\n      </View>\n    </Container>\n  ))\n  .add('full width', () => (\n    <Container>\n      <Header title={'Full Width Text Button'} />\n      <Button fullWidth text={'Text'} style={{ marginBottom: 8 }} />\n      <Button\n        fullWidth\n        text={'Radius'}\n        textColor={'#009688'}\n        style={{ marginBottom: 8 }}\n        radius={40}\n      />\n      <Button\n        fullWidth\n        text={'Icon'}\n        icon={<Icon name=\"favorite\" />}\n        textColor={'#E91E63'}\n        style={{ marginBottom: 8 }}\n      />\n      <Button\n        fullWidth\n        textColor={'#FF5722'}\n        loading\n        style={{ marginBottom: 8 }}\n      />\n      <Button\n        fullWidth\n        text={'Disabled'}\n        textColor={'#673AB7'}\n        disabled\n        style={{ marginBottom: 8 }}\n      />\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/Button/__snapshots__/Button.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Button Renders 1`] = `\n<Context.Consumer>\n  [Function]\n</Context.Consumer>\n`;\n"
  },
  {
    "path": "src/Components/Button/index.js",
    "content": "export { default } from './Button';\n"
  },
  {
    "path": "src/Components/Card/Card.js",
    "content": "import React, { Component } from 'react';\nimport { StyleSheet } from 'react-native';\nimport PropTypes from 'prop-types';\nimport withTheme from '../../Theme/withTheme';\nimport { Paper } from '../..';\nimport Ripple from '../Ripple/Ripple';\n\nclass Card extends Component {\n  static propTypes = {\n    children: PropTypes.node,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    outlined: PropTypes.bool,\n    shadow: PropTypes.number,\n    radius: PropTypes.number,\n    onPress: PropTypes.func,\n    rippleProps: PropTypes.object,\n    testID: PropTypes.string,\n  };\n\n  static defaultProps = {\n    radius: 4,\n    shadow: 1,\n  };\n\n  _renderRipple() {\n    const { children, onPress, rippleProps } = this.props;\n    return (\n      <Ripple Press={onPress} {...rippleProps}>\n        {children}\n      </Ripple>\n    );\n  }\n\n  render() {\n    const {\n      style,\n      outlined,\n      radius,\n      onPress,\n      shadow,\n      children,\n      testID,\n    } = this.props;\n\n    return (\n      <Paper\n        shadow={shadow}\n        radius={radius}\n        style={[\n          style,\n          {\n            borderWidth: outlined ? StyleSheet.hairlineWidth : 0,\n            borderBottomColor: 'rgba(0,0,0,.4)',\n            maxWidth: 500,\n          },\n        ]}\n        testID={testID}>\n        {onPress ? this._renderRipple() : children}\n      </Paper>\n    );\n  }\n}\n\nexport default withTheme(Card);\n"
  },
  {
    "path": "src/Components/Card/Card.stories.js",
    "content": "import React from 'react';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\nimport { Text, View, Image, ScrollView } from 'react-native';\n\nimport {\n  Card,\n  CardHeader,\n  CardMedia,\n  CardContent,\n  CardActions,\n  Avatar,\n  IconButton,\n  Button,\n  Ripple,\n  Badge,\n} from '../../';\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\n\n/*  eslint-disable no-console */\nexport default storiesOf('Components|Card', module)\n  .addParameters({ jest: ['Card'] })\n  .add('simple', () => (\n    <Container scroll>\n      <Header title={'Simple Card'} />\n      <View\n        style={{\n          borderColor: 'red',\n          borderWidth: 2,\n          flex: 1,\n          alignItems: 'center',\n          justifyContent: 'space-around',\n          height: 400,\n        }}>\n        <Card onPress={() => {}}>\n          <Text>Hello</Text>\n        </Card>\n      </View>\n      <Card style={{ flex: 1, marginBottom: 20, padding: 16, maxWidth: 400 }}>\n        <Text style={{ fontSize: 14, textAlign: 'center', marginBottom: 8 }}>\n          This is a simple card with a button\n        </Text>\n        <Button type={'flat'} text=\"Card button\" />\n      </Card>\n\n      <Card\n        style={{ flex: 1, marginBottom: 20, padding: 16, maxWidth: 400 }}\n        shadow={5}>\n        <Text style={{ fontSize: 14, textAlign: 'center', marginBottom: 8 }}>\n          This one has more shadow\n        </Text>\n        <Button type={'flat'} text=\"Card button\" style={{ marginBottom: 20 }} />\n        <Button type={'flat'} color={'#E91E63'} text=\"Card button\" />\n      </Card>\n\n      <Card\n        style={{ flex: 1, marginBottom: 20, padding: 16, maxWidth: 400 }}\n        shadow={8}>\n        <Text style={{ fontSize: 14, textAlign: 'center', marginBottom: 8 }}>\n          This one has more shadow\n        </Text>\n        <View\n          style={{\n            flexDirection: 'row',\n            justifyContent: 'space-between',\n            marginTop: 20,\n          }}>\n          <Button type={'flat'} text=\"Card button\" />\n          <Button type={'flat'} color={'#E91E63'} text=\"Card button\" />\n        </View>\n      </Card>\n      <Card\n        style={{ flex: 1, marginBottom: 20, padding: 16, maxWidth: 400 }}\n        radius={20}\n        shadow={5}>\n        <Text style={{ fontSize: 14, textAlign: 'center', marginBottom: 8 }}>\n          This one has more radius\n        </Text>\n        <Button type={'flat'} text=\"Card button\" />\n      </Card>\n      <Card\n        style={{\n          flex: 1,\n          marginBottom: 20,\n          padding: 16,\n          maxWidth: 400,\n          maxHeight: 400,\n        }}\n        radius={200}\n        shadow={5}>\n        <Text style={{ fontSize: 14, textAlign: 'center', marginBottom: 8 }}>\n          This one has more radius\n        </Text>\n        <Button type={'flat'} text=\"Card button\" />\n      </Card>\n      <Card style={{ flex: 1, marginBottom: 20, padding: 16 }}>\n        <Text style={{ fontSize: 14, textAlign: 'center', marginBottom: 8 }}>\n          This is one takes up the full width\n        </Text>\n        <Button type={'flat'} text=\"Card button\" />\n      </Card>\n    </Container>\n  ))\n  .add('full card', () => (\n    <Container scroll>\n      <Header title={'Full Card'} />\n\n      <Card style={{ maxWidth: 400, width: '100%', marginBottom: 50 }}>\n        <CardHeader\n          thumbnail={\n            <Avatar\n              type=\"image\"\n              image={\n                <Image\n                  source={{\n                    uri:\n                      'https://images.pexels.com/photos/2906664/pexels-photo-2906664.png?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',\n                  }}\n                />\n              }\n              size={48}\n            />\n          }\n          title={'Title'}\n          subtitle={'Metadata'}\n          action={\n            <View\n              style={{\n                flexDirection: 'row',\n                alignItems: 'center',\n              }}>\n              <IconButton\n                name=\"favorite-border\"\n                size={24}\n                color={'rgba(0,0,0,.47)'}\n              />\n              <IconButton\n                style={{ marginLeft: 12 }}\n                name=\"share\"\n                size={24}\n                color={'rgba(0,0,0,.47)'}\n              />\n              <IconButton\n                style={{ marginLeft: 12 }}\n                name=\"more-vert\"\n                size={24}\n                color={'rgba(0,0,0,.47)'}\n              />\n            </View>\n          }\n        />\n        <CardMedia\n          image={\n            <Image\n              style={{ flex: 1, width: '100%' }}\n              source={{\n                uri:\n                  'https://images.pexels.com/photos/994605/pexels-photo-994605.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',\n              }}\n              resizeMode=\"cover\"\n            />\n          }\n        />\n        <CardContent>\n          <Text\n            style={{\n              fontSize: 18,\n              fontWeight: '500',\n              marginBottom: 8,\n            }}>\n            Title\n          </Text>\n          <Text style={{ fontSize: 14, marginBottom: 16 }}>Metadata</Text>\n          <Text style={{ fontSize: 16 }}>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce neque\n            felis, eleifend in dolor eu, pellentesque finibus erat. Vestibulum\n            eleifend sapien et felis pulvinar cursus.\n          </Text>\n        </CardContent>\n        <CardActions\n          rightActionItems={[\n            { name: 'favorite-border' },\n            { name: 'share' },\n            { name: 'more-vert' },\n          ]}\n        />\n      </Card>\n\n      <Card style={{ maxWidth: 400, width: '100%', marginBottom: 50 }}>\n        <CardHeader\n          thumbnail={\n            <Avatar\n              type=\"image\"\n              image={\n                <Image\n                  source={{\n                    uri:\n                      'https://www.hbo.com/content/dam/hbodata/series/game-of-thrones/character/s5/john-snow-1920.jpg/_jcr_content/renditions/cq5dam.web.1200.675.jpeg',\n                  }}\n                />\n              }\n              size={40}\n            />\n          }\n          title={'Jon Snow'}\n          subtitle={'Knows Nothing, KingofDaNorth'}\n          action={<IconButton name=\"more-vert\" size={24} />}\n        />\n        <CardMedia\n          image={\n            <Image\n              style={{ flex: 1, width: '100%' }}\n              source={{ uri: 'https://i.redd.it/zj9vfr7uuljz.png' }}\n              resizeMode=\"cover\"\n            />\n          }\n        />\n        <CardContent>\n          <Text\n            style={{\n              fontSize: 18,\n              fontWeight: '500',\n              marginBottom: 8,\n            }}>\n            Prince of Dragonstone\n          </Text>\n          <Text style={{ fontSize: 14, marginBottom: 16 }}>\n            You&apos;ve got the North in you\n          </Text>\n          <Text style={{ fontSize: 16 }}>\n            Ran out of bleach for beard, but Daenerys says it looks cool.\n          </Text>\n        </CardContent>\n        <CardActions\n          rightActionItems={[{ name: 'thumb-up' }, { name: 'share' }]}\n        />\n      </Card>\n\n      <Card style={{ maxWidth: 400, width: '100%', marginBottom: 50 }}>\n        <CardMedia\n          image={\n            <Image\n              style={{ flex: 1, width: '100%' }}\n              source={{\n                uri:\n                  'https://images.pexels.com/photos/1451360/pexels-photo-1451360.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',\n              }}\n              resizeMode=\"cover\"\n            />\n          }\n        />\n        <CardContent>\n          <View style={{ flexDirection: 'row' }}>\n            <Avatar\n              type=\"image\"\n              image={\n                <Image\n                  source={{\n                    uri:\n                      'https://upload.wikimedia.org/wikipedia/en/thumb/7/74/Anakin-Jedi.jpg/220px-Anakin-Jedi.jpg',\n                  }}\n                />\n              }\n              size={40}\n            />\n            <Text\n              style={{ color: 'rgba(0,0,0,.6)', fontSize: 14, marginLeft: 16 }}>\n              I don&apos;t like sand. It&apos;s coarse and rough and irritating\n              and it gets everywhere.\n            </Text>\n          </View>\n        </CardContent>\n      </Card>\n    </Container>\n  ))\n  .add('clickable', () => (\n    <Container scroll>\n      <Header title={'Clickable Card'} />\n      <ScrollView horizontal scrollEnabled={true}>\n        <View style={{ flexDirection: 'row' }}>\n          <Card\n            style={{\n              maxWidth: 150,\n              width: '100%',\n              marginBottom: 50,\n              marginRight: 4,\n            }}\n            shadow={4}\n            onPress={() => console.log('clicked dog')}>\n            <CardMedia\n              image={\n                <Image\n                  style={{ flex: 1, width: '100%' }}\n                  source={{\n                    uri:\n                      'https://images.pexels.com/photos/86405/penguin-funny-blue-water-86405.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',\n                  }}\n                  resizeMode=\"cover\"\n                />\n              }\n            />\n            <CardContent>\n              <Text\n                style={{\n                  color: 'rgba(0,0,0,.6)',\n                  fontSize: 16,\n                  fontWeight: '600',\n                  marginBottom: 6,\n                }}>\n                Penguin\n              </Text>\n            </CardContent>\n          </Card>\n          <Card\n            style={{\n              maxWidth: 150,\n              width: '100%',\n              marginBottom: 50,\n              marginRight: 4,\n            }}\n            shadow={4}\n            onPress={() => console.log('clicked dog')}>\n            <CardMedia\n              image={\n                <Image\n                  style={{ flex: 1, width: '100%' }}\n                  source={{\n                    uri:\n                      'https://images.pexels.com/photos/460823/pexels-photo-460823.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',\n                  }}\n                  resizeMode=\"cover\"\n                />\n              }\n            />\n            <CardContent>\n              <Text\n                style={{\n                  color: 'rgba(0,0,0,.6)',\n                  fontSize: 16,\n                  fontWeight: '600',\n                  marginBottom: 6,\n                }}>\n                Pup\n              </Text>\n            </CardContent>\n          </Card>\n          <Card\n            style={{ maxWidth: 150, width: '100%', marginBottom: 50 }}\n            shadow={4}\n            onPress={() => console.log('clicked dog')}>\n            <CardMedia\n              image={\n                <Image\n                  style={{ flex: 1, width: '100%' }}\n                  source={{\n                    uri:\n                      'https://images.pexels.com/photos/1661535/pexels-photo-1661535.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',\n                  }}\n                  resizeMode=\"cover\"\n                />\n              }\n            />\n            <CardContent>\n              <Text\n                style={{\n                  color: 'rgba(0,0,0,.6)',\n                  fontSize: 16,\n                  fontWeight: '600',\n                  marginBottom: 6,\n                }}>\n                Panda\n              </Text>\n            </CardContent>\n          </Card>\n        </View>\n      </ScrollView>\n\n      <Card\n        style={{ maxWidth: 300, width: '100%', marginBottom: 50 }}\n        shadow={4}\n        onPress={() => console.log('clicked dog')}>\n        <CardMedia\n          image={\n            <Image\n              style={{ flex: 1, width: '100%' }}\n              source={{\n                uri:\n                  'https://images.pexels.com/photos/1124002/pexels-photo-1124002.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',\n              }}\n              resizeMode=\"cover\"\n            />\n          }\n        />\n        <CardContent>\n          <Text\n            style={{\n              color: 'rgba(0,0,0,.6)',\n              fontSize: 16,\n              fontWeight: '600',\n              marginBottom: 6,\n            }}>\n            Dog\n          </Text>\n          <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>\n            The domestic dog is a member of the genus Canis (canines), which\n            forms part of the wolf-like canids, and is the most widely abundant\n            terrestrial carnivore.\n          </Text>\n        </CardContent>\n      </Card>\n\n      <Card style={{ maxWidth: 400, width: '100%', marginBottom: 50 }}>\n        <Ripple onPress={() => console.log('pressed action')}>\n          <CardMedia\n            image={\n              <Image\n                style={{ flex: 1, width: '100%' }}\n                source={{\n                  uri:\n                    'https://images.pexels.com/photos/39571/gorilla-silverback-animal-silvery-grey-39571.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',\n                }}\n                resizeMode=\"cover\"\n              />\n            }\n          />\n          <CardContent>\n            <Text\n              style={{\n                color: 'rgba(0,0,0,.6)',\n                fontSize: 16,\n                fontWeight: '600',\n                marginBottom: 6,\n              }}>\n              Gorilla\n            </Text>\n            <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>\n              Gorillas are ground-dwelling, predominantly herbivorous apes that\n              inhabit the forests of central Sub-Saharan Africa.\n            </Text>\n          </CardContent>\n        </Ripple>\n        <CardActions\n          leftActionItems={[{ name: 'share' }, { name: 'learn more' }]}\n        />\n      </Card>\n    </Container>\n  ))\n  .add('CardActions', () => (\n    <Container scroll>\n      <Header title={'Card Actions'} />\n\n      <Card style={{ maxWidth: 400, width: '100%' }}>\n        <CardMedia\n          image={\n            <Image\n              style={{ flex: 1, width: '100%' }}\n              source={{\n                uri:\n                  'https://images.pexels.com/photos/1938123/pexels-photo-1938123.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',\n              }}\n              resizeMode=\"cover\"\n            />\n          }\n        />\n        <CardContent>\n          <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>\n            Fact: dogs make everything better\n          </Text>\n        </CardContent>\n        <CardActions\n          leftActionItems={[{ name: 'share' }, { name: 'learn more' }]}\n          rightActionItems={[{ name: 'favorite' }, { name: 'share' }]}\n        />\n      </Card>\n    </Container>\n  ))\n  .add('CardContent', () => (\n    <Container scroll>\n      <Header title={'Card Content'} />\n      <Card style={{ maxWidth: 400, width: '100%' }}>\n        <CardMedia\n          image={\n            <Image\n              style={{ flex: 1, width: '100%' }}\n              source={{\n                uri:\n                  'https://images.pexels.com/photos/1124002/pexels-photo-1124002.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',\n              }}\n              resizeMode=\"cover\"\n            />\n          }\n        />\n        <CardContent>\n          <Text\n            style={{\n              color: 'rgba(0,0,0,.6)',\n              fontSize: 16,\n              fontWeight: '600',\n              marginBottom: 10,\n            }}>\n            Reasons dogs are the best:\n          </Text>\n          <View style={{ marginLeft: 8 }}>\n            <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>\n              - Man&apos;s best friend\n            </Text>\n            <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>\n              - Some have jobs\n            </Text>\n            <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>\n              - See image\n            </Text>\n          </View>\n        </CardContent>\n        <CardActions\n          rightActionItems={[\n            <Badge key={2} content={99}>\n              <IconButton name=\"favorite\" color={'#F44336'} size={24} />\n            </Badge>,\n            { name: 'share' },\n          ]}\n        />\n      </Card>\n\n      <Card\n        style={{\n          maxWidth: 500,\n          width: 500,\n          boxSizing: 'borderbox',\n          marginTop: 40,\n        }}>\n        <CardContent>\n          <View style={{ flexDirection: 'row' }}>\n            <View style={{ flex: 1, padding: 8 }}>\n              <Text\n                style={{\n                  color: 'rgba(0,0,0,.6)',\n                  fontSize: 16,\n                  fontWeight: '600',\n                }}>\n                Jon\n              </Text>\n              <Text\n                style={{\n                  color: 'rgba(0,0,0,1)',\n                  fontSize: 20,\n                  fontWeight: '600',\n                  marginBottom: 10,\n                }}>\n                Stewart\n              </Text>\n              <Text\n                style={{\n                  color: 'rgba(0,0,0,.6)',\n                  fontSize: 14,\n                  flexWrap: 'wrap',\n                }}>\n                American comedian, writer, producer, director, activist,\n                political commentator, actor, and television host.\n              </Text>\n            </View>\n            <View style={{ flex: 1, overflow: 'hidden' }}>\n              <Image\n                style={{ width: 250, height: 200 }}\n                source={{\n                  uri:\n                    'https://www.biography.com/.image/t_share/MTE5NTU2MzE2NDkyNjI5NTE1/jon-stewart-16242282-1-402.jpg',\n                }}\n              />\n            </View>\n          </View>\n        </CardContent>\n      </Card>\n    </Container>\n  ))\n\n  .add('CardHeader', () => (\n    <Container scroll>\n      <Header title={'Card Media'} />\n      <Card style={{ maxWidth: 400, width: '100%' }}>\n        <CardHeader\n          thumbnail={\n            <Avatar\n              type=\"image\"\n              image={\n                <Image\n                  source={{\n                    uri:\n                      'http://assets1.ignimgs.com/2014/04/07/marioignpng-e324a5_1280w.png',\n                  }}\n                />\n              }\n              size={40}\n            />\n          }\n          title={'Mario'}\n          subtitle={'Hero. Plumber. Brother.'}\n          action={\n            <IconButton name=\"more-vert\" size={24} color={'rgba(0,0,0,.54)'} />\n          }\n        />\n        <CardMedia\n          image={\n            <Image\n              style={{ flex: 1, width: '100%' }}\n              source={{ uri: 'https://i.redd.it/tr8wgp1ysulz.png' }}\n              resizeMode=\"cover\"\n            />\n          }\n        />\n        <CardContent>\n          <Text>Movember is over.</Text>\n        </CardContent>\n        <CardActions\n          rightActionItems={[\n            { name: 'reply' },\n            { name: 'thumb-up' },\n            { name: 'share' },\n          ]}\n        />\n      </Card>\n      <Card\n        style={{ maxWidth: 400, width: '100%', marginTop: 60 }}\n        radius={1}\n        shadow={4}>\n        <CardHeader\n          subtitle={'Mario - 25 mins ago'}\n          style={{\n            alignItems: 'center',\n            borderBottom: 'none',\n            paddingBottom: 0,\n          }}\n          action={\n            <View\n              style={{\n                flexDirection: 'row',\n                alignItems: 'center',\n              }}>\n              <IconButton name=\"star\" size={24} color={'rgba(0,0,0,.47)'} />\n              <IconButton name=\"delete\" size={24} color={'rgba(0,0,0,.47)'} />\n              <IconButton\n                name=\"more-vert\"\n                size={24}\n                color={'rgba(0,0,0,.47)'}\n              />\n              <Avatar\n                type=\"image\"\n                image={\n                  <Image\n                    source={{\n                      uri:\n                        'http://assets1.ignimgs.com/2014/04/07/marioignpng-e324a5_1280w.png',\n                    }}\n                  />\n                }\n                size={40}\n              />\n            </View>\n          }>\n          <Text>Mario - 25 mins ago</Text>\n        </CardHeader>\n\n        <CardContent style={{ paddingTop: 4, paddingBottom: 16 }}>\n          <Text\n            style={{ color: 'rgba(0,0,0,1)', fontSize: 16, marginBottom: 4 }}>\n            Where is the Princess?\n          </Text>\n          <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>\n            {`I've defeated Bowser in 6 castles and still no Prin...`}\n          </Text>\n        </CardContent>\n      </Card>\n    </Container>\n  ))\n  .add('CardMedia', () => (\n    <Container scroll>\n      <Header title={'Card Media'} />\n\n      <Card style={{ maxWidth: 400, width: '100%' }}>\n        <CardMedia\n          title={'Top ten books'}\n          subtitle={'by Cody'}\n          image={\n            <Image\n              style={{ flex: 1, width: '100%' }}\n              source={{\n                uri:\n                  'https://images.pexels.com/photos/34620/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',\n              }}\n              resizeMode=\"cover\"\n            />\n          }\n        />\n        <CardContent>\n          <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>\n            Books ranked with arbitrary bias, inconsistent logic, and strong\n            opinions.\n          </Text>\n        </CardContent>\n        <CardActions\n          leftActionItems={[{ name: 'Read' }]}\n          rightActionItems={[{ name: 'favorite' }, { name: 'share' }]}\n        />\n      </Card>\n\n      <Card style={{ maxWidth: 400, width: '100%', marginTop: 40 }}>\n        <CardMedia\n          title={'Flights now 30% off'}\n          image={\n            <Image\n              style={{ flex: 1, width: '100%' }}\n              source={{\n                uri:\n                  'https://images.pexels.com/photos/59519/pexels-photo-59519.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',\n              }}\n              resizeMode=\"cover\"\n            />\n          }\n        />\n\n        <CardActions\n          rightActionItems={[\n            <Button key={1} text={'Learn More'} />,\n            <Button key={2} text={'Buy Now'} type=\"contained\" />,\n          ]}\n        />\n      </Card>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/Card/Card.styles.js",
    "content": ""
  },
  {
    "path": "src/Components/Card/Card.test.js",
    "content": "import React from 'react';\nimport { Card } from '../..';\n\nimport renderer from 'react-test-renderer';\n\ntest('Card Renders', () => {\n  const tree = renderer.create(<Card />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Card/CardActions/CardActions.js",
    "content": "import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport PropTypes from 'prop-types';\nimport withTheme from '../../../Theme/withTheme';\nimport Button from '../../Button/Button';\nimport IconButton from '../../IconButton/IconButton';\nimport styles from './CardActions.styles';\n\nclass CardActions extends Component {\n  static propTypes = {\n    children: PropTypes.node,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    leftActionItems: PropTypes.array,\n    rightActionItems: PropTypes.array,\n  };\n\n  _leftActionItems() {\n    const { leftActionItems } = this.props;\n    return leftActionItems.map(item => {\n      if (item.name) {\n        return (\n          <Button key={item.name} onPress={item.onPress} text={item.name} />\n        );\n      } else {\n        return item;\n      }\n    });\n  }\n  _rightActionItems() {\n    const { rightActionItems } = this.props;\n    return rightActionItems.map(item => {\n      if (item.name) {\n        return (\n          <IconButton\n            key={item.name}\n            onPress={item.onPress}\n            name={item.name}\n            size={item.size ? item.size : 24}\n            color={item.color ? item.color : 'rgba(0,0,0,.54)'}\n            style={{ marginLeft: 16 }}\n          />\n        );\n      } else {\n        return item;\n      }\n    });\n  }\n\n  render() {\n    const { style, leftActionItems, rightActionItems } = this.props;\n    return (\n      <View style={[styles.container, style]}>\n        <View style={styles.actions}>\n          {leftActionItems && this._leftActionItems()}\n        </View>\n        <View style={styles.moreActions}>\n          {rightActionItems && this._rightActionItems()}\n        </View>\n      </View>\n    );\n  }\n}\n\nexport default withTheme(CardActions);\n"
  },
  {
    "path": "src/Components/Card/CardActions/CardActions.styles.js",
    "content": "import { StyleSheet } from 'react-native';\nconst styles = StyleSheet.create({\n  container: {\n    padding: 24,\n    paddingTop: 16,\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    flexWrap: 'wrap',\n  },\n  actions: {\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  moreActions: {\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Card/CardActions/CardActions.test.js",
    "content": "import React from 'react';\nimport CardActions from './CardActions';\n\nimport renderer from 'react-test-renderer';\n\ntest('CardActions Renders', () => {\n  const tree = renderer.create(<CardActions />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Card/CardActions/__snapshots__/CardActions.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`CardActions Renders 1`] = `\n<View\n  style={\n    Array [\n      Object {\n        \"alignItems\": \"center\",\n        \"flexDirection\": \"row\",\n        \"flexWrap\": \"wrap\",\n        \"justifyContent\": \"space-between\",\n        \"padding\": 24,\n        \"paddingTop\": 16,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"flexDirection\": \"row\",\n      }\n    }\n  />\n  <View\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"flexDirection\": \"row\",\n      }\n    }\n  />\n</View>\n`;\n"
  },
  {
    "path": "src/Components/Card/CardActions/index.js",
    "content": "export { default } from './CardActions';\n"
  },
  {
    "path": "src/Components/Card/CardContent/CardContent.js",
    "content": "import React, { Component } from 'react';\nimport { View } from 'react-native';\nimport PropTypes from 'prop-types';\nimport withTheme from '../../../Theme/withTheme';\nimport Ripple from '../../Ripple/Ripple';\nimport styles from './CardContent.styles';\n\nclass CardContent extends Component {\n  static propTypes = {\n    children: PropTypes.node,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    rippleProps: PropTypes.object,\n    onPress: PropTypes.func,\n  };\n\n  render() {\n    const { children, style, onPress, rippleProps } = this.props;\n    if (onPress) {\n      return (\n        <Ripple\n          style={[{ padding: 40 }, style]}\n          onPress={onPress}\n          {...rippleProps}>\n          {children}\n        </Ripple>\n      );\n    }\n\n    return <View style={[styles.contentContainer, style]}>{children}</View>;\n  }\n}\n\nexport default withTheme(CardContent);\n"
  },
  {
    "path": "src/Components/Card/CardContent/CardContent.styles.js",
    "content": "import { StyleSheet } from 'react-native';\nconst styles = StyleSheet.create({\n  contentContainer: {\n    padding: 24,\n    fontSize: 16,\n    color: '#000000',\n    lineHeight: 24,\n    letterSpacing: 0.44,\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Card/CardContent/CardContent.test.js",
    "content": "import React from 'react';\nimport CardContent from './CardContent';\n\nimport renderer from 'react-test-renderer';\n\ntest('CardContent Renders', () => {\n  const tree = renderer.create(<CardContent />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Card/CardContent/__snapshots__/CardContent.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`CardContent Renders 1`] = `\n<View\n  style={\n    Array [\n      Object {\n        \"color\": \"#000000\",\n        \"fontSize\": 16,\n        \"letterSpacing\": 0.44,\n        \"lineHeight\": 24,\n        \"padding\": 24,\n      },\n      undefined,\n    ]\n  }\n/>\n`;\n"
  },
  {
    "path": "src/Components/Card/CardContent/index.js",
    "content": "export { default } from './CardContent';\n"
  },
  {
    "path": "src/Components/Card/CardHeader/CardHeader.js",
    "content": "import React, { Component } from 'react';\nimport { View, Text } from 'react-native';\nimport PropTypes from 'prop-types';\nimport withTheme from '../../../Theme/withTheme';\nimport styles from './CardHeader.styles';\n\nclass CardHeader extends Component {\n  static propTypes = {\n    children: PropTypes.node,\n    thumbnail: PropTypes.node,\n    action: PropTypes.node,\n    title: PropTypes.string,\n    titleStyles: PropTypes.object,\n    subtitle: PropTypes.string,\n    subtitleStyles: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n  };\n\n  _renderAction() {\n    const { action } = this.props;\n    if (!action) return null;\n    return <View style={styles.actions}>{action}</View>;\n  }\n\n  _renderText() {\n    return (\n      <View style={styles.textContainer}>\n        {this._renderTitle()}\n        {this._renderSubtitle()}\n      </View>\n    );\n  }\n\n  _renderTitle() {\n    const { title, titleStyles } = this.props;\n    if (!title) return null;\n    return <Text style={[styles.title, titleStyles]}>{title}</Text>;\n  }\n\n  _renderSubtitle() {\n    const { subtitle, subtitleStyles } = this.props;\n    if (!subtitle) return null;\n    return <Text style={[styles.subtitle, subtitleStyles]}>{subtitle}</Text>;\n  }\n\n  render() {\n    const { thumbnail, children, style } = this.props;\n    return (\n      <View style={[styles.container, style]}>\n        <View style={styles.left}>\n          {thumbnail ? thumbnail : null}\n          {children ? children : this._renderText()}\n        </View>\n        {this._renderAction()}\n      </View>\n    );\n  }\n}\n\nexport default withTheme(CardHeader);\n"
  },
  {
    "path": "src/Components/Card/CardHeader/CardHeader.styles.js",
    "content": "import { StyleSheet } from 'react-native';\nconst styles = StyleSheet.create({\n  container: {\n    padding: 24,\n    borderBottomWidth: StyleSheet.hairlineWidth,\n    borderBottomColor: 'rgba(0,0,0,.2)',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n  },\n\n  actions: {\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n  },\n\n  left: {\n    flexDirection: 'row',\n    flexShrink: 1,\n  },\n\n  textContainer: {\n    marginLeft: 16,\n    flexWrap: 'wrap',\n    flexShrink: 1,\n  },\n\n  title: {\n    fontSize: 20,\n    fontWeight: '500',\n    lineHeight: 24,\n    letterSpacing: 0.15,\n    color: '#000000',\n    flexWrap: 'wrap',\n    marginBottom: 7,\n  },\n  subtitle: {\n    fontSize: 14,\n    lineHeight: 16,\n    letterSpacing: 0.25,\n    color: '#212121',\n    flexWrap: 'wrap',\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Card/CardHeader/CardHeader.test.js",
    "content": "import React from 'react';\nimport CardHeader from './CardHeader';\n\nimport renderer from 'react-test-renderer';\n\ntest('CardHeader Renders', () => {\n  const tree = renderer.create(<CardHeader />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Card/CardHeader/__snapshots__/CardHeader.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`CardHeader Renders 1`] = `\n<View\n  style={\n    Array [\n      Object {\n        \"borderBottomColor\": \"rgba(0,0,0,.2)\",\n        \"borderBottomWidth\": 0.5,\n        \"flexDirection\": \"row\",\n        \"justifyContent\": \"space-between\",\n        \"padding\": 24,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    style={\n      Object {\n        \"flexDirection\": \"row\",\n        \"flexShrink\": 1,\n      }\n    }\n  >\n    <View\n      style={\n        Object {\n          \"flexShrink\": 1,\n          \"flexWrap\": \"wrap\",\n          \"marginLeft\": 16,\n        }\n      }\n    />\n  </View>\n</View>\n`;\n"
  },
  {
    "path": "src/Components/Card/CardHeader/index.js",
    "content": "export { default } from './CardHeader';\n"
  },
  {
    "path": "src/Components/Card/CardMedia/CardMedia.js",
    "content": "import React, { Component } from 'react';\nimport { View, Text } from 'react-native';\nimport PropTypes from 'prop-types';\nimport withTheme from '../../../Theme/withTheme';\nimport styles from './CardMedia.styles';\n\nclass CardMedia extends Component {\n  static propTypes = {\n    children: PropTypes.node,\n    image: PropTypes.node,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    title: PropTypes.string,\n    titleStyles: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    subtitle: PropTypes.string,\n    subtitleStyles: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    height: PropTypes.number,\n  };\n\n  static defaultProps = {\n    height: 155,\n  };\n\n  _renderText() {\n    return (\n      <View style={styles.textContainer}>\n        {this._renderTitle()}\n        {this._renderSubtitle()}\n      </View>\n    );\n  }\n\n  _renderTitle() {\n    const { title, titleStyles } = this.props;\n    if (!title) return null;\n    return <Text style={[styles.title, titleStyles]}>{title}</Text>;\n  }\n\n  _renderSubtitle() {\n    const { subtitle, subtitleStyles } = this.props;\n    if (!subtitle) return null;\n    return <Text style={[styles.subtitle, subtitleStyles]}>{subtitle}</Text>;\n  }\n\n  render() {\n    const { image, style, height } = this.props;\n    return (\n      <View style={[styles.container, { height: height }, style]}>\n        {image}\n        {this._renderText()}\n      </View>\n    );\n  }\n}\n\nexport default withTheme(CardMedia);\n"
  },
  {
    "path": "src/Components/Card/CardMedia/CardMedia.styles.js",
    "content": "import { StyleSheet } from 'react-native';\nconst styles = StyleSheet.create({\n  container: {\n    width: '100%',\n    overflow: 'hidden',\n    justifyContent: 'center',\n    alignItems: 'center',\n    position: 'relative',\n  },\n  textContainer: {\n    position: 'absolute',\n    left: 24,\n    bottom: 24,\n  },\n\n  title: {\n    fontSize: 20,\n    fontWeight: '500',\n    lineHeight: 24,\n    color: '#FFFFFF',\n    letterSpacing: 0.15,\n    marginBottom: 7,\n  },\n  subtitle: {\n    fontSize: 14,\n    lineHeight: 16,\n    color: '#FFFFFF',\n    letterSpacing: 0.25,\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Card/CardMedia/CardMedia.test.js",
    "content": "import React from 'react';\nimport CardMedia from './CardMedia';\n\nimport renderer from 'react-test-renderer';\n\ntest('CardMedia Renders', () => {\n  const tree = renderer.create(<CardMedia />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Card/CardMedia/__snapshots__/CardMedia.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`CardMedia Renders 1`] = `\n<View\n  style={\n    Array [\n      Object {\n        \"alignItems\": \"center\",\n        \"justifyContent\": \"center\",\n        \"overflow\": \"hidden\",\n        \"position\": \"relative\",\n        \"width\": \"100%\",\n      },\n      Object {\n        \"height\": 155,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    style={\n      Object {\n        \"bottom\": 24,\n        \"left\": 24,\n        \"position\": \"absolute\",\n      }\n    }\n  />\n</View>\n`;\n"
  },
  {
    "path": "src/Components/Card/CardMedia/index.js",
    "content": "export { default } from './CardMedia';\n"
  },
  {
    "path": "src/Components/Card/__snapshots__/Card.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Card Renders 1`] = `\n<View\n  style={\n    Object {\n      \"backgroundColor\": \"white\",\n      \"borderBottomColor\": \"rgba(0,0,0,.4)\",\n      \"borderRadius\": 4,\n      \"borderWidth\": 0,\n      \"maxWidth\": 500,\n      \"shadowColor\": \"#000\",\n      \"shadowOffset\": Object {\n        \"height\": 1,\n        \"width\": 0,\n      },\n      \"shadowOpacity\": 0.18,\n      \"shadowRadius\": 1,\n    }\n  }\n  useNativeDriver={true}\n/>\n`;\n"
  },
  {
    "path": "src/Components/Card/index.js",
    "content": "export { default } from './Card';\nexport { default as CardActions } from './CardActions';\nexport { default as CardContent } from './CardContent';\nexport { default as CardHeader } from './CardHeader';\nexport { default as CardMedia } from './CardMedia';\n"
  },
  {
    "path": "src/Components/Checkbox/Checkbox.js",
    "content": "import React, { Component } from 'react';\nimport { Text, View, TouchableWithoutFeedback } from 'react-native';\nimport PropTypes from 'prop-types';\n\nimport Icon from '../Icon/Icon';\nimport Ripple from '../Ripple/Ripple';\nimport withTheme from '../../Theme/withTheme';\nimport styles from './Checkbox.styles';\n\nclass Checkbox extends Component {\n  static propTypes = {\n    checked: PropTypes.bool,\n    disabled: PropTypes.bool,\n    onPress: PropTypes.func,\n    rippleColor: PropTypes.string,\n    checkboxColor: PropTypes.string,\n    unCheckedColor: PropTypes.string,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    checkboxStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    theme: PropTypes.object,\n    rippleMatchesCheckbox: PropTypes.bool,\n    indeterminate: PropTypes.bool,\n\n    label: PropTypes.string,\n    labelStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    labelPos: PropTypes.string,\n\n    icon: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),\n    size: PropTypes.number,\n    checkedIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),\n\n    ios: PropTypes.bool,\n\n    error: PropTypes.bool,\n    testID: PropTypes.string,\n  };\n\n  static defaultProps = {\n    unCheckedColor: 'rgba(0,0,0,.5)',\n    rippleColor: 'rgba(0,0,0,.8)',\n    icon: 'check-box-outline-blank',\n    size: 24,\n    checkedIcon: 'check-box',\n    labelPos: 'right',\n  };\n\n  _getRippleColor() {\n    const { rippleColor, rippleMatchesCheckbox, error, theme } = this.props;\n    const checkboxColor = this._getCheckBoxColor();\n\n    let rippleColorApplied = rippleColor;\n\n    if (rippleMatchesCheckbox) rippleColorApplied = checkboxColor;\n\n    if (error) rippleColorApplied = theme.error.main;\n\n    return rippleColorApplied;\n  }\n\n  _getCheckBoxColor() {\n    const { disabled, checkboxColor, theme, error } = this.props;\n    let checkboxColorApplied = checkboxColor\n      ? checkboxColor\n      : theme.primary.main;\n\n    if (error) checkboxColorApplied = theme.error.main;\n\n    if (disabled) checkboxColorApplied = 'rgba(0,0,0,.5)';\n\n    return checkboxColorApplied;\n  }\n\n  _renderLabel() {\n    const { label, labelStyle, onPress } = this.props;\n    if (!label) return null;\n\n    return (\n      <TouchableWithoutFeedback onPress={onPress}>\n        <View style={styles.labelContainer}>\n          <Text style={[styles.label, labelStyle]}>{label}</Text>\n        </View>\n      </TouchableWithoutFeedback>\n    );\n  }\n\n  _renderIconContainer() {\n    const { disabled, onPress, checkboxStyle, size } = this.props;\n\n    const rippleColor = this._getRippleColor();\n    const rippleSize = 1.5 * size;\n\n    return (\n      <Ripple\n        onPress={onPress}\n        disabled={disabled}\n        style={[\n          styles.checkBoxRipple,\n          checkboxStyle,\n          { width: rippleSize, height: rippleSize, padding: rippleSize / 6 },\n        ]}\n        rippleCentered={true}\n        rippleColor={rippleColor}\n        rippleContainerBorderRadius={rippleSize / 2}>\n        {this._renderIcon()}\n      </Ripple>\n    );\n  }\n\n  _renderIcon() {\n    const {\n      icon,\n      size,\n      checkedIcon,\n      unCheckedColor,\n      indeterminate,\n      checked,\n      ios,\n      theme,\n      error,\n    } = this.props;\n\n    const checkboxColor = this._getCheckBoxColor();\n\n    if (icon && icon.props && icon.props.name && !checked) {\n      return React.cloneElement(icon, {\n        size: icon.props.size ? icon.props.size : size,\n        color: checkboxColor,\n      });\n    } else if (\n      checkedIcon &&\n      checkedIcon.props &&\n      checkedIcon.props.name &&\n      checked\n    ) {\n      return React.cloneElement(checkedIcon, {\n        size: icon.props.size ? icon.props.size : size,\n        color: checkboxColor,\n      });\n    }\n\n    let iconName = indeterminate ? 'indeterminate-check-box' : checkedIcon;\n    let opacity = 1;\n\n    if (ios && !indeterminate && checked) iconName = 'done';\n\n    if (!checked) iconName = icon;\n\n    if (!checked && ios) opacity = 0;\n\n    let unCheckedColorApplied = unCheckedColor;\n\n    if (error) unCheckedColorApplied = theme.error.main;\n\n    return (\n      <Icon\n        name={iconName}\n        size={size}\n        color={checked ? checkboxColor : unCheckedColorApplied}\n        style={{ opacity }}\n      />\n    );\n  }\n\n  render() {\n    const { style, labelPos, testID } = this.props;\n\n    return (\n      <View style={[styles.container, style]} testID={testID}>\n        {labelPos === 'left' ? this._renderLabel() : null}\n        {this._renderIconContainer()}\n        {labelPos === 'right' ? this._renderLabel() : null}\n      </View>\n    );\n  }\n}\n\nexport default withTheme(Checkbox);\n"
  },
  {
    "path": "src/Components/Checkbox/Checkbox.stories.js",
    "content": "import React from 'react';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\nimport { View } from 'react-native';\n\nimport { Checkbox } from '../../';\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\nimport { State, Store } from '@sambego/storybook-state';\n\nconst store = new Store({\n  checkedOne: true,\n  checkedTwo: true,\n  checkedThree: true,\n  checkedFour: true,\n  checkedFive: true,\n});\n\nexport default storiesOf('Components|Checkbox', module)\n  .addParameters({ jest: ['Checkbox'] })\n  .add('Simple', () => (\n    <Container>\n      <Header title={'Simple'} />\n\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View\n            style={{\n              flexDirection: 'row',\n              alignItems: 'center',\n              flexWrap: 'wrap',\n            }}>\n            <Checkbox\n              checked={state.checkedOnePrime}\n              onPress={() =>\n                store.set({ checkedOnePrime: !state.checkedOnePrime })\n              }\n            />\n            <Checkbox\n              rippleMatchesCheckbox\n              checkboxColor={'#009688'}\n              checked={state.checkedTwoPrime}\n              onPress={() =>\n                store.set({ checkedTwoPrime: !state.checkedTwoPrime })\n              }\n            />\n            <Checkbox\n              rippleMatchesCheckbox\n              checkboxColor={'#E91E63'}\n              checked={state.checkedThreePrime}\n              onPress={() =>\n                store.set({ checkedThreePrime: !state.checkedThreePrime })\n              }\n            />\n            <Checkbox\n              indeterminate\n              checkboxColor={'#795548'}\n              checked={state.checkedFourPrime}\n              onPress={() =>\n                store.set({ checkedFourPrime: !state.checkedFourPrime })\n              }\n            />\n            <Checkbox\n              error\n              checked={state.checkedFivePrime}\n              onPress={() =>\n                store.set({ checkedFivePrime: !state.checkedFivePrime })\n              }\n            />\n          </View>\n        )}\n      </State>\n\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View\n            style={{\n              flexDirection: 'row',\n              alignItems: 'center',\n              flexWrap: 'wrap',\n            }}>\n            <Checkbox\n              checked={state.checkedOne}\n              onPress={() => store.set({ checkedOne: !state.checkedOne })}\n            />\n            <Checkbox\n              rippleMatchesCheckbox\n              checkboxColor={'#009688'}\n              checked={state.checkedTwo}\n              onPress={() => store.set({ checkedTwo: !state.checkedTwo })}\n            />\n            <Checkbox\n              rippleMatchesCheckbox\n              checkboxColor={'#E91E63'}\n              checked={state.checkedThree}\n              onPress={() => store.set({ checkedThree: !state.checkedThree })}\n            />\n            <Checkbox\n              indeterminate\n              checkboxColor={'#795548'}\n              checked={state.checkedFour}\n              onPress={() => store.set({ checkedFour: !state.checkedFour })}\n            />\n            <Checkbox\n              error\n              checked={state.checkedFive}\n              onPress={() => store.set({ checkedFive: !state.checkedFive })}\n            />\n          </View>\n        )}\n      </State>\n\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View\n            style={{\n              flexDirection: 'row',\n              alignItems: 'center',\n              flexWrap: 'wrap',\n            }}>\n            <Checkbox\n              checked={state.checkedOnePrime}\n              unCheckedColor={'#1e88e5'}\n              onPress={() =>\n                store.set({ checkedOnePrime: !state.checkedOnePrime })\n              }\n            />\n            <Checkbox\n              rippleMatchesCheckbox\n              checkboxColor={'#009688'}\n              unCheckedColor={'#009688'}\n              checked={state.checkedTwoPrime}\n              onPress={() =>\n                store.set({ checkedTwoPrime: !state.checkedTwoPrime })\n              }\n            />\n            <Checkbox\n              rippleMatchesCheckbox\n              checkboxColor={'#E91E63'}\n              unCheckedColor={'#E91E63'}\n              checked={state.checkedThreePrime}\n              onPress={() =>\n                store.set({ checkedThreePrime: !state.checkedThreePrime })\n              }\n            />\n            <Checkbox\n              indeterminate\n              checkboxColor={'#795548'}\n              unCheckedColor={'#795548'}\n              checked={state.checkedFourPrime}\n              onPress={() =>\n                store.set({ checkedFourPrime: !state.checkedFourPrime })\n              }\n            />\n            <Checkbox\n              error\n              checked={state.checkedFivePrime}\n              onPress={() =>\n                store.set({ checkedFivePrime: !state.checkedFivePrime })\n              }\n            />\n          </View>\n        )}\n      </State>\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View\n            style={{\n              flexDirection: 'row',\n              alignItems: 'center',\n              flexWrap: 'wrap',\n            }}>\n            <Checkbox\n              disabled\n              checked={state.checkedOne}\n              onPress={() => store.set({ checkedOne: !state.checkedOne })}\n            />\n            <Checkbox\n              disabled\n              rippleMatchesCheckbox\n              checkboxColor={'#009688'}\n              checked={state.checkedTwo}\n              onPress={() => store.set({ checkedTwo: !state.checkedTwo })}\n            />\n            <Checkbox\n              disabled\n              rippleMatchesCheckbox\n              checkboxColor={'#E91E63'}\n              checked={state.checkedThree}\n              onPress={() => store.set({ checkedThree: !state.checkedThree })}\n            />\n            <Checkbox\n              disabled\n              indeterminate\n              checkboxColor={'#795548'}\n              checked={state.checkedFour}\n              onPress={() => store.set({ checkedFour: !state.checkedFour })}\n            />\n            <Checkbox\n              error\n              disabled\n              checked={state.checkedFive}\n              onPress={() => store.set({ checkedFive: !state.checkedFive })}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('Icons', () => (\n    <Container>\n      <Header title={'Icons'} />\n\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View\n            style={{\n              flexDirection: 'row',\n              alignItems: 'center',\n              flexWrap: 'wrap',\n            }}>\n            <Checkbox\n              checked={state.checkedOnePrime}\n              icon={'favorite-border'}\n              checkedIcon={'favorite'}\n              checkboxColor={'#F44336'}\n              onPress={() =>\n                store.set({ checkedOnePrime: !state.checkedOnePrime })\n              }\n            />\n            <Checkbox\n              rippleMatchesCheckbox\n              checkboxColor={'#009688'}\n              checked={state.checkedTwoPrime}\n              icon={'add-circle-outline'}\n              checkedIcon={'add-circle'}\n              onPress={() =>\n                store.set({ checkedTwoPrime: !state.checkedTwoPrime })\n              }\n            />\n            <Checkbox\n              rippleMatchesCheckbox\n              checkboxColor={'#E91E63'}\n              icon={'bookmark-border'}\n              checkedIcon={'bookmark'}\n              checked={state.checkedThreePrime}\n              onPress={() =>\n                store.set({ checkedThreePrime: !state.checkedThreePrime })\n              }\n            />\n            <Checkbox\n              icon={'folder-open'}\n              checkedIcon={'folder'}\n              checkboxColor={'#F44336'}\n              checked={state.checkedFourPrime}\n              onPress={() =>\n                store.set({ checkedFourPrime: !state.checkedFourPrime })\n              }\n            />\n          </View>\n        )}\n      </State>\n\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View\n            style={{\n              flexDirection: 'row',\n              alignItems: 'center',\n              flexWrap: 'wrap',\n            }}>\n            <Checkbox\n              checked={state.checkedOne}\n              icon={'favorite-border'}\n              checkedIcon={'favorite'}\n              checkboxColor={'#F44336'}\n              onPress={() => store.set({ checkedOne: !state.checkedOne })}\n            />\n            <Checkbox\n              rippleMatchesCheckbox\n              checkboxColor={'#009688'}\n              checked={state.checkedTwo}\n              icon={'add-circle-outline'}\n              checkedIcon={'add-circle'}\n              onPress={() => store.set({ checkedTwo: !state.checkedTwo })}\n            />\n            <Checkbox\n              rippleMatchesCheckbox\n              checkboxColor={'#E91E63'}\n              icon={'bookmark-border'}\n              checkedIcon={'bookmark'}\n              checked={state.checkedThree}\n              onPress={() => store.set({ checkedThree: !state.checkedThree })}\n            />\n            <Checkbox\n              icon={'folder-open'}\n              checkedIcon={'folder'}\n              checkboxColor={'#F44336'}\n              checked={state.checkedFour}\n              onPress={() => store.set({ checkedFour: !state.checkedFour })}\n            />\n          </View>\n        )}\n      </State>\n\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View\n            style={{\n              flexDirection: 'row',\n              alignItems: 'center',\n              flexWrap: 'wrap',\n            }}>\n            <Checkbox\n              checked={state.checkedOnePrime}\n              icon={'favorite-border'}\n              checkedIcon={'favorite'}\n              checkboxColor={'#F44336'}\n              unCheckedColor={'#F44336'}\n              onPress={() =>\n                store.set({ checkedOnePrime: !state.checkedOnePrime })\n              }\n            />\n            <Checkbox\n              rippleMatchesCheckbox\n              checkboxColor={'#009688'}\n              unCheckedColor={'#009688'}\n              checked={state.checkedTwoPrime}\n              icon={'add-circle-outline'}\n              checkedIcon={'add-circle'}\n              onPress={() =>\n                store.set({ checkedTwoPrime: !state.checkedTwoPrime })\n              }\n            />\n            <Checkbox\n              rippleMatchesCheckbox\n              checkboxColor={'#E91E63'}\n              unCheckedColor={'#E91E63'}\n              icon={'bookmark-border'}\n              checkedIcon={'bookmark'}\n              checked={state.checkedThreePrime}\n              onPress={() =>\n                store.set({ checkedThreePrime: !state.checkedThreePrime })\n              }\n            />\n            <Checkbox\n              checkboxColor={'#F44336'}\n              unCheckedColor={'#F44336'}\n              icon={'folder-open'}\n              checkedIcon={'folder'}\n              checked={state.checkedFourPrime}\n              onPress={() =>\n                store.set({ checkedFourPrime: !state.checkedFourPrime })\n              }\n            />\n          </View>\n        )}\n      </State>\n\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View\n            style={{\n              flexDirection: 'row',\n              alignItems: 'center',\n              flexWrap: 'wrap',\n            }}>\n            <Checkbox\n              disabled\n              checked={state.checkedOne}\n              icon={'favorite-border'}\n              checkedIcon={'favorite'}\n              checkboxColor={'#F44336'}\n              onPress={() => store.set({ checkedOne: !state.checkedOne })}\n            />\n            <Checkbox\n              disabled\n              rippleMatchesCheckbox\n              checkboxColor={'#009688'}\n              checked={state.checkedTwo}\n              icon={'add-circle-outline'}\n              checkedIcon={'add-circle'}\n              onPress={() => store.set({ checkedTwo: !state.checkedTwo })}\n            />\n            <Checkbox\n              disabled\n              rippleMatchesCheckbox\n              checkboxColor={'#E91E63'}\n              icon={'bookmark-border'}\n              checkedIcon={'bookmark'}\n              checked={state.checkedThree}\n              onPress={() => store.set({ checkedThree: !state.checkedThree })}\n            />\n            <Checkbox\n              disabled\n              icon={'folder-open'}\n              checkedIcon={'folder'}\n              checkboxColor={'#F44336'}\n              checked={state.checkedFour}\n              onPress={() => store.set({ checkedFour: !state.checkedFour })}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('Labels', () => (\n    <Container>\n      <Header title={'Labels'} />\n\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View\n            style={{\n              flexDirection: 'row',\n              alignItems: 'center',\n              flexWrap: 'wrap',\n            }}>\n            <Checkbox\n              label={'Click me'}\n              checked={state.checkedOne}\n              onPress={() => store.set({ checkedOne: !state.checkedOne })}\n            />\n            <Checkbox\n              rippleMatchesCheckbox\n              checkboxColor={'#009688'}\n              checked={state.checkedTwo}\n              label={'Item 2'}\n              labelStyle={{ fontSize: 18, color: '#009688' }}\n              onPress={() => store.set({ checkedTwo: !state.checkedTwo })}\n            />\n            <Checkbox\n              rippleMatchesCheckbox\n              checkboxColor={'#E91E63'}\n              icon={'bookmark-border'}\n              checkedIcon={'bookmark'}\n              label={'Bookmark'}\n              labelStyle={{ fontSize: 14, color: '#E91E63' }}\n              checked={state.checkedThree}\n              onPress={() => store.set({ checkedThree: !state.checkedThree })}\n            />\n\n            <Checkbox\n              rippleMatchesCheckbox\n              checkboxColor={'#3F51B5'}\n              label={'Click'}\n              labelStyle={{ fontSize: 14, color: '#3F51B5' }}\n              checked={state.checkedFour}\n              onPress={() => store.set({ checkedFour: !state.checkedFour })}\n            />\n          </View>\n        )}\n      </State>\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View\n            style={{\n              flexDirection: 'row',\n              alignItems: 'center',\n              flexWrap: 'wrap',\n              marginTop: 40,\n            }}>\n            <Checkbox\n              label={'Click me'}\n              checked={state.checkedOne}\n              onPress={() => store.set({ checkedOne: !state.checkedOne })}\n              labelPos={'left'}\n            />\n            <Checkbox\n              rippleMatchesCheckbox\n              checkboxColor={'#009688'}\n              checked={state.checkedTwo}\n              label={'Item 2'}\n              labelStyle={{ fontSize: 18, color: '#009688' }}\n              onPress={() => store.set({ checkedTwo: !state.checkedTwo })}\n              labelPos={'left'}\n            />\n            <Checkbox\n              rippleMatchesCheckbox\n              checkboxColor={'#E91E63'}\n              icon={'bookmark-border'}\n              checkedIcon={'bookmark'}\n              label={'Bookmark'}\n              labelStyle={{ fontSize: 14, color: '#E91E63' }}\n              checked={state.checkedThree}\n              onPress={() => store.set({ checkedThree: !state.checkedThree })}\n              labelPos={'left'}\n            />\n\n            <Checkbox\n              rippleMatchesCheckbox\n              checkboxColor={'#3F51B5'}\n              label={'Click'}\n              labelStyle={{ fontSize: 14, color: '#3F51B5' }}\n              checked={state.checkedFour}\n              onPress={() => store.set({ checkedFour: !state.checkedFour })}\n              labelPos={'left'}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('iOS', () => (\n    <Container>\n      <Header title={'iOS'} />\n\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View\n            style={{\n              flexDirection: 'row',\n              alignItems: 'center',\n              flexWrap: 'wrap',\n            }}>\n            <Checkbox\n              ios\n              checked={state.checkedOne}\n              onPress={() => store.set({ checkedOne: !state.checkedOne })}\n            />\n            <Checkbox\n              ios\n              rippleMatchesCheckbox\n              checkboxColor={'#009688'}\n              checked={state.checkedTwo}\n              onPress={() => store.set({ checkedTwo: !state.checkedTwo })}\n            />\n            <Checkbox\n              ios\n              checkboxColor={'#E91E63'}\n              label={'Toggle'}\n              checked={state.checkedThree}\n              onPress={() => store.set({ checkedThree: !state.checkedThree })}\n            />\n            <Checkbox\n              ios\n              disabled\n              rippleMatchesCheckbox\n              checkboxColor={'#009688'}\n              checked={state.checkedFour}\n              label={'Disabled'}\n              onPress={() => store.set({ checkedFour: !state.checkedFour })}\n            />\n            <Checkbox\n              ios\n              error\n              rippleMatchesCheckbox\n              checkboxColor={'#009688'}\n              checked={state.checkedFive}\n              label={'Error'}\n              onPress={() => store.set({ checkedFive: !state.checkedFive })}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/Checkbox/Checkbox.styles.js",
    "content": "import { StyleSheet } from 'react-native';\nconst styles = StyleSheet.create({\n  container: {\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  checkBoxRipple: {\n    borderRadius: 100,\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  labelContainer: { flexShrink: 1 },\n  label: {},\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Checkbox/Checkbox.test.js",
    "content": "import React from 'react';\nimport { Checkbox } from '../..';\n\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\n\ntest('Checkbox Renders', () => {\n  const tree = renderer.render(<Checkbox />);\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Checkbox/__snapshots__/Checkbox.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Checkbox Renders 1`] = `\n<Context.Consumer>\n  [Function]\n</Context.Consumer>\n`;\n"
  },
  {
    "path": "src/Components/Checkbox/index.js",
    "content": "export { default } from './Checkbox';\n"
  },
  {
    "path": "src/Components/Chip/Chip.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Text, View, StyleSheet } from 'react-native';\nimport withTheme from '../../Theme/withTheme';\nimport Paper from '../Paper/Paper';\nimport Ripple from '../Ripple/Ripple';\nimport Icon from '../Icon/Icon';\n\nimport styles from './Chip.styles';\n\nclass Chip extends Component {\n  static propTypes = {\n    children: PropTypes.node,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    theme: PropTypes.object,\n\n    chipStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n\n    color: PropTypes.string,\n    themeColor: PropTypes.string,\n    radius: PropTypes.number,\n\n    onPress: PropTypes.func,\n    onDelete: PropTypes.func,\n    visible: PropTypes.bool,\n\n    text: PropTypes.string,\n    textStyles: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n\n    leftIcon: PropTypes.node,\n    rightIcon: PropTypes.node,\n\n    selected: PropTypes.bool,\n    disabled: PropTypes.bool,\n    testID: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),\n  };\n\n  static defaultProps = {\n    visible: true,\n    canDelete: false,\n    radius: 16,\n  };\n\n  _renderText() {\n    const {\n      text,\n      textStyles,\n      leftIcon,\n      rightIcon,\n      onDelete,\n      color,\n      themeColor,\n      chipStyle,\n      theme,\n    } = this.props;\n\n    let displayedColor = themeColor || color ? 'white' : 'rgba(0, 0, 0, 0.87)';\n\n    if (chipStyle == 'outlined' && (themeColor || color))\n      displayedColor = theme[themeColor || 'primary'].main;\n\n    return (\n      <Text\n        numberOfLines={1}\n        style={[\n          styles.text,\n          {\n            color: displayedColor,\n            marginLeft: leftIcon ? 8 : 12,\n            marginRight: rightIcon || onDelete ? 8 : 12,\n          },\n          textStyles,\n        ]}>\n        {text}\n      </Text>\n    );\n  }\n\n  _renderIcon(icon, position) {\n    const { chipStyle } = this.props;\n\n    if (!icon) return null;\n\n    const inner = React.cloneElement(icon, {\n      size: icon.props.size ? icon.props.size : 24,\n    });\n\n    let marginRight = chipStyle == 'outlined' ? 8 : 4;\n    let marginLeft = chipStyle == 'outlined' ? 8 : 4;\n    if (position == 'right') marginLeft = 0;\n    if (position == 'left') marginRight = 0;\n\n    return (\n      <View\n        style={{\n          marginRight,\n          marginLeft,\n        }}>\n        {inner}\n      </View>\n    );\n  }\n\n  _renderRightIcon() {\n    const { rightIcon, onDelete } = this.props;\n\n    if (onDelete) return this._renderDeleteIcon();\n    return this._renderIcon(rightIcon, 'right');\n  }\n\n  _renderDeleteIcon() {\n    const {\n      onDelete,\n      disabled,\n      themeColor,\n      color,\n      chipStyle,\n      theme,\n    } = this.props;\n    let iconColor = themeColor || color ? 'white' : '#666666';\n    if (chipStyle == 'outlined')\n      iconColor = themeColor ? theme[themeColor].main : '#666666';\n\n    return (\n      <Ripple\n        onPress={onDelete}\n        disabled={disabled || !onDelete}\n        rippleContainerBorderRadius={100}\n        style={{ marginRight: 8 }}>\n        <Icon name=\"cancel\" size={18} color={iconColor} />\n      </Ripple>\n    );\n  }\n\n  render() {\n    const {\n      chipStyle,\n      disabled,\n      onPress,\n      style,\n      color,\n      themeColor,\n      children,\n      visible,\n      leftIcon,\n      theme,\n      radius,\n      testID,\n    } = this.props;\n\n    let borderWidth = 0;\n    let displayBackgroundColor = themeColor\n      ? theme[themeColor].main\n      : '#e0e0e0';\n    let displayBorderColor = themeColor\n      ? theme[themeColor].main\n      : 'rgba(0, 0, 0, 0.23)';\n    let rippleColor = themeColor\n      ? theme[themeColor].main\n      : 'rgba(0, 0, 0, .87)';\n\n    if (chipStyle === 'outlined') {\n      borderWidth = StyleSheet.hairlineWidth;\n      displayBackgroundColor = 'transparent';\n    }\n\n    if (color) {\n      if (chipStyle != 'outlined') displayBackgroundColor = color;\n      if (chipStyle == 'outlined') displayBorderColor = color;\n      rippleColor = color;\n    }\n\n    if (!visible) return null;\n    return (\n      <Paper\n        style={[\n          styles.container,\n          {\n            backgroundColor: displayBackgroundColor,\n            borderColor: displayBorderColor,\n            borderWidth,\n            borderRadius: radius,\n          },\n          style,\n        ]}\n        testID={testID}\n        shadow={0}>\n        <Ripple\n          rippleContainerBorderRadius={radius}\n          onPress={onPress}\n          disabled={disabled || !onPress}\n          style={[styles.ripple, { borderRadius: radius }]}\n          rippleColor={rippleColor}>\n          <View style={styles.content}>\n            {this._renderIcon(leftIcon, 'left')}\n            {children ? children : this._renderText()}\n            {this._renderRightIcon()}\n          </View>\n        </Ripple>\n      </Paper>\n    );\n  }\n}\n\nexport default withTheme(Chip);\n"
  },
  {
    "path": "src/Components/Chip/Chip.stories.js",
    "content": "import React from 'react';\nimport { View, Image } from 'react-native';\n\nimport { Chip, Icon, Avatar } from '../../';\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\n\nimport { State, Store } from '@sambego/storybook-state';\n\nconst store = new Store({\n  chipOne: true,\n  chipTwo: true,\n  chipThree: true,\n  chipFour: true,\n  chipFive: true,\n  chipSix: true,\n});\n\n/* eslint-disable no-console */\n\nexport default storiesOf('Components|Chip', module)\n  .addParameters({ jest: ['Chip'] })\n  .add('Filled', () => (\n    <Container>\n      <Header title={'Filled'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View\n            style={{\n              flexDirection: 'row',\n              alignItems: 'center',\n              justifyContent: 'space-between',\n              flexWrap: 'wrap',\n            }}>\n            <Chip text={'Chip'} />\n            <Chip\n              text={'Delete me'}\n              visible={state.chipTwo}\n              onDelete={() => store.set({ chipTwo: false })}\n            />\n            <Chip\n              text={'Alaska'}\n              color={'#009688'}\n              visible={state.chipThree}\n              onDelete={() => store.set({ chipThree: false })}\n              leftIcon={<Icon name=\"place\" color={'white'} />}\n            />\n            <Chip\n              text={'User'}\n              themeColor={'primary'}\n              onPress={() => console.log('clicked four')}\n              leftIcon={\n                <Avatar\n                  type=\"image\"\n                  image={\n                    <Image\n                      source={{\n                        uri:\n                          'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4',\n                      }}\n                    />\n                  }\n                />\n              }\n            />\n            <Chip\n              text={'Click me'}\n              themeColor={'primary'}\n              onPress={() => console.log('clicked five')}\n            />\n            <Chip\n              text={'Biking'}\n              themeColor={'secondary'}\n              leftIcon={<Icon name=\"directions-bike\" color={'#009688'} />}\n              visible={state.chipSix}\n              onDelete={() => store.set({ chipSix: false })}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('Outlined', () => (\n    <Container>\n      <Header title={'Outlined'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View\n            style={{\n              flexDirection: 'row',\n              alignItems: 'center',\n              justifyContent: 'space-between',\n              flexWrap: 'wrap',\n            }}>\n            <Chip text={'Chip'} chipStyle={'outlined'} />\n            <Chip\n              text={'Delete me'}\n              chipStyle={'outlined'}\n              visible={state.chipTwo}\n              onDelete={() => store.set({ chipTwo: false })}\n            />\n            <Chip\n              text={'Alaska'}\n              chipStyle={'outlined'}\n              color={'#009688'}\n              visible={state.chipThree}\n              onDelete={() => store.set({ chipThree: false })}\n              leftIcon={<Icon name=\"place\" color={'#009688'} />}\n            />\n            <Chip\n              text={'User'}\n              chipStyle={'outlined'}\n              themeColor={'primary'}\n              onPress={() => console.log('clicked four')}\n              leftIcon={\n                <Avatar\n                  type=\"image\"\n                  image={\n                    <Image\n                      source={{\n                        uri:\n                          'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4',\n                      }}\n                    />\n                  }\n                />\n              }\n            />\n            <Chip\n              text={'Click me'}\n              chipStyle={'outlined'}\n              themeColor={'primary'}\n              onPress={() => console.log('clicked five')}\n            />\n            <Chip\n              text={'Biking'}\n              chipStyle={'outlined'}\n              themeColor={'secondary'}\n              leftIcon={<Icon name=\"directions-bike\" color={'#009688'} />}\n              visible={state.chipSix}\n              onDelete={() => store.set({ chipSix: false })}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/Chip/Chip.styles.js",
    "content": "import { StyleSheet } from 'react-native';\nconst styles = StyleSheet.create({\n  container: {\n    borderStyle: 'solid',\n    flexGrow: 0,\n    height: 32,\n    alignSelf: 'flex-start',\n  },\n  ripple: {\n    height: '100%',\n    flexDirection: 'row',\n  },\n  content: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    flexGrow: 0,\n  },\n\n  text: {\n    lineHeight: 24,\n    textAlignVertical: 'center',\n    alignSelf: 'center',\n    marginVertical: 4,\n\n    fontSize: 14,\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Chip/Chip.test.js",
    "content": "import React from 'react';\nimport { Chip } from '../..';\n\nimport renderer from 'react-test-renderer';\n\ntest('Chip Renders', () => {\n  const tree = renderer.create(<Chip />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Chip/__snapshots__/Chip.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Chip Renders 1`] = `\n<View\n  style={\n    Object {\n      \"alignSelf\": \"flex-start\",\n      \"backgroundColor\": \"#e0e0e0\",\n      \"borderColor\": \"rgba(0, 0, 0, 0.23)\",\n      \"borderRadius\": 16,\n      \"borderStyle\": \"solid\",\n      \"borderWidth\": 0,\n      \"flexGrow\": 0,\n      \"height\": 32,\n      \"shadowColor\": \"#000\",\n      \"shadowOffset\": Object {\n        \"height\": 0,\n        \"width\": 0,\n      },\n      \"shadowOpacity\": 0,\n      \"shadowRadius\": 1,\n    }\n  }\n  useNativeDriver={true}\n>\n  <View\n    accessible={true}\n    displayUntilPressOut={true}\n    onLayout={[Function]}\n    onResponderGrant={[Function]}\n    onResponderMove={[Function]}\n    onResponderRelease={[Function]}\n    onResponderTerminate={[Function]}\n    onResponderTerminationRequest={[Function]}\n    onRippleAnimation={[Function]}\n    onStartShouldSetResponder={[Function]}\n    rippleCentered={false}\n    rippleColor=\"rgba(0, 0, 0, .87)\"\n    rippleDuration={400}\n    rippleFades={true}\n    rippleOpacity={0.3}\n    rippleSequential={false}\n    rippleSize={0}\n    style={\n      Object {\n        \"borderRadius\": 16,\n        \"flexDirection\": \"row\",\n        \"height\": \"100%\",\n      }\n    }\n    testID=\"mb-ripple\"\n    useNativeDriver={true}\n  >\n    <View\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"flexDirection\": \"row\",\n          \"flexGrow\": 0,\n        }\n      }\n    >\n      <Text\n        numberOfLines={1}\n        style={\n          Array [\n            Object {\n              \"alignSelf\": \"center\",\n              \"fontSize\": 14,\n              \"lineHeight\": 24,\n              \"marginVertical\": 4,\n              \"textAlignVertical\": \"center\",\n            },\n            Object {\n              \"color\": \"rgba(0, 0, 0, 0.87)\",\n              \"marginLeft\": 12,\n              \"marginRight\": 12,\n            },\n            undefined,\n          ]\n        }\n      />\n    </View>\n    <View\n      pointerEvents=\"none\"\n      style={\n        Array [\n          Object {\n            \"backgroundColor\": \"transparent\",\n            \"bottom\": 0,\n            \"left\": 0,\n            \"overflow\": \"hidden\",\n            \"position\": \"absolute\",\n            \"right\": 0,\n            \"top\": 0,\n            \"zIndex\": 10,\n          },\n          Object {\n            \"borderRadius\": 16,\n          },\n        ]\n      }\n    />\n  </View>\n</View>\n`;\n"
  },
  {
    "path": "src/Components/Chip/index.js",
    "content": "export { default } from './Chip';\n"
  },
  {
    "path": "src/Components/DataTable/DataTable.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { View, ScrollView } from 'react-native';\nimport withTheme from '../../Theme/withTheme';\nimport shadow from '../../Utils/Shadow/shadow.js';\n\nclass DataTable extends Component {\n  static propTypes = {\n    children: PropTypes.node,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    testID: PropTypes.string,\n  };\n  render() {\n    const { children, style, testID } = this.props;\n\n    return (\n      <ScrollView\n        scrollEnabled={true}\n        horizontal={true}\n        contentContainerStyle={{ minWidth: '100%' }}>\n        <View\n          style={[\n            {\n              flex: 1,\n              borderRadius: 4,\n              ...shadow(4),\n            },\n            style,\n          ]}\n          testID={testID}>\n          {children}\n        </View>\n      </ScrollView>\n    );\n  }\n}\n\nexport default withTheme(DataTable);\n"
  },
  {
    "path": "src/Components/DataTable/DataTable.stories.js",
    "content": "import React from 'react';\n\nimport { DataTable, DataTableCell, DataTableRow } from '../../';\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\n\nexport default storiesOf('Components|Data Table', module)\n  .addParameters({ jest: ['DataTable'] })\n  .add('Simple', () => (\n    <Container>\n      <Header title={'Simple DataTable'} />\n\n      <DataTable>\n        <DataTableRow>\n          <DataTableCell\n            text={'Desert'}\n            type={'header'}\n            borderRight\n            relativeWidth={2}\n          />\n          <DataTableCell text={'Calories'} type={'header'} right />\n          <DataTableCell text={'Fat (g)'} type={'header'} right />\n          <DataTableCell text={'Carbs (g)'} type={'header'} right />\n          <DataTableCell text={'Protein (g)'} type={'header'} right />\n        </DataTableRow>\n        <DataTableRow>\n          <DataTableCell text={'Frozen yogurt'} borderRight relativeWidth={2} />\n          <DataTableCell text={'159'} right />\n          <DataTableCell text={'6.0'} right />\n          <DataTableCell text={'24'} right />\n          <DataTableCell text={'4'} right />\n        </DataTableRow>\n        <DataTableRow>\n          <DataTableCell\n            text={'Ice Cream Sandwich'}\n            borderRight\n            relativeWidth={2}\n          />\n          <DataTableCell text={'237'} right />\n          <DataTableCell text={'9.0'} right />\n          <DataTableCell text={'37'} right />\n          <DataTableCell text={'4.3'} right />\n        </DataTableRow>\n        <DataTableRow>\n          <DataTableCell text={'Eclair'} borderRight relativeWidth={2} />\n          <DataTableCell text={'262'} right />\n          <DataTableCell text={'16.0'} right />\n          <DataTableCell text={'24'} right />\n          <DataTableCell text={'6.0'} right />\n        </DataTableRow>\n      </DataTable>\n    </Container>\n  ))\n  .add('Custom', () => (\n    <Container>\n      <Header title={'Custom DataTable'} />\n\n      <DataTable\n        style={{\n          borderRadius: 20,\n          backgroundColor: '#3C3C46',\n          color: 'white',\n        }}>\n        <DataTableRow>\n          <DataTableCell\n            text={'Desert'}\n            type={'header'}\n            borderRight\n            relativeWidth={2}\n            textStyle={{ color: 'white', fontWeight: 700, fontSize: 18 }}\n          />\n          <DataTableCell\n            text={'Calories'}\n            type={'header'}\n            right\n            textStyle={{ color: 'white', fontWeight: 700, fontSize: 18 }}\n          />\n          <DataTableCell\n            text={'Fat (g)'}\n            type={'header'}\n            right\n            textStyle={{ color: 'white', fontWeight: 700, fontSize: 18 }}\n          />\n          <DataTableCell\n            text={'Carbs (g)'}\n            type={'header'}\n            right\n            textStyle={{ color: 'white', fontWeight: 700, fontSize: 18 }}\n          />\n          <DataTableCell\n            text={'Protein (g)'}\n            type={'header'}\n            textStyle={{ color: 'white', fontWeight: 700, fontSize: 18 }}\n            right\n          />\n        </DataTableRow>\n        <DataTableRow>\n          <DataTableCell\n            text={'Frozen yogurt'}\n            borderRight\n            relativeWidth={2}\n            textStyle={{ color: '#8BC34A' }}\n          />\n          <DataTableCell text={'159'} right textStyle={{ color: 'white' }} />\n          <DataTableCell text={'6.0'} right textStyle={{ color: 'white' }} />\n          <DataTableCell text={'24'} right textStyle={{ color: 'white' }} />\n          <DataTableCell text={'4'} right textStyle={{ color: 'white' }} />\n        </DataTableRow>\n        <DataTableRow>\n          <DataTableCell\n            text={'Ice Cream Sandwich'}\n            borderRight\n            relativeWidth={2}\n            textStyle={{ color: '#8BC34A' }}\n          />\n          <DataTableCell text={'237'} right textStyle={{ color: 'white' }} />\n          <DataTableCell text={'9.0'} right textStyle={{ color: 'white' }} />\n          <DataTableCell text={'37'} right textStyle={{ color: 'white' }} />\n          <DataTableCell text={'4.3'} right textStyle={{ color: 'white' }} />\n        </DataTableRow>\n        <DataTableRow>\n          <DataTableCell\n            text={'Eclair'}\n            borderRight\n            textStyle={{ color: '#8BC34A' }}\n            relativeWidth={2}\n          />\n          <DataTableCell text={'262'} right textStyle={{ color: 'white' }} />\n          <DataTableCell text={'16.0'} right textStyle={{ color: 'white' }} />\n          <DataTableCell text={'24'} right textStyle={{ color: 'white' }} />\n          <DataTableCell text={'6.0'} right textStyle={{ color: 'white' }} />\n        </DataTableRow>\n      </DataTable>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/DataTable/DataTable.styles.js",
    "content": "import { StyleSheet } from 'react-native';\nconst styles = StyleSheet.create({\n  container: {\n    justifyContent: 'flex-end',\n    flexDirection: 'row',\n    alignItems: 'center',\n    padding: 12,\n    minWidth: 'auto',\n  },\n\n  currentNumber: {\n    fontSize: 12,\n    marginRight: 44 / 2,\n    color: 'rgba(0,0,0,.6)',\n  },\n  rowsPerPage: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    marginRight: 30,\n  },\n  rowsPerPageText: {\n    fontSize: 12,\n    marginRight: 24,\n    color: 'rgba(0,0,0,.6)',\n  },\n  text: {\n    fontSize: 12,\n    color: 'rgba(0,0,0,.6)',\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/DataTable/DataTable.test.js",
    "content": "import React from 'react';\nimport { DataTable } from '../../../src';\n\nimport renderer from 'react-test-renderer';\n\ntest('DataTable Renders', () => {\n  const tree = renderer.create(<DataTable />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/DataTable/DataTableCell/DataTableCell.js",
    "content": "import React, { Component } from 'react';\nimport {\n  Text,\n  View,\n  TouchableWithoutFeedback,\n  Animated,\n  Platform,\n} from 'react-native';\nimport PropTypes from 'prop-types';\nimport withTheme from '../../../Theme/withTheme';\nimport { Icon } from '../../../';\nimport styles from './DataTableCell.styles';\n\nclass TableCell extends Component {\n  constructor(props) {\n    super(props);\n  }\n  static propTypes = {\n    children: PropTypes.node,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    right: PropTypes.bool,\n    borderRight: PropTypes.bool,\n    borderLeft: PropTypes.bool,\n    minWidth: PropTypes.number,\n    text: PropTypes.string,\n    onPress: PropTypes.func,\n    type: PropTypes.string,\n    sortingIcon: PropTypes.string,\n    relativeWidth: PropTypes.number,\n    textStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n  };\n  static defaultProps = {\n    relativeWidth: 1,\n    minWidth: 100,\n  };\n\n  state = {\n    roateIcon: new Animated.Value(0),\n  };\n\n  componentDidUpdate(prevProps) {\n    const { sortingIcon } = this.props;\n    if (sortingIcon == 'up' && prevProps.sortingIcon == 'down') {\n      this.animateSortingIcon('up');\n    } else if (sortingIcon == 'down' && prevProps.sortingIcon == 'up') {\n      this.animateSortingIcon('down');\n    }\n  }\n\n  animateSortingIcon(type) {\n    const value = type == 'up' ? 1 : 0;\n    Animated.timing(this.state.roateIcon, {\n      toValue: value,\n      duration: 200,\n      useNativeDriver: true,\n    }).start();\n  }\n\n  _renderSortingIcon() {\n    return (\n      <Animated.View\n        useNativeDriver={true}\n        style={{\n          transform: [\n            {\n              rotate: this.state.roateIcon.interpolate({\n                inputRange: [0, 1],\n                outputRange: ['0deg', '180deg'],\n              }),\n            },\n          ],\n        }}>\n        <Icon name={'arrow-downward'} size={18} style={styles.sortingIcon} />\n      </Animated.View>\n    );\n  }\n\n  _renderText() {\n    const { text, type, sortingIcon, textStyle } = this.props;\n    const style = type == 'header' ? styles.textHeader : styles.text;\n    let color = type == 'header' ? 'rgba(0,0,0,.54)' : 'rgba(0,0,0,.87)';\n    if (sortingIcon == 'down' || sortingIcon == 'up') color = 'black';\n\n    return <Text style={[style, { color }, textStyle]}>{text}</Text>;\n  }\n  render() {\n    const {\n      children,\n      style,\n      right,\n      borderRight,\n      borderLeft,\n      onPress,\n      sortingIcon,\n      minWidth,\n      relativeWidth,\n    } = this.props;\n\n    const minWidthImplemented = minWidth + minWidth * (relativeWidth - 1);\n\n    const platformStyles = Platform.OS == 'web' ? {} : {};\n\n    return (\n      <TouchableWithoutFeedback\n        disabled={!onPress}\n        onPress={onPress}\n        style={{ flex: 1 }}>\n        <View\n          style={[\n            styles.dataTableItem,\n            {\n              flex: 1,\n              justifyContent: right ? 'flex-end' : 'flex-start',\n              borderRightWidth: borderRight ? 1 : 0,\n              borderLeftWidth: borderLeft ? 1 : 0,\n              minHeight: 25,\n              minWidth: minWidthImplemented,\n              flexWrap: 'wrap',\n            },\n            platformStyles,\n            style,\n          ]}>\n          {sortingIcon ? this._renderSortingIcon() : null}\n          {children ? children : this._renderText()}\n        </View>\n      </TouchableWithoutFeedback>\n    );\n  }\n}\n\nexport default withTheme(TableCell);\n"
  },
  {
    "path": "src/Components/DataTable/DataTableCell/DataTableCell.stories.js",
    "content": "import React from 'react';\n\nimport { DataTable, DataTableCell, DataTableRow } from '../../../';\nimport Header from '../../../storybook/components/Header';\nimport Container from '../../../storybook/components/Container';\nimport { storiesOf } from '../../../storybook/helpers/storiesOf';\nimport { State, Store } from '@sambego/storybook-state';\n\nconst store = new Store({\n  sortingIcon: 'down',\n});\n\nexport default storiesOf('Components|Data Table/Cell', module)\n  .addParameters({ jest: ['DataTable'] })\n\n  .add('Simple', () => (\n    <Container>\n      <Header title={'Simple DataTable Cell'} />\n      <DataTable>\n        <DataTableRow>\n          <DataTableCell\n            text={'Desert'}\n            type={'header'}\n            borderRight\n            relativeWidth={2}\n          />\n          <DataTableCell text={'Calories'} type={'header'} right />\n          <DataTableCell text={'Fat (g)'} type={'header'} right />\n          <DataTableCell text={'Carbs (g)'} type={'header'} right />\n          <DataTableCell text={'Protein (g)'} type={'header'} right />\n        </DataTableRow>\n        <DataTableRow>\n          <DataTableCell text={'Frozen yogurt'} borderRight relativeWidth={2} />\n          <DataTableCell text={'159'} right />\n          <DataTableCell text={'6.0'} right />\n          <DataTableCell text={'24'} right />\n          <DataTableCell text={'4'} right />\n        </DataTableRow>\n        <DataTableRow>\n          <DataTableCell\n            text={'Ice Cream Sandwich'}\n            borderRight\n            relativeWidth={2}\n          />\n          <DataTableCell text={'237'} right />\n          <DataTableCell text={'9.0'} right />\n          <DataTableCell text={'37'} right />\n          <DataTableCell text={'4.3'} right />\n        </DataTableRow>\n        <DataTableRow>\n          <DataTableCell text={'Eclair'} borderRight relativeWidth={2} />\n          <DataTableCell text={'262'} right />\n          <DataTableCell text={'16.0'} right />\n          <DataTableCell text={'24'} right />\n          <DataTableCell text={'6.0'} right />\n        </DataTableRow>\n      </DataTable>\n    </Container>\n  ))\n  .add('Sorting Icon', () => (\n    <Container>\n      <Header title={'Sortin Icon DataTable Cell'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <DataTable>\n            <DataTableRow>\n              <DataTableCell\n                text={'Desert'}\n                type={'header'}\n                borderRight\n                relativeWidth={2}\n              />\n              <DataTableCell\n                text={'Calories'}\n                type={'header'}\n                sortingIcon={state.sortingIcon}\n                onPress={() =>\n                  store.set({\n                    sortingIcon: state.sortingIcon == 'up' ? 'down' : 'up',\n                  })\n                }\n                right\n              />\n              <DataTableCell text={'Fat (g)'} type={'header'} right />\n              <DataTableCell text={'Carbs (g)'} type={'header'} right />\n              <DataTableCell text={'Protein (g)'} type={'header'} right />\n            </DataTableRow>\n            <DataTableRow>\n              <DataTableCell\n                text={'Frozen yogurt'}\n                borderRight\n                relativeWidth={2}\n              />\n              <DataTableCell text={'159'} right />\n              <DataTableCell text={'6.0'} right />\n              <DataTableCell text={'24'} right />\n              <DataTableCell text={'4'} right />\n            </DataTableRow>\n            <DataTableRow>\n              <DataTableCell\n                text={'Ice Cream Sandwich'}\n                borderRight\n                relativeWidth={2}\n              />\n              <DataTableCell text={'237'} right />\n              <DataTableCell text={'9.0'} right />\n              <DataTableCell text={'37'} right />\n              <DataTableCell text={'4.3'} right />\n            </DataTableRow>\n            <DataTableRow>\n              <DataTableCell text={'Eclair'} borderRight relativeWidth={2} />\n              <DataTableCell text={'262'} right />\n              <DataTableCell text={'16.0'} right />\n              <DataTableCell text={'24'} right />\n              <DataTableCell text={'6.0'} right />\n            </DataTableRow>\n          </DataTable>\n        )}\n      </State>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/DataTable/DataTableCell/DataTableCell.styles.js",
    "content": "import { StyleSheet } from 'react-native';\nconst styles = StyleSheet.create({\n  dataTableItem: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    borderColor: 'rgb(224, 224, 224)',\n    paddingHorizontal: 16,\n    paddingVertical: 4,\n    // minWidth: 'auto',\n    // flex: 1,\n  },\n  text: {\n    fontSize: 13,\n\n    flexShrink: 1,\n    flex: 1,\n  },\n  textHeader: {\n    height: 24,\n    lineHeight: 24,\n    fontSize: 12,\n    fontWeight: '500',\n    alignItems: 'center',\n    flexShrink: 1,\n    flex: 1,\n  },\n  sortingIcon: {\n    marginRight: 4,\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/DataTable/DataTableCell/DataTableCell.test.js",
    "content": "import React from 'react';\nimport { DataTableCell } from '../../..';\n\nimport renderer from 'react-test-renderer';\n\ntest('DataTableCell Renders', () => {\n  const tree = renderer.create(<DataTableCell />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/DataTable/DataTableCell/__snapshots__/DataTableCell.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`DataTableCell Renders 1`] = `\n<View\n  accessible={true}\n  onResponderGrant={[Function]}\n  onResponderMove={[Function]}\n  onResponderRelease={[Function]}\n  onResponderTerminate={[Function]}\n  onResponderTerminationRequest={[Function]}\n  onStartShouldSetResponder={[Function]}\n  style={\n    Array [\n      Object {\n        \"alignItems\": \"center\",\n        \"borderColor\": \"rgb(224, 224, 224)\",\n        \"flexDirection\": \"row\",\n        \"paddingHorizontal\": 16,\n        \"paddingVertical\": 4,\n      },\n      Object {\n        \"borderLeftWidth\": 0,\n        \"borderRightWidth\": 0,\n        \"flex\": 1,\n        \"flexWrap\": \"wrap\",\n        \"justifyContent\": \"flex-start\",\n        \"minHeight\": 25,\n        \"minWidth\": 100,\n      },\n      Object {},\n      undefined,\n    ]\n  }\n>\n  <Text\n    style={\n      Array [\n        Object {\n          \"flex\": 1,\n          \"flexShrink\": 1,\n          \"fontSize\": 13,\n        },\n        Object {\n          \"color\": \"rgba(0,0,0,.87)\",\n        },\n        undefined,\n      ]\n    }\n  />\n</View>\n`;\n"
  },
  {
    "path": "src/Components/DataTable/DataTableCell/index.js",
    "content": "export { default } from './DataTableCell';\n"
  },
  {
    "path": "src/Components/DataTable/DataTableHeader/DataTableHeader.js",
    "content": "import React, { Component } from 'react';\nimport { View, Text } from 'react-native';\nimport PropTypes from 'prop-types';\nimport withTheme from '../../../Theme/withTheme';\nimport IconButton from '../../IconButton/IconButton';\nimport styles from './DataTableHeader.styles';\n\nclass DataTableHeader extends Component {\n  static propTypes = {\n    children: PropTypes.node,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    rightActions: PropTypes.array,\n    leftActions: PropTypes.array,\n    title: PropTypes.string,\n  };\n  static defaultProps = {\n    borderBottomColor: 'rgb(224, 224, 224)',\n  };\n\n  _renderTitle() {\n    const { title, leftActions } = this.props;\n    if (!title) return null;\n    return (\n      <Text style={[styles.title, { marginLeft: leftActions ? 12 : 0 }]}>\n        {title}\n      </Text>\n    );\n  }\n  _renderActions(actionItems, position) {\n    if (!actionItems) return null;\n    return (\n      <View style={styles.actions}>\n        {actionItems.map((item, index) => {\n          if (item.name) {\n            return (\n              <IconButton\n                key={item.name}\n                name={item.name}\n                size={24}\n                color={'rgba(33, 33, 33, 0.6)'}\n                style={{\n                  marginRight:\n                    index + 1 === actionItems.length || position === 'left'\n                      ? 0\n                      : 8,\n                  marginLeft:\n                    index + 1 === actionItems.length || position === 'right'\n                      ? 0\n                      : 8,\n                }}\n                onPress={item.onPress}\n              />\n            );\n          } else {\n            return item;\n          }\n        })}\n      </View>\n    );\n  }\n\n  _renderContent() {\n    const { rightActions, leftActions } = this.props;\n    return (\n      <View\n        style={[\n          styles.content,\n          {\n            paddingRight: rightActions ? 12 : 16,\n            paddingLeft: leftActions ? 12 : 16,\n          },\n        ]}>\n        <View style={styles.left}>\n          {this._renderActions(leftActions, 'left')}\n          {this._renderTitle()}\n        </View>\n\n        {this._renderActions(rightActions, 'right')}\n      </View>\n    );\n  }\n\n  render() {\n    const { children, style } = this.props;\n\n    return (\n      <View style={[styles.dataTableHeader, style]}>\n        {children ? children : this._renderContent()}\n      </View>\n    );\n  }\n}\n\nexport default withTheme(DataTableHeader);\n"
  },
  {
    "path": "src/Components/DataTable/DataTableHeader/DataTableHeader.stories.js",
    "content": "import React from 'react';\n\nimport {\n  DataTable,\n  DataTableHeader,\n  DataTableCell,\n  DataTableRow,\n} from '../../../';\nimport Header from '../../../storybook/components/Header';\nimport Container from '../../../storybook/components/Container';\nimport { storiesOf } from '../../../storybook/helpers/storiesOf';\n\nexport default storiesOf('Components|Data Table/Header', module)\n  .addParameters({ jest: ['DataTableHeader'] })\n\n  .add('Header', () => (\n    <Container>\n      <Header title={'DataTable Header'} />\n      <DataTable>\n        <DataTableHeader\n          title={'Nutrition'}\n          rightActions={[{ name: 'filter-list' }, { name: 'more-vert' }]}\n        />\n        <DataTableRow>\n          <DataTableCell text={'Desert'} type={'header'} relativeWidth={2} />\n          <DataTableCell text={'Calories'} type={'header'} right />\n          <DataTableCell text={'Fat (g)'} type={'header'} right />\n          <DataTableCell text={'Carbs (g)'} type={'header'} right />\n          <DataTableCell text={'Protein (g)'} type={'header'} right />\n        </DataTableRow>\n        <DataTableRow>\n          <DataTableCell text={'Frozen yogurt'} borderRight relativeWidth={2} />\n          <DataTableCell text={'159'} right />\n          <DataTableCell text={'6.0'} right />\n          <DataTableCell text={'24'} right />\n          <DataTableCell text={'4'} right />\n        </DataTableRow>\n        <DataTableRow>\n          <DataTableCell\n            text={'Ice Cream Sandwhich'}\n            borderRight\n            relativeWidth={2}\n          />\n          <DataTableCell text={'237'} right />\n          <DataTableCell text={'9.0'} right />\n          <DataTableCell text={'37'} right />\n          <DataTableCell text={'4.3'} right />\n        </DataTableRow>\n        <DataTableRow>\n          <DataTableCell text={'Eclair'} borderRight relativeWidth={2} />\n          <DataTableCell text={'262'} right />\n          <DataTableCell text={'16.0'} right />\n          <DataTableCell text={'24'} right />\n          <DataTableCell text={'6.0'} right />\n        </DataTableRow>\n      </DataTable>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/DataTable/DataTableHeader/DataTableHeader.styles.js",
    "content": "import { StyleSheet } from 'react-native';\nconst styles = StyleSheet.create({\n  dataTableHeader: {\n    height: 64,\n    width: '100%',\n    flexDirection: 'row',\n    alignItems: 'center',\n    paddingVertical: 20,\n    minWidth: 'auto',\n  },\n  content: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    width: '100%',\n  },\n  left: { flexDirection: 'row', alignItems: 'center' },\n  title: {\n    fontSize: 20,\n    fontWeight: '500',\n    lineHeight: 24,\n    letterSpacing: 0.15,\n  },\n  actions: {\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/DataTable/DataTableHeader/DataTableHeader.test.js",
    "content": "import React from 'react';\nimport { DataTableHeader } from '../../../';\n\nimport renderer from 'react-test-renderer';\n\ntest('DataTableHeader Renders', () => {\n  const tree = renderer.create(<DataTableHeader />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/DataTable/DataTableHeader/__snapshots__/DataTableHeader.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`DataTableHeader Renders 1`] = `\n<View\n  style={\n    Array [\n      Object {\n        \"alignItems\": \"center\",\n        \"flexDirection\": \"row\",\n        \"height\": 64,\n        \"minWidth\": \"auto\",\n        \"paddingVertical\": 20,\n        \"width\": \"100%\",\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    style={\n      Array [\n        Object {\n          \"alignItems\": \"center\",\n          \"flexDirection\": \"row\",\n          \"justifyContent\": \"space-between\",\n          \"width\": \"100%\",\n        },\n        Object {\n          \"paddingLeft\": 16,\n          \"paddingRight\": 16,\n        },\n      ]\n    }\n  >\n    <View\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"flexDirection\": \"row\",\n        }\n      }\n    />\n  </View>\n</View>\n`;\n"
  },
  {
    "path": "src/Components/DataTable/DataTableHeader/index.js",
    "content": "export { default } from './DataTableHeader';\n"
  },
  {
    "path": "src/Components/DataTable/DataTablePagination/DataTablePagination.js",
    "content": "import React, { Component, Fragment } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { View, Text } from 'react-native';\nimport withTheme from '../../../Theme/withTheme';\n\nimport { Menu, MenuItem, Ripple, Icon, IconButton } from '../../../';\nimport styles from './DataTablePagination.styles';\n\nclass DataTablePagination extends Component {\n  static propTypes = {\n    children: PropTypes.node,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    onChangePage: PropTypes.func,\n    numberOfPages: PropTypes.number,\n    numberOfRows: PropTypes.number,\n    page: PropTypes.number,\n    perPage: PropTypes.number,\n    possibleNumberPerPage: PropTypes.number,\n    onChangeRowsPerPage: PropTypes.func,\n  };\n\n  state = { visible: false };\n\n  _handleChangeRowsPerPage(item) {\n    const { onChangeRowsPerPage } = this.props;\n    this.setState({ visible: false });\n    onChangeRowsPerPage(item);\n  }\n\n  _renderPossiblePagesPerRow() {\n    const { possibleNumberPerPage } = this.props;\n    let rows = possibleNumberPerPage ? possibleNumberPerPage : [2, 5, 10, 15];\n\n    return rows.map(item => (\n      <MenuItem\n        key={item}\n        text={item}\n        onPress={() => this._handleChangeRowsPerPage(item)}\n      />\n    ));\n  }\n  _renderRowsPerPage() {\n    const { perPage } = this.props;\n    const { visible } = this.state;\n\n    return (\n      <View style={styles.rowsPerPage}>\n        <Text\n          style={[styles.footerFont, styles.rowsPerPageText]}\n          numberOfLines={1}>\n          {'Rows Per Page:'}\n        </Text>\n        <Menu\n          visible={visible}\n          button={\n            <Ripple\n              onPress={() => this.setState({ visible: true })}\n              style={styles.menuButton}>\n              <Text style={styles.footerFont}>{perPage}</Text>\n              <Icon\n                name={'arrow-drop-down'}\n                size={24}\n                color={'rgba(33, 33, 33, 0.6)'}\n              />\n            </Ripple>\n          }>\n          {this._renderPossiblePagesPerRow()}\n        </Menu>\n      </View>\n    );\n  }\n\n  _renderCurrentPage() {\n    const { page, perPage, numberOfRows } = this.props;\n    const startRange = numberOfRows === 0 ? 0 : page * perPage + 1;\n    const endRange = Math.min(numberOfRows, (page + 1) * perPage);\n\n    return (\n      <Text\n        style={[\n          styles.footerFont,\n          styles.currentNumber,\n        ]}>{`${startRange}-${endRange} of ${numberOfRows} `}</Text>\n    );\n  }\n\n  _renderNavigation() {\n    const { page, numberOfPages, onChangePage } = this.props;\n    return (\n      <Fragment>\n        <IconButton\n          name={'chevron-left'}\n          disabled={page === 0}\n          onPress={() => onChangePage(page - 1)}\n          size={24}\n          style={{ marginRight: 24 }}\n          color={page === 0 ? 'rgba(33, 33, 33, 0.3)' : 'rgba(0, 0, 0, 0.54)'}\n        />\n        <IconButton\n          name={'chevron-right'}\n          disabled={page === numberOfPages - 1}\n          onPress={() => onChangePage(page + 1)}\n          size={24}\n          color={\n            page === numberOfPages - 1\n              ? 'rgba(33, 33, 33, 0.3)'\n              : 'rgba(0, 0, 0, 0.54)'\n          }\n        />\n      </Fragment>\n    );\n  }\n\n  render() {\n    const { style } = this.props;\n\n    return (\n      <View style={[styles.container, style]}>\n        {this._renderRowsPerPage()}\n        {this._renderCurrentPage()}\n        {this._renderNavigation()}\n      </View>\n    );\n  }\n}\n\nexport default withTheme(DataTablePagination);\n"
  },
  {
    "path": "src/Components/DataTable/DataTablePagination/DataTablePagination.stories.js",
    "content": "import React from 'react';\n\nimport {\n  DataTable,\n  DataTableCell,\n  DataTableRow,\n  DataTablePagination,\n} from '../../..';\nimport Header from '../../../storybook/components/Header';\nimport Container from '../../../storybook/components/Container';\nimport { storiesOf } from '../../../storybook/helpers/storiesOf';\nimport { State, Store } from '@sambego/storybook-state';\n\nconst store = new Store({\n  page: 0,\n  perPage: 2,\n});\n\nconst data = [\n  {\n    name: 'Frozen Yogurt',\n    calories: '159',\n    fat: '6.0',\n    carbs: '24',\n    protein: '4',\n  },\n  {\n    name: 'Ice Cream Sandwhich',\n    calories: '237',\n    fat: '9.0',\n    carbs: '37',\n    protein: '4.3',\n  },\n  {\n    name: 'Blizzard',\n    calories: '480',\n    fat: '3.4',\n    carbs: '80',\n    protein: '1',\n  },\n  {\n    name: 'Frosty',\n    calories: '200',\n    fat: '2.0',\n    carbs: '12',\n    protein: '8',\n  },\n  {\n    name: 'DillyBar',\n    calories: '120',\n    fat: '15',\n    carbs: '30',\n    protein: '10',\n  },\n  {\n    name: 'PushPop',\n    calories: '50',\n    fat: '1',\n    carbs: '2',\n    protein: '2',\n  },\n];\n\nexport default storiesOf('Components|Data Table/Pagination', module)\n  .addParameters({ jest: ['DataTable'] })\n\n  .add('Simple', () => (\n    <Container>\n      <Header title={'DataTable Pagination'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <DataTable>\n            <DataTableRow>\n              <DataTableCell\n                text={'Desert'}\n                type={'header'}\n                borderRight\n                flex={2}\n              />\n              <DataTableCell text={'Calories'} type={'header'} right />\n              <DataTableCell text={'Fat (g)'} type={'header'} right />\n              <DataTableCell text={'Carbs (g)'} type={'header'} right />\n              <DataTableCell text={'Protein (g)'} type={'header'} right />\n            </DataTableRow>\n            {data\n              .slice(\n                state.page * state.perPage,\n                state.page * state.perPage + state.perPage,\n              )\n              .map(row => (\n                <DataTableRow key={row.name}>\n                  <DataTableCell text={row.name} borderRight flex={2} />\n                  <DataTableCell text={row.calories} right />\n                  <DataTableCell text={row.fat} right />\n                  <DataTableCell text={row.carbs} right />\n                  <DataTableCell text={row.protein} right />\n                </DataTableRow>\n              ))}\n\n            <DataTablePagination\n              page={state.page}\n              numberOfPages={data.length / state.perPage}\n              numberOfRows={data.length}\n              perPage={state.perPage}\n              onChangePage={page => store.set({ page: page })}\n              onChangeRowsPerPage={perPage => store.set({ perPage: perPage })}\n            />\n          </DataTable>\n        )}\n      </State>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/DataTable/DataTablePagination/DataTablePagination.styles.js",
    "content": "import { StyleSheet } from 'react-native';\nconst styles = StyleSheet.create({\n  container: {\n    justifyContent: 'flex-end',\n    flexDirection: 'row',\n    alignItems: 'center',\n    paddingVertical: 20,\n    paddingHorizontal: 16,\n    minWidth: 'auto',\n  },\n\n  footerFont: {\n    fontSize: 12,\n    lineHeight: 14,\n    letterSpacing: 0.4,\n    color: 'rgba(0,0,0,1)',\n  },\n\n  currentNumber: {\n    marginRight: 24,\n  },\n\n  rowsPerPage: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    marginRight: 32,\n  },\n\n  rowsPerPageText: {\n    marginRight: 8,\n  },\n\n  menuButton: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'space-around',\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/DataTable/DataTablePagination/DataTablePagination.test.js",
    "content": "import React from 'react';\nimport { DataTablePagination } from '../../../';\n\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\n\ntest('DataTablePagination Renders', () => {\n  const tree = renderer.render(<DataTablePagination />);\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/DataTable/DataTablePagination/__snapshots__/DataTablePagination.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`DataTablePagination Renders 1`] = `\n<Context.Consumer>\n  [Function]\n</Context.Consumer>\n`;\n"
  },
  {
    "path": "src/Components/DataTable/DataTablePagination/index.js",
    "content": "export { default } from './DataTablePagination';\n"
  },
  {
    "path": "src/Components/DataTable/DataTableRow/DataTableRow.js",
    "content": "import React, { Component } from 'react';\nimport { TouchableWithoutFeedback, View } from 'react-native';\nimport PropTypes from 'prop-types';\nimport withTheme from '../../../Theme/withTheme';\nimport { Checkbox, Hoverable } from '../../../';\nimport styles from './DataTableRow.styles';\n\nclass DataTableRow extends Component {\n  constructor(props) {\n    super(props);\n  }\n  static propTypes = {\n    children: PropTypes.node,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    borderBottomColor: PropTypes.string,\n    selected: PropTypes.bool,\n    onPressCheckbox: PropTypes.func,\n    showCheckbox: PropTypes.bool,\n    checkboxOffset: PropTypes.bool,\n    onPress: PropTypes.func,\n    hover: PropTypes.bool,\n    type: PropTypes.string,\n  };\n\n  static defaultProps = {\n    borderBottomColor: 'rgb(224, 224, 224)',\n  };\n\n  state = {\n    backgroundColor: 'transparent',\n  };\n\n  _renderContent() {\n    const {\n      children,\n      style,\n      borderBottomColor,\n      onPress,\n      selected,\n      onPressCheckbox,\n      showCheckbox,\n      hover,\n      checkboxOffset,\n    } = this.props;\n    const { backgroundColor } = this.state;\n\n    let color = hover ? backgroundColor : 'transparent';\n\n    if (selected) color = 'rgba(0, 0, 0, 0.04)';\n\n    return (\n      <TouchableWithoutFeedback\n        onPress={showCheckbox ? onPressCheckbox : onPress}\n        disabled={!onPressCheckbox && !onPress}>\n        <View\n          style={[\n            styles.container,\n            {\n              borderBottomColor,\n              backgroundColor: color,\n            },\n            style,\n          ]}>\n          {showCheckbox ? (\n            <Checkbox\n              checked={selected}\n              onPress={onPressCheckbox}\n              size={24}\n              style={{ marginRight: 12 }}\n            />\n          ) : null}\n          {checkboxOffset ? <View style={styles.checkboxOffset} /> : null}\n          {children}\n        </View>\n      </TouchableWithoutFeedback>\n    );\n  }\n\n  render() {\n    const { hover } = this.props;\n\n    if (hover) {\n      return (\n        <Hoverable\n          onHoverIn={() =>\n            this.setState({ backgroundColor: 'rgba(0, 0, 0, 0.04)' })\n          }\n          onHoverOut={() => this.setState({ backgroundColor: 'transparent' })}>\n          {this._renderContent()}\n        </Hoverable>\n      );\n    }\n\n    return this._renderContent();\n  }\n}\n\nexport default withTheme(DataTableRow);\n"
  },
  {
    "path": "src/Components/DataTable/DataTableRow/DataTableRow.stories.js",
    "content": "import React from 'react';\n\nimport { DataTable, DataTableCell, DataTableRow } from '../../..';\nimport Header from '../../../storybook/components/Header';\nimport Container from '../../../storybook/components/Container';\nimport { storiesOf } from '../../../storybook/helpers/storiesOf';\n\nimport { State, Store } from '@sambego/storybook-state';\n\nconst store = new Store({\n  checkedOne: false,\n  checkedTwo: false,\n  checkedThree: false,\n});\n\nexport default storiesOf('Components|Data Table/Row', module)\n  .addParameters({ jest: ['DataTableRow'] })\n\n  .add('simple', () => (\n    <Container>\n      <Header title={'Simple DataTable Row'} />\n      <DataTable>\n        <DataTableRow>\n          <DataTableCell\n            text={'Desert'}\n            type={'header'}\n            borderRight\n            relativeWidth={2}\n          />\n          <DataTableCell text={'Calories'} type={'header'} right />\n          <DataTableCell text={'Fat (g)'} type={'header'} right />\n          <DataTableCell text={'Carbs (g)'} type={'header'} right />\n          <DataTableCell text={'Protein (g)'} type={'header'} right />\n        </DataTableRow>\n        <DataTableRow>\n          <DataTableCell text={'Frozen yogurt'} borderRight relativeWidth={2} />\n          <DataTableCell text={'159'} right />\n          <DataTableCell text={'6.0'} right />\n          <DataTableCell text={'24'} right />\n          <DataTableCell text={'4'} right />\n        </DataTableRow>\n        <DataTableRow>\n          <DataTableCell\n            text={'Ice Cream Sandwich'}\n            borderRight\n            relativeWidth={2}\n          />\n          <DataTableCell text={'237'} right />\n          <DataTableCell text={'9.0'} right />\n          <DataTableCell text={'37'} right />\n          <DataTableCell text={'4.3'} right />\n        </DataTableRow>\n        <DataTableRow>\n          <DataTableCell text={'Eclair'} borderRight relativeWidth={2} />\n          <DataTableCell text={'262'} right />\n          <DataTableCell text={'16.0'} right />\n          <DataTableCell text={'24'} right />\n          <DataTableCell text={'6.0'} right />\n        </DataTableRow>\n      </DataTable>\n    </Container>\n  ))\n  .add('with checkbox', () => (\n    <Container>\n      <Header title={'Checkbox DataTable Row'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <DataTable>\n            <DataTableRow checkboxOffset type={'header'}>\n              <DataTableCell\n                text={'Desert'}\n                type={'header'}\n                borderRight\n                relativeWidth={2}\n              />\n              <DataTableCell text={'Calories'} type={'header'} right />\n              <DataTableCell text={'Fat (g)'} type={'header'} right />\n              <DataTableCell text={'Carbs (g)'} type={'header'} right />\n              <DataTableCell text={'Protein (g)'} type={'header'} right />\n            </DataTableRow>\n            <DataTableRow\n              showCheckbox\n              selected={state.checkedOne}\n              onPressCheckbox={() =>\n                store.set({ checkedOne: !state.checkedOne })\n              }>\n              <DataTableCell\n                text={'Frozen yogurt'}\n                borderRight\n                relativeWidth={2}\n              />\n              <DataTableCell text={'159'} right />\n              <DataTableCell text={'6.0'} right />\n              <DataTableCell text={'24'} right />\n              <DataTableCell text={'4'} right />\n            </DataTableRow>\n            <DataTableRow\n              showCheckbox\n              selected={state.checkedTwo}\n              onPressCheckbox={() =>\n                store.set({ checkedTwo: !state.checkedTwo })\n              }>\n              <DataTableCell\n                text={'Ice Cream Sandwich'}\n                borderRight\n                relativeWidth={2}\n              />\n              <DataTableCell text={'237'} right />\n              <DataTableCell text={'9.0'} right />\n              <DataTableCell text={'37'} right />\n              <DataTableCell text={'4.3'} right />\n            </DataTableRow>\n            <DataTableRow\n              showCheckbox\n              selected={state.checkedThree}\n              onPressCheckbox={() =>\n                store.set({ checkedThree: !state.checkedThree })\n              }>\n              <DataTableCell text={'Eclair'} borderRight relativeWidth={2} />\n              <DataTableCell text={'262'} right />\n              <DataTableCell text={'16.0'} right />\n              <DataTableCell text={'24'} right />\n              <DataTableCell text={'6.0'} right />\n            </DataTableRow>\n          </DataTable>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('selected', () => (\n    <Container>\n      <Header title={'Selected DataTable Row'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <DataTable>\n            <DataTableRow>\n              <DataTableCell\n                text={'Desert'}\n                type={'header'}\n                borderRight\n                relativeWidth={2}\n              />\n              <DataTableCell text={'Calories'} type={'header'} right />\n              <DataTableCell text={'Fat (g)'} type={'header'} right />\n              <DataTableCell text={'Carbs (g)'} type={'header'} right />\n              <DataTableCell text={'Protein (g)'} type={'header'} right />\n            </DataTableRow>\n            <DataTableRow\n              selected={state.checkedOne}\n              onPress={() => store.set({ checkedOne: !state.checkedOne })}>\n              <DataTableCell\n                text={'Frozen yogurt'}\n                borderRight\n                relativeWidth={2}\n              />\n              <DataTableCell text={'159'} right />\n              <DataTableCell text={'6.0'} right />\n              <DataTableCell text={'24'} right />\n              <DataTableCell text={'4'} right />\n            </DataTableRow>\n            <DataTableRow\n              selected={state.checkedTwo}\n              onPress={() => store.set({ checkedTwo: !state.checkedTwo })}>\n              <DataTableCell\n                text={'Ice Cream Sandwich'}\n                borderRight\n                relativeWidth={2}\n              />\n              <DataTableCell text={'237'} right />\n              <DataTableCell text={'9.0'} right />\n              <DataTableCell text={'37'} right />\n              <DataTableCell text={'4.3'} right />\n            </DataTableRow>\n            <DataTableRow\n              selected={state.checkedThree}\n              onPress={() => store.set({ checkedThree: !state.checkedThree })}>\n              <DataTableCell text={'Eclair'} borderRight relativeWidth={2} />\n              <DataTableCell text={'262'} right />\n              <DataTableCell text={'16.0'} right />\n              <DataTableCell text={'24'} right />\n              <DataTableCell text={'6.0'} right />\n            </DataTableRow>\n          </DataTable>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('hover', () => (\n    <Container>\n      <Header title={'Hover DataTable Row'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <DataTable>\n            <DataTableRow checkboxOffset>\n              <DataTableCell\n                text={'Desert'}\n                type={'header'}\n                borderRight\n                relativeWidth={2}\n              />\n              <DataTableCell text={'Calories'} type={'header'} right />\n              <DataTableCell text={'Fat (g)'} type={'header'} right />\n              <DataTableCell text={'Carbs (g)'} type={'header'} right />\n              <DataTableCell text={'Protein (g)'} type={'header'} right />\n            </DataTableRow>\n            <DataTableRow\n              hover\n              showCheckbox\n              selected={state.checkedOne}\n              onPressCheckbox={() =>\n                store.set({ checkedOne: !state.checkedOne })\n              }>\n              <DataTableCell\n                text={'Frozen yogurt'}\n                borderRight\n                relativeWidth={2}\n              />\n              <DataTableCell text={'159'} right />\n              <DataTableCell text={'6.0'} right />\n              <DataTableCell text={'24'} right />\n              <DataTableCell text={'4'} right />\n            </DataTableRow>\n            <DataTableRow\n              hover\n              showCheckbox\n              selected={state.checkedTwo}\n              onPressCheckbox={() =>\n                store.set({ checkedTwo: !state.checkedTwo })\n              }>\n              <DataTableCell\n                text={'Ice Cream Sandwich'}\n                borderRight\n                relativeWidth={2}\n              />\n              <DataTableCell text={'237'} right />\n              <DataTableCell text={'9.0'} right />\n              <DataTableCell text={'37'} right />\n              <DataTableCell text={'4.3'} right />\n            </DataTableRow>\n            <DataTableRow\n              hover\n              showCheckbox\n              selected={state.checkedThree}\n              onPressCheckbox={() =>\n                store.set({ checkedThree: !state.checkedThree })\n              }>\n              <DataTableCell text={'Eclair'} borderRight relativeWidth={2} />\n              <DataTableCell text={'262'} right />\n              <DataTableCell text={'16.0'} right />\n              <DataTableCell text={'24'} right />\n              <DataTableCell text={'6.0'} right />\n            </DataTableRow>\n          </DataTable>\n        )}\n      </State>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/DataTable/DataTableRow/DataTableRow.styles.js",
    "content": "import { StyleSheet } from 'react-native';\nconst styles = StyleSheet.create({\n  container: {\n    borderStyle: 'solid',\n    borderBottomWidth: StyleSheet.hairlineWidth,\n    minHeight: 48,\n\n    flexDirection: 'row',\n    alignItems: 'stretch',\n    // width: '100%',\n    minWidth: 'auto',\n  },\n  checkboxOffset: {\n    width: 36,\n    marginRight: 12,\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/DataTable/DataTableRow/DataTableRow.test.js",
    "content": "import React from 'react';\nimport { DataTableRow } from '../../..';\n\nimport renderer from 'react-test-renderer';\n\ntest('DataTableRow Renders', () => {\n  const tree = renderer.create(<DataTableRow />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/DataTable/DataTableRow/__snapshots__/DataTableRow.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`DataTableRow Renders 1`] = `\n<View\n  accessible={true}\n  onResponderGrant={[Function]}\n  onResponderMove={[Function]}\n  onResponderRelease={[Function]}\n  onResponderTerminate={[Function]}\n  onResponderTerminationRequest={[Function]}\n  onStartShouldSetResponder={[Function]}\n  style={\n    Array [\n      Object {\n        \"alignItems\": \"stretch\",\n        \"borderBottomWidth\": 0.5,\n        \"borderStyle\": \"solid\",\n        \"flexDirection\": \"row\",\n        \"minHeight\": 48,\n        \"minWidth\": \"auto\",\n      },\n      Object {\n        \"backgroundColor\": \"transparent\",\n        \"borderBottomColor\": \"rgb(224, 224, 224)\",\n      },\n      undefined,\n    ]\n  }\n/>\n`;\n"
  },
  {
    "path": "src/Components/DataTable/DataTableRow/index.js",
    "content": "export { default } from './DataTableRow';\n"
  },
  {
    "path": "src/Components/DataTable/__snapshots__/DataTable.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`DataTable Renders 1`] = `\n<RCTScrollView\n  contentContainerStyle={\n    Object {\n      \"minWidth\": \"100%\",\n    }\n  }\n  horizontal={true}\n  scrollEnabled={true}\n>\n  <View>\n    <View\n      style={\n        Array [\n          Object {\n            \"borderRadius\": 4,\n            \"flex\": 1,\n            \"shadowColor\": \"#000\",\n            \"shadowOffset\": Object {\n              \"height\": 2,\n              \"width\": 0,\n            },\n            \"shadowOpacity\": 0.23,\n            \"shadowRadius\": 2.62,\n          },\n          undefined,\n        ]\n      }\n    />\n  </View>\n</RCTScrollView>\n`;\n"
  },
  {
    "path": "src/Components/DataTable/index.js",
    "content": "export { default } from './DataTable';\nexport { default as DataTableHeader } from './DataTableHeader';\nexport { default as DataTableCell } from './DataTableCell';\nexport { default as DataTablePagination } from './DataTablePagination';\nexport { default as DataTableRow } from './DataTableRow';\n"
  },
  {
    "path": "src/Components/Dialog/Dialog.js",
    "content": "import React, { Component } from 'react';\nimport { View } from 'react-native';\n\nimport PropTypes from 'prop-types';\nimport Modal from '../Modal/Modal';\nimport withTheme from '../../Theme/withTheme';\nimport styles from './Dialog.styles';\nimport Button from '../Button/Button.js';\nimport BodyText from '../Typography/BodyText/BodyText.js';\nclass Dialog extends Component {\n  static propTypes = {\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    children: PropTypes.node,\n    visible: PropTypes.bool,\n    onRequestClose: PropTypes.func,\n    onShow: PropTypes.func,\n    onTouchOutside: PropTypes.func,\n    actionItems: PropTypes.arrayOf(\n      PropTypes.oneOfType([PropTypes.node, PropTypes.object]),\n    ),\n    actionItemsContainerStyle: PropTypes.oneOfType([\n      PropTypes.object,\n      PropTypes.array,\n    ]),\n    title: PropTypes.string,\n    titleStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    supportingText: PropTypes.string,\n    supportingTextStyle: PropTypes.oneOfType([\n      PropTypes.object,\n      PropTypes.array,\n    ]),\n    contentStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    testID: PropTypes.string,\n  };\n\n  _renderActionItems() {\n    const { actionItems, actionItemsContainerStyle } = this.props;\n    return (\n      <View style={[styles.actionItems, actionItemsContainerStyle]}>\n        {actionItems.map((item, index) => {\n          if (React.isValidElement(item)) return item;\n          return <Button key={index} density={-1} {...item} />;\n        })}\n      </View>\n    );\n  }\n\n  _renderContent() {\n    const {\n      style,\n      title,\n      titleStyle,\n      supportingText,\n      supportingTextStyle,\n      children,\n      actionItems,\n      contentStyle,\n    } = this.props;\n    return (\n      <View style={[styles.container, style]}>\n        <View style={[styles.contentContainer, contentStyle]}>\n          {title ? (\n            <BodyText style={[styles.title, titleStyle]}>{title}</BodyText>\n          ) : null}\n          {supportingText ? (\n            <BodyText style={[styles.supportingText, supportingTextStyle]}>\n              {supportingText}\n            </BodyText>\n          ) : null}\n          {children}\n          {actionItems ? this._renderActionItems() : null}\n        </View>\n      </View>\n    );\n  }\n\n  render() {\n    const {\n      visible,\n      onRequestClose,\n      onShow,\n      onTouchOutside,\n      testID,\n    } = this.props;\n\n    return (\n      <Modal\n        visible={visible}\n        onRequestClose={onRequestClose}\n        onShow={onShow}\n        onTouchOutside={onTouchOutside}\n        testID={testID}>\n        {this._renderContent()}\n      </Modal>\n    );\n  }\n}\n\nexport default withTheme(Dialog);\n"
  },
  {
    "path": "src/Components/Dialog/Dialog.stories.js",
    "content": "import React from 'react';\nimport { View, Image, ScrollView } from 'react-native';\n\nimport {\n  Dialog,\n  Button,\n  Avatar,\n  BodyText,\n  Ripple,\n  Checkbox,\n  Icon,\n} from '../../';\nimport { State, Store } from '@sambego/storybook-state';\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\n\nconst store = new Store({\n  visible: false,\n  checkedOne: false,\n  checkedTwo: false,\n  checkedThree: false,\n  checkedFour: false,\n  checkedFive: false,\n});\n\nexport default storiesOf('Components|Dialog', module)\n  .addParameters({ jest: ['Dialog'] })\n  .add('Alert', () => (\n    <Container>\n      <Header title={'Alert Dialog'} />\n\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={{ flexDirection: 'row' }}>\n            <Button\n              textColor={'#6E2CFA'}\n              text={'Open'}\n              onPress={() => store.set({ visible: !state.visible })}\n            />\n            <Dialog\n              visible={state.visible}\n              onTouchOutside={() => store.set({ visible: false })}\n              supportingText={'Discard draft?'}\n              style={{ width: 280 }}\n              actionItems={[\n                {\n                  textColor: '#6E2CFA',\n                  text: 'Cancel',\n                  onPress: () => store.set({ visible: false }),\n                },\n                {\n                  color: '#6E2CFA',\n                  text: 'Discard',\n                  type: 'contained',\n                  onPress: () => store.set({ visible: false }),\n                },\n              ]}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('Confirmation', () => (\n    <Container>\n      <Header title={'Confirmation Dialog'} />\n\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={{ flexDirection: 'row' }}>\n            <Button\n              textColor={'#6E2CFA'}\n              text={'Open'}\n              onPress={() => store.set({ visible: !state.visible })}\n            />\n            <Dialog\n              visible={state.visible}\n              onTouchOutside={() => store.set({ visible: false })}\n              title={'Use Googles location service?'}\n              supportingText={\n                'Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.'\n              }\n              actionItems={[\n                {\n                  textColor: '#6E2CFA',\n                  text: 'Cancel',\n                  onPress: () => store.set({ visible: false }),\n                },\n                {\n                  textColor: '#6E2CFA',\n                  text: 'OK',\n                  onPress: () => store.set({ visible: false }),\n                },\n              ]}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('Simple', () => (\n    <Container>\n      <Header title={'Simple Dialog'} />\n\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={{ flexDirection: 'row' }}>\n            <Button\n              textColor={'#6E2CFA'}\n              text={'Open'}\n              onPress={() => store.set({ visible: !state.visible })}\n            />\n            <Dialog\n              visible={state.visible}\n              onTouchOutside={() => store.set({ visible: false })}\n              title={'Set up backup account'}\n              style={{ paddingRight: 24 }}>\n              <Ripple\n                style={{\n                  flexDirection: 'row',\n                  alignItems: 'center',\n                  padding: 10,\n                }}>\n                <Avatar\n                  type=\"image\"\n                  image={\n                    <Image\n                      source={{\n                        uri:\n                          'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4',\n                      }}\n                    />\n                  }\n                  size={40}\n                />\n                <BodyText\n                  style={{\n                    fontSize: 14,\n                    fontWeight: '400',\n                    color: 'rgba(0, 0, 0, 0.54)',\n                    marginLeft: 20,\n                  }}>\n                  user1@gmail.com\n                </BodyText>\n              </Ripple>\n\n              <Ripple\n                style={{\n                  flexDirection: 'row',\n                  alignItems: 'center',\n                  padding: 10,\n                }}>\n                <Avatar\n                  type=\"image\"\n                  image={\n                    <Image\n                      source={{\n                        uri:\n                          'https://avatars1.githubusercontent.com/u/12564956?s=460&v=4',\n                      }}\n                    />\n                  }\n                  size={40}\n                />\n                <BodyText\n                  style={{\n                    fontSize: 14,\n                    fontWeight: '400',\n                    color: 'rgba(0, 0, 0, 0.54)',\n                    marginLeft: 20,\n                  }}>\n                  user2@gmail.com\n                </BodyText>\n              </Ripple>\n\n              <Ripple\n                style={{\n                  flexDirection: 'row',\n                  alignItems: 'center',\n                  padding: 10,\n                  paddingBottom: 24,\n                }}>\n                <Avatar\n                  type=\"icon\"\n                  content=\"add\"\n                  color=\"#ccc\"\n                  contentColor={'white'}\n                  size={40}\n                />\n                <BodyText\n                  style={{\n                    fontSize: 14,\n                    fontWeight: '400',\n                    color: 'rgba(0, 0, 0, 0.54)',\n                    marginLeft: 20,\n                  }}>\n                  Add account\n                </BodyText>\n              </Ripple>\n            </Dialog>\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('Scrolling', () => (\n    <Container>\n      <Header title={'Scrolling Dialog'} />\n\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={{ flexDirection: 'row' }}>\n            <Button\n              textColor={'#6E2CFA'}\n              text={'Open'}\n              onPress={() => store.set({ visible: !state.visible })}\n            />\n            <Dialog\n              visible={state.visible}\n              onTouchOutside={() => store.set({ visible: false })}\n              title={'Get this party started?'}\n              titleStyle={{ marginLeft: 24 }}\n              contentStyle={{ paddingLeft: 0, paddingBottom: 0, height: 360 }}\n              actionItems={[\n                {\n                  textColor: '#6E2CFA',\n                  text: 'Second',\n                  onPress: () => store.set({ visible: false }),\n                },\n                {\n                  textColor: '#6E2CFA',\n                  text: 'First',\n                  onPress: () => store.set({ visible: false }),\n                },\n              ]}>\n              <View\n                style={{\n                  borderBottomColor: 'rgba(0, 0, 0, 0.08)',\n                  borderBottomWidth: 1,\n                }}\n              />\n              <ScrollView scrollEnabled contentContainerStyle={{ padding: 16 }}>\n                <View\n                  style={{\n                    flex: 1,\n                    flexDirection: 'row',\n                    alignItems: 'center',\n                  }}>\n                  <Icon\n                    name=\"insert-chart\"\n                    size={24}\n                    color={'rgba(0, 0, 0, 0.54)'}\n                  />\n                  <BodyText\n                    text=\"option 1\"\n                    style={{ marginLeft: 32, width: 100 }}\n                  />\n                  <Checkbox\n                    rippleMatchesCheckbox\n                    checkboxColor={'rgba(0, 0, 0, 0.54)'}\n                    checked={state.checkedOne}\n                    style={{ paddingVertical: 16 }}\n                    label={'01'}\n                    labelStyle={{ marginLeft: 130 }}\n                    labelPos={'left'}\n                    onPress={() => store.set({ checkedOne: !state.checkedOne })}\n                  />\n                </View>\n\n                <View\n                  style={{\n                    flex: 1,\n                    flexDirection: 'row',\n                    alignItems: 'center',\n                  }}>\n                  <Icon\n                    name=\"insert-chart\"\n                    size={24}\n                    color={'rgba(0, 0, 0, 0.54)'}\n                  />\n                  <BodyText\n                    text=\"option 2\"\n                    style={{ marginLeft: 32, width: 100 }}\n                  />\n                  <Checkbox\n                    rippleMatchesCheckbox\n                    checkboxColor={'rgba(0, 0, 0, 0.54)'}\n                    checked={state.checkedTwo}\n                    style={{ paddingVertical: 16 }}\n                    label={'02'}\n                    labelStyle={{ marginLeft: 130 }}\n                    labelPos={'left'}\n                    onPress={() => store.set({ checkedTwo: !state.checkedTwo })}\n                  />\n                </View>\n\n                <View\n                  style={{\n                    flex: 1,\n                    flexDirection: 'row',\n                    alignItems: 'center',\n                  }}>\n                  <Icon\n                    name=\"insert-chart\"\n                    size={24}\n                    color={'rgba(0, 0, 0, 0.54)'}\n                  />\n                  <BodyText\n                    text=\"option 3\"\n                    style={{ marginLeft: 32, width: 100 }}\n                  />\n                  <Checkbox\n                    rippleMatchesCheckbox\n                    checkboxColor={'rgba(0, 0, 0, 0.54)'}\n                    checked={state.checkedThree}\n                    style={{ paddingVertical: 16 }}\n                    label={'03'}\n                    labelStyle={{ marginLeft: 130 }}\n                    labelPos={'left'}\n                    onPress={() =>\n                      store.set({ checkedThree: !state.checkedThree })\n                    }\n                  />\n                </View>\n\n                <View\n                  style={{\n                    flex: 1,\n                    flexDirection: 'row',\n                    alignItems: 'center',\n                  }}>\n                  <Icon\n                    name=\"insert-chart\"\n                    size={24}\n                    color={'rgba(0, 0, 0, 0.54)'}\n                  />\n                  <BodyText\n                    text=\"option 4\"\n                    style={{ marginLeft: 32, width: 100 }}\n                  />\n                  <Checkbox\n                    rippleMatchesCheckbox\n                    checkboxColor={'rgba(0, 0, 0, 0.54)'}\n                    checked={state.checkedFour}\n                    style={{ paddingVertical: 16, marginLeft: 0 }}\n                    label={'04'}\n                    labelStyle={{ marginLeft: 130, width: 20 }}\n                    labelPos={'left'}\n                    onPress={() =>\n                      store.set({ checkedFour: !state.checkedFour })\n                    }\n                  />\n                </View>\n\n                <View\n                  style={{\n                    flex: 1,\n                    flexDirection: 'row',\n                    alignItems: 'center',\n                  }}>\n                  <Icon\n                    name=\"insert-chart\"\n                    size={24}\n                    color={'rgba(0, 0, 0, 0.54)'}\n                  />\n                  <BodyText\n                    text=\"option 5\"\n                    style={{ marginLeft: 32, width: 100 }}\n                  />\n                  <Checkbox\n                    rippleMatchesCheckbox\n                    checkboxColor={'rgba(0, 0, 0, 0.54)'}\n                    checked={state.checkedFive}\n                    style={{ paddingVertical: 16 }}\n                    label={'05'}\n                    labelStyle={{ marginLeft: 130 }}\n                    labelPos={'left'}\n                    onPress={() =>\n                      store.set({ checkedFive: !state.checkedFive })\n                    }\n                  />\n                </View>\n              </ScrollView>\n            </Dialog>\n          </View>\n        )}\n      </State>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/Dialog/Dialog.styles.js",
    "content": "import { StyleSheet, Platform } from 'react-native';\nimport shadow from '../../Utils/Shadow/shadow';\nconst styles = StyleSheet.create({\n  container: {\n    backgroundColor: '#ffffff',\n    width: '100%',\n\n    borderRadius: 4,\n    paddingTop: 24,\n    maxWidth: Platform.OS == 'web' ? 560 : '100%',\n\n    maxHeight: Platform.OS == 'web' ? 'calc(100vh - 20px)' : '100%',\n    overflow: 'hidden',\n\n    ...shadow(24),\n  },\n  contentContainer: {\n    flex: Platform.OS == 'web' ? 1 : 0,\n    paddingLeft: 24,\n  },\n  title: {\n    fontSize: 20,\n    lineHeight: 24,\n    fontWeight: '500',\n    color: '#212121',\n    letterSpacing: 0.15,\n    marginBottom: 24,\n    marginRight: 24,\n  },\n  supportingText: {\n    fontSize: 16,\n    fontWeight: '400',\n    color: 'rgba(0, 0, 0, 0.6)',\n    marginRight: 24,\n    letterSpacing: 0.44,\n    lineHeight: 24,\n  },\n  actionItems: {\n    flexDirection: 'row',\n    justifyContent: 'flex-end',\n    paddingHorizontal: 8,\n    paddingBottom: 8,\n    marginTop: 24,\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Dialog/Dialog.test.js",
    "content": "import React from 'react';\nimport { Dialog } from '../../../src';\n\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\n\ntest('Dialog Renders', () => {\n  const tree = renderer.render(<Dialog />);\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Dialog/__snapshots__/Dialog.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Dialog Renders 1`] = `\n<Context.Consumer>\n  [Function]\n</Context.Consumer>\n`;\n"
  },
  {
    "path": "src/Components/Dialog/index.js",
    "content": "export { default } from './Dialog';\n"
  },
  {
    "path": "src/Components/Divider/Divider.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { View, Platform, StyleSheet } from 'react-native';\nimport withTheme from '../../Theme/withTheme';\nimport BodyText from '../Typography/BodyText/BodyText.js';\nimport styles from './Divider.styles';\n\nclass Divider extends Component {\n  static propTypes = {\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    theme: PropTypes.object,\n    marginVertical: PropTypes.number,\n    subheader: PropTypes.string,\n    insetHeader: PropTypes.number,\n    insetLeft: PropTypes.number,\n    testID: PropTypes.string,\n  };\n\n  _renderSubheader() {\n    const { subheader, marginVertical, insetHeader, testID } = this.props;\n\n    return (\n      <View\n        style={{ marginVertical: marginVertical ? marginVertical : 8 }}\n        testID={testID}>\n        {this._renderDivider()}\n        <BodyText style={[styles.subheader, { marginLeft: insetHeader }]}>\n          {subheader}\n        </BodyText>\n      </View>\n    );\n  }\n\n  _renderDivider() {\n    const {\n      style,\n      theme,\n      marginVertical,\n      subheader,\n      testID,\n      insetLeft,\n      ...rest\n    } = this.props;\n    let marginVerticalImplemented = marginVertical ? marginVertical : 8;\n    if (subheader) marginVerticalImplemented = 0;\n    let width = insetLeft > 0 ? `calc(100% - ${insetLeft}px)` : '100%';\n    let marginLeft = insetLeft > 0 ? insetLeft : 0;\n\n    return (\n      <View\n        style={[\n          theme.divider,\n          {\n            height: Platform.OS == 'web' ? 1 : StyleSheet.hairlineWidth,\n            marginVertical: marginVerticalImplemented,\n            width,\n            marginLeft,\n          },\n          style,\n        ]}\n        testID={testID}\n        {...rest}\n      />\n    );\n  }\n  render() {\n    const { subheader } = this.props;\n\n    return subheader ? this._renderSubheader() : this._renderDivider();\n  }\n}\n\nexport default withTheme(Divider);\n"
  },
  {
    "path": "src/Components/Divider/Divider.stories.js",
    "content": "import React from 'react';\n\nimport { Divider, List, ListItem, Avatar } from '../../';\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\n\nexport default storiesOf('Components|Divider', module)\n  .addParameters({ jest: ['Divider'] })\n  .add('Simple', () => (\n    <Container>\n      <Header title={'Divider'} />\n\n      <Divider />\n      <Divider />\n      <Divider marginVertical={24} />\n    </Container>\n  ))\n  .add('subheader', () => (\n    <Container>\n      <Header title={'Divider'} />\n\n      <Divider subheader={'Subheader'} />\n      <Divider subheader={'Title'} insetHeader={8} />\n      <Divider subheader={'Section'} insetHeader={16} marginVertical={24} />\n    </Container>\n  ))\n\n  .add('insetLeft', () => (\n    <Container>\n      <Header title={'Inset Left'} />\n\n      <List subheader={'Favorites'} style={{ width: 300 }}>\n        <ListItem\n          text={'Janet Perkins'}\n          media={\n            <Avatar\n              type=\"icon\"\n              content=\"person\"\n              contentColor={'#ececec'}\n              color={'#a3a3a3'}\n              size={40}\n            />\n          }\n        />\n\n        <ListItem\n          text={'Mary Perkins'}\n          media={\n            <Avatar\n              type=\"icon\"\n              content=\"person\"\n              contentColor={'#ececec'}\n              color={'#a3a3a3'}\n              size={40}\n            />\n          }\n        />\n        <Divider insetLeft={20} />\n        <ListItem\n          text={'Peter Carlsson'}\n          media={\n            <Avatar\n              type=\"icon\"\n              content=\"person\"\n              contentColor={'#ececec'}\n              color={'#a3a3a3'}\n              size={40}\n            />\n          }\n        />\n        <ListItem\n          text={'Trevor Hansen'}\n          media={\n            <Avatar\n              type=\"icon\"\n              content=\"person\"\n              contentColor={'#ececec'}\n              color={'#a3a3a3'}\n              size={40}\n            />\n          }\n        />\n        <Divider insetLeft={20} />\n        <ListItem\n          text={'Person McPerson'}\n          media={\n            <Avatar\n              type=\"icon\"\n              content=\"person\"\n              contentColor={'#ececec'}\n              color={'#a3a3a3'}\n              size={40}\n            />\n          }\n        />\n        <ListItem\n          text={'Wendy'}\n          media={\n            <Avatar\n              type=\"icon\"\n              content=\"person\"\n              contentColor={'#ececec'}\n              color={'#a3a3a3'}\n              size={40}\n            />\n          }\n        />\n      </List>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/Divider/Divider.styles.js",
    "content": "import { StyleSheet } from 'react-native';\nconst styles = StyleSheet.create({\n  subheader: {\n    marginTop: 8,\n    color: 'rgba(0,0,0,.57)',\n    fontSize: 12,\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Divider/Divider.test.js",
    "content": "import React from 'react';\nimport { Divider } from '../../';\n\nimport renderer from 'react-test-renderer';\n\ntest('Divider Renders', () => {\n  const tree = renderer.create(<Divider />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Divider/__snapshots__/Divider.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Divider Renders 1`] = `\n<View\n  style={\n    Array [\n      Object {\n        \"backgroundColor\": \"rgba(0,0,0,.12)\",\n        \"width\": \"100%\",\n      },\n      Object {\n        \"height\": 0.5,\n        \"marginLeft\": 0,\n        \"marginVertical\": 8,\n        \"width\": \"100%\",\n      },\n      undefined,\n    ]\n  }\n/>\n`;\n"
  },
  {
    "path": "src/Components/Divider/index.js",
    "content": "export { default } from './Divider';\n"
  },
  {
    "path": "src/Components/Drawer/Drawer.js",
    "content": "import React, { PureComponent, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  Animated,\n  Dimensions,\n  View,\n  SafeAreaView,\n  Platform,\n  TouchableWithoutFeedback,\n} from 'react-native';\n\nimport withTheme from '../../Theme/withTheme';\nimport styles from './Drawer.styles';\nimport shadow from '../../Utils/Shadow/shadow.js';\n\nconst needsSafeAreaDefault =\n  Platform.OS === 'ios' && parseInt(Platform.Version, 10);\n\nclass Drawer extends PureComponent {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    open: PropTypes.bool,\n    onClose: PropTypes.func,\n\n    type: PropTypes.string,\n    drawerContent: PropTypes.node,\n    children: PropTypes.node,\n    animationTime: PropTypes.number,\n\n    pageHeight: PropTypes.number,\n    pageWidth: PropTypes.number,\n    widthPercentage: PropTypes.number,\n    width: PropTypes.number,\n    fullHeight: PropTypes.bool,\n    position: PropTypes.string,\n    needsSafeArea: PropTypes.bool,\n\n    appbar: PropTypes.node,\n    scrim: PropTypes.bool,\n    scrimColor: PropTypes.string,\n    scrimOpacity: PropTypes.number,\n\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    contentContainerStyle: PropTypes.oneOfType([\n      PropTypes.object,\n      PropTypes.array,\n    ]),\n    drawerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    scrimStyles: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    testID: PropTypes.string,\n    theme: PropTypes.object,\n  };\n\n  static defaultProps = {\n    open: false,\n    animationTime: 200,\n    scrimOpacity: 0.4,\n    scrim: true,\n    type: 'modal',\n    position: 'absolute',\n    needsSafeArea: needsSafeAreaDefault,\n  };\n\n  state = {\n    screenWidth: Dimensions.get('window').width,\n    screenHeight: Dimensions.get('window').height,\n\n    drawerWidth: 240,\n    expanded: false,\n    backdropFade: new Animated.Value(0),\n    leftOffset: new Animated.Value(0),\n\n    appbarHeight: 0,\n    appbarWidth: 0,\n  };\n\n  componentDidMount() {\n    const { pageWidth, pageHeight, widthPercentage, width } = this.props;\n\n    let screenWidth =\n      Platform.OS == 'web' ? '100%' : Dimensions.get('window').width;\n    let screenHeight = Dimensions.get('window').height;\n\n    if (pageWidth) screenWidth = pageWidth;\n    if (pageHeight) screenHeight = pageHeight;\n\n    let drawerWidth =\n      Platform.OS == 'web'\n        ? this.state.drawerWidth\n        : screenWidth * (widthPercentage || 0.45);\n\n    if (width) drawerWidth = width;\n\n    this.setState({\n      screenWidth,\n      screenHeight,\n      drawerWidth,\n    });\n  }\n\n  componentDidUpdate() {\n    const { open } = this.props;\n\n    if (open) {\n      this.openDrawer();\n    } else {\n      this.closeDrawer();\n    }\n  }\n\n  openDrawer = () => {\n    const { drawerWidth, leftOffset, backdropFade } = this.state;\n    const { animationTime, scrimOpacity } = this.props;\n\n    Animated.parallel([\n      Animated.timing(leftOffset, {\n        toValue: drawerWidth,\n        duration: animationTime,\n        useNativeDriver: true,\n      }),\n      Animated.timing(backdropFade, {\n        toValue: scrimOpacity,\n        duration: animationTime,\n        useNativeDriver: true,\n      }),\n    ]).start();\n  };\n\n  closeDrawer = () => {\n    const { animationTime } = this.props;\n    const { backdropFade, leftOffset } = this.state;\n\n    Animated.parallel([\n      Animated.timing(leftOffset, {\n        toValue: 0,\n        duration: animationTime,\n        useNativeDriver: true,\n      }),\n      Animated.timing(backdropFade, {\n        toValue: 0,\n        duration: animationTime,\n        useNativeDriver: true,\n      }),\n    ]).start();\n  };\n\n  _onAppbarLayout = e => {\n    const { width, height } = e.nativeEvent.layout;\n\n    this.setState({\n      appbarWidth: width,\n      appbarHeight: height,\n    });\n  };\n\n  _renderAppBar() {\n    const { appbar } = this.props;\n    return (\n      <View style={{ zIndex: 1200 }} onLayout={this._onAppbarLayout}>\n        {appbar}\n      </View>\n    );\n  }\n\n  _renderScrim() {\n    const { open, scrim, scrimColor, type, scrimStyles } = this.props;\n    const {\n      backdropFade,\n      screenWidth,\n      screenHeight,\n      appbarHeight,\n    } = this.state;\n\n    let scrimColorImplemented = type == 'push' ? 'transparent' : 'black';\n    if (scrimColor) scrimColorImplemented = scrimColor;\n    return (\n      <Animated.View\n        useNativeDriver={true}\n        style={[\n          styles.container,\n          {\n            backgroundColor: scrim ? scrimColorImplemented : 'transparent',\n            opacity: backdropFade,\n            zIndex: open ? 10 : 0,\n            width: screenWidth,\n            height: screenHeight,\n            top: appbarHeight,\n            position: Platform.OS == 'web' ? 'fixed' : 'absolute',\n          },\n          scrimStyles,\n        ]}>\n        <TouchableWithoutFeedback onPress={this.props.onClose}>\n          <View\n            style={[\n              styles.container,\n              {\n                width: screenWidth,\n                height: screenHeight,\n                backgroundColor: scrim ? scrimColorImplemented : 'transparent',\n              },\n            ]}\n          />\n        </TouchableWithoutFeedback>\n      </Animated.View>\n    );\n  }\n\n  _renderAppContent() {\n    const { children, appbar, type, open, contentContainerStyle } = this.props;\n    const { leftOffset, drawerWidth } = this.state;\n\n    const isPush = type == 'push';\n    const isPermanent = type == 'permanent';\n\n    if (isPush || isPermanent) {\n      return (\n        <View style={contentContainerStyle}>\n          {appbar ? this._renderAppBar() : null}\n          <Animated.View\n            useNativeDriver={true}\n            style={{\n              transform: [{ translateX: leftOffset }],\n              flex: 1,\n              width:\n                open && Platform.OS == 'web' && isPermanent\n                  ? `calc(100% - ${drawerWidth}px)`\n                  : '100%',\n            }}>\n            {children}\n          </Animated.View>\n        </View>\n      );\n    }\n    return (\n      <View style={[{ height: '100%' }, contentContainerStyle]}>\n        {appbar ? this._renderAppBar() : null}\n        <View style={{ height: '100%' }}>{children}</View>\n      </View>\n    );\n  }\n\n  _renderDrawer() {\n    const {\n      drawerContent,\n      type,\n      open,\n      drawerStyle,\n      fullHeight,\n      position,\n      theme,\n    } = this.props;\n    const { drawerWidth, screenHeight, leftOffset, appbarHeight } = this.state;\n\n    const isPush = type == 'push';\n    const isPermanent = type == 'permanent';\n\n    const offsetDrawerShadow = isPermanent || open ? 0 : 5;\n    const shadowImplemented = isPush || isPermanent ? shadow(0) : shadow(16);\n\n    return (\n      <Fragment>\n        <Animated.View\n          useNativeDriver={true}\n          style={[\n            theme.drawer,\n            {\n              position: position,\n              width: drawerWidth,\n              left: -drawerWidth - offsetDrawerShadow,\n              top: appbarHeight,\n              height: fullHeight ? '100%' : screenHeight,\n              transform: [{ translateX: leftOffset }],\n              ...shadowImplemented,\n            },\n            drawerStyle,\n          ]}>\n          {drawerContent}\n        </Animated.View>\n\n        {isPermanent ? null : this._renderScrim()}\n        {this._renderAppContent()}\n      </Fragment>\n    );\n  }\n\n  render() {\n    const { style, testID, needsSafeArea } = this.props;\n    const { screenWidth } = this.state;\n\n    if (needsSafeArea) {\n      return (\n        <SafeAreaView\n          style={[\n            styles.safeAreaView,\n            { position: 'relative', width: screenWidth, overflow: 'hidden' },\n            style,\n          ]}>\n          {this._renderDrawer()}\n        </SafeAreaView>\n      );\n    }\n\n    return (\n      <View\n        style={[\n          styles.fullWidthContainer,\n          {\n            position: 'relative',\n            width: screenWidth,\n            overflow: 'hidden',\n          },\n          style,\n        ]}\n        testID={testID}>\n        {this._renderDrawer()}\n      </View>\n    );\n  }\n}\n\nexport default withTheme(Drawer);\n"
  },
  {
    "path": "src/Components/Drawer/Drawer.stories.js",
    "content": "import React from 'react';\nimport {\n  View,\n  StyleSheet,\n  Platform,\n  Dimensions,\n  ScrollView,\n} from 'react-native';\n\nimport {\n  Drawer,\n  DrawerItem,\n  DrawerHeader,\n  DrawerSection,\n  IconButton,\n  BodyText,\n  Heading,\n  Appbar,\n} from '../../';\nimport Container from '../../storybook/components/Container';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\n\nimport { State, Store } from '@sambego/storybook-state';\n\nconst store = new Store({\n  isOpen: false,\n  isOpenPermanent: true,\n});\n\nconst DrawerContent = () => {\n  return (\n    <View>\n      <DrawerHeader title={'Jon Snow'} subtitle={'Knows nothing'} />\n      <DrawerSection bottomDivider>\n        <DrawerItem text={'Inbox'} icon={'mail'} active />\n        <DrawerItem text={'Outbox'} icon={'send'} />\n        <DrawerItem text={'Favorites'} icon={'favorite'} />\n      </DrawerSection>\n    </View>\n  );\n};\n\nconst PageContent = () => {\n  return (\n    <View style={{ marginTop: 20, alignItems: 'center' }}>\n      <Heading type={4} style={{ marginBottom: 20 }}>\n        This is a page\n      </Heading>\n      <BodyText text=\"Click the menu button to open the drawer\" />\n      <BodyText text=\"Click outside the drawer to close it\" />\n    </View>\n  );\n};\n\nconst AppbarContent = isOpen => {\n  return (\n    <Appbar\n      barType={'normal'}\n      title={'Page Title'}\n      navigation={'menu'}\n      onNavigation={() => store.set({ isOpen: !isOpen.isOpen })}\n      actionItems={[{ name: 'search' }, { name: 'more-vert' }]}\n    />\n  );\n};\n\nconst pageWidth = Platform.OS == 'web' ? 600 : Dimensions.get('window').width;\n\nexport default storiesOf('Components|Drawer', module)\n  .addParameters({ jest: ['Drawer'] })\n  .add('Simple', () => (\n    <Container scroll style={{ padding: 0 }}>\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={styles.container}>\n            <Drawer\n              open={state.isOpen}\n              pageWidth={pageWidth}\n              pageHeight={500}\n              drawerContent={<DrawerContent />}\n              onClose={() => store.set({ isOpen: false })}\n              animationTime={250}\n              opacity={0.33}>\n              <View style={styles.body}>\n                <IconButton\n                  size={24}\n                  name=\"menu\"\n                  onPress={() => store.set({ isOpen: !state.isOpen })}\n                />\n                <PageContent />\n              </View>\n            </Drawer>\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('Over Appbar', () => (\n    <Container scroll style={{ padding: 0 }}>\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={styles.container}>\n            <Drawer\n              open={state.isOpen}\n              pageWidth={pageWidth}\n              pageHeight={500}\n              drawerContent={<DrawerContent />}\n              onClose={() => store.set({ isOpen: false })}\n              animationTime={250}>\n              <View style={styles.body}>\n                <AppbarContent isOpen={state.isOpen} />\n                <PageContent />\n              </View>\n            </Drawer>\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('Under Appbar', () => (\n    <Container scroll style={{ padding: 0 }}>\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={styles.container}>\n            <Drawer\n              open={state.isOpen}\n              pageWidth={pageWidth}\n              pageHeight={500}\n              drawerContent={<DrawerContent />}\n              onClose={() => store.set({ isOpen: false })}\n              appbar={<AppbarContent isOpen={state.isOpen} />}>\n              <View style={styles.body}>\n                <PageContent />\n              </View>\n            </Drawer>\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('No Scrim', () => (\n    <Container scroll style={{ padding: 0 }}>\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={styles.container}>\n            <Drawer\n              open={state.isOpen}\n              pageWidth={pageWidth}\n              pageHeight={500}\n              drawerContent={<DrawerContent />}\n              onClose={() => store.set({ isOpen: false })}\n              scrim={false}>\n              <View style={styles.body}>\n                <AppbarContent isOpen={state.isOpen} />\n                <PageContent />\n              </View>\n            </Drawer>\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('Custom Scrim', () => (\n    <Container scroll style={{ padding: 0 }}>\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={styles.container}>\n            <Drawer\n              open={state.isOpen}\n              pageWidth={pageWidth}\n              pageHeight={500}\n              drawerContent={<DrawerContent />}\n              onClose={() => store.set({ isOpen: false })}\n              scrimColor={'#E91E63'}\n              scrimOpacity={0.2}>\n              <View style={styles.body}>\n                <AppbarContent isOpen={state.isOpen} />\n                <PageContent />\n              </View>\n            </Drawer>\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('Scroll inner', () => (\n    <Container scroll style={{ padding: 0 }}>\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={styles.container}>\n            <Drawer\n              open={state.isOpen}\n              pageWidth={pageWidth}\n              pageHeight={500}\n              drawerContent={\n                <ScrollView>\n                  <DrawerHeader title={'Jon Snow'} subtitle={'Knows nothing'} />\n                  <DrawerSection bottomDivider>\n                    <DrawerItem text={'Inbox'} icon={'mail'} active />\n                    <DrawerItem text={'Outbox'} icon={'send'} />\n                    <DrawerItem text={'Favorites'} icon={'favorite'} />\n                  </DrawerSection>\n                  <DrawerSection bottomDivider>\n                    <DrawerItem text={'Inbox'} icon={'mail'} />\n                    <DrawerItem text={'Outbox'} icon={'send'} />\n                    <DrawerItem text={'Favorites'} icon={'favorite'} />\n                  </DrawerSection>\n                  <DrawerSection bottomDivider>\n                    <DrawerItem text={'Inbox'} icon={'mail'} />\n                    <DrawerItem text={'Outbox'} icon={'send'} />\n                    <DrawerItem text={'Favorites'} icon={'favorite'} />\n                  </DrawerSection>\n                  <DrawerSection bottomDivider>\n                    <DrawerItem text={'Inbox'} icon={'mail'} />\n                    <DrawerItem text={'Outbox'} icon={'send'} />\n                    <DrawerItem text={'Favorites'} icon={'favorite'} />\n                  </DrawerSection>\n                  <DrawerSection bottomDivider>\n                    <DrawerItem text={'Inbox'} icon={'mail'} />\n                    <DrawerItem text={'Outbox'} icon={'send'} />\n                    <DrawerItem text={'Favorites'} icon={'favorite'} />\n                  </DrawerSection>\n                </ScrollView>\n              }\n              onClose={() => store.set({ isOpen: false })}\n              scrimColor={'#E91E63'}\n              scrimOpacity={0.2}>\n              <View style={styles.body}>\n                <AppbarContent isOpen={state.isOpen} />\n                <PageContent />\n              </View>\n            </Drawer>\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('Push', () => (\n    <Container scroll style={{ padding: 0 }}>\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={styles.container}>\n            <Drawer\n              open={state.isOpen}\n              pageWidth={pageWidth}\n              pageHeight={500}\n              drawerContent={<DrawerContent />}\n              onClose={() => store.set({ isOpen: false })}\n              type={'push'}>\n              <View style={styles.body}>\n                <AppbarContent isOpen={state.isOpen} />\n                <PageContent />\n              </View>\n            </Drawer>\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('Push Under', () => (\n    <Container scroll style={{ padding: 0 }}>\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={styles.container}>\n            <Drawer\n              open={state.isOpen}\n              pageWidth={pageWidth}\n              pageHeight={500}\n              drawerContent={<DrawerContent />}\n              onClose={() => store.set({ isOpen: false })}\n              type={'push'}\n              appbar={<AppbarContent isOpen={state.isOpen} />}>\n              <View style={styles.body}>\n                <PageContent />\n              </View>\n            </Drawer>\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('Permanent', () => (\n    <Container scroll style={{ padding: 0 }}>\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={[styles.container, { width: 'auto' }]}>\n            <Drawer\n              open={state.isOpenPermanent}\n              pageWidth={\n                Platform.OS == 'web' ? 1000 : Dimensions.get('window').width\n              }\n              pageHeight={500}\n              drawerContent={<DrawerContent />}\n              onClose={() => store.set({ isOpen: false })}\n              type={'permanent'}>\n              <View\n                style={{\n                  width: '100%',\n                }}>\n                <Appbar\n                  barType={'normal'}\n                  title={'Page Title'}\n                  navigation={'menu'}\n                  onNavigation={() =>\n                    store.set({ isOpenPermanent: !state.isOpenPermanent })\n                  }\n                  actionItems={[{ name: 'search' }, { name: 'more-vert' }]}\n                />\n                <View style={styles.body}>\n                  <PageContent />\n                </View>\n              </View>\n            </Drawer>\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('Permanent Under', () => (\n    <Container scroll style={{ padding: 0 }}>\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={[styles.container, { width: 'auto' }]}>\n            <Drawer\n              open={state.isOpenPermanent}\n              pageWidth={\n                Platform.OS == 'web' ? 1000 : Dimensions.get('window').width\n              }\n              pageHeight={500}\n              drawerContent={<DrawerContent />}\n              onClose={() => store.set({ isOpen: false })}\n              type={'permanent'}\n              appbar={\n                <Appbar\n                  barType={'normal'}\n                  title={'Page Title'}\n                  navigation={'menu'}\n                  onNavigation={() =>\n                    store.set({ isOpenPermanent: !state.isOpenPermanent })\n                  }\n                  actionItems={[{ name: 'search' }, { name: 'more-vert' }]}\n                />\n              }>\n              <View\n                style={{\n                  width: '100%',\n                }}>\n                <View style={styles.body}>\n                  <PageContent />\n                </View>\n              </View>\n            </Drawer>\n          </View>\n        )}\n      </State>\n    </Container>\n  ));\n\nconst styles = StyleSheet.create({\n  container: {\n    zIndex: 1,\n    position: 'relative',\n  },\n  body: {\n    width: pageWidth,\n    height: 500,\n  },\n});\n"
  },
  {
    "path": "src/Components/Drawer/Drawer.styles.js",
    "content": "import { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  fullWidthContainer: {\n    flex: 1,\n    backgroundColor: 'white',\n  },\n  masafeAreaViewin: {\n    position: 'absolute',\n    left: 0,\n    top: 5,\n    zIndex: 0,\n  },\n  container: {\n    position: 'absolute',\n    left: 0,\n    zIndex: 0,\n  },\n  drawer: {\n    position: 'absolute',\n    zIndex: 100,\n    borderRightWidth: 1,\n    borderRightColor: 'rgba(0,0,0,.12)',\n    borderStyle: 'solid',\n    backgroundColor: 'white',\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Drawer/Drawer.test.js",
    "content": "import React from 'react';\nimport { Drawer } from '../../';\n\nimport renderer from 'react-test-renderer';\n\ntest('Drawer Renders', () => {\n  const tree = renderer.create(<Drawer />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Drawer/DrawerHeader/DrawerHeader.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { View, Text } from 'react-native';\nimport withTheme from '../../../Theme/withTheme';\n\nclass DrawerHeader extends Component {\n  static propTypes = {\n    children: PropTypes.node,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    title: PropTypes.string,\n    subtitle: PropTypes.string,\n    avatar: PropTypes.node,\n    theme: PropTypes.object,\n  };\n\n  _renderAvatar() {\n    const { avatar, theme } = this.props;\n\n    return <View style={theme.drawerHeaderAvatarContainer}>{avatar}</View>;\n  }\n\n  render() {\n    const { avatar, title, subtitle, style, theme } = this.props;\n\n    return (\n      <View style={[theme.drawerHeader, style]}>\n        {avatar ? this._renderAvatar() : null}\n        <Text style={theme.drawerHeaderTitle}>{title}</Text>\n        <Text style={theme.drawerHeaderSubtitle}>{subtitle}</Text>\n      </View>\n    );\n  }\n}\n\nexport default withTheme(DrawerHeader);\n"
  },
  {
    "path": "src/Components/Drawer/DrawerHeader/DrawerHeader.stories.js",
    "content": "import React from 'react';\nimport { View, StyleSheet, Image, Platform, Dimensions } from 'react-native';\n\nimport {\n  Drawer,\n  DrawerItem,\n  DrawerHeader,\n  DrawerSection,\n  IconButton,\n  BodyText,\n  Heading,\n  Avatar,\n} from '../../..';\nimport Header from '../../../storybook/components/Header';\nimport Container from '../../../storybook/components/Container';\nimport { storiesOf } from '../../../storybook/helpers/storiesOf';\n\nimport { State, Store } from '@sambego/storybook-state';\n\nconst store = new Store({\n  isOpen: true,\n  isOpenPermanent: true,\n});\n\nconst DrawerContentAvatar = () => {\n  return (\n    <View>\n      <DrawerHeader\n        title={'Jon Snow'}\n        subtitle={'knowsnothing1234@thewall.com'}\n        avatar={\n          <Avatar\n            type=\"image\"\n            image={\n              <Image\n                source={{\n                  uri:\n                    'https://www.hbo.com/content/dam/hbodata/series/game-of-thrones/character/s5/john-snow-1920.jpg/_jcr_content/renditions/cq5dam.web.1200.675.jpeg',\n                }}\n              />\n            }\n            size={40}\n          />\n        }\n      />\n      <DrawerSection bottomDivider>\n        <DrawerItem text={'Inbox'} icon={'mail'} active />\n        <DrawerItem text={'Outbox'} icon={'send'} />\n        <DrawerItem text={'Favorites'} icon={'favorite'} />\n      </DrawerSection>\n    </View>\n  );\n};\n\nconst DrawerContent = () => {\n  return (\n    <View>\n      <DrawerHeader\n        title={'Jon Snow'}\n        subtitle={'knowsnothing1234@thewall.com'}\n      />\n      <DrawerSection bottomDivider>\n        <DrawerItem text={'Inbox'} icon={'mail'} active />\n        <DrawerItem text={'Outbox'} icon={'send'} />\n        <DrawerItem text={'Favorites'} icon={'favorite'} />\n      </DrawerSection>\n    </View>\n  );\n};\n\nconst PageContent = () => {\n  return (\n    <View style={{ marginTop: 20, alignItems: 'center' }}>\n      <Heading type={4} style={{ marginBottom: 20 }}>\n        This is a page\n      </Heading>\n      <BodyText text=\"Click the menu button to open the drawer\" />\n      <BodyText text=\"Click outside the drawer to close it\" />\n    </View>\n  );\n};\n\nconst pageWidth = Platform.OS == 'web' ? 600 : Dimensions.get('window').width;\n\nexport default storiesOf('Components|Drawer/DrawerHeader', module)\n  .addParameters({ jest: ['Drawer'] })\n  .add('Simple', () => (\n    <Container scroll style={{ padding: 0 }}>\n      <Header title={'Drawer'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={styles.container}>\n            <Drawer\n              open={state.isOpen}\n              pageWidth={pageWidth}\n              pageHeight={500}\n              drawerContent={<DrawerContent />}\n              onClose={() => store.set({ isOpen: false })}\n              animationTime={250}\n              opacity={0.33}>\n              <View style={styles.body}>\n                <IconButton\n                  size={24}\n                  name=\"menu\"\n                  onPress={() => store.set({ isOpen: !state.isOpen })}\n                />\n                <PageContent />\n              </View>\n            </Drawer>\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('with avatar', () => (\n    <Container scroll style={{ padding: 0 }}>\n      <Header title={'Drawer'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={styles.container}>\n            <Drawer\n              open={state.isOpen}\n              pageWidth={pageWidth}\n              pageHeight={500}\n              drawerContent={<DrawerContentAvatar />}\n              onClose={() => store.set({ isOpen: false })}\n              animationTime={250}\n              opacity={0.33}>\n              <View style={styles.body}>\n                <IconButton\n                  size={24}\n                  name=\"menu\"\n                  onPress={() => store.set({ isOpen: !state.isOpen })}\n                />\n                <PageContent />\n              </View>\n            </Drawer>\n          </View>\n        )}\n      </State>\n    </Container>\n  ));\n\nconst styles = StyleSheet.create({\n  container: {\n    zIndex: 1,\n    position: 'relative',\n  },\n  body: {\n    backgroundColor: '#eee',\n    width: pageWidth,\n    height: 500,\n  },\n});\n"
  },
  {
    "path": "src/Components/Drawer/DrawerHeader/DrawerHeader.styles.js",
    "content": "import { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  drawerHeader: {\n    borderBottomWidth: StyleSheet.hairlineWidth,\n    borderBottomColor: 'rgba(0,0,0,.12)',\n    paddingHorizontal: 16,\n    paddingVertical: 18,\n  },\n  avatarContainer: {\n    marginBottom: 20,\n  },\n  title: {\n    fontSize: 20,\n    fontWeight: '500',\n    color: 'rgba(0,0,0,.87)',\n  },\n  subtitle: {\n    marginTop: 4,\n    fontSize: 12,\n    color: 'rgba(0,0,0,.67)',\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Drawer/DrawerHeader/DrawerHeader.test.js",
    "content": "import React from 'react';\nimport { DrawerHeader } from '../../..';\n\nimport renderer from 'react-test-renderer';\n\ntest('DrawerHeader Renders', () => {\n  const tree = renderer.create(<DrawerHeader />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Drawer/DrawerHeader/__snapshots__/DrawerHeader.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`DrawerHeader Renders 1`] = `\n<View\n  style={\n    Array [\n      Object {\n        \"borderBottomColor\": \"rgba(0,0,0,.12)\",\n        \"borderBottomWidth\": 0.5,\n        \"paddingHorizontal\": 16,\n        \"paddingVertical\": 18,\n      },\n      undefined,\n    ]\n  }\n>\n  <Text\n    style={\n      Object {\n        \"color\": \"rgba(0,0,0,.87)\",\n        \"fontSize\": 20,\n        \"fontWeight\": \"500\",\n      }\n    }\n  />\n  <Text\n    style={\n      Object {\n        \"color\": \"rgba(0,0,0,.67)\",\n        \"fontSize\": 12,\n        \"marginTop\": 4,\n      }\n    }\n  />\n</View>\n`;\n"
  },
  {
    "path": "src/Components/Drawer/DrawerHeader/index.js",
    "content": "export { default } from './DrawerHeader';\n"
  },
  {
    "path": "src/Components/Drawer/DrawerItem/DrawerItem.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Text } from 'react-native';\nimport withTheme from '../../../Theme/withTheme';\nimport Ripple from '../../Ripple/Ripple';\nimport Icon from '../../Icon/Icon';\n\nclass DrawerItem extends Component {\n  static propTypes = {\n    children: PropTypes.node,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    text: PropTypes.string,\n    icon: PropTypes.string,\n    onPress: PropTypes.func,\n    active: PropTypes.bool,\n    iconComponent: PropTypes.func,\n    theme: PropTypes.object,\n  };\n\n  render() {\n    const { icon, text, onPress, active, iconComponent, theme } = this.props;\n\n    return (\n      <Ripple\n        style={[\n          theme.drawerItem,\n          {\n            backgroundColor: active\n              ? theme.drawerItemActive.backgroundColor\n              : theme.drawerItem.backgroundColor,\n          },\n        ]}\n        onPress={onPress}\n        rippleContainerBorderRadius={4}>\n        {icon ? (\n          <Icon\n            name={icon}\n            size={theme.drawerItemIcon.size}\n            color={\n              active ? theme.drawerItemActive.color : theme.drawerItemIcon.color\n            }\n            iconComponent={iconComponent}\n          />\n        ) : null}\n        <Text\n          style={[\n            theme.drawerItemText,\n            {\n              marginLeft: icon ? 24 : 0,\n              color: active\n                ? theme.drawerItemActive.color\n                : theme.drawerItemText.color,\n            },\n          ]}>\n          {text}\n        </Text>\n      </Ripple>\n    );\n  }\n}\n\nexport default withTheme(DrawerItem);\n"
  },
  {
    "path": "src/Components/Drawer/DrawerItem/DrawerItem.stories.js",
    "content": "import React from 'react';\nimport { View, StyleSheet, Platform, Dimensions } from 'react-native';\n\nimport { Drawer, DrawerItem, IconButton, BodyText, Heading } from '../../..';\nimport Header from '../../../storybook/components/Header';\nimport Container from '../../../storybook/components/Container';\nimport { storiesOf } from '../../../storybook/helpers/storiesOf';\n\nimport { State, Store } from '@sambego/storybook-state';\n\nconst store = new Store({\n  isOpen: true,\n  isOpenPermanent: true,\n});\n\nconst DrawerContent = () => {\n  return (\n    <View>\n      <DrawerItem text={'Inbox'} icon={'mail'} active />\n      <DrawerItem text={'Outbox'} icon={'send'} />\n      <DrawerItem text={'Favorites'} icon={'favorite'} />\n      <DrawerItem text={'Important'} icon={'bookmark'} />\n      <DrawerItem text={'Spam'} icon={'error'} />\n      <DrawerItem text={'Trash'} icon={'delete'} />\n    </View>\n  );\n};\n\nconst DrawerContentNoIcon = () => {\n  return (\n    <View>\n      <DrawerItem text={'Inbox'} active />\n      <DrawerItem text={'Outbox'} />\n      <DrawerItem text={'Favorites'} />\n      <DrawerItem text={'Important'} />\n      <DrawerItem text={'Spam'} />\n      <DrawerItem text={'Trash'} />\n    </View>\n  );\n};\n\nconst PageContent = () => {\n  return (\n    <View style={{ marginTop: 20, alignItems: 'center' }}>\n      <Heading type={4} style={{ marginBottom: 20 }}>\n        This is a page\n      </Heading>\n      <BodyText text=\"Click the menu button to open the drawer\" />\n      <BodyText text=\"Click outside the drawer to close it\" />\n    </View>\n  );\n};\n\nconst pageWidth = Platform.OS == 'web' ? 600 : Dimensions.get('window').width;\n\nexport default storiesOf('Components|Drawer/DrawerItem', module)\n  .addParameters({ jest: ['Drawer'] })\n  .add('Simple', () => (\n    <Container scroll style={{ padding: 0 }}>\n      <Header title={'Drawer'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={styles.container}>\n            <Drawer\n              open={state.isOpen}\n              pageWidth={pageWidth}\n              pageHeight={500}\n              drawerContent={<DrawerContent />}\n              onClose={() => store.set({ isOpen: false })}\n              animationTime={250}\n              opacity={0.33}>\n              <View style={styles.body}>\n                <IconButton\n                  size={24}\n                  name=\"menu\"\n                  onPress={() => store.set({ isOpen: !state.isOpen })}\n                />\n                <PageContent />\n              </View>\n            </Drawer>\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('no icon', () => (\n    <Container scroll style={{ padding: 0 }}>\n      <Header title={'Drawer'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={styles.container}>\n            <Drawer\n              open={state.isOpen}\n              pageWidth={pageWidth}\n              pageHeight={500}\n              drawerContent={<DrawerContentNoIcon />}\n              onClose={() => store.set({ isOpen: false })}\n              animationTime={250}\n              opacity={0.33}>\n              <View style={styles.body}>\n                <IconButton\n                  size={24}\n                  name=\"menu\"\n                  onPress={() => store.set({ isOpen: !state.isOpen })}\n                />\n                <PageContent />\n              </View>\n            </Drawer>\n          </View>\n        )}\n      </State>\n    </Container>\n  ));\n\nconst styles = StyleSheet.create({\n  container: {\n    zIndex: 1,\n    position: 'relative',\n  },\n  body: {\n    backgroundColor: '#eee',\n    width: pageWidth,\n    height: 500,\n  },\n});\n"
  },
  {
    "path": "src/Components/Drawer/DrawerItem/DrawerItem.styles.js",
    "content": "import { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  drawerItem: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    height: 40,\n    borderRadius: 4,\n    paddingHorizontal: 8,\n    zIndex: 10,\n  },\n  text: {\n    fontSize: 14,\n    color: 'rgba(0,0,0,.87)',\n    fontWeight: '500',\n    zIndex: 10,\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Drawer/DrawerItem/DrawerItem.test.js",
    "content": "import React from 'react';\nimport { DrawerItem } from '../../..';\n\nimport renderer from 'react-test-renderer';\n\ntest('DrawerItem Renders', () => {\n  const tree = renderer.create(<DrawerItem />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Drawer/DrawerItem/__snapshots__/DrawerItem.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`DrawerItem Renders 1`] = `\n<View\n  accessible={true}\n  displayUntilPressOut={true}\n  onLayout={[Function]}\n  onResponderGrant={[Function]}\n  onResponderMove={[Function]}\n  onResponderRelease={[Function]}\n  onResponderTerminate={[Function]}\n  onResponderTerminationRequest={[Function]}\n  onRippleAnimation={[Function]}\n  onStartShouldSetResponder={[Function]}\n  rippleCentered={false}\n  rippleColor=\"rgba(0, 0, 0, .87)\"\n  rippleDuration={400}\n  rippleFades={true}\n  rippleOpacity={0.3}\n  rippleSequential={false}\n  rippleSize={0}\n  style={\n    Object {\n      \"alignItems\": \"center\",\n      \"backgroundColor\": \"transparent\",\n      \"borderRadius\": 4,\n      \"flexDirection\": \"row\",\n      \"height\": 40,\n      \"paddingHorizontal\": 8,\n      \"zIndex\": 10,\n    }\n  }\n  testID=\"mb-ripple\"\n  useNativeDriver={true}\n>\n  <Text\n    style={\n      Array [\n        Object {\n          \"color\": \"rgba(0,0,0,.87)\",\n          \"fontSize\": 14,\n          \"fontWeight\": \"500\",\n          \"zIndex\": 10,\n        },\n        Object {\n          \"color\": \"rgba(0,0,0,.87)\",\n          \"marginLeft\": 0,\n        },\n      ]\n    }\n  />\n  <View\n    pointerEvents=\"none\"\n    style={\n      Array [\n        Object {\n          \"backgroundColor\": \"transparent\",\n          \"bottom\": 0,\n          \"left\": 0,\n          \"overflow\": \"hidden\",\n          \"position\": \"absolute\",\n          \"right\": 0,\n          \"top\": 0,\n          \"zIndex\": 10,\n        },\n        Object {\n          \"borderRadius\": 4,\n        },\n      ]\n    }\n  />\n</View>\n`;\n"
  },
  {
    "path": "src/Components/Drawer/DrawerItem/index.js",
    "content": "export { default } from './DrawerItem';\n"
  },
  {
    "path": "src/Components/Drawer/DrawerSection/DrawerSection.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { View, Text } from 'react-native';\nimport withTheme from '../../../Theme/withTheme';\nimport Divider from '../../Divider/Divider';\nimport styles from './DrawerSection.styles';\n\nclass DrawerSection extends Component {\n  static propTypes = {\n    children: PropTypes.node,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    label: PropTypes.string,\n    topDivider: PropTypes.bool,\n    bottomDivider: PropTypes.bool,\n    fullWidth: PropTypes.bool,\n  };\n\n  render() {\n    const {\n      children,\n      label,\n      topDivider,\n      bottomDivider,\n      fullWidth,\n      style,\n    } = this.props;\n\n    return (\n      <View\n        style={[\n          style,\n          { paddingHorizontal: fullWidth ? 0 : 8, paddingTop: label ? 8 : 0 },\n        ]}>\n        {topDivider ? <Divider /> : null}\n        {label ? <Text style={styles.label}>{label}</Text> : null}\n        <View style={styles.content}>{children}</View>\n        {bottomDivider ? <Divider /> : null}\n      </View>\n    );\n  }\n}\n\nexport default withTheme(DrawerSection);\n"
  },
  {
    "path": "src/Components/Drawer/DrawerSection/DrawerSection.stories.js",
    "content": "import React from 'react';\nimport { View, StyleSheet, Platform, Dimensions } from 'react-native';\n\nimport {\n  Drawer,\n  DrawerItem,\n  DrawerSection,\n  IconButton,\n  BodyText,\n  Heading,\n} from '../../..';\nimport Header from '../../../storybook/components/Header';\nimport Container from '../../../storybook/components/Container';\nimport { storiesOf } from '../../../storybook/helpers/storiesOf';\n\nimport { State, Store } from '@sambego/storybook-state';\n\nconst store = new Store({\n  isOpen: true,\n  isOpenPermanent: true,\n});\n\nconst DrawerContent = () => {\n  return (\n    <View>\n      <DrawerSection bottomDivider>\n        <DrawerItem text={'Inbox'} icon={'mail'} active />\n        <DrawerItem text={'Outbox'} icon={'send'} />\n        <DrawerItem text={'Favorites'} icon={'favorite'} />\n      </DrawerSection>\n      <DrawerSection bottomDivider>\n        <DrawerItem text={'Important'} icon={'mail'} />\n        <DrawerItem text={'Spam'} icon={'send'} />\n        <DrawerItem text={'Trash'} icon={'favorite'} />\n      </DrawerSection>\n    </View>\n  );\n};\n\nconst DrawerContentLabel = () => {\n  return (\n    <View>\n      <DrawerSection bottomDivider label={'Main'}>\n        <DrawerItem text={'Inbox'} icon={'mail'} active />\n        <DrawerItem text={'Outbox'} icon={'send'} />\n        <DrawerItem text={'Favorites'} icon={'favorite'} />\n      </DrawerSection>\n      <DrawerSection bottomDivider label={'Secondary'}>\n        <DrawerItem text={'Important'} icon={'mail'} />\n        <DrawerItem text={'Spam'} icon={'send'} />\n        <DrawerItem text={'Trash'} icon={'favorite'} />\n      </DrawerSection>\n    </View>\n  );\n};\n\nconst PageContent = () => {\n  return (\n    <View style={{ marginTop: 20, alignItems: 'center' }}>\n      <Heading type={4} style={{ marginBottom: 20 }}>\n        This is a page\n      </Heading>\n      <BodyText text=\"Click the menu button to open the drawer\" />\n      <BodyText text=\"Click outside the drawer to close it\" />\n    </View>\n  );\n};\n\nconst pageWidth = Platform.OS == 'web' ? 600 : Dimensions.get('window').width;\n\nexport default storiesOf('Components|Drawer/DrawerSection', module)\n  .addParameters({ jest: ['Drawer'] })\n  .add('Simple', () => (\n    <Container scroll style={{ padding: 0 }}>\n      <Header title={'Drawer'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={styles.container}>\n            <Drawer\n              open={state.isOpen}\n              pageWidth={pageWidth}\n              pageHeight={500}\n              drawerContent={<DrawerContent />}\n              onClose={() => store.set({ isOpen: false })}\n              animationTime={250}\n              opacity={0.33}>\n              <View style={styles.body}>\n                <IconButton\n                  size={24}\n                  name=\"menu\"\n                  onPress={() => store.set({ isOpen: !state.isOpen })}\n                />\n                <PageContent />\n              </View>\n            </Drawer>\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('with label', () => (\n    <Container scroll style={{ padding: 0 }}>\n      <Header title={'Drawer'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={styles.container}>\n            <Drawer\n              open={state.isOpen}\n              pageWidth={pageWidth}\n              pageHeight={500}\n              drawerContent={<DrawerContentLabel />}\n              onClose={() => store.set({ isOpen: false })}\n              animationTime={250}\n              opacity={0.33}>\n              <View style={styles.body}>\n                <IconButton\n                  size={24}\n                  name=\"menu\"\n                  onPress={() => store.set({ isOpen: !state.isOpen })}\n                />\n                <PageContent />\n              </View>\n            </Drawer>\n          </View>\n        )}\n      </State>\n    </Container>\n  ));\n\nconst styles = StyleSheet.create({\n  container: {\n    zIndex: 1,\n    position: 'relative',\n  },\n  body: {\n    backgroundColor: '#eee',\n    width: pageWidth,\n    height: 500,\n  },\n});\n"
  },
  {
    "path": "src/Components/Drawer/DrawerSection/DrawerSection.styles.js",
    "content": "import { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  content: {\n    paddingTop: 8,\n    paddingBottom: 8,\n  },\n  label: {\n    marginBottom: 8,\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Drawer/DrawerSection/DrawerSection.test.js",
    "content": "import React from 'react';\nimport { DrawerSection } from '../../../';\n\nimport renderer from 'react-test-renderer';\n\ntest('DrawerSection Renders', () => {\n  const tree = renderer.create(<DrawerSection />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Drawer/DrawerSection/__snapshots__/DrawerSection.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`DrawerSection Renders 1`] = `\n<View\n  style={\n    Array [\n      undefined,\n      Object {\n        \"paddingHorizontal\": 8,\n        \"paddingTop\": 0,\n      },\n    ]\n  }\n>\n  <View\n    style={\n      Object {\n        \"paddingBottom\": 8,\n        \"paddingTop\": 8,\n      }\n    }\n  />\n</View>\n`;\n"
  },
  {
    "path": "src/Components/Drawer/DrawerSection/index.js",
    "content": "export { default } from './DrawerSection';\n"
  },
  {
    "path": "src/Components/Drawer/__snapshots__/Drawer.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Drawer Renders 1`] = `\n<View\n  style={\n    Array [\n      Object {\n        \"backgroundColor\": \"white\",\n        \"flex\": 1,\n      },\n      Object {\n        \"overflow\": \"hidden\",\n        \"position\": \"relative\",\n        \"width\": 750,\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    style={\n      Object {\n        \"backgroundColor\": \"white\",\n        \"borderRightColor\": \"rgba(0,0,0,.12)\",\n        \"borderRightWidth\": 1,\n        \"borderStyle\": \"solid\",\n        \"height\": 1334,\n        \"left\": -342.5,\n        \"position\": \"absolute\",\n        \"shadowColor\": \"#000\",\n        \"shadowOffset\": Object {\n          \"height\": 8,\n          \"width\": 0,\n        },\n        \"shadowOpacity\": 0.44,\n        \"shadowRadius\": 10.32,\n        \"top\": 0,\n        \"transform\": Array [\n          Object {\n            \"translateX\": 0,\n          },\n        ],\n        \"width\": 337.5,\n        \"zIndex\": 100,\n      }\n    }\n    useNativeDriver={true}\n  />\n  <View\n    style={\n      Object {\n        \"backgroundColor\": \"black\",\n        \"height\": 1334,\n        \"left\": 0,\n        \"opacity\": 0,\n        \"position\": \"absolute\",\n        \"top\": 0,\n        \"width\": 750,\n        \"zIndex\": 0,\n      }\n    }\n    useNativeDriver={true}\n  >\n    <View\n      accessible={true}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Array [\n          Object {\n            \"left\": 0,\n            \"position\": \"absolute\",\n            \"zIndex\": 0,\n          },\n          Object {\n            \"backgroundColor\": \"black\",\n            \"height\": 1334,\n            \"width\": 750,\n          },\n        ]\n      }\n    />\n  </View>\n  <View\n    style={\n      Array [\n        Object {\n          \"height\": \"100%\",\n        },\n        undefined,\n      ]\n    }\n  >\n    <View\n      style={\n        Object {\n          \"height\": \"100%\",\n        }\n      }\n    />\n  </View>\n</View>\n`;\n"
  },
  {
    "path": "src/Components/Drawer/index.js",
    "content": "export { default } from './Drawer';\nexport { default as DrawerHeader } from './DrawerHeader';\nexport { default as DrawerItem } from './DrawerItem';\nexport { default as DrawerSection } from './DrawerSection';\n"
  },
  {
    "path": "src/Components/DrawerBottom/DrawerBottom.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport withTheme from '../../Theme/withTheme';\nimport SheetBottom from '../SheetBottom/SheetBottom';\n\nclass DrawerBottom extends Component {\n  static propTypes = {\n    children: PropTypes.node,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n  };\n  render() {\n    const { children, ...rest } = this.props;\n\n    return (\n      <SheetBottom type={'modal'} {...rest}>\n        {children}\n      </SheetBottom>\n    );\n  }\n}\n\nexport default withTheme(DrawerBottom);\n"
  },
  {
    "path": "src/Components/DrawerBottom/DrawerBottom.stories.js",
    "content": "import React from 'react';\nimport { View, Platform } from 'react-native';\n\nimport {\n  DrawerBottom,\n  Button,\n  DrawerItem,\n  DrawerHeader,\n  DrawerSection,\n} from '../../';\nimport { State, Store } from '@sambego/storybook-state';\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\n\nconst store = new Store({\n  visible: false,\n});\n\nexport default storiesOf('Components|DrawerBottom', module)\n  .addParameters({ jest: ['DrawerBottom'] })\n  .add('Simple', () => (\n    <Container>\n      <Header title={'DrawerBottom'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={{ flex: 1, height: 300 }}>\n            <Button\n              text=\"Open Drawer\"\n              onPress={() => {\n                store.set({ visible: true });\n              }}\n            />\n            <DrawerBottom\n              visible={state.visible}\n              pageHeight={Platform.OS == 'web' ? 400 : null}\n              onBackdropPress={() => store.set({ visible: false })}\n              onSwipeDown={() => store.set({ visible: false })}>\n              <View>\n                <DrawerHeader title={'Jon Snow'} subtitle={'Knows nothing'} />\n                <DrawerSection bottomDivider>\n                  <DrawerItem text={'Inbox'} icon={'mail'} active />\n                  <DrawerItem text={'Outbox'} icon={'send'} />\n                  <DrawerItem text={'Favorites'} icon={'favorite'} />\n                </DrawerSection>\n              </View>\n            </DrawerBottom>\n          </View>\n        )}\n      </State>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/DrawerBottom/DrawerBottom.styles.js",
    "content": ""
  },
  {
    "path": "src/Components/DrawerBottom/DrawerBottom.test.js",
    "content": "import React from 'react';\nimport { DrawerBottom } from '../../';\n\nimport renderer from 'react-test-renderer';\n\ntest('DrawerBottom Renders', () => {\n  const tree = renderer.create(<DrawerBottom />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/DrawerBottom/__snapshots__/DrawerBottom.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`DrawerBottom Renders 1`] = `\n<Modal\n  animationType=\"none\"\n  hardwareAccelerated={false}\n  onRequestClose={[Function]}\n  supportedOrientations={\n    Array [\n      \"portrait\",\n      \"landscape\",\n    ]\n  }\n  transparent={true}\n  visible={false}\n>\n  <View\n    style={\n      Array [\n        Object {\n          \"backgroundColor\": \"#00000077\",\n          \"flex\": 1,\n        },\n        undefined,\n      ]\n    }\n  >\n    <View\n      accessible={true}\n      isTVSelectable={true}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderRelease={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      style={\n        Object {\n          \"backgroundColor\": \"transparent\",\n          \"height\": \"100%\",\n          \"left\": 0,\n          \"opacity\": 1,\n          \"position\": \"absolute\",\n          \"top\": 0,\n          \"width\": \"100%\",\n          \"zIndex\": -1,\n        }\n      }\n    />\n    <View\n      onMoveShouldSetResponder={[Function]}\n      onMoveShouldSetResponderCapture={[Function]}\n      onResponderEnd={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderReject={[Function]}\n      onResponderRelease={[Function]}\n      onResponderStart={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      onStartShouldSetResponderCapture={[Function]}\n      style={\n        Object {\n          \"backgroundColor\": \"#fff\",\n          \"height\": 1334,\n          \"overflow\": \"hidden\",\n          \"paddingVertical\": 20,\n          \"shadowColor\": \"#000\",\n          \"shadowOffset\": Object {\n            \"height\": 8,\n            \"width\": 0,\n          },\n          \"shadowOpacity\": 0.44,\n          \"shadowRadius\": 10.32,\n          \"transform\": Array [\n            Object {\n              \"translateY\": 1334,\n            },\n          ],\n          \"width\": \"100%\",\n          \"zIndex\": 1000,\n        }\n      }\n      useNativeDriver={true}\n    >\n      <RCTSafeAreaView\n        emulateUnlessSupported={true}\n        onLayout={[Function]}\n      />\n    </View>\n  </View>\n</Modal>\n`;\n"
  },
  {
    "path": "src/Components/DrawerBottom/index.js",
    "content": "export { default } from './DrawerBottom';\n"
  },
  {
    "path": "src/Components/Fab/Fab.js",
    "content": "import React, { Component, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { Animated } from 'react-native';\n\nimport withTheme from '../../Theme/withTheme';\nimport Icon from '../Icon/Icon.js';\nimport Ripple from '../Ripple/Ripple.js';\nimport BodyText from '../Typography/BodyText/BodyText.js';\nimport shadowTool from '../../Utils/Shadow/shadow.js';\nimport styles from './Fab.styles';\n\nexport class Fab extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),\n    backgroundColor: PropTypes.string,\n    onPress: PropTypes.func,\n    disabled: PropTypes.bool,\n    rippleColor: PropTypes.string,\n    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n    shadow: PropTypes.number,\n    mini: PropTypes.bool,\n    theme: PropTypes.object,\n    children: PropTypes.node,\n    visible: PropTypes.bool,\n    initialScale: PropTypes.number,\n    animated: PropTypes.bool,\n    label: PropTypes.string,\n    testID: PropTypes.string,\n    containerStyle: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),\n  };\n\n  static defaultProps = {\n    visible: true,\n    icon: 'add',\n  };\n\n  state = {\n    scale: new Animated.Value(0),\n  };\n\n  componentDidMount() {\n    const { visible, animated } = this.props;\n\n    if (visible && animated) {\n      this._animate();\n    } else if (visible) {\n      this.setState({ scale: new Animated.Value(1) });\n    }\n  }\n\n  componentDidUpdate(prevProps) {\n    const { visible, animated } = this.props;\n\n    if (visible != prevProps.visible && animated) {\n      this._animate();\n    }\n  }\n\n  _animate() {\n    const { visible } = this.props;\n    const { scale } = this.state;\n\n    const scaleValue = visible ? 1 : 0;\n\n    Animated.spring(scale, {\n      toValue: scaleValue,\n      speed: 7,\n      useNativeDriver: true,\n    }).start();\n  }\n\n  _renderContent() {\n    const { icon, label } = this.props;\n\n    return (\n      <Fragment>\n        {icon ? this._renderIcon() : null}\n        {label ? this._renderLabel() : null}\n      </Fragment>\n    );\n  }\n\n  _renderLabel() {\n    const { label, disabled } = this.props;\n\n    return (\n      <BodyText\n        text={label}\n        style={{\n          color: disabled ? 'rgba(0, 0, 0, 0.26)' : 'white',\n          fontSize: 14,\n          marginLeft: 8,\n        }}\n      />\n    );\n  }\n\n  _renderIcon() {\n    const { disabled, icon } = this.props;\n\n    const color = disabled ? 'rgba(0, 0, 0, 0.26)' : 'white';\n\n    if (typeof icon == 'string' || icon instanceof String || !icon) {\n      return <Icon name={icon ? icon : 'add'} size={24} color={color} />;\n    } else {\n      return React.cloneElement(icon, {\n        size: icon.props.size ? icon.props.size : 24,\n        color: icon.props.color ? icon.props.color : color,\n      });\n    }\n  }\n\n  render() {\n    const {\n      style,\n      backgroundColor,\n      onPress,\n      disabled,\n      rippleColor,\n      shadow,\n      mini,\n      theme,\n      children,\n      label,\n      testID,\n      containerStyle,\n      ...props\n    } = this.props;\n    const { scale } = this.state;\n\n    let backgroundColorApplied = backgroundColor\n      ? backgroundColor\n      : theme.primary.main;\n\n    if (disabled) backgroundColorApplied = 'rgba(0, 0, 0, 0.12)';\n\n    let size = mini ? 40 : 56;\n    let width = size;\n    if (label) {\n      size = 48;\n      width = 'auto';\n    }\n\n    return (\n      <Animated.View\n        useNativeDriver={true}\n        style={[\n          {\n            transform: [{ scale: scale }],\n            elevation: 100,\n            zIndex: 100,\n          },\n          containerStyle,\n        ]}\n        testID={testID}>\n        <Ripple\n          onPress={onPress}\n          disabled={disabled}\n          rippleColor={rippleColor ? rippleColor : 'rgba(0,0,0,.8)'}\n          rippleContainerBorderRadius={100}\n          style={[\n            styles.button,\n            {\n              minHeight: size,\n              minWidth: width,\n              height: size,\n              width: width,\n              paddingHorizontal: label ? 12 : 0,\n              backgroundColor: backgroundColorApplied,\n            },\n            shadowTool(disabled ? 0 : shadow || 6),\n            style,\n          ]}\n          {...props}>\n          {children ? children : this._renderContent()}\n        </Ripple>\n      </Animated.View>\n    );\n  }\n}\n\nexport default withTheme(Fab);\n"
  },
  {
    "path": "src/Components/Fab/Fab.stories.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\n\nimport { Fab, Button } from '../../';\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\nimport { State, Store } from '@sambego/storybook-state';\nconst store = new Store({\n  visible: true,\n});\n\nexport default storiesOf('Components|Fab', module)\n  .addParameters({ jest: ['Fab'] })\n  .add('simple', () => (\n    <Container>\n      <Header title={'Fab'} />\n      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>\n        <Fab icon={'add'} />\n        <Fab backgroundColor={'#E91E63'} icon={'archive'} />\n        <Fab backgroundColor={'#F44336'} icon={'delete'} />\n        <Fab backgroundColor={'#009688'} icon={'edit'} />\n        <Fab backgroundColor={'black'} icon={'attach-money'} />\n        <Fab disabled backgroundColor={'#009688'} icon={'delete'} />\n      </View>\n    </Container>\n  ))\n  .add('animated', () => (\n    <Container>\n      <Header title={'Fab'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>\n              <Fab animated visible={state.visible} icon={'add'} />\n              <Fab\n                animated\n                visible={state.visible}\n                backgroundColor={'#E91E63'}\n                icon={'archive'}\n              />\n              <Fab\n                animated\n                visible={state.visible}\n                backgroundColor={'#F44336'}\n                icon={'delete'}\n              />\n              <Fab\n                animated\n                visible={state.visible}\n                mini\n                backgroundColor={'#009688'}\n                icon={'edit'}\n              />\n              <Fab\n                animated\n                visible={state.visible}\n                mini\n                backgroundColor={'black'}\n                icon={'attach-money'}\n              />\n              <Fab\n                animated\n                disabled\n                visible={state.visible}\n                mini\n                backgroundColor={'#009688'}\n                icon={'delete'}\n              />\n            </View>\n            <Button\n              text={'Toggle visibility'}\n              onPress={() => store.set({ visible: !state.visible })}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('mini', () => (\n    <Container>\n      <Header title={'Fab'} />\n      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>\n        <Fab mini icon={'add'} />\n        <Fab mini backgroundColor={'#E91E63'} icon={'archive'} />\n        <Fab mini backgroundColor={'#F44336'} icon={'delete'} />\n        <Fab mini backgroundColor={'#009688'} icon={'edit'} />\n        <Fab mini backgroundColor={'black'} icon={'attach-money'} />\n        <Fab mini disabled backgroundColor={'#009688'} icon={'delete'} />\n      </View>\n    </Container>\n  ))\n  .add('extended', () => (\n    <Container>\n      <Header title={'Fab'} />\n      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>\n        <Fab icon={'add'} label={'Add'} />\n        <Fab backgroundColor={'#E91E63'} icon={'archive'} label={'Archive'} />\n        <Fab backgroundColor={'#F44336'} icon={'delete'} label={'Delete'} />\n        <Fab backgroundColor={'#009688'} icon={'edit'} label={'Edit'} />\n        <Fab backgroundColor={'black'} icon={'attach-money'} label={'Buy'} />\n        <Fab\n          disabled\n          backgroundColor={'#009688'}\n          icon={'delete'}\n          label={'Disabled'}\n        />\n      </View>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/Fab/Fab.styles.js",
    "content": "import { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  button: {\n    height: 56,\n    width: 56,\n    flexDirection: 'row',\n    alignItems: 'center',\n    alignSelf: 'center',\n    justifyContent: 'center',\n    borderRadius: 100,\n  },\n\n  icon: {\n    width: 16,\n    flexDirection: 'row',\n    alignItems: 'center',\n    alignSelf: 'center',\n    justifyContent: 'center',\n    textAlign: 'center',\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Fab/Fab.test.js",
    "content": "import React from 'react';\nimport { Fab } from '../../';\n\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\n\ntest('Fab Renders', () => {\n  const tree = renderer.render(<Fab />);\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Fab/FabSpeedDial/FabSpeedDial.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { View, Animated } from 'react-native';\nimport withTheme from '../../../Theme/withTheme';\nimport Fab from '../Fab.js';\nimport styles from './FabSpeedDial.styles';\n\nclass FabSpeedDial extends Component {\n  constructor(props) {\n    super(props);\n  }\n  static propTypes = {\n    containerStyle: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),\n    style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),\n    onPress: PropTypes.func,\n    actions: PropTypes.array,\n    fab: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n    testID: PropTypes.string,\n    fabProps: PropTypes.object,\n  };\n\n  static defaultProps = {\n    fab: 'add',\n  };\n\n  state = {\n    open: false,\n    fabIcon: 'add',\n    actionAnimationsScale: [\n      new Animated.Value(0),\n      new Animated.Value(0),\n      new Animated.Value(0),\n      new Animated.Value(0),\n      new Animated.Value(0),\n      new Animated.Value(0),\n    ],\n    actionAnimationsOpacity: [\n      new Animated.Value(0),\n      new Animated.Value(0),\n      new Animated.Value(0),\n      new Animated.Value(0),\n      new Animated.Value(0),\n      new Animated.Value(0),\n    ],\n  };\n\n  toggleSpeedDial() {\n    this.setState({ open: !this.state.open });\n  }\n\n  toggleFabIcon() {\n    const { fab } = this.props;\n    const { open } = this.state;\n\n    let fabIcon;\n    if (typeof fab != 'string') {\n      fabIcon = open ? 'clear' : fab.props.icon;\n    } else {\n      fabIcon = open ? 'clear' : fab;\n    }\n\n    this.setState({ fabIcon });\n  }\n\n  animateActions() {\n    const { onPress } = this.props;\n    const { open } = this.state;\n\n    this.setState({\n      open: !open,\n    });\n\n    if (!open) {\n      this.openAnimation();\n    } else {\n      this.closeAnimation();\n    }\n\n    this.toggleFabIcon();\n    if (onPress) onPress();\n  }\n\n  openAnimation() {\n    const { actionAnimationsScale, actionAnimationsOpacity } = this.state;\n    Animated.parallel([\n      Animated.stagger(\n        50,\n        actionAnimationsScale\n          .map(animation =>\n            Animated.timing(animation, {\n              toValue: 1,\n              duration: 150,\n              useNativeDriver: true,\n            }),\n          )\n          .reverse(),\n      ),\n      Animated.stagger(\n        50,\n        actionAnimationsOpacity\n          .map(animation =>\n            Animated.timing(animation, {\n              toValue: 1,\n              duration: 150,\n              useNativeDriver: true,\n            }),\n          )\n          .reverse(),\n      ),\n    ]).start();\n  }\n\n  closeAnimation() {\n    const { actionAnimationsScale, actionAnimationsOpacity } = this.state;\n    Animated.parallel([\n      Animated.stagger(\n        50,\n        actionAnimationsScale.map(animation =>\n          Animated.timing(animation, {\n            toValue: 0,\n            duration: 150,\n            useNativeDriver: true,\n          }),\n        ),\n      ),\n      Animated.stagger(\n        50,\n        actionAnimationsOpacity.map(animation =>\n          Animated.timing(animation, {\n            toValue: 0,\n            duration: 150,\n            useNativeDriver: true,\n          }),\n        ),\n      ),\n    ]).start();\n  }\n\n  renderActions() {\n    const { actions } = this.props;\n\n    return (\n      <View\n        style={{\n          marginBottom: 24,\n          alignItems: 'flex-end',\n        }}>\n        {actions.map((item, index) => {\n          return (\n            <Animated.View\n              useNativeDriver={true}\n              key={index}\n              style={{\n                marginTop: 16,\n                transform: [{ scale: this.state.actionAnimationsScale[index] }],\n                opacity: this.state.actionAnimationsOpacity[index],\n              }}>\n              {item}\n            </Animated.View>\n          );\n        })}\n      </View>\n    );\n  }\n\n  _renderFab() {\n    const { fab, style, fabProps } = this.props;\n    let { fabIcon, open } = this.state;\n\n    if (typeof fab == 'string' || fab instanceof String || !fab) {\n      return (\n        <Fab\n          icon={fabIcon}\n          onPress={() => this.animateActions()}\n          style={style}\n          {...fabProps}\n        />\n      );\n    } else {\n      return React.cloneElement(fab, {\n        label: open ? '' : fab.props.label,\n        icon: fabIcon,\n        color: fab.props.color ? fab.props.color : 'white',\n        onPress: () => this.animateActions(),\n      });\n    }\n  }\n\n  render() {\n    const { containerStyle, testID } = this.props;\n    return (\n      <View style={[styles.container, containerStyle]} testID={testID}>\n        {this.renderActions()}\n        {this._renderFab()}\n      </View>\n    );\n  }\n}\n\nexport default withTheme(FabSpeedDial);\n"
  },
  {
    "path": "src/Components/Fab/FabSpeedDial/FabSpeedDial.stories.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\n\nimport { Fab, FabSpeedDial } from '../../../';\nimport Header from '../../../storybook/components/Header';\nimport Container from '../../../storybook/components/Container';\nimport { storiesOf } from '../../../storybook/helpers/storiesOf';\n\nconst actions = [\n  <Fab key={1} backgroundColor={'#E91E63'} icon={'archive'} />,\n  <Fab key={2} backgroundColor={'#F44336'} icon={'delete'} />,\n  <Fab key={3} backgroundColor={'#009688'} icon={'edit'} />,\n  <Fab key={4} backgroundColor={'black'} icon={'attach-money'} />,\n];\n\nconst actionsExtended = [\n  <Fab key={4} label=\"Buy\" backgroundColor={'black'} icon={'attach-money'} />,\n  <Fab key={3} label=\"Edit\" backgroundColor={'#009688'} icon={'edit'} />,\n\n  <Fab key={2} label=\"Delete\" backgroundColor={'#F44336'} icon={'delete'} />,\n  <Fab key={1} label=\"Archive\" backgroundColor={'#E91E63'} icon={'archive'} />,\n];\n\nexport default storiesOf('Components|Fab/FabSpeedDial', module)\n  .addParameters({ jest: ['FabSpeedDial'] })\n  .add('simple', () => (\n    <Container>\n      <Header title={'Fab SpeedDial'} />\n\n      <View style={{ flex: 1, position: 'relative', paddingTop: 350 }}>\n        <FabSpeedDial actions={actions} />\n      </View>\n    </Container>\n  ))\n  .add('extended', () => (\n    <Container>\n      <Header title={'Fab SpeedDial'} />\n\n      <View style={{ flex: 1, position: 'relative', paddingTop: 350 }}>\n        <FabSpeedDial\n          extended\n          actions={actionsExtended}\n          fab={<Fab label=\"Open\" icon=\"add\" />}\n        />\n      </View>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/Fab/FabSpeedDial/FabSpeedDial.styles.js",
    "content": "import { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  container: {\n    position: 'absolute',\n    bottom: 0,\n    right: 0,\n    backgroundColor: 'transparent',\n    alignItems: 'flex-end',\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Fab/FabSpeedDial/FabSpeedDial.test.js",
    "content": "import React from 'react';\nimport { FabSpeedDial } from '../../..';\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\nconst actions = [\n  {\n    text: 'Favorites',\n  },\n  {\n    text: 'Language',\n  },\n  {\n    text: 'Location',\n  },\n  {\n    text: 'Video',\n  },\n];\n\ntest('FabSpeedDial Renders', () => {\n  const tree = renderer.render(<FabSpeedDial actions={actions} />);\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Fab/FabSpeedDial/__snapshots__/FabSpeedDial.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`FabSpeedDial Renders 1`] = `\n<Context.Consumer>\n  [Function]\n</Context.Consumer>\n`;\n"
  },
  {
    "path": "src/Components/Fab/FabSpeedDial/index.js",
    "content": "export { default } from './FabSpeedDial';\n"
  },
  {
    "path": "src/Components/Fab/__snapshots__/Fab.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Fab Renders 1`] = `\n<Context.Consumer>\n  [Function]\n</Context.Consumer>\n`;\n"
  },
  {
    "path": "src/Components/Fab/index.js",
    "content": "export { default } from './Fab';\nexport { default as FabSpeedDial } from './FabSpeedDial';\n"
  },
  {
    "path": "src/Components/Icon/Icon.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport MaterialIcons from 'react-native-vector-icons/MaterialIcons';\nimport withTheme from '../../Theme/withTheme';\n\nclass Icon extends Component {\n  constructor(props) {\n    super(props);\n  }\n  static propTypes = {\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    theme: PropTypes.object,\n    color: PropTypes.string,\n    size: PropTypes.number,\n    name: PropTypes.string,\n    testID: PropTypes.string,\n    iconComponent: PropTypes.func,\n  };\n  render() {\n    const {\n      style,\n      name,\n      color,\n      size,\n      testID,\n      iconComponent,\n      ...rest\n    } = this.props;\n\n    const IconComponent = iconComponent || MaterialIcons;\n\n    return (\n      <IconComponent\n        pointerEvents=\"none\"\n        name={name}\n        color={color}\n        size={size}\n        style={[{ backgroundColor: 'transparent' }, style]}\n        testID={testID}\n        {...rest}\n      />\n    );\n  }\n}\n\nexport default withTheme(Icon);\n"
  },
  {
    "path": "src/Components/Icon/Icon.styles.js",
    "content": ""
  },
  {
    "path": "src/Components/Icon/Icon.test.js",
    "content": "import React from 'react';\nimport { Icon } from '../../';\n\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\n\ntest('Icon Renders', () => {\n  const tree = renderer.render(<Icon />);\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Icon/Icons.stories.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';\n\nimport { Icon, Badge } from '../../';\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\n\nexport default storiesOf('Components|Icons', module)\n  .addParameters({ jest: ['Icons'] })\n  .add('Component', () => (\n    <Container>\n      <Header title={'Icon Component'} />\n\n      <View style={{ flexDirection: 'row', marginBottom: 20 }}>\n        <Icon name=\"alarm\" size={32} />\n        <Icon name=\"face\" size={32} />\n        <Icon name=\"arrow-back\" size={32} />\n        <Badge\n          style={{ position: 'absolute', top: 0, right: 0 }}\n          size={14}\n          badgeContent={4}>\n          <Icon name=\"favorite\" size={32} />\n        </Badge>\n      </View>\n      <View style={{ flexDirection: 'row', marginBottom: 20 }}>\n        <Icon name=\"adb\" size={12} color={'#F44336'} />\n        <Icon name=\"album\" size={24} color={'#E91E63'} />\n        <Icon name=\"battery-full\" size={32} color={'#9C27B0'} />\n        <Badge\n          style={{ position: 'absolute', top: 0, right: 0 }}\n          size={14}\n          badgeContent={4}>\n          <Icon name=\"camera\" size={48} color={'#009688'} />\n        </Badge>\n      </View>\n      <View style={{ flexDirection: 'row', marginBottom: 20 }}>\n        <Icon name=\"create\" size={24} color={'#00BCD4'} />\n        <Icon name=\"dashboard\" size={32} color={'#607D8B'} />\n        <Icon name=\"directions-walk\" size={48} color={'#8BC34A'} />\n\n        <Icon name=\"flash-on\" size={64} color={'#FFEB3B'} />\n      </View>\n    </Container>\n  ))\n  .add('Another Source', () => (\n    <Container>\n      <Header title={'Icons from another source'} />\n\n      <View style={{ flexDirection: 'row', marginBottom: 20 }}>\n        <Icon\n          name=\"visual-studio-code\"\n          size={24}\n          color={'#373177'}\n          iconComponent={MaterialCommunityIcons}\n        />\n        <Icon\n          name=\"android-head\"\n          size={32}\n          color={'#69B342'}\n          iconComponent={MaterialCommunityIcons}\n        />\n        <Icon\n          name=\"apple-ios\"\n          size={48}\n          color={'#000000'}\n          iconComponent={MaterialCommunityIcons}\n        />\n        <Icon\n          name=\"react\"\n          size={64}\n          color={'#5FDAFB'}\n          iconComponent={MaterialCommunityIcons}\n        />\n      </View>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/Icon/__snapshots__/Icon.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Icon Renders 1`] = `\n<Context.Consumer>\n  [Function]\n</Context.Consumer>\n`;\n"
  },
  {
    "path": "src/Components/Icon/index.js",
    "content": "export { default } from './Icon';\n"
  },
  {
    "path": "src/Components/IconButton/IconButton.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport withTheme from '../../Theme/withTheme';\nimport Icon from '../Icon/Icon';\nimport Color from 'color';\nimport Ripple from '../Ripple/Ripple';\n\nclass IconButton extends Component {\n  static propTypes = {\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    theme: PropTypes.object,\n    color: PropTypes.string,\n    size: PropTypes.number,\n    name: PropTypes.string,\n    onPress: PropTypes.func,\n    rippleColor: PropTypes.string,\n    disabled: PropTypes.bool,\n    testID: PropTypes.string,\n    iconComponent: PropTypes.func,\n  };\n\n  state = {\n    stateBackgroundColor: null,\n  };\n\n  getRippleColor() {\n    const { color, theme, rippleColor } = this.props;\n    let implementedRippleColor = color ? color : theme.primary.main;\n\n    implementedRippleColor = Color(color)\n      .alpha(0.12)\n      .rgb()\n      .string();\n\n    return rippleColor ? rippleColor : implementedRippleColor;\n  }\n\n  render() {\n    const {\n      style,\n      name,\n      color,\n      size,\n      onPress,\n      disabled,\n      testID,\n      iconComponent,\n      ...rest\n    } = this.props;\n\n    return (\n      <Ripple\n        rippleContainerBorderRadius={100}\n        rippleColor={this.getRippleColor()}\n        onPress={onPress}\n        disabled={disabled}\n        style={[\n          {\n            height: size,\n            width: size,\n            justifyContent: 'center',\n            alignItems: 'center',\n          },\n          style,\n        ]}\n        testID={testID}\n        {...rest}>\n        <Icon\n          name={name}\n          color={color}\n          size={size}\n          style={{\n            backgroundColor: 'transparent',\n          }}\n          iconComponent={iconComponent}\n        />\n      </Ripple>\n    );\n  }\n}\n\nexport default withTheme(IconButton);\n"
  },
  {
    "path": "src/Components/IconButton/IconButton.stories.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';\n\nimport { IconButton, Badge } from '../../';\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\n\nexport default storiesOf('Components|Icon Button', module)\n  .addParameters({ jest: ['IconButton'] })\n  .addDecorator(story => <View style={{ padding: 16 }}>{story()}</View>)\n\n  .add('Component', () => (\n    <Container>\n      <Header title={'Icon Button'} />\n\n      <View style={{ flexDirection: 'row', marginBottom: 20 }}>\n        <IconButton name=\"alarm\" size={32} />\n        <IconButton name=\"face\" size={32} color={'purple'} />\n        <IconButton name=\"arrow-back\" size={32} color={'orange'} />\n      </View>\n      <View style={{ flexDirection: 'row', marginBottom: 20 }}>\n        <IconButton name=\"adb\" size={12} color={'#F44336'} />\n        <IconButton name=\"album\" size={24} color={'#E91E63'} />\n        <IconButton name=\"battery-full\" size={32} color={'#9C27B0'} />\n        <Badge\n          style={{ position: 'absolute', top: 0, right: 0 }}\n          size={14}\n          badgeContent={4}>\n          <IconButton name=\"camera\" size={48} color={'#009688'} />\n        </Badge>\n      </View>\n      <View style={{ flexDirection: 'row', marginBottom: 20 }}>\n        <IconButton name=\"create\" size={24} color={'#00BCD4'} />\n        <IconButton name=\"dashboard\" size={32} color={'#607D8B'} />\n        <IconButton name=\"directions-walk\" size={48} color={'#8BC34A'} />\n\n        <IconButton name=\"flash-on\" size={64} color={'#FFEB3B'} />\n      </View>\n    </Container>\n  ))\n  .add('Another source', () => (\n    <Container>\n      <Header title={'Icons from another source'} />\n\n      <View style={{ flexDirection: 'row', marginBottom: 20 }}>\n        <IconButton\n          name=\"visual-studio-code\"\n          size={24}\n          color={'#373177'}\n          iconComponent={MaterialCommunityIcons}\n        />\n        <IconButton\n          name=\"android-head\"\n          size={32}\n          color={'#69B342'}\n          iconComponent={MaterialCommunityIcons}\n        />\n        <IconButton\n          name=\"apple-ios\"\n          size={48}\n          color={'#000000'}\n          iconComponent={MaterialCommunityIcons}\n        />\n        <IconButton\n          name=\"react\"\n          size={64}\n          color={'#5FDAFB'}\n          iconComponent={MaterialCommunityIcons}\n        />\n      </View>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/IconButton/IconButton.styles.js",
    "content": ""
  },
  {
    "path": "src/Components/IconButton/IconButton.test.js",
    "content": "import React from 'react';\nimport { IconButton } from '../../';\n\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\n\ntest('IconButton Renders', () => {\n  const tree = renderer.render(<IconButton />);\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/IconButton/__snapshots__/IconButton.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`IconButton Renders 1`] = `\n<Context.Consumer>\n  [Function]\n</Context.Consumer>\n`;\n"
  },
  {
    "path": "src/Components/IconButton/index.js",
    "content": "export { default } from './IconButton';\n"
  },
  {
    "path": "src/Components/List/List.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport withTheme from '../../Theme/withTheme';\nimport BodyText from '../Typography/BodyText/BodyText.js';\nimport Paper from '../Paper/Paper.js';\nimport styles from './List.styles';\n\nclass List extends Component {\n  static propTypes = {\n    children: PropTypes.node,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    shadow: PropTypes.number,\n    subheader: PropTypes.string,\n    testID: PropTypes.string,\n  };\n\n  _renderSubheader() {\n    const { subheader } = this.props;\n\n    return <BodyText style={styles.subheader}>{subheader}</BodyText>;\n  }\n  render() {\n    const { style, shadow, subheader, testID } = this.props;\n    return (\n      <Paper\n        shadow={shadow ? shadow : 0}\n        style={[{ backgroundColor: '#fff' }, style]}\n        testID={testID}>\n        {subheader ? this._renderSubheader() : null}\n        {this.props.children}\n      </Paper>\n    );\n  }\n}\n\nexport default withTheme(List);\n"
  },
  {
    "path": "src/Components/List/List.stories.js",
    "content": "import React from 'react';\n\nimport { List, ListItem, Avatar, Icon, Checkbox } from '../../';\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\nimport { State, Store } from '@sambego/storybook-state';\n\nconst store = new Store({\n  checkedOne: false,\n  checkedTwo: false,\n  checkedThree: false,\n  checkedFour: false,\n  checkedFive: false,\n  checkedSix: false,\n});\n\nexport default storiesOf('Components|List', module)\n  .addParameters({ jest: ['List'] })\n  .add('simple', () => (\n    <Container>\n      <Header title={'Simple text List'} />\n\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <List style={{ width: 300 }}>\n            <ListItem\n              text={'Attractions'}\n              icon={<Icon name={'insert-chart'} size={24} />}\n              onPress={() => store.set({ checkedOne: !state.checkedOne })}\n              actionItem={\n                <Checkbox\n                  checkboxColor={'rgba(0, 0, 0, 0.54)'}\n                  checked={state.checkedOne}\n                  onPress={() => store.set({ checkedOne: !state.checkedOne })}\n                />\n              }\n            />\n            <ListItem\n              style={{ paddingVertical: 12 }}\n              text={'Dining'}\n              icon={<Icon name={'insert-chart'} size={24} />}\n              onPress={() => store.set({ checkedTwo: !state.checkedTwo })}\n              actionItem={\n                <Checkbox\n                  checkboxColor={'rgba(0, 0, 0, 0.54)'}\n                  checked={state.checkedTwo}\n                  onPress={() => store.set({ checkedTwo: !state.checkedTwo })}\n                />\n              }\n            />\n            <ListItem\n              style={{ paddingVertical: 12 }}\n              text={'Education'}\n              icon={<Icon name={'insert-chart'} size={24} />}\n              onPress={() => store.set({ checkedThree: !state.checkedThree })}\n              actionItem={\n                <Checkbox\n                  checkboxColor={'rgba(0, 0, 0, 0.54)'}\n                  checked={state.checkedThree}\n                  onPress={() =>\n                    store.set({ checkedThree: !state.checkedThree })\n                  }\n                />\n              }\n            />\n            <ListItem\n              style={{ paddingVertical: 12 }}\n              text={'Health'}\n              icon={<Icon name={'insert-chart'} size={24} />}\n              onPress={() => store.set({ checkedFour: !state.checkedFour })}\n              actionItem={\n                <Checkbox\n                  checkboxColor={'rgba(0, 0, 0, 0.54)'}\n                  checked={state.checkedFour}\n                  onPress={() => store.set({ checkedFour: !state.checkedFour })}\n                />\n              }\n            />\n            <ListItem\n              style={{ paddingVertical: 12 }}\n              text={'Family'}\n              icon={<Icon name={'insert-chart'} size={24} />}\n              onPress={() => store.set({ checkedFive: !state.checkedFive })}\n              actionItem={\n                <Checkbox\n                  checkboxColor={'rgba(0, 0, 0, 0.54)'}\n                  checked={state.checkedFive}\n                  onPress={() => store.set({ checkedFive: !state.checkedFive })}\n                />\n              }\n            />\n            <ListItem\n              style={{ paddingVertical: 12 }}\n              text={'Office'}\n              icon={<Icon name={'insert-chart'} size={24} />}\n              onPress={() => store.set({ checkedSix: !state.checkedSix })}\n              actionItem={\n                <Checkbox\n                  checkboxColor={'rgba(0, 0, 0, 0.54)'}\n                  checked={state.checkedSix}\n                  onPress={() => store.set({ checkedSix: !state.checkedSix })}\n                />\n              }\n            />\n          </List>\n        )}\n      </State>\n    </Container>\n  ))\n\n  .add('with subheader', () => (\n    <Container>\n      <Header title={'List subheader'} />\n\n      <List subheader={'Favorites'} style={{ width: 300 }}>\n        <ListItem\n          text={'Janet Perkins'}\n          media={\n            <Avatar\n              type=\"icon\"\n              content=\"person\"\n              contentColor={'#ececec'}\n              color={'#a3a3a3'}\n              size={40}\n            />\n          }\n        />\n        <ListItem\n          text={'Mary Perkins'}\n          media={\n            <Avatar\n              type=\"icon\"\n              content=\"person\"\n              contentColor={'#ececec'}\n              color={'#a3a3a3'}\n              size={40}\n            />\n          }\n        />\n        <ListItem\n          text={'Peter Carlsson'}\n          media={\n            <Avatar\n              type=\"icon\"\n              content=\"person\"\n              contentColor={'#ececec'}\n              color={'#a3a3a3'}\n              size={40}\n            />\n          }\n        />\n        <ListItem\n          text={'Trevor Hansen'}\n          media={\n            <Avatar\n              type=\"icon\"\n              content=\"person\"\n              contentColor={'#ececec'}\n              color={'#a3a3a3'}\n              size={40}\n            />\n          }\n        />\n      </List>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/List/List.styles.js",
    "content": "import { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  subheader: {\n    color: 'rgba(0,0,0,0.67)',\n    fontSize: 14,\n    marginBottom: 20,\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/List/List.test.js",
    "content": "import React from 'react';\nimport { List } from '../../../src';\n\nimport renderer from 'react-test-renderer';\n\ntest('List Renders', () => {\n  const tree = renderer.create(<List />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/List/ListExpand/ListExpand.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Animated, View, Text } from 'react-native';\nimport withTheme from '../../../Theme/withTheme';\nimport Ripple from '../../Ripple/Ripple';\nimport Icon from '../../Icon/Icon';\nimport Hoverable from '../../../Utils/Hoverable/Hoverable.js';\nimport color from 'color';\nimport styles from './ListExpand.styles';\n\nclass ListExpand extends Component {\n  static propTypes = {\n    expanded: PropTypes.bool,\n    onPress: PropTypes.func,\n    children: PropTypes.node,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    title: PropTypes.string,\n    titleStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    theme: PropTypes.object,\n    icon: PropTypes.node,\n    expandIconStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    rippleProps: PropTypes.object,\n  };\n\n  state = {\n    isOpen: false,\n    menuHeight: new Animated.Value(0),\n    animationDuration: 150,\n    stateBackgroundColor: null,\n  };\n\n  componentDidMount() {\n    const { expanded } = this.props;\n    if (expanded) {\n      this.setState({ isOpen: expanded });\n    }\n  }\n\n  componentDidUpdate(prevProps) {\n    const { expanded } = this.props;\n\n    if (expanded !== prevProps.expanded) {\n      this.setState({ isOpen: expanded });\n    }\n  }\n\n  toggleMenu = () => {\n    const { onPress } = this.props;\n    const { isOpen, animationDuration, menuHeight, initialHeight } = this.state;\n\n    if (initialHeight == 0) {\n      setTimeout(() => this.toggleMenu(), 100);\n      return;\n    }\n\n    let height = initialHeight;\n    if (isOpen) height = 0;\n\n    if (onPress) {\n      onPress();\n    }\n\n    Animated.timing(menuHeight, {\n      toValue: height,\n      duration: animationDuration,\n      useNativeDriver: true,\n    }).start();\n\n    this.setState({\n      isOpen: !isOpen,\n    });\n  };\n\n  onMenuLayout = e => {\n    const { width, height } = e.nativeEvent.layout;\n\n    this.setState({\n      initialWidth: width,\n      initialHeight: height,\n    });\n  };\n\n  renderExpandedContent() {\n    const { children, icon } = this.props;\n    const { menuHeight, initialHeight } = this.state;\n\n    return (\n      <Animated.View\n        useNativeDriver={true}\n        style={{\n          height: menuHeight,\n          overflow: 'hidden',\n          width: '100%',\n          paddingLeft: icon ? 42 : 0,\n          zIndex: 100,\n        }}>\n        <View\n          style={{\n            width: '100%',\n            height: initialHeight,\n            zIndex: 100,\n          }}\n          onLayout={this.onMenuLayout}>\n          {children}\n        </View>\n      </Animated.View>\n    );\n  }\n\n  _renderIcon() {\n    const { icon } = this.props;\n\n    return React.cloneElement(icon, {\n      size: icon.props.size ? icon.props.size : 24,\n      color: icon.props.color ? icon.props.color : '#6e6e6e',\n    });\n  }\n\n  getBackgroundColor = () => {\n    const { stateBackgroundColor } = this.state;\n\n    let implementedBackgroundColor = 'transparent';\n\n    implementedBackgroundColor = stateBackgroundColor\n      ? stateBackgroundColor\n      : implementedBackgroundColor;\n\n    return implementedBackgroundColor;\n  };\n\n  handleHover(toggle) {\n    const { rippleProps } = this.props;\n    let bgColor = this.getBackgroundColor();\n    let implementedColor;\n\n    if (bgColor == 'transparent') {\n      implementedColor = toggle ? 'rgba(0, 0, 0, 0.12)' : null;\n    } else {\n      if (color(bgColor).isDark()) {\n        implementedColor = toggle\n          ? color(bgColor)\n              .lighten(0.15)\n              .rgb()\n              .string()\n          : null;\n      } else {\n        implementedColor = toggle\n          ? color(bgColor)\n              .darken(0.15)\n              .rgb()\n              .string()\n          : null;\n      }\n    }\n\n    if (rippleProps && rippleProps.rippleColor) {\n      implementedColor = toggle\n        ? color(rippleProps.rippleColor)\n            .alpha(0.12)\n            .rgb()\n            .string()\n        : null;\n    }\n    this.setState({ stateBackgroundColor: implementedColor });\n  }\n\n  render() {\n    const {\n      title,\n      style,\n      titleStyle,\n      icon,\n      expandIconStyle,\n      rippleProps,\n    } = this.props;\n    const { isOpen } = this.state;\n\n    return (\n      <View>\n        <Hoverable\n          onHoverIn={() => this.handleHover(true)}\n          onHoverOut={() => this.handleHover(false)}>\n          <Ripple\n            style={[\n              styles.container,\n              { backgroundColor: this.getBackgroundColor() },\n              style,\n            ]}\n            onPress={this.toggleMenu}\n            rippleDuration={100}\n            {...rippleProps}>\n            {icon ? this._renderIcon() : null}\n            <Text\n              style={[styles.title, { marginLeft: icon ? 16 : 0 }, titleStyle]}>\n              {title}\n            </Text>\n            <View style={{ flex: 1 }} />\n            <Icon\n              name={isOpen ? 'expand-less' : 'expand-more'}\n              size={24}\n              style={expandIconStyle}\n            />\n          </Ripple>\n        </Hoverable>\n        {this.renderExpandedContent()}\n      </View>\n    );\n  }\n}\n\nexport default withTheme(ListExpand);\n"
  },
  {
    "path": "src/Components/List/ListExpand/ListExpand.stories.js",
    "content": "import React from 'react';\n\nimport { List, ListItem, ListExpand, Icon } from '../../../';\nimport Header from '../../../storybook/components/Header';\nimport Container from '../../../storybook/components/Container';\nimport { storiesOf } from '../../../storybook/helpers/storiesOf';\n\nexport default storiesOf('Components|List/ListExpand', module)\n  .addParameters({ jest: ['ListExpand'] })\n  .add('simple', () => (\n    <Container>\n      <Header title={'Text List Expand'} />\n\n      <List style={{ width: 300 }}>\n        <ListExpand title={'Events'}>\n          <ListItem text={'Attractions'} />\n          <ListItem text={'Dining'} />\n          <ListItem text={'Education'} />\n          <ListItem text={'Health'} />\n          <ListItem text={'Family'} />\n          <ListItem text={'Office'} />\n          <ListItem text={'Promotions'} />\n        </ListExpand>\n      </List>\n    </Container>\n  ))\n  .add('with icon', () => (\n    <Container>\n      <Header title={'Icon List Expand'} />\n\n      <List style={{ width: 300 }}>\n        <ListExpand\n          title={'Attractions'}\n          icon={<Icon name={'local-movies'} size={24} />}>\n          <ListItem text={'Movies'} />\n          <ListItem text={'Bowling'} />\n          <ListItem text={'Fairgrounds'} />\n        </ListExpand>\n        <ListExpand\n          title={'Dining'}\n          icon={<Icon name={'local-dining'} size={24} />}>\n          <ListItem text={'Pizz Hut'} />\n          <ListItem text={'Taco bell'} />\n          <ListItem text={'Sonics'} />\n        </ListExpand>\n        <ListExpand title={'Education'} icon={<Icon name={'edit'} size={24} />}>\n          <ListItem text={'Basket Weaving'} />\n          <ListItem text={'Cooking'} />\n          <ListItem text={'Economics'} />\n        </ListExpand>\n      </List>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/List/ListExpand/ListExpand.styles.js",
    "content": "import { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  container: {\n    paddingHorizontal: 16,\n    paddingVertical: 12,\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n  },\n\n  title: {\n    fontSize: 16,\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/List/ListExpand/ListExpand.test.js",
    "content": "import React from 'react';\nimport { ListExpand } from '../../../';\n\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\n\ntest('ListExpanded Renders', () => {\n  const tree = renderer.render(<ListExpand />);\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/List/ListExpand/__snapshots__/ListExpand.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`ListExpanded Renders 1`] = `\n<Context.Consumer>\n  [Function]\n</Context.Consumer>\n`;\n"
  },
  {
    "path": "src/Components/List/ListExpand/index.js",
    "content": "export { default } from './ListExpand';\n"
  },
  {
    "path": "src/Components/List/ListItem/ListItem.js",
    "content": "import React, { Component, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { View, Platform } from 'react-native';\n\nimport withTheme from '../../../Theme/withTheme';\nimport BodyText from '../../Typography/BodyText/BodyText.js';\nimport Caption from '../../Typography/Caption/Caption.js';\nimport Ripple from '../../Ripple/Ripple.js';\nimport Hoverable from '../../../Utils/Hoverable/Hoverable.js';\nimport color from 'color';\nimport styles from './ListItem.styles';\n\nclass ListItem extends Component {\n  static propTypes = {\n    children: PropTypes.node,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    onPress: PropTypes.func,\n    disabled: PropTypes.bool,\n    selected: PropTypes.bool,\n    text: PropTypes.string,\n    textProps: PropTypes.object,\n    secondaryText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n    secondaryTextProps: PropTypes.object,\n    media: PropTypes.node,\n    icon: PropTypes.node,\n    actionItem: PropTypes.node,\n    leadingActionItem: PropTypes.node,\n    textStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    secondaryTextStyle: PropTypes.oneOfType([\n      PropTypes.object,\n      PropTypes.array,\n    ]),\n    rippleProps: PropTypes.object,\n    backgroundColor: PropTypes.string,\n  };\n\n  state = {\n    stateBackgroundColor: null,\n    isPressed: false,\n  };\n\n  _renderText() {\n    const {\n      text,\n      textProps = {},\n      secondaryText,\n      secondaryTextProps = {},\n      disabled,\n      textStyle,\n      secondaryTextStyle,\n    } = this.props;\n\n    return (\n      <View style={{ alignItems: 'flex-start' }} ellipsizeMode=\"tail\">\n        <BodyText\n          style={[\n            styles.listItemText,\n            { color: disabled ? 'rgba(0,0,0,0.47)' : 'rgba(0,0,0,1)' },\n            textStyle,\n          ]}\n          numberOfLines={1}\n          {...textProps}>\n          {text}\n        </BodyText>\n        {typeof secondaryText === 'string' ? (\n          <Caption\n            style={[\n              styles.listItemSecondaryText,\n              { color: 'rgba(0,0,0,0.57)' },\n              secondaryTextStyle,\n            ]}\n            numberOfLines={2}\n            {...secondaryTextProps}>\n            {secondaryText}\n          </Caption>\n        ) : (\n          secondaryText\n        )}\n      </View>\n    );\n  }\n\n  _renderIcon() {\n    const { icon } = this.props;\n    return React.cloneElement(icon, {\n      size: icon.props.size ? icon.props.size : 24,\n      color: icon.props.color ? icon.props.color : 'rgba(0, 0, 0, 0.54)',\n    });\n  }\n\n  _renderActionitem() {\n    const { actionItem } = this.props;\n\n    return (\n      <Fragment>\n        <View style={{ flex: 1 }} />\n        {actionItem}\n      </Fragment>\n    );\n  }\n\n  _renderLeadingActionItem() {\n    const { leadingActionItem } = this.props;\n    return leadingActionItem;\n  }\n\n  getBackgroundColor = () => {\n    const { backgroundColor, selected, disabled, rippleProps } = this.props;\n    const { stateBackgroundColor } = this.state;\n\n    let implementedBackgroundColor = backgroundColor\n      ? backgroundColor\n      : 'transparent';\n\n    implementedBackgroundColor = stateBackgroundColor\n      ? stateBackgroundColor\n      : implementedBackgroundColor;\n\n    const rippleColor =\n      rippleProps && rippleProps.rippleColor\n        ? color(rippleProps.rippleColor)\n            .alpha(0.12)\n            .rgb()\n            .string()\n        : 'rgba(0, 0, 0, 0.12)';\n\n    implementedBackgroundColor = selected\n      ? rippleColor\n      : implementedBackgroundColor;\n\n    return disabled ? 'transparent' : implementedBackgroundColor;\n  };\n\n  handleHover(toggle) {\n    const { rippleProps } = this.props;\n    let bgColor = this.getBackgroundColor();\n    let implementedColor;\n\n    if (bgColor == 'transparent') {\n      implementedColor = toggle ? 'rgba(0, 0, 0, 0.12)' : null;\n    } else {\n      if (color(bgColor).isDark()) {\n        implementedColor = toggle\n          ? color(bgColor)\n              .lighten(0.15)\n              .rgb()\n              .string()\n          : null;\n      } else {\n        implementedColor = toggle\n          ? color(bgColor)\n              .darken(0.15)\n              .rgb()\n              .string()\n          : null;\n      }\n    }\n\n    if (rippleProps && rippleProps.rippleColor) {\n      implementedColor = toggle\n        ? color(rippleProps.rippleColor)\n            .alpha(0.12)\n            .rgb()\n            .string()\n        : null;\n    }\n\n    this.setState({ stateBackgroundColor: implementedColor });\n  }\n\n  render() {\n    const {\n      style,\n      onPress,\n      disabled,\n      children,\n      media,\n      icon,\n      actionItem,\n      leadingActionItem,\n      rippleProps,\n      ...rest\n    } = this.props;\n    const { isPressed } = this.state;\n\n    let contentMargin = media ? 16 : 0;\n    if (icon || leadingActionItem) contentMargin = 32;\n\n    return (\n      <Hoverable\n        onHoverIn={() => this.handleHover(true)}\n        onHoverOut={() => this.handleHover(false)}>\n        <Ripple\n          onAnimationEnd={() => {\n            if (isPressed && onPress) {\n              onPress();\n              this.setState({ isPressed: false });\n            }\n          }}\n          rippleDuration={200}\n          disabled={disabled}\n          rippleColor={'rgba(0,0,0,.8)'}\n          onPress={() => this.setState({ isPressed: true })}\n          style={[\n            {\n              backgroundColor: this.getBackgroundColor(),\n              flexDirection: 'row',\n              alignItems: 'center',\n              padding: 16,\n              width: Platform.OS === 'web' ? 416 : '100%',\n              zIndex: 1,\n            },\n            style,\n          ]}\n          {...rippleProps}\n          {...rest}>\n          {leadingActionItem ? this._renderLeadingActionItem() : null}\n          {icon ? this._renderIcon() : null}\n          {media ? media : null}\n          <View\n            style={{\n              alignSelf: 'center',\n              marginLeft: contentMargin,\n              flexShrink: 1,\n            }}>\n            {children ? children : this._renderText()}\n          </View>\n          {actionItem ? this._renderActionitem() : null}\n        </Ripple>\n      </Hoverable>\n    );\n  }\n}\n\nexport default withTheme(ListItem);\n"
  },
  {
    "path": "src/Components/List/ListItem/ListItem.stories.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport {\n  List,\n  ListItem,\n  Icon,\n  Avatar,\n  Checkbox,\n  IconButton,\n  Caption,\n  Chip,\n} from '../../../';\nimport Header from '../../../storybook/components/Header';\nimport Container from '../../../storybook/components/Container';\nimport { storiesOf } from '../../../storybook/helpers/storiesOf';\nimport { State, Store } from '@sambego/storybook-state';\n\nconst store = new Store({\n  checkedOne: false,\n  checkedTwo: false,\n  checkedThree: false,\n  checkedFour: false,\n  checkedFive: false,\n  selected: 2,\n});\n\nexport default storiesOf('Components|List/ListItem', module)\n  .addParameters({ jest: ['ListItem'] })\n  .add('with text', () => (\n    <Container>\n      <Header title={'Text List'} />\n\n      <List style={{ width: 300 }}>\n        <ListItem text={'Attractions'} />\n        <ListItem text={'Dining'} />\n        <ListItem text={'Education'} />\n        <ListItem text={'Health'} />\n        <ListItem text={'Family'} />\n        <ListItem text={'Office'} />\n        <ListItem text={'Promotions'} />\n      </List>\n    </Container>\n  ))\n  .add('with icon', () => (\n    <Container>\n      <Header title={'Text and Icon List'} />\n\n      <List style={{ width: 300 }}>\n        <ListItem\n          text={'Attractions'}\n          icon={<Icon name={'local-movies'} size={24} />}\n        />\n        <ListItem\n          text={'Dining'}\n          icon={<Icon name={'local-dining'} size={24} />}\n        />\n        <ListItem text={'Education'} icon={<Icon name={'edit'} size={24} />} />\n        <ListItem text={'Health'} icon={<Icon name={'favorite'} size={24} />} />\n        <ListItem text={'Family'} icon={<Icon name={'group'} size={24} />} />\n        <ListItem\n          text={'Office'}\n          icon={<Icon name={'content-cut'} size={24} />}\n        />\n        <ListItem\n          text={'Promotions'}\n          icon={<Icon name={'loyalty'} size={24} />}\n        />\n      </List>\n    </Container>\n  ))\n  .add('with media', () => (\n    <Container>\n      <Header title={'Text and Media List'} />\n\n      <List style={{ width: 300 }}>\n        <ListItem\n          text={'Janet Perkins'}\n          media={\n            <Avatar\n              type=\"icon\"\n              content=\"person\"\n              contentColor={'#ececec'}\n              color={'#a3a3a3'}\n              size={40}\n            />\n          }\n        />\n        <ListItem\n          text={'Mary Perkins'}\n          media={\n            <Avatar\n              type=\"icon\"\n              content=\"person\"\n              contentColor={'#ececec'}\n              color={'#a3a3a3'}\n              size={40}\n            />\n          }\n        />\n        <ListItem\n          text={'Peter Carlsson'}\n          media={\n            <Avatar\n              type=\"icon\"\n              content=\"person\"\n              contentColor={'#ececec'}\n              color={'#a3a3a3'}\n              size={40}\n            />\n          }\n        />\n        <ListItem\n          text={'Trevor Hansen'}\n          media={\n            <Avatar\n              type=\"icon\"\n              content=\"person\"\n              contentColor={'#ececec'}\n              color={'#a3a3a3'}\n              size={40}\n            />\n          }\n        />\n      </List>\n    </Container>\n  ))\n  .add('with actionItem', () => (\n    <Container>\n      <Header title={'Text and Action Item List'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <List style={{ width: 300 }}>\n            <ListItem\n              text={'Janet Perkins'}\n              media={\n                <Avatar\n                  type=\"icon\"\n                  content=\"person\"\n                  contentColor={'#ececec'}\n                  color={'#a3a3a3'}\n                  size={40}\n                />\n              }\n              onPress={() => store.set({ checkedOne: !state.checkedOne })}\n              actionItem={\n                <Checkbox\n                  checkboxColor={'rgba(0, 0, 0, 0.54)'}\n                  checked={state.checkedOne}\n                  onPress={() => store.set({ checkedOne: !state.checkedOne })}\n                />\n              }\n            />\n            <ListItem\n              text={'Mary Perkins'}\n              media={\n                <Avatar\n                  type=\"icon\"\n                  content=\"person\"\n                  contentColor={'#ececec'}\n                  color={'#a3a3a3'}\n                  size={40}\n                />\n              }\n              onPress={() => store.set({ checkedTwo: !state.checkedTwo })}\n              actionItem={\n                <Checkbox\n                  checkboxColor={'rgba(0, 0, 0, 0.54)'}\n                  checked={state.checkedTwo}\n                  onPress={() => store.set({ checkedTwo: !state.checkedTwo })}\n                />\n              }\n            />\n            <ListItem\n              text={'Peter Carlsson'}\n              media={\n                <Avatar\n                  type=\"icon\"\n                  content=\"person\"\n                  contentColor={'#ececec'}\n                  color={'#a3a3a3'}\n                  size={40}\n                />\n              }\n              onPress={() => store.set({ checkedThree: !state.checkedThree })}\n              actionItem={\n                <Checkbox\n                  checkboxColor={'rgba(0, 0, 0, 0.54)'}\n                  checked={state.checkedThree}\n                  onPress={() =>\n                    store.set({ checkedThree: !state.checkedThree })\n                  }\n                />\n              }\n            />\n            <ListItem\n              text={'Trevor Hansen'}\n              media={\n                <Avatar\n                  type=\"icon\"\n                  content=\"person\"\n                  contentColor={'#ececec'}\n                  color={'#a3a3a3'}\n                  size={40}\n                />\n              }\n              onPress={() => store.set({ checkedFour: !state.checkedFour })}\n              actionItem={\n                <Checkbox\n                  checkboxColor={'rgba(0, 0, 0, 0.54)'}\n                  checked={state.checkedFour}\n                  onPress={() => store.set({ checkedFour: !state.checkedFour })}\n                />\n              }\n            />\n          </List>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('with leadingAction', () => (\n    <Container>\n      <Header title={'Text and Leading Action List'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <List style={{ width: 300 }}>\n            <ListItem\n              text={'Janet Perkins'}\n              onPress={() => store.set({ checkedOne: !state.checkedOne })}\n              actionItem={\n                <IconButton name=\"comment\" size={24} color=\"#6e6e6e\" />\n              }\n              leadingActionItem={\n                <Checkbox\n                  checkboxColor={'rgba(0, 0, 0, 0.54)'}\n                  checked={state.checkedOne}\n                  onPress={() => store.set({ checkedOne: !state.checkedOne })}\n                />\n              }\n            />\n            <ListItem\n              text={'Mary Perkins'}\n              onPress={() => store.set({ checkedTwo: !state.checkedTwo })}\n              actionItem={\n                <IconButton name=\"comment\" size={24} color=\"#6e6e6e\" />\n              }\n              leadingActionItem={\n                <Checkbox\n                  checkboxColor={'rgba(0, 0, 0, 0.54)'}\n                  checked={state.checkedTwo}\n                  onPress={() => store.set({ checkedTwo: !state.checkedTwo })}\n                />\n              }\n            />\n            <ListItem\n              text={'Peter Carlsson'}\n              onPress={() => store.set({ checkedThree: !state.checkedThree })}\n              actionItem={\n                <IconButton name=\"comment\" size={24} color=\"#6e6e6e\" />\n              }\n              leadingActionItem={\n                <Checkbox\n                  checkboxColor={'rgba(0, 0, 0, 0.54)'}\n                  checked={state.checkedThree}\n                  onPress={() =>\n                    store.set({ checkedThree: !state.checkedThree })\n                  }\n                />\n              }\n            />\n            <ListItem\n              text={'Trevor Hansen'}\n              onPress={() => store.set({ checkedFour: !state.checkedFour })}\n              actionItem={\n                <IconButton name=\"comment\" size={24} color=\"#6e6e6e\" />\n              }\n              leadingActionItem={\n                <Checkbox\n                  checkboxColor={'rgba(0, 0, 0, 0.54)'}\n                  checked={state.checkedFour}\n                  onPress={() => store.set({ checkedFour: !state.checkedFour })}\n                />\n              }\n            />\n          </List>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('with secondary text', () => (\n    <Container>\n      <Header title={'Text and secondary text List'} />\n\n      <List style={{ width: 300 }}>\n        <ListItem\n          text={'Photos'}\n          secondaryText={'Jan 9, 2018'}\n          media={\n            <Avatar\n              type=\"icon\"\n              content=\"folder\"\n              contentColor={'#ececec'}\n              color={'#a3a3a3'}\n              size={40}\n            />\n          }\n          actionItem={<IconButton name=\"error\" size={24} color=\"#6e6e6e\" />}\n        />\n        <ListItem\n          text={'Recipes'}\n          secondaryText={'Jan 17, 2018'}\n          media={\n            <Avatar\n              type=\"icon\"\n              content=\"folder\"\n              contentColor={'#ececec'}\n              color={'#a3a3a3'}\n              size={40}\n            />\n          }\n          actionItem={<IconButton name=\"error\" size={24} color=\"#6e6e6e\" />}\n        />\n        <ListItem\n          text={'Work'}\n          secondaryText={'Jan 28, 2018'}\n          media={\n            <Avatar\n              type=\"icon\"\n              content=\"folder\"\n              contentColor={'#ececec'}\n              color={'#a3a3a3'}\n              size={40}\n            />\n          }\n          actionItem={<IconButton name=\"error\" size={24} color=\"#6e6e6e\" />}\n        />\n        <ListItem\n          text={'Vacation'}\n          secondaryText={'Jan, 31, 2018'}\n          media={\n            <Avatar\n              type=\"icon\"\n              content=\"folder\"\n              contentColor={'#ececec'}\n              color={'#a3a3a3'}\n              size={40}\n            />\n          }\n          actionItem={<IconButton name=\"error\" size={24} color=\"#6e6e6e\" />}\n        />\n      </List>\n    </Container>\n  ))\n  .add('selected', () => (\n    <Container>\n      <Header title={'Selected Item'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <List style={{ width: 300 }}>\n            <ListItem\n              text={'Attractions'}\n              icon={<Icon name={'local-movies'} size={24} />}\n              onPress={() => store.set({ selected: 1 })}\n              selected={state.selected == 1}\n            />\n            <ListItem\n              text={'Dining'}\n              icon={<Icon name={'local-dining'} size={24} />}\n              onPress={() => store.set({ selected: 2 })}\n              selected={state.selected == 2}\n            />\n            <ListItem\n              text={'Education'}\n              icon={<Icon name={'edit'} size={24} />}\n              onPress={() => store.set({ selected: 3 })}\n              selected={state.selected == 3}\n            />\n            <ListItem\n              text={'Health'}\n              icon={<Icon name={'favorite'} size={24} />}\n              onPress={() => store.set({ selected: 4 })}\n              selected={state.selected == 4}\n            />\n            <ListItem\n              text={'Family'}\n              icon={<Icon name={'group'} size={24} />}\n              onPress={() => store.set({ selected: 5 })}\n              selected={state.selected == 5}\n            />\n          </List>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('disabled', () => (\n    <Container>\n      <Header title={'Text List'} />\n\n      <List style={{ width: 300 }}>\n        <ListItem text={'Attractions'} />\n        <ListItem text={'Dining'} />\n        <ListItem text={'Education'} disabled />\n        <ListItem text={'Health'} />\n        <ListItem text={'Family'} disabled />\n        <ListItem text={'Office'} disabled />\n        <ListItem text={'Promotions'} />\n      </List>\n    </Container>\n  ))\n  .add('custom secondary text', () => (\n    <Container>\n      <Header title={'Custom secondary text'} />\n\n      <List style={{ width: 300 }}>\n        <ListItem\n          text={'New invoice'}\n          secondaryText={\n            <View>\n              <Caption\n                style={{\n                  fontSize: 14,\n                  lineHeight: 14,\n                  marginTop: 4,\n                  color: 'rgba(0,0,0,0.57)',\n                }}>\n                Example\n              </Caption>\n              <View style={{ paddingTop: 4 }}>\n                <Chip\n                  text=\"Invoice.pdf\"\n                  leftIcon={<Icon name=\"picture-as-pdf\" />}\n                />\n              </View>\n            </View>\n          }\n          media={\n            <Avatar\n              type=\"icon\"\n              content=\"email\"\n              contentColor={'#ececec'}\n              color={'#a3a3a3'}\n              size={40}\n            />\n          }\n        />\n      </List>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/List/ListItem/ListItem.styles.js",
    "content": "import { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  listItemText: {\n    fontSize: 16,\n    lineHeight: 24,\n    letterSpacing: 0.44,\n  },\n  listItemSecondaryText: {\n    fontSize: 14,\n    lineHeight: 14,\n    marginTop: 4,\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/List/ListItem/ListItem.test.js",
    "content": "import React from 'react';\nimport { ListItem } from '../../../';\n\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\n\ntest('ListExpanded Renders', () => {\n  const tree = renderer.render(<ListItem />);\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/List/ListItem/__snapshots__/ListItem.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`ListExpanded Renders 1`] = `\n<Context.Consumer>\n  [Function]\n</Context.Consumer>\n`;\n"
  },
  {
    "path": "src/Components/List/ListItem/index.js",
    "content": "export { default } from './ListItem';\n"
  },
  {
    "path": "src/Components/List/ListSection/ListSection.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { View, Text, Platform } from 'react-native';\nimport withTheme from '../../../Theme/withTheme';\n\nimport Divider from '../../Divider/Divider.js';\nimport styles from './ListSection.styles';\n\nclass ListSection extends Component {\n  static propTypes = {\n    children: PropTypes.node,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    label: PropTypes.string,\n    labelStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    topDivider: PropTypes.bool,\n    bottomDivider: PropTypes.bool,\n    inset: PropTypes.bool,\n    contentStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    theme: PropTypes.object,\n  };\n\n  render() {\n    const {\n      children,\n      label,\n      labelStyle,\n      topDivider,\n      bottomDivider,\n      inset,\n      style,\n      contentStyle,\n      theme,\n    } = this.props;\n\n    return (\n      <View style={([styles.container, { paddingTop: label ? 8 : 0 }], style)}>\n        {topDivider ? <Divider /> : null}\n        {label ? <Text style={[styles.label, labelStyle]}>{label}</Text> : null}\n        <View style={[theme.text, styles.content, contentStyle]}>\n          {children}\n        </View>\n        {bottomDivider ? (\n          <Divider\n            style={{\n              width:\n                inset && Platform.OS == 'web' ? 'calc(100% - 72px)' : '100%',\n              marginLeft: inset ? 72 : 0,\n              marginTop: 0,\n              marginBottom: 0,\n            }}\n          />\n        ) : null}\n      </View>\n    );\n  }\n}\n\nexport default withTheme(ListSection);\n"
  },
  {
    "path": "src/Components/List/ListSection/ListSection.stories.js",
    "content": "import React from 'react';\n\nimport { List, ListItem, Icon, ListSection } from '../../../';\nimport Header from '../../../storybook/components/Header';\nimport Container from '../../../storybook/components/Container';\nimport { storiesOf } from '../../../storybook/helpers/storiesOf';\n\nexport default storiesOf('Components|List/ListSection', module)\n  .addParameters({ jest: ['ListSection'] })\n  .add('with label', () => (\n    <Container>\n      <Header title={'Label List'} />\n\n      <List style={{ width: 300 }}>\n        <ListSection label={'Entertainment'}>\n          <ListItem\n            text={'Attractions'}\n            icon={<Icon name={'local-movies'} size={24} />}\n          />\n          <ListItem\n            text={'Dining'}\n            icon={<Icon name={'local-dining'} size={24} />}\n          />\n        </ListSection>\n        <ListSection label={'Home'}>\n          <ListItem\n            text={'Health'}\n            icon={<Icon name={'favorite'} size={24} />}\n          />\n          <ListItem text={'Family'} icon={<Icon name={'group'} size={24} />} />\n        </ListSection>\n        <ListSection label={'Job'}>\n          <ListItem\n            text={'Education'}\n            icon={<Icon name={'edit'} size={24} />}\n          />\n          <ListItem\n            text={'Office'}\n            icon={<Icon name={'content-cut'} size={24} />}\n          />\n          <ListItem\n            text={'Promotions'}\n            icon={<Icon name={'loyalty'} size={24} />}\n          />\n        </ListSection>\n      </List>\n    </Container>\n  ))\n  .add('with divider', () => (\n    <Container>\n      <Header title={'Label List'} />\n\n      <List style={{ width: 300 }}>\n        <ListSection bottomDivider>\n          <ListItem\n            text={'Attractions'}\n            icon={<Icon name={'local-movies'} size={24} />}\n          />\n          <ListItem\n            text={'Dining'}\n            icon={<Icon name={'local-dining'} size={24} />}\n          />\n        </ListSection>\n        <ListSection bottomDivider>\n          <ListItem\n            text={'Health'}\n            icon={<Icon name={'favorite'} size={24} />}\n          />\n          <ListItem text={'Family'} icon={<Icon name={'group'} size={24} />} />\n        </ListSection>\n        <ListSection>\n          <ListItem\n            text={'Education'}\n            icon={<Icon name={'edit'} size={24} />}\n          />\n          <ListItem\n            text={'Office'}\n            icon={<Icon name={'content-cut'} size={24} />}\n          />\n          <ListItem\n            text={'Promotions'}\n            icon={<Icon name={'loyalty'} size={24} />}\n          />\n        </ListSection>\n      </List>\n    </Container>\n  ))\n  .add('with inset divider', () => (\n    <Container>\n      <Header title={'Label List'} />\n\n      <List style={{ width: 300 }}>\n        <ListSection inset bottomDivider>\n          <ListItem\n            text={'Attractions'}\n            icon={<Icon name={'local-movies'} size={24} />}\n          />\n          <ListItem\n            text={'Dining'}\n            icon={<Icon name={'local-dining'} size={24} />}\n          />\n        </ListSection>\n        <ListSection inset bottomDivider>\n          <ListItem\n            text={'Health'}\n            icon={<Icon name={'favorite'} size={24} />}\n          />\n          <ListItem text={'Family'} icon={<Icon name={'group'} size={24} />} />\n        </ListSection>\n        <ListSection inset>\n          <ListItem\n            text={'Education'}\n            icon={<Icon name={'edit'} size={24} />}\n          />\n          <ListItem\n            text={'Office'}\n            icon={<Icon name={'content-cut'} size={24} />}\n          />\n          <ListItem\n            text={'Promotions'}\n            icon={<Icon name={'loyalty'} size={24} />}\n          />\n        </ListSection>\n      </List>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/List/ListSection/ListSection.styles.js",
    "content": "import { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  content: {\n    paddingTop: 8,\n    paddingBottom: 8,\n  },\n  label: {\n    marginBottom: 8,\n    alignSelf: 'flex-start',\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/List/ListSection/ListSection.test.js",
    "content": "import React from 'react';\nimport { ListSection } from '../../../';\n\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\n\ntest('ListExpanded Renders', () => {\n  const tree = renderer.render(<ListSection />);\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/List/ListSection/__snapshots__/ListSection.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`ListExpanded Renders 1`] = `\n<Context.Consumer>\n  [Function]\n</Context.Consumer>\n`;\n"
  },
  {
    "path": "src/Components/List/ListSection/index.js",
    "content": "export { default } from './ListSection';\n"
  },
  {
    "path": "src/Components/List/__snapshots__/List.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`List Renders 1`] = `\n<View\n  style={\n    Object {\n      \"backgroundColor\": \"#fff\",\n      \"borderRadius\": 2,\n      \"shadowColor\": \"#000\",\n      \"shadowOffset\": Object {\n        \"height\": 0,\n        \"width\": 0,\n      },\n      \"shadowOpacity\": 0,\n      \"shadowRadius\": 1,\n    }\n  }\n  useNativeDriver={true}\n/>\n`;\n"
  },
  {
    "path": "src/Components/List/index.js",
    "content": "export { default } from './List';\nexport { default as ListSection } from './ListSection';\nexport { default as ListExpand } from './ListExpand';\nexport { default as ListItem } from './ListItem';\n"
  },
  {
    "path": "src/Components/Menu/Menu.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Animated, View, Easing, Platform, ScrollView } from 'react-native';\nimport withTheme from '../../Theme/withTheme';\nimport styles from './Menu.styles';\nimport ModelMenu from './ModalMenu';\n\nclass Menu extends Component {\n  static propTypes = {\n    button: PropTypes.node,\n    children: PropTypes.node,\n    onHidden: PropTypes.func,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    visible: PropTypes.bool,\n    menuStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    sameWidth: PropTypes.bool,\n    onBackdropPress: PropTypes.func,\n    modalMenuStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    contentContainerStyle: PropTypes.oneOfType([\n      PropTypes.object,\n      PropTypes.array,\n    ]),\n    noBackDrop: PropTypes.bool,\n    tooltip: PropTypes.bool,\n    tooltipPosition: PropTypes.string,\n    testID: PropTypes.string,\n    fullWidth: PropTypes.bool,\n  };\n\n  state = {\n    menuHeight: new Animated.Value(0),\n    menuWidth: new Animated.Value(0),\n    opacity: new Animated.Value(0),\n    modalMenuWidth: 0,\n    easing: Easing.bezier(0.4, 0, 0.2, 1),\n    animationDuration: 300,\n    expanded: false,\n  };\n\n  componentDidMount() {\n    const { visible } = this.props;\n\n    if (visible) {\n      this.toggle();\n    }\n  }\n\n  componentDidUpdate(prevProps) {\n    const { visible } = this.props;\n\n    if (visible !== prevProps.visible) {\n      this.toggle();\n    }\n  }\n\n  onModalMenuLayout = e => {\n    const { width } = e.nativeEvent.layout;\n    this.setState({\n      modalMenuWidth: width,\n    });\n  };\n\n  onButtonLayout = e => {\n    const { width, height } = e.nativeEvent.layout;\n\n    let locationX, locationY;\n\n    if (Platform.OS === 'web') {\n      locationX = e.nativeEvent.target.getBoundingClientRect().x;\n      locationY = e.nativeEvent.target.getBoundingClientRect().y;\n      this.setState({\n        buttonWidth: width,\n        buttonHeight: height,\n        buttonPositionX: locationX,\n        buttonPositionY: locationY,\n      });\n    } else {\n      this.marker.measure((x, y, width, height, pageX, pageY) => {\n        locationX = pageX;\n        locationY = pageY;\n        this.setState({\n          buttonWidth: width,\n          buttonHeight: height,\n          buttonPositionX: locationX,\n          buttonPositionY: locationY,\n        });\n      });\n    }\n  };\n\n  onMenuLayout = e => {\n    const { width, height } = e.nativeEvent.layout;\n\n    this.setState({\n      initialWidth: width,\n      initialHeight: height,\n    });\n  };\n\n  toggle() {\n    const {\n      initialHeight,\n      initialWidth,\n      easing,\n      animationDuration,\n      buttonWidth,\n    } = this.state;\n\n    if (!initialHeight || !initialWidth) {\n      setTimeout(() => this.toggle(), 100);\n      return;\n    }\n\n    const { sameWidth } = this.props;\n\n    const widthType = sameWidth ? buttonWidth : initialWidth;\n\n    let opacity = 1;\n    let height = initialHeight + 24;\n    let width = widthType + 24;\n\n    if (!this.props.visible) {\n      opacity = 0;\n      height = 0;\n      width = 0;\n    }\n\n    Animated.parallel([\n      Animated.timing(this.state.menuHeight, {\n        toValue: height,\n        duration: animationDuration,\n        easing,\n      }),\n      Animated.timing(this.state.menuWidth, {\n        toValue: width,\n        duration: animationDuration,\n        easing,\n      }),\n      Animated.timing(this.state.opacity, {\n        toValue: opacity,\n        duration: animationDuration,\n        easing,\n      }),\n    ]).start();\n  }\n\n  render() {\n    const {\n      menuHeight,\n      menuWidth,\n      opacity,\n      buttonWidth,\n      buttonPositionY,\n      buttonPositionX,\n      modalMenuWidth,\n      initialWidth,\n      initialHeight,\n    } = this.state;\n    const {\n      button,\n      children,\n      menuStyle,\n      modalMenuStyle,\n      sameWidth,\n      visible,\n      onBackdropPress,\n      contentContainerStyle,\n      tooltip,\n      tooltipPosition,\n      noBackDrop,\n      testID,\n      fullWidth,\n    } = this.props;\n\n    const menuContainerStyle = {\n      height: menuHeight,\n      width: menuWidth,\n      opacity: opacity,\n      top: buttonPositionY ? buttonPositionY - 14 : 0,\n    };\n\n    if (modalMenuWidth > 0) {\n      if (buttonPositionX > modalMenuWidth / 2) {\n        menuContainerStyle.right =\n          modalMenuWidth - buttonPositionX - buttonWidth;\n      } else {\n        menuContainerStyle.left = buttonPositionX - 10;\n      }\n    }\n\n    if (tooltip) {\n      menuContainerStyle.top = buttonPositionY - initialHeight - 12;\n      menuContainerStyle.left =\n        buttonPositionX - 8 + buttonWidth / 2 - initialWidth / 2;\n\n      if (tooltipPosition == 'bottom') {\n        menuContainerStyle.top =\n          buttonPositionY + initialHeight + (Platform.OS == 'web' ? 4 : -4);\n      } else if (tooltipPosition == 'right') {\n        menuContainerStyle.top =\n          buttonPositionY - (Platform.OS == 'web' ? 4 : 8);\n        menuContainerStyle.left = buttonPositionX - 8 + buttonWidth;\n      } else if (tooltipPosition == 'left') {\n        menuContainerStyle.top =\n          buttonPositionY - (Platform.OS == 'web' ? 4 : 8);\n        menuContainerStyle.left = buttonPositionX - 12 - initialWidth;\n      }\n    }\n\n    if (\n      Number.isNaN(menuContainerStyle.top) ||\n      Number.isNaN(menuContainerStyle.left)\n    ) {\n      menuContainerStyle.top = 0;\n      menuContainerStyle.left = 0;\n    }\n\n    return (\n      <View testID={testID}>\n        <View\n          onLayout={this.onButtonLayout}\n          ref={ref => {\n            this.marker = ref;\n          }}\n          style={{\n            alignSelf: 'flex-start',\n            width: fullWidth ? '100%' : 'auto',\n          }}>\n          {button}\n        </View>\n        <ModelMenu\n          onLayout={this.onModalMenuLayout}\n          animationType={'none'}\n          visible={visible}\n          onBackdropPress={onBackdropPress}\n          noBackDrop={noBackDrop}\n          transparent>\n          <Animated.View\n            style={[styles.menuContainer, menuContainerStyle, modalMenuStyle]}>\n            <View\n              style={[\n                styles.menu,\n                { width: sameWidth ? buttonWidth : 'auto' },\n                menuStyle,\n              ]}\n              onLayout={this.onMenuLayout}>\n              <ScrollView\n                contentContainerStyle={[\n                  { paddingVertical: 8 },\n                  contentContainerStyle,\n                ]}>\n                {children}\n              </ScrollView>\n            </View>\n          </Animated.View>\n        </ModelMenu>\n      </View>\n    );\n  }\n}\n\nexport default withTheme(Menu);\n"
  },
  {
    "path": "src/Components/Menu/Menu.stories.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\n\nimport { Menu, MenuItem, Button, IconButton, Heading } from '../../';\nimport { State, Store } from '@sambego/storybook-state';\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\n\nconst store = new Store({\n  visibleOne: false,\n  visibleTwo: false,\n  visibleThree: false,\n  visibleFour: false,\n  visibleFive: false,\n});\n\nexport default storiesOf('Components|Menu', module)\n  .addParameters({ jest: ['Menu'] })\n  .add('Simple', () => (\n    <Container>\n      <Header title={'Menu'} />\n      <Heading style={{ marginBottom: 10 }}>On the left</Heading>\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={{ marginBottom: 40 }}>\n            <Menu\n              menuStyle={{ width: 324 }}\n              visible={state.visibleOne}\n              onBackdropPress={() => {\n                store.set({ visibleOne: false });\n              }}\n              button={\n                <Button\n                  text={'Show menu'}\n                  onPress={() => {\n                    store.set({ visibleOne: !state.visibleOne });\n                  }}\n                  type=\"contained\"\n                />\n              }>\n              <MenuItem\n                text={'Menu Item 1'}\n                onPress={() => store.set({ visibleOne: false })}\n              />\n              <MenuItem\n                text={'Menu Item 2'}\n                onPress={() => store.set({ visibleOne: false })}\n              />\n              <MenuItem\n                text={'Menu Item 3'}\n                disabled\n                onPress={() => store.set({ visibleOne: false })}\n              />\n              <MenuItem\n                text={'Menu Item 4'}\n                onPress={() => store.set({ visibleOne: false })}\n              />\n            </Menu>\n          </View>\n        )}\n      </State>\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <Menu\n              menuStyle={{ width: 324 }}\n              visible={state.visibleTwo}\n              onBackdropPress={() => {\n                store.set({ visibleTwo: false });\n              }}\n              button={\n                <IconButton\n                  name=\"more-vert\"\n                  onPress={() => {\n                    store.set({ visibleTwo: !state.visibleTwo });\n                  }}\n                  size={24}\n                />\n              }>\n              <MenuItem\n                text={'Menu Item 1'}\n                onPress={() => store.set({ visibleTwo: false })}\n              />\n              <MenuItem\n                text={'Menu Item 2'}\n                onPress={() => store.set({ visibleTwo: false })}\n              />\n              <MenuItem\n                text={'Menu Item 3'}\n                disabled\n                onPress={() => store.set({ visibleTwo: false })}\n              />\n              <MenuItem\n                text={'Menu Item 4'}\n                onPress={() => store.set({ visibleTwo: false })}\n              />\n            </Menu>\n          </View>\n        )}\n      </State>\n      <Heading\n        style={{ marginBottom: 10, marginTop: 50, alignSelf: 'flex-end' }}>\n        On the Right\n      </Heading>\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={{ alignItems: 'flex-end', marginBottom: 40 }}>\n            <Menu\n              visible={state.visibleThree}\n              onBackdropPress={() => {\n                store.set({ visibleThree: false });\n              }}\n              sameWidth\n              button={\n                <Button\n                  text={'Show menu'}\n                  onPress={() => {\n                    store.set({ visibleThree: !state.visibleThree });\n                  }}\n                  type=\"contained\"\n                />\n              }>\n              <MenuItem\n                text={'Menu Item 1'}\n                style={{ paddingHorizontal: '12%' }}\n                onPress={() => store.set({ visibleThree: false })}\n              />\n              <MenuItem\n                text={'Menu Item 2'}\n                style={{ paddingHorizontal: '12%' }}\n                onPress={() => store.set({ visibleThree: false })}\n              />\n              <MenuItem\n                text={'Menu Item 3'}\n                style={{ paddingHorizontal: '12%' }}\n                disabled\n                onPress={() => store.set({ visibleThree: false })}\n              />\n              <MenuItem\n                text={'Menu Item 4'}\n                style={{ paddingHorizontal: '12%' }}\n                onPress={() => store.set({ visibleThree: false })}\n              />\n            </Menu>\n          </View>\n        )}\n      </State>\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={{ alignItems: 'flex-end' }}>\n            <Menu\n              visible={state.visibleFour}\n              onBackdropPress={() => {\n                store.set({ visibleFour: false });\n              }}\n              button={\n                <IconButton\n                  name=\"more-vert\"\n                  onPress={() => {\n                    store.set({ visibleFour: !state.visibleFour });\n                  }}\n                  size={24}\n                />\n              }>\n              <MenuItem\n                text={'Menu Item 1'}\n                onPress={() => store.set({ visibleFour: false })}\n              />\n              <MenuItem\n                text={'Menu Item 2'}\n                onPress={() => store.set({ visibleFour: false })}\n              />\n              <MenuItem\n                text={'Menu Item 3'}\n                disabled\n                onPress={() => store.set({ visibleFour: false })}\n              />\n              <MenuItem\n                text={'Menu Item 4'}\n                onPress={() => store.set({ visibleFour: false })}\n              />\n            </Menu>\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('Scrolling', () => (\n    <Container>\n      <Header title={'Menu'} />\n\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={{ marginBottom: 40 }}>\n            <Menu\n              menuStyle={{ width: 324, maxHeight: 200 }}\n              visible={state.visibleFive}\n              onBackdropPress={() => {\n                store.set({ visibleFive: false });\n              }}\n              button={\n                <Button\n                  text={'Show menu'}\n                  onPress={() => {\n                    store.set({ visibleFive: !state.visibleFive });\n                  }}\n                  type=\"contained\"\n                />\n              }>\n              <MenuItem\n                text={'Menu Item 1'}\n                onPress={() => store.set({ visibleFive: false })}\n              />\n              <MenuItem\n                text={'Menu Item 2'}\n                onPress={() => store.set({ visibleFive: false })}\n              />\n              <MenuItem\n                text={'Menu Item 3'}\n                disabled\n                onPress={() => store.set({ visibleFive: false })}\n              />\n              <MenuItem\n                text={'Menu Item 4'}\n                onPress={() => store.set({ visibleFive: false })}\n              />\n              <MenuItem\n                text={'Menu Item 5'}\n                onPress={() => store.set({ visibleFive: false })}\n              />\n              <MenuItem\n                text={'Menu Item 6'}\n                onPress={() => store.set({ visibleFive: false })}\n              />\n              <MenuItem\n                text={'Menu Item 7'}\n                disabled\n                onPress={() => store.set({ visibleFive: false })}\n              />\n              <MenuItem\n                text={'Menu Item 8'}\n                onPress={() => store.set({ visibleFive: false })}\n              />\n            </Menu>\n          </View>\n        )}\n      </State>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/Menu/Menu.styles.js",
    "content": "import { StyleSheet } from 'react-native';\nimport shadow from '../../Utils/Shadow/shadow';\n\nconst styles = StyleSheet.create({\n  menuContainer: {\n    top: -10, // Padding doesn't work because shows this component when hidden\n    overflow: 'hidden',\n    position: 'absolute',\n    zIndex: 200,\n  },\n  menu: {\n    borderRadius: 6,\n    position: 'absolute',\n    left: 10,\n    top: 10,\n    backgroundColor: 'white',\n    minWidth: 112,\n    zIndex: 200,\n\n    ...shadow(8),\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Menu/Menu.test.js",
    "content": "import React from 'react';\nimport { Menu } from '../../../src';\n\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\n\ntest('Menu Renders', () => {\n  const tree = renderer.render(<Menu />);\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Menu/MenuItem/MenuItem.js",
    "content": "import React, { Component, Fragment } from 'react';\n\nimport PropTypes from 'prop-types';\nimport { Text, Platform, View } from 'react-native';\nimport withTheme from '../../../Theme/withTheme';\nimport styles from './MenuItem.styles';\nimport Ripple from '../../Ripple/Ripple.js';\nimport Hoverable from '../../../Utils/Hoverable/Hoverable.js';\n\nclass MenuItem extends Component {\n  constructor(props) {\n    super(props);\n  }\n  static propTypes = {\n    children: PropTypes.node,\n    disabled: PropTypes.bool,\n    onPress: PropTypes.func,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    textStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    icon: PropTypes.node,\n    keyboardCommand: PropTypes.node,\n    text: PropTypes.string,\n  };\n  static defaultProps = {\n    disabled: false,\n    disabledTextColor: '#BDBDBD',\n    underlayColor: '#E0E0E0',\n  };\n  state = {\n    stateBackgroundColor: null,\n  };\n  handleHover(toggle) {\n    const { disabled } = this.props;\n    let implementedColor = toggle ? 'rgba(0,0,0,.12)' : null;\n    if (disabled) implementedColor = null;\n\n    this.setState({ stateBackgroundColor: implementedColor });\n  }\n\n  _renderIcon() {\n    const { icon } = this.props;\n    return React.cloneElement(icon, {\n      size: 24,\n      color: 'rgba(0, 0, 0, 0.54)',\n    });\n  }\n\n  _renderKeyboardCommand() {\n    const { keyboardCommand } = this.props;\n    return (\n      <Fragment>\n        <View style={{ flex: 1 }} />\n        {keyboardCommand}\n      </Fragment>\n    );\n  }\n\n  _renderText() {\n    const { disabled, textStyle, text, icon } = this.props;\n    return (\n      <Text\n        ellipsizeMode={Platform.OS === 'ios' ? 'clip' : 'tail'}\n        numberOfLines={1}\n        style={[\n          styles.title,\n          {\n            color: disabled ? 'rgba(0,0,0,.50)' : 'rgba(0,0,0,.87)',\n            marginLeft: icon ? 20 : 0,\n          },\n          textStyle,\n        ]}>\n        {text}\n      </Text>\n    );\n  }\n\n  render() {\n    const {\n      children,\n      disabled,\n      onPress,\n      style,\n      icon,\n      keyboardCommand,\n    } = this.props;\n    const { stateBackgroundColor } = this.state;\n\n    return (\n      <Hoverable\n        onHoverIn={() => this.handleHover(true)}\n        onHoverOut={() => this.handleHover(false)}>\n        <Ripple\n          disabled={disabled}\n          onPress={onPress}\n          style={[\n            styles.container,\n            { backgroundColor: stateBackgroundColor },\n            style,\n          ]}>\n          {icon ? this._renderIcon() : null}\n          {children ? children : this._renderText()}\n          {keyboardCommand ? this._renderKeyboardCommand() : null}\n        </Ripple>\n      </Hoverable>\n    );\n  }\n}\n\nexport default withTheme(MenuItem);\n"
  },
  {
    "path": "src/Components/Menu/MenuItem/MenuItem.stories.js",
    "content": "import React from 'react';\nimport { Text } from 'react-native';\n\nimport { MenuItem, Paper, Divider, Icon } from '../../..';\n\nimport Header from '../../../storybook/components/Header';\nimport Container from '../../../storybook/components/Container';\nimport { storiesOf } from '../../../storybook/helpers/storiesOf';\n\nexport default storiesOf('Components|Menu/MenuItem', module)\n  .addParameters({ jest: ['MenuItem'] })\n  .add('Simple', () => (\n    <Container>\n      <Header title={'Menu Item'} />\n\n      <Paper radius={6} style={{ width: 324 }}>\n        <MenuItem text=\"Menu Item 1\" />\n        <MenuItem text=\"Menu Item 2\" />\n        <Divider />\n        <MenuItem disabled text=\"Menu Item 3\" />\n        <MenuItem text=\"Menu Item 4\" />\n      </Paper>\n    </Container>\n  ))\n  .add('with icon', () => (\n    <Container>\n      <Header title={'Menu icons'} />\n\n      <Paper radius={6} style={{ width: 324 }}>\n        <MenuItem\n          text={'Preview'}\n          icon={<Icon name={'assignment-turned-in'} />}\n        />\n        <MenuItem text={'Share'} icon={<Icon name={'person-add'} />} />\n        <MenuItem text={'Get Link'} icon={<Icon name={'link'} />} />\n        <Divider />\n        <MenuItem text={'Preview'} icon={<Icon name={'content-copy'} />} />\n        <MenuItem text={'Download'} icon={<Icon name={'file-download'} />} />\n      </Paper>\n    </Container>\n  ))\n  .add('with keyboard', () => (\n    <Container>\n      <Header title={'Menu keyboard commands'} />\n\n      <Paper radius={6} style={{ width: 324 }}>\n        <MenuItem\n          text={'Cut'}\n          icon={<Icon name={'content-cut'} />}\n          keyboardCommand={\n            <Text style={{ fontSize: 12, color: '#6e6e6e' }}>&#8984;X</Text>\n          }\n        />\n\n        <MenuItem\n          text={'Copy'}\n          icon={<Icon name={'content-copy'} />}\n          keyboardCommand={\n            <Text style={{ fontSize: 12, color: '#6e6e6e' }}>&#8984;C</Text>\n          }\n        />\n\n        <MenuItem\n          text={'Paste'}\n          icon={<Icon name={'content-paste'} />}\n          keyboardCommand={\n            <Text style={{ fontSize: 12, color: '#6e6e6e' }}>&#8984;V</Text>\n          }\n        />\n      </Paper>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/Menu/MenuItem/MenuItem.styles.js",
    "content": "import { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  container: {\n    minHeight: 32,\n    width: 324,\n    minWidth: 124,\n    alignItems: 'center',\n    flexDirection: 'row',\n    paddingVertical: 12,\n    paddingHorizontal: 24,\n  },\n  title: {\n    fontSize: 16,\n    fontWeight: '400',\n    lineHeight: 24,\n    letterSpacing: 0.44,\n    color: '#000000',\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Menu/MenuItem/MenuItem.test.js",
    "content": "import React from 'react';\nimport { MenuItem } from '../../../';\n\nimport renderer from 'react-test-renderer';\n\ntest('MenuItem Renders', () => {\n  const tree = renderer.create(<MenuItem />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Menu/MenuItem/__snapshots__/MenuItem.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`MenuItem Renders 1`] = `\n<View\n  accessible={true}\n  onResponderGrant={[Function]}\n  onResponderMove={[Function]}\n  onResponderRelease={[Function]}\n  onResponderTerminate={[Function]}\n  onResponderTerminationRequest={[Function]}\n  onStartShouldSetResponder={[Function]}\n>\n  <View\n    accessible={true}\n    displayUntilPressOut={true}\n    onLayout={[Function]}\n    onMouseEnter={[Function]}\n    onMouseLeave={[Function]}\n    onResponderGrant={[Function]}\n    onResponderMove={[Function]}\n    onResponderRelease={[Function]}\n    onResponderTerminate={[Function]}\n    onResponderTerminationRequest={[Function]}\n    onRippleAnimation={[Function]}\n    onStartShouldSetResponder={[Function]}\n    rippleCentered={false}\n    rippleColor=\"rgba(0, 0, 0, .87)\"\n    rippleDuration={400}\n    rippleFades={true}\n    rippleOpacity={0.3}\n    rippleSequential={false}\n    rippleSize={0}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"backgroundColor\": null,\n        \"flexDirection\": \"row\",\n        \"minHeight\": 32,\n        \"minWidth\": 124,\n        \"paddingHorizontal\": 24,\n        \"paddingVertical\": 12,\n        \"width\": 324,\n      }\n    }\n    testID=\"mb-ripple\"\n    useNativeDriver={true}\n  >\n    <Text\n      ellipsizeMode=\"clip\"\n      numberOfLines={1}\n      style={\n        Array [\n          Object {\n            \"color\": \"#000000\",\n            \"fontSize\": 16,\n            \"fontWeight\": \"400\",\n            \"letterSpacing\": 0.44,\n            \"lineHeight\": 24,\n          },\n          Object {\n            \"color\": \"rgba(0,0,0,.87)\",\n            \"marginLeft\": 0,\n          },\n          undefined,\n        ]\n      }\n    />\n    <View\n      pointerEvents=\"none\"\n      style={\n        Array [\n          Object {\n            \"backgroundColor\": \"transparent\",\n            \"bottom\": 0,\n            \"left\": 0,\n            \"overflow\": \"hidden\",\n            \"position\": \"absolute\",\n            \"right\": 0,\n            \"top\": 0,\n            \"zIndex\": 10,\n          },\n          Object {\n            \"borderRadius\": 0,\n          },\n        ]\n      }\n    />\n  </View>\n</View>\n`;\n"
  },
  {
    "path": "src/Components/Menu/MenuItem/index.js",
    "content": "export { default } from './MenuItem';\n"
  },
  {
    "path": "src/Components/Menu/ModalMenu/ModalMenu.native.styles.js",
    "content": ""
  },
  {
    "path": "src/Components/Menu/ModalMenu/ModalMenu.styles.js",
    "content": "import { StyleSheet } from 'react-native';\n\nexport default StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    position: 'static',\n    zIndex: 9999,\n  },\n  bgTransparent: {\n    backgroundColor: 'transparent',\n  },\n  bgNotTransparent: {\n    backgroundColor: '#ffffff',\n  },\n  hidden: {\n    display: 'none',\n  },\n  visible: {\n    display: 'flex',\n  },\n});\n"
  },
  {
    "path": "src/Components/Menu/ModalMenu/Portal.js",
    "content": "import { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\n\nexport default class Portal extends Component {\n  static propTypes = {\n    children: PropTypes.node.isRequired,\n    visible: PropTypes.bool,\n  };\n\n  state = {\n    el: null,\n    target: null,\n  };\n\n  componentDidMount() {\n    const container = document.createElement('div');\n    if (typeof document == `undefined`) {\n      return;\n    }\n\n    this.setState({ el: container, target: document.body }, () => {\n      this.state.target.appendChild(this.state.el);\n    });\n  }\n\n  componentWillUnmount() {\n    this.state.target && this.state.target.removeChild(this.state.el);\n  }\n\n  render() {\n    const { children } = this.props;\n\n    if (this.state.el) {\n      return ReactDOM.createPortal(children, this.state.el);\n    }\n\n    return null;\n  }\n}\n"
  },
  {
    "path": "src/Components/Menu/ModalMenu/ariaAppHider.js",
    "content": "/**\n * MIT License\n * Copyright (c) 2017 Ryan Florence\n * https://github.com/reactjs/react-modal/blob/master/LICENSE\n *\n * Take WAI-ARIA workaround for React Native Web\n *\n * Modified by Ray Andrew <raydreww@gmail.com>\n * For Modal React Native Web\n *\n * MIT License\n * Copyright (c) 2018 Ray Andrew\n * https://github.com/rayandrews/react-native-web-modal\n */\n\n// import warning from 'warning';\nimport { canUseDOM } from './utils';\n\nlet globalElement = null;\n\nexport function assertNodeList(nodeList, selector) {\n  if (!nodeList || !nodeList.length) {\n    throw new Error(\n      `modal-react-native-web: No elements were found for selector ${selector}.`,\n    );\n  }\n}\n\nexport function setElement(element) {\n  let useElement = element;\n  if (typeof useElement === 'string' && canUseDOM) {\n    const el = document.querySelectorAll(useElement);\n    assertNodeList(el, useElement);\n    useElement = 'length' in el ? el[0] : el;\n  }\n  globalElement = useElement || globalElement;\n  return globalElement;\n}\n\nexport function validateElement(appElement) {\n  if (!appElement && !globalElement) {\n    // warning(\n    //   false,\n    //   [\n    //     'modal-react-native-web: App element is not defined.',\n    //     'Please use `Modal.setAppElement(el)` or set `appElement={el}`.',\n    //     \"This is needed so screen readers don't see main content\",\n    //     'when modal is opened. It is not recommended, but you can opt-out',\n    //     'by setting `ariaHideApp={false}`.',\n    //   ].join(' '),\n    // );\n\n    return false;\n  }\n\n  return true;\n}\n\nexport function hide(appElement) {\n  if (validateElement(appElement)) {\n    (appElement || globalElement).setAttribute('aria-hidden', 'true');\n  }\n}\n\nexport function show(appElement) {\n  if (validateElement(appElement)) {\n    (appElement || globalElement).removeAttribute('aria-hidden');\n  }\n}\n\nexport function documentNotReadyOrSSRTesting() {\n  globalElement = null;\n}\n\nexport function resetForTesting() {\n  globalElement = null;\n}\n"
  },
  {
    "path": "src/Components/Menu/ModalMenu/index.js",
    "content": "import { Platform } from 'react-native';\n\nimport web from './index.web';\nimport native from './index.native';\n\nlet index = native;\nif (Platform.OS == 'web') {\n  index = web;\n}\n\nexport default index;\n"
  },
  {
    "path": "src/Components/Menu/ModalMenu/index.native.js",
    "content": "import React, { Component } from 'react';\nimport {\n  View,\n  TouchableWithoutFeedback,\n  Dimensions,\n  Animated,\n  Modal as NativeModal,\n} from 'react-native';\n\nimport PropTypes from 'prop-types';\nimport withTheme from '../../../Theme/withTheme';\nimport styles from './ModalMenu.native.styles';\n\nclass Modal extends Component {\n  static propTypes = {\n    buttons: PropTypes.element,\n    visible: PropTypes.bool,\n    onRequestClose: PropTypes.func,\n    onShow: PropTypes.func,\n    onBackdropPress: PropTypes.func,\n    containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    NativeModalProps: PropTypes.object,\n    children: PropTypes.node,\n  };\n\n  static defaultProps = {\n    visible: false,\n  };\n\n  render() {\n    const {\n      onRequestClose,\n      onShow,\n      onBackdropPress,\n      containerStyle,\n      children,\n      NativeModalProps,\n      visible,\n    } = this.props;\n\n    const deviceWidth = Dimensions.get('window').width;\n    const deviceHeight = Dimensions.get('window').height;\n\n    return (\n      <NativeModal\n        animationType={'none'}\n        transparent={true}\n        visible={visible}\n        onRequestClose={onRequestClose}\n        onShow={onShow}\n        {...NativeModalProps}>\n        <View style={[styles.container, containerStyle]}>\n          <TouchableWithoutFeedback onPress={onBackdropPress}>\n            <Animated.View\n              style={{\n                width: deviceWidth,\n                height: deviceHeight,\n                position: 'absolute',\n                padding: 24,\n              }}\n            />\n          </TouchableWithoutFeedback>\n\n          {children}\n        </View>\n      </NativeModal>\n    );\n  }\n}\n\nexport default withTheme(Modal);\n"
  },
  {
    "path": "src/Components/Menu/ModalMenu/index.web.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  Animated,\n  TouchableWithoutFeedback,\n  Dimensions,\n  Easing,\n  Platform,\n  View,\n} from 'react-native';\n\nimport ModalPortal from './Portal';\nimport * as ariaAppHider from './ariaAppHider';\nimport { SafeHTMLElement } from './utils';\nimport styles from './ModalMenu.styles';\n\nlet ariaHiddenInstances = 0;\n\nexport default class Modal extends Component {\n  static setAppElement(element) {\n    ariaAppHider.setElement(element);\n  }\n\n  static propTypes = {\n    animationType: PropTypes.oneOf(['none', 'slide', 'fade']),\n    transparent: PropTypes.bool,\n    visible: PropTypes.bool,\n    onRequestClose:\n      Platform.isTV || Platform.OS === 'android'\n        ? PropTypes.func.isRequired\n        : PropTypes.func,\n    onShow: PropTypes.func,\n    onDismiss: PropTypes.func,\n    children: PropTypes.node.isRequired,\n    ariaHideApp: PropTypes.bool,\n    appElement: PropTypes.instanceOf(SafeHTMLElement),\n    containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    onBackdropPress: PropTypes.func,\n    onLayout: PropTypes.func,\n    noBackDrop: PropTypes.bool,\n  };\n\n  static defaultProps = {\n    animationType: 'none',\n    transparent: false,\n    visible: true,\n    onShow: () => {},\n    onRequestClose: () => {},\n    onDismiss: () => {},\n    ariaHideApp: true,\n    appElement: null,\n  };\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      animationSlide: null,\n      animationFade: null,\n      styleFade: { display: props.visible ? 'flex' : 'none' },\n      opacityFade: new Animated.Value(0),\n      slideTranslation: new Animated.Value(0),\n    };\n  }\n\n  componentDidMount() {\n    if (this.props.visible) this.handleShow();\n  }\n\n  componentDidUpdate(prevProps) {\n    if (prevProps.visible && !this.props.visible) this.handleShow();\n    if (!prevProps.visible && this.props.visible) this.handleClose();\n  }\n\n  handleShow() {\n    const { animationType, onShow, ariaHideApp, appElement } = this.props;\n\n    if (ariaHideApp) {\n      ariaHiddenInstances += 1;\n      ariaAppHider.hide(appElement);\n    }\n\n    if (animationType === 'slide') {\n      this.animateSlideIn(onShow);\n    } else if (animationType === 'fade') {\n      this.animateFadeIn(onShow);\n    } else {\n      onShow();\n    }\n  }\n\n  handleClose() {\n    const { animationType, onDismiss, ariaHideApp, appElement } = this.props;\n\n    if (animationType === 'slide') {\n      this.animateSlideOut(onDismiss);\n    } else if (animationType === 'fade') {\n      this.animateFadeOut(onDismiss);\n    } else {\n      onDismiss();\n    }\n\n    if (ariaHideApp && ariaHiddenInstances > 0) {\n      ariaHiddenInstances -= 1;\n\n      if (ariaHiddenInstances === 0) {\n        ariaAppHider.show(appElement);\n      }\n    }\n  }\n\n  // Fade Animation Implementation\n  animateFadeIn = callback => {\n    if (this.state.animationFade) {\n      this.state.animationFade.stop();\n    }\n\n    const animationFade = Animated.timing(this.state.opacityFade, {\n      toValue: 1,\n      duration: 300,\n      useNativeDriver: true,\n    });\n\n    this.setState(\n      {\n        animationFade,\n      },\n      () => {\n        requestAnimationFrame(() => {\n          this.setState({ styleFade: { display: 'flex' } }, () =>\n            this.state.animationFade.start(callback),\n          );\n        });\n      },\n    );\n  };\n\n  animateFadeOut = callback => {\n    if (this.state.animationFade) {\n      this.state.animationFade.stop();\n    }\n\n    const animationFade = Animated.timing(this.state.opacityFade, {\n      toValue: 0,\n      duration: 300,\n      useNativeDriver: true,\n    });\n\n    this.setState(\n      {\n        animationFade,\n      },\n      () => {\n        requestAnimationFrame(() => {\n          this.state.animationFade.start(() => {\n            this.setState(\n              {\n                styleFade: { display: 'none' },\n              },\n              callback,\n            );\n          });\n        });\n      },\n    );\n  };\n  // End of Fade Animation Implementation\n\n  // Slide Animation Implementation\n  animateSlideIn = callback => {\n    if (this.state.animationSlide) {\n      this.state.animationSlide.stop();\n    }\n\n    const animationSlide = Animated.timing(this.state.slideTranslation, {\n      toValue: 1,\n      easing: Easing.out(Easing.poly(4)),\n      duration: 300,\n      useNativeDriver: true,\n    });\n\n    this.setState(\n      {\n        animationSlide,\n      },\n      () => {\n        requestAnimationFrame(() => {\n          this.setState({ styleFade: { display: 'flex' } }, () =>\n            this.state.animationSlide.start(callback),\n          );\n        });\n      },\n    );\n  };\n\n  animateSlideOut = callback => {\n    if (this.state.animationSlide) {\n      this.state.animationSlide.stop();\n    }\n\n    const animationSlide = Animated.timing(this.state.slideTranslation, {\n      toValue: 0,\n      easing: Easing.in(Easing.poly(4)),\n      duration: 300,\n      useNativeDriver: true,\n    });\n\n    this.setState(\n      {\n        animationSlide,\n      },\n      () => {\n        requestAnimationFrame(() => {\n          this.state.animationSlide.start(() => {\n            this.setState(\n              {\n                styleFade: { display: 'none' },\n              },\n              callback,\n            );\n          });\n        });\n      },\n    );\n  };\n  // End of Slide Animation Implementation\n\n  getAnimationStyle() {\n    const { visible, animationType } = this.props;\n    const { styleFade } = this.state;\n\n    if (animationType === 'slide') {\n      return [\n        {\n          transform: [\n            {\n              translateY: this.state.slideTranslation.interpolate({\n                inputRange: [0, 1],\n                outputRange: [Dimensions.get('window').height, 0],\n                extrapolate: 'clamp',\n              }),\n            },\n          ],\n        },\n        styleFade,\n      ];\n    }\n    if (animationType === 'fade') {\n      return [{ opacity: this.state.opacityFade }, styleFade];\n    }\n\n    return [styles[visible ? 'visible' : 'hidden']];\n  }\n\n  render() {\n    const {\n      containerStyle,\n      onBackdropPress,\n      children,\n      visible,\n      onLayout,\n      noBackDrop,\n    } = this.props;\n    return (\n      <ModalPortal visible={visible}>\n        <Animated.View\n          useNativeDriver={true}\n          onLayout={onLayout}\n          aria-modal=\"true\"\n          style={[\n            styles.container,\n            {\n              height: '100%',\n              width: '100%',\n              zIndex: visible ? 10 : -10,\n            },\n            containerStyle,\n          ]}>\n          {noBackDrop ? null : (\n            <TouchableWithoutFeedback onPress={onBackdropPress}>\n              <View\n                style={{\n                  height: visible ? '100%' : 0,\n                  width: visible ? '100%' : 0,\n                  position: 'fixed',\n                  top: 0,\n                  zIndex: visible ? 10 : -10,\n                }}\n              />\n            </TouchableWithoutFeedback>\n          )}\n\n          {children}\n        </Animated.View>\n      </ModalPortal>\n    );\n  }\n}\n"
  },
  {
    "path": "src/Components/Menu/ModalMenu/utils.js",
    "content": "/**\n * MIT License\n * Copyright (c) 2017 Ryan Florence\n * https://github.com/reactjs/react-modal/blob/master/LICENSE\n *\n * Take WAI-ARIA workaround for React Native Web\n *\n * Modified by Ray Andrew <raydreww@gmail.com>\n * For Modal React Native Web\n *\n * MIT License\n * Copyright (c) 2018 Ray Andrew\n * https://github.com/rayandrews/react-native-web-modal\n */\n\nimport PropTypes from 'prop-types';\n\nexport const canUseDOM = !!(\n  typeof window !== 'undefined' &&\n  window.document &&\n  window.document.createElement\n);\n\nexport const SafeHTMLElement = canUseDOM ? HTMLElement : PropTypes.any;\n"
  },
  {
    "path": "src/Components/Menu/__snapshots__/Menu.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Menu Renders 1`] = `\n<Context.Consumer>\n  [Function]\n</Context.Consumer>\n`;\n"
  },
  {
    "path": "src/Components/Menu/index.js",
    "content": "export { default } from './Menu';\nexport { default as MenuItem } from './MenuItem';\n"
  },
  {
    "path": "src/Components/Modal/Modal.android.js",
    "content": "import React, { Component } from 'react';\nimport {\n  View,\n  TouchableWithoutFeedback,\n  Dimensions,\n  Animated,\n  Modal as NativeModal,\n} from 'react-native';\n\nimport PropTypes from 'prop-types';\nimport withTheme from '../../Theme/withTheme';\nimport styles from './Modal.styles';\n\nclass Modal extends Component {\n  static propTypes = {\n    buttons: PropTypes.element,\n    visible: PropTypes.bool,\n    onRequestClose: PropTypes.func,\n    onShow: PropTypes.func,\n    onTouchOutside: PropTypes.func,\n    containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    NativeModalProps: PropTypes.object,\n    children: PropTypes.node,\n  };\n\n  static defaultProps = {\n    visible: false,\n  };\n\n  state = {\n    opacityAnimation: new Animated.Value(0),\n    scaleAnimation: new Animated.Value(0.5),\n    animationDuration: 200,\n    show: false,\n  };\n\n  componentDidUpdate(prevProps) {\n    const { visible } = this.props;\n    if (visible !== prevProps.visible) {\n      this.toggle();\n    }\n  }\n\n  toggle() {\n    const {\n      opacityAnimation,\n      scaleAnimation,\n      animationDuration,\n      show,\n    } = this.state;\n    const { visible } = this.props;\n\n    let opacity = 0;\n    let scale = 0;\n    if (visible) {\n      opacity = 1;\n      scale = 1;\n      this.setState(\n        {\n          show: !show,\n        },\n        () => {\n          Animated.parallel([\n            Animated.timing(opacityAnimation, {\n              toValue: opacity,\n              duration: animationDuration + 50,\n              useNativeDriver: true,\n            }),\n            Animated.timing(scaleAnimation, {\n              toValue: scale,\n              duration: animationDuration,\n              useNativeDriver: true,\n            }),\n          ]).start();\n        },\n      );\n    } else {\n      Animated.parallel([\n        Animated.timing(opacityAnimation, {\n          toValue: opacity,\n          duration: animationDuration,\n          useNativeDriver: true,\n        }),\n        Animated.timing(scaleAnimation, {\n          toValue: scale,\n          duration: 400,\n          useNativeDriver: true,\n        }),\n      ]).start(() => {\n        this.setState({\n          show: !show,\n        });\n      });\n    }\n  }\n\n  render() {\n    const {\n      onRequestClose,\n      onShow,\n      onTouchOutside,\n      containerStyle,\n      children,\n      NativeModalProps,\n    } = this.props;\n\n    const { opacityAnimation, scaleAnimation, show } = this.state;\n\n    const deviceWidth = Dimensions.get('window').width;\n    const deviceHeight = Dimensions.get('window').height;\n\n    return (\n      <NativeModal\n        animationType={'none'}\n        transparent={true}\n        visible={show}\n        onRequestClose={onRequestClose}\n        onShow={onShow}\n        {...NativeModalProps}>\n        <View style={[styles.container, containerStyle]}>\n          <TouchableWithoutFeedback onPress={onTouchOutside}>\n            <Animated.View\n              style={{\n                width: deviceWidth,\n                height: deviceHeight,\n                position: 'absolute',\n                backgroundColor: 'rgba(0,0,0,.5)',\n                padding: 24,\n                opacity: opacityAnimation,\n              }}\n            />\n          </TouchableWithoutFeedback>\n          <Animated.View\n            useNativeDriver={true}\n            style={{\n              opacity: opacityAnimation,\n              transform: [{ scale: scaleAnimation }],\n            }}>\n            {children}\n          </Animated.View>\n        </View>\n      </NativeModal>\n    );\n  }\n}\n\nexport default withTheme(Modal);\n"
  },
  {
    "path": "src/Components/Modal/Modal.ios.js",
    "content": "import React, { Component } from 'react';\nimport {\n  View,\n  TouchableWithoutFeedback,\n  Dimensions,\n  Animated,\n  Modal as NativeModal,\n} from 'react-native';\n\nimport PropTypes from 'prop-types';\nimport withTheme from '../../Theme/withTheme';\nimport styles from './Modal.styles';\n\nclass Modal extends Component {\n  static propTypes = {\n    buttons: PropTypes.element,\n    visible: PropTypes.bool,\n    onRequestClose: PropTypes.func,\n    onShow: PropTypes.func,\n    onTouchOutside: PropTypes.func,\n    containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    NativeModalProps: PropTypes.object,\n    children: PropTypes.node,\n  };\n\n  static defaultProps = {\n    visible: false,\n  };\n\n  state = {\n    opacityAnimation: new Animated.Value(0),\n    scaleAnimation: new Animated.Value(0.5),\n    animationDuration: 200,\n    show: false,\n  };\n\n  componentDidUpdate(prevProps) {\n    const { visible } = this.props;\n    if (visible !== prevProps.visible) {\n      this.toggle();\n    }\n  }\n\n  toggle() {\n    const {\n      opacityAnimation,\n      scaleAnimation,\n      animationDuration,\n      show,\n    } = this.state;\n    const { visible } = this.props;\n\n    let opacity = 0;\n    let scale = 0;\n    if (visible) {\n      opacity = 1;\n      scale = 1;\n      this.setState(\n        {\n          show: !show,\n        },\n        () => {\n          Animated.parallel([\n            Animated.timing(opacityAnimation, {\n              toValue: opacity,\n              duration: animationDuration + 50,\n              useNativeDriver: true,\n            }),\n            Animated.timing(scaleAnimation, {\n              toValue: scale,\n              duration: animationDuration,\n              useNativeDriver: true,\n            }),\n          ]).start();\n        },\n      );\n    } else {\n      Animated.parallel([\n        Animated.timing(opacityAnimation, {\n          toValue: opacity,\n          duration: animationDuration,\n          useNativeDriver: true,\n        }),\n        Animated.timing(scaleAnimation, {\n          toValue: scale,\n          duration: 400,\n          useNativeDriver: true,\n        }),\n      ]).start(() => {\n        this.setState({\n          show: !show,\n        });\n      });\n    }\n  }\n\n  render() {\n    const {\n      onRequestClose,\n      onShow,\n      onTouchOutside,\n      containerStyle,\n      children,\n      NativeModalProps,\n    } = this.props;\n\n    const { opacityAnimation, scaleAnimation, show } = this.state;\n\n    const deviceWidth = Dimensions.get('window').width;\n    const deviceHeight = Dimensions.get('window').height;\n\n    return (\n      <NativeModal\n        animationType={'none'}\n        transparent={true}\n        visible={show}\n        onRequestClose={onRequestClose}\n        onShow={onShow}\n        {...NativeModalProps}>\n        <View style={[styles.container, containerStyle]}>\n          <TouchableWithoutFeedback onPress={onTouchOutside}>\n            <Animated.View\n              style={{\n                width: deviceWidth,\n                height: deviceHeight,\n                position: 'absolute',\n                backgroundColor: 'rgba(0,0,0,.5)',\n                padding: 24,\n                opacity: opacityAnimation,\n              }}\n            />\n          </TouchableWithoutFeedback>\n          <Animated.View\n            useNativeDriver={true}\n            style={{\n              opacity: opacityAnimation,\n              transform: [{ scale: scaleAnimation }],\n            }}>\n            {children}\n          </Animated.View>\n        </View>\n      </NativeModal>\n    );\n  }\n}\n\nexport default withTheme(Modal);\n"
  },
  {
    "path": "src/Components/Modal/Modal.js",
    "content": "import Modal from './Modal.web';\n\nexport default Modal;\n"
  },
  {
    "path": "src/Components/Modal/Modal.styles.js",
    "content": "import { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    padding: 24,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Modal/Modal.web.js",
    "content": "import React, { Component } from 'react';\nimport {\n  View,\n  TouchableWithoutFeedback,\n  Dimensions,\n  Animated,\n  Platform,\n  Modal as NativeModal,\n} from 'react-native';\nimport WebModal from 'modal-enhanced-react-native-web';\nconst ImplementedModal = Platform.OS == 'web' ? WebModal : NativeModal;\n\nimport PropTypes from 'prop-types';\nimport withTheme from '../../Theme/withTheme';\nimport styles from './Modal.styles';\n\nclass Modal extends Component {\n  static propTypes = {\n    buttons: PropTypes.element,\n    visible: PropTypes.bool,\n    onRequestClose: PropTypes.func,\n    onShow: PropTypes.func,\n    onTouchOutside: PropTypes.func,\n    containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    NativeModalProps: PropTypes.object,\n    children: PropTypes.node,\n  };\n\n  static defaultProps = {\n    visible: false,\n  };\n\n  state = {\n    opacityAnimation: new Animated.Value(0),\n    scaleAnimation: new Animated.Value(0.5),\n    animationDuration: 200,\n    show: false,\n  };\n\n  componentDidUpdate(prevProps) {\n    const { visible } = this.props;\n    if (visible !== prevProps.visible) {\n      this.toggle();\n    }\n  }\n\n  toggle() {\n    const {\n      opacityAnimation,\n      scaleAnimation,\n      animationDuration,\n      show,\n    } = this.state;\n    const { visible } = this.props;\n\n    let opacity = 0;\n    let scale = 0;\n    if (visible) {\n      opacity = 1;\n      scale = 1;\n      this.setState(\n        {\n          show: !show,\n        },\n        () => {\n          Animated.parallel([\n            Animated.timing(opacityAnimation, {\n              toValue: opacity,\n              duration: animationDuration + 50,\n              useNativeDriver: true,\n            }),\n            Animated.timing(scaleAnimation, {\n              toValue: scale,\n              duration: animationDuration,\n              useNativeDriver: true,\n            }),\n          ]).start();\n        },\n      );\n    } else {\n      Animated.parallel([\n        Animated.timing(opacityAnimation, {\n          toValue: opacity,\n          duration: animationDuration,\n          useNativeDriver: true,\n        }),\n        Animated.timing(scaleAnimation, {\n          toValue: scale,\n          duration: 400,\n          useNativeDriver: true,\n        }),\n      ]).start(() => {\n        this.setState({\n          show: !show,\n        });\n      });\n    }\n  }\n\n  render() {\n    const {\n      onRequestClose,\n      onShow,\n      onTouchOutside,\n      containerStyle,\n      children,\n      NativeModalProps,\n    } = this.props;\n\n    const { opacityAnimation, scaleAnimation, show } = this.state;\n\n    const deviceWidth = Dimensions.get('window').width;\n    const deviceHeight = Dimensions.get('window').height;\n\n    return (\n      <ImplementedModal\n        animationType={'none'}\n        transparent={true}\n        visible={show}\n        onRequestClose={onRequestClose}\n        onShow={onShow}\n        {...NativeModalProps}>\n        <View style={[styles.container, containerStyle]}>\n          <TouchableWithoutFeedback onPress={onTouchOutside}>\n            <Animated.View\n              style={{\n                width: deviceWidth,\n                height: deviceHeight,\n                position: 'absolute',\n                backgroundColor: 'rgba(0,0,0,.5)',\n                padding: 24,\n                opacity: opacityAnimation,\n              }}\n            />\n          </TouchableWithoutFeedback>\n          <Animated.View\n            useNativeDriver={true}\n            style={{\n              opacity: opacityAnimation,\n              transform: [{ scale: scaleAnimation }],\n            }}>\n            {children}\n          </Animated.View>\n        </View>\n      </ImplementedModal>\n    );\n  }\n}\n\nexport default withTheme(Modal);\n"
  },
  {
    "path": "src/Components/Paper/Paper.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Animated } from 'react-native';\nimport withTheme from '../../Theme/withTheme';\nimport { shadow } from '../../index';\n\nclass Paper extends Component {\n  static propTypes = {\n    children: PropTypes.node,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    theme: PropTypes.object,\n    shadow: PropTypes.number,\n    radius: PropTypes.number,\n    testID: PropTypes.string,\n  };\n  render() {\n    const {\n      style,\n      theme,\n      children,\n      shadow: userShadow,\n      radius,\n      testID,\n      ...props\n    } = this.props;\n\n    let shadows = shadow(4);\n    if (userShadow > -1 && userShadow < 25) {\n      shadows = shadow(userShadow);\n    }\n\n    const borderRadius = radius ? radius : 2;\n\n    return (\n      <Animated.View\n        useNativeDriver={true}\n        style={[theme.paper, shadows, { borderRadius }, style]}\n        testID={testID}\n        {...props}>\n        {children}\n      </Animated.View>\n    );\n  }\n}\n\nexport default withTheme(Paper);\n"
  },
  {
    "path": "src/Components/Paper/Paper.stories.js",
    "content": "import React from 'react';\n\nimport { Paper } from '../../';\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\n\nexport default storiesOf('Components|Paper', module)\n  .addParameters({ jest: ['Paper'] })\n  .add('Elevation', () => (\n    <Container>\n      <Header title={'Paper'} />\n      <Paper\n        style={{\n          padding: 8,\n          height: 100,\n          width: 100,\n          alignItems: 'center',\n        }}\n        elevation={2}\n      />\n      <Paper\n        style={{\n          padding: 8,\n          height: 100,\n          width: 100,\n          marginTop: 30,\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n        elevation={4}\n      />\n      <Paper\n        style={{\n          padding: 8,\n          height: 100,\n          width: 100,\n          marginTop: 30,\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n        elevation={8}\n      />\n    </Container>\n  ))\n  .add('Roundness', () => (\n    <Container>\n      <Header title={'Roudness'} />\n      <Paper\n        style={{\n          padding: 8,\n          height: 100,\n          width: 100,\n          alignItems: 'center',\n        }}\n        elevation={4}\n        radius={2}\n      />\n      <Paper\n        style={{\n          padding: 8,\n          height: 100,\n          width: 100,\n          marginTop: 30,\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n        elevation={4}\n        radius={8}\n      />\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/Paper/Paper.styles.js",
    "content": ""
  },
  {
    "path": "src/Components/Paper/Paper.test.js",
    "content": "import React from 'react';\nimport { Paper } from '../../';\n\nimport renderer from 'react-test-renderer';\n\ntest('Paper Renders', () => {\n  const tree = renderer.create(<Paper />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Paper/__snapshots__/Paper.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Paper Renders 1`] = `\n<View\n  style={\n    Object {\n      \"backgroundColor\": \"white\",\n      \"borderRadius\": 2,\n      \"shadowColor\": \"#000\",\n      \"shadowOffset\": Object {\n        \"height\": 2,\n        \"width\": 0,\n      },\n      \"shadowOpacity\": 0.23,\n      \"shadowRadius\": 2.62,\n    }\n  }\n  useNativeDriver={true}\n/>\n`;\n"
  },
  {
    "path": "src/Components/Progress/ProgressBar/ProgressBar.js",
    "content": "import PropTypes from 'prop-types';\nimport React, { PureComponent } from 'react';\nimport { Animated, Easing } from 'react-native';\nimport withTheme from '../../../Theme/withTheme';\nimport styles from './ProgressBar.styles';\nimport { default as colorTool } from 'color';\n\nclass ProgressBar extends PureComponent {\n  static propTypes = {\n    color: PropTypes.string,\n    height: PropTypes.number,\n    trackStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    determinate: PropTypes.bool,\n    indicatorStartPosition: PropTypes.number,\n    animationEasing: PropTypes.func,\n    animationDuration: PropTypes.number,\n    value: PropTypes.number,\n    visible: PropTypes.bool,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    theme: PropTypes.object,\n    testID: PropTypes.string,\n  };\n\n  static defaultProps = {\n    animationDuration: 1000,\n    indicatorStartPosition: 0,\n    animationEasing: Easing.bezier(0.65, 0.815, 0.735, 0.395),\n  };\n\n  state = {\n    indicatorPosition: new Animated.Value(this.props.indicatorStartPosition),\n    indicatorScaleX: new Animated.Value(1),\n    indicatorWidth: new Animated.Value(0),\n    trackScaleY: new Animated.Value(0),\n    trackOpacity: new Animated.Value(0),\n    trackHeight: 0,\n    trackWidth: 0,\n  };\n\n  componentDidMount() {\n    const { visible, determinate } = this.props;\n    if (visible) {\n      this.animateTrackHeight();\n    }\n    if (determinate) {\n      this.startDeterminateAnimation();\n    }\n  }\n\n  componentDidUpdate(prevProps) {\n    const { value, visible, determinate } = this.props;\n\n    if (value != prevProps.value && determinate) {\n      this.startDeterminateAnimation();\n    }\n\n    if ((visible && !prevProps.visible) || (!visible && prevProps.visible)) {\n      this.animateTrackHeight();\n    }\n  }\n\n  animateTrackHeight() {\n    const { trackScaleY, trackOpacity } = this.state;\n    const { visible, determinate } = this.props;\n    let scale = visible ? 1 : 0;\n    let opacity = visible ? 1 : 0;\n\n    Animated.parallel([\n      Animated.timing(trackScaleY, {\n        toValue: scale,\n        duration: 300,\n      }),\n      Animated.timing(trackOpacity, {\n        toValue: opacity,\n        duration: 300,\n      }),\n    ]).start(() => {\n      if (determinate) {\n        this.startDeterminateAnimation();\n      } else {\n        this.startIndeterminateAnimation();\n      }\n    });\n  }\n\n  startDeterminateAnimation() {\n    const { indicatorWidth, trackWidth } = this.state;\n    const { animationDuration, value } = this.props;\n    if (trackWidth == 0) {\n      setTimeout(() => this.startDeterminateAnimation(), 100);\n    }\n    Animated.parallel([\n      Animated.timing(indicatorWidth, {\n        toValue: trackWidth * (value / 100),\n        duration: animationDuration,\n      }),\n    ]).start();\n  }\n\n  startIndeterminateAnimation() {\n    const { indicatorPosition, indicatorScaleX, trackWidth } = this.state;\n    const { animationDuration, animationEasing } = this.props;\n    if (trackWidth == 0) {\n      setTimeout(() => this.startIndeterminateAnimation(), 100);\n    }\n    Animated.loop(\n      Animated.parallel([\n        Animated.timing(indicatorPosition, {\n          toValue: trackWidth,\n          duration: animationDuration,\n          animationEasing,\n          useNativeDriver: true,\n        }),\n        Animated.timing(indicatorScaleX, {\n          toValue: 2,\n          duration: animationDuration / 4,\n          animationEasing,\n          useNativeDriver: true,\n        }),\n      ]),\n\n      {\n        iterations: -1,\n      },\n    ).start();\n  }\n\n  onTrackLayout = e => {\n    const { width, height } = e.nativeEvent.layout;\n\n    this.setState({\n      trackWidth: width,\n      trackHeight: height,\n    });\n  };\n\n  render() {\n    const {\n      height,\n      color,\n      trackStyle,\n      determinate,\n      theme,\n      testID,\n    } = this.props;\n    const {\n      indicatorPosition,\n      indicatorScaleX,\n      indicatorWidth,\n      trackScaleY,\n      trackOpacity,\n    } = this.state;\n\n    const trackColor = color\n      ? colorTool(color)\n          .fade(0.4)\n          .string()\n      : colorTool(theme.primary.main)\n          .fade(0.4)\n          .string(); // .6 alpha of indicator\n    const indicatorColor = color ? color : theme.primary.main;\n\n    return (\n      <Animated.View\n        onLayout={this.onTrackLayout}\n        style={[\n          styles.track,\n          {\n            backgroundColor: trackColor,\n            height: height ? height : 4,\n            opacity: trackOpacity,\n            transform: [{ scaleY: trackScaleY }],\n          },\n          trackStyle,\n        ]}\n        testID={testID}>\n        <Animated.View\n          style={[\n            styles.indicator,\n            {\n              backgroundColor: indicatorColor,\n              height: height ? height : 4,\n              width: determinate ? indicatorWidth : 112,\n              transform: [\n                { translateX: indicatorPosition },\n                { scaleX: indicatorScaleX },\n              ],\n            },\n          ]}\n        />\n      </Animated.View>\n    );\n  }\n}\n\nexport default withTheme(ProgressBar);\n"
  },
  {
    "path": "src/Components/Progress/ProgressBar/ProgressBar.stories.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\n\nimport { ProgressBar, Button } from '../../..';\nimport { State, Store } from '@sambego/storybook-state';\nimport Header from '../../../storybook/components/Header';\nimport Container from '../../../storybook/components/Container';\nimport { storiesOf } from '../../../storybook/helpers/storiesOf';\n\nconst store = new Store({\n  value3: 30,\n  visible2: true,\n  circleValue3: 40,\n});\n\nexport default storiesOf('Components|Progress/ProgressBar', module)\n  .addParameters({ jest: ['ProgressBar'] })\n  .add('Indeterminate', () => (\n    <Container>\n      <Header title={'Progress Bar'} />\n\n      <ProgressBar visible />\n      <ProgressBar\n        visible\n        indicatorStartPosition={100}\n        trackStyle={{ marginTop: 20 }}\n        color={'#E91E63'}\n      />\n      <ProgressBar\n        visible\n        indicatorStartPosition={100}\n        trackStyle={{ marginTop: 20 }}\n        color={'#009688'}\n        animationDuration={2000}\n      />\n      <ProgressBar\n        visible\n        indicatorStartPosition={100}\n        trackStyle={{ marginTop: 20 }}\n        color={'#673AB7'}\n        animationDuration={4000}\n      />\n      <ProgressBar\n        visible\n        indicatorStartPosition={100}\n        trackStyle={{ marginTop: 20 }}\n        color={'#8BC34A'}\n        animationDuration={3000}\n        height={5}\n      />\n      <ProgressBar\n        visible\n        indicatorStartPosition={100}\n        trackStyle={{ marginTop: 20 }}\n        color={'#03A9F4'}\n        animationDuration={4000}\n        height={10}\n      />\n    </Container>\n  ))\n  .add('Determinate', () => (\n    <Container>\n      <Header title={'Progress Bar'} />\n\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={{ marginBottom: 40 }}>\n            <ProgressBar\n              determinate\n              value={state.value3}\n              animationDuration={2000}\n              trackStyle={{ marginTop: 40 }}\n              visible={state.visible2}\n            />\n            <Button\n              type=\"outlined\"\n              style={{ marginTop: 20 }}\n              text={' Change Value'}\n              onPress={() => {\n                store.set({\n                  value3: Math.floor(Math.random() * Math.floor(100)),\n                });\n              }}\n            />\n\n            <Button\n              type=\"outlined\"\n              style={{ marginTop: 20 }}\n              animationDuration={500}\n              text={'Hide / Show Animate'}\n              onPress={() => {\n                store.set({\n                  visible2: !state.visible2,\n                });\n              }}\n            />\n          </View>\n        )}\n      </State>\n\n      <View>\n        <ProgressBar\n          determinate\n          value={25}\n          color={'#E91E63'}\n          animationDuration={2000}\n          trackStyle={{ marginBottom: 40 }}\n          visible\n        />\n        <ProgressBar\n          determinate\n          value={50}\n          color={'#009688'}\n          animationDuration={500}\n          trackStyle={{ marginBottom: 40 }}\n          visible\n        />\n        <ProgressBar\n          determinate\n          value={75}\n          color={'#673AB7'}\n          animationDuration={400}\n          trackStyle={{ marginBottom: 40 }}\n          visible\n          height={5}\n        />\n      </View>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/Progress/ProgressBar/ProgressBar.styles.js",
    "content": "import { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  track: {\n    width: '100%',\n    position: 'relative',\n    overflow: 'hidden',\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Progress/ProgressBar/ProgressBar.test.js",
    "content": "import React from 'react';\nimport { ProgressBar } from '../../..';\n\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\n\ntest('ProgressBar Renders', () => {\n  const tree = renderer.render(<ProgressBar />);\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Progress/ProgressBar/__snapshots__/ProgressBar.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`ProgressBar Renders 1`] = `\n<Context.Consumer>\n  [Function]\n</Context.Consumer>\n`;\n"
  },
  {
    "path": "src/Components/Progress/ProgressBar/index.js",
    "content": "export { default } from './ProgressBar';\n"
  },
  {
    "path": "src/Components/Progress/ProgressCircle/ProgressCircle.js",
    "content": "import PropTypes from 'prop-types';\nimport React, { PureComponent } from 'react';\nimport { View, Animated, Easing } from 'react-native';\nimport withTheme from '../../../Theme/withTheme';\nimport ProgressCircleDeterminate from './ProgressCircleDeterminate';\n\nclass ProgressCircle extends PureComponent {\n  static propTypes = {\n    color: PropTypes.string,\n    size: PropTypes.number,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    animationDuration: PropTypes.number,\n    animationEasing: PropTypes.func,\n    visible: PropTypes.bool,\n    determinate: PropTypes.bool,\n    widthOfBorder: PropTypes.number,\n    testID: PropTypes.string,\n  };\n\n  static defaultProps = {\n    color: 'rgb(0, 0, 0)',\n    size: 48,\n    animationEasing: Easing.linear,\n    animationDuration: 2400,\n    visible: true,\n    determinate: false,\n    widthOfBorder: 10,\n  };\n\n  constructor(props) {\n    super(props);\n  }\n\n  state = {\n    frames: (60 * this.props.animationDuration) / 1000,\n    progress: new Animated.Value(0),\n  };\n\n  componentDidMount() {\n    const { visible, determinate } = this.props;\n\n    if (visible && !determinate) {\n      this.startIndeterminateAnimation();\n    }\n  }\n\n  componentDidUpdate(prevProps) {\n    const { visible, determinate } = this.props;\n\n    if ((visible && !prevProps.visible) || (!visible && prevProps.visible)) {\n      if (determinate) this.startIndeterminateAnimation();\n    }\n  }\n\n  startIndeterminateAnimation() {\n    const { progress } = this.state;\n    const { animationEasing, animationDuration } = this.props;\n\n    Animated.loop(\n      Animated.timing(progress, {\n        duration: animationDuration,\n        easing: animationEasing,\n        toValue: 1,\n        useNativeDriver: true,\n      }),\n\n      {\n        iterations: -1,\n      },\n    ).start();\n  }\n\n  stopAnimation() {\n    this.state.progress.stopAnimation();\n  }\n\n  getLayerStyle() {\n    const { size } = this.props;\n    const { progress } = this.state;\n\n    const inputRange = [0, 1];\n    const outputRange = [0 + 30 + 15 + 'deg', 2 * 360 + 30 + 15 + 'deg'];\n\n    const rotate = {\n      rotate: progress.interpolate({\n        inputRange,\n        outputRange,\n      }),\n    };\n\n    return {\n      width: size,\n      height: size,\n      transform: [rotate],\n    };\n  }\n\n  getViewportStyle() {\n    const { size } = this.props;\n    const { progress } = this.state;\n\n    const rotate = {\n      rotate: progress.interpolate({\n        inputRange: this.getInputRange(progress),\n        outputRange: this.getOutputRange(progress),\n      }),\n    };\n\n    return {\n      width: size,\n      height: size,\n      transform: [rotate],\n    };\n  }\n\n  getInputRange() {\n    const { frames } = this.state;\n    const inputRange = Array.from(\n      new Array(frames),\n      (undefined, frameIndex) => frameIndex / (frames - 1),\n    );\n\n    return inputRange;\n  }\n\n  getOutputRange() {\n    const easing = Easing.bezier(0.4, 0.0, 0.7, 1.0);\n    const { frames } = this.state;\n\n    const outputRange = Array.from(\n      new Array(frames),\n      (undefined, frameIndex) => {\n        let progress = (2 * frameIndex) / (frames - 1);\n        const rotation = -(180 - 15);\n\n        if (progress > 1.0) {\n          progress = 2.0 - progress;\n        }\n\n        const direction = +1;\n\n        return direction * (180 - 30) * easing(progress) + rotation + 'deg';\n      },\n    );\n\n    return outputRange;\n  }\n\n  render() {\n    const {\n      style,\n      size,\n      color,\n      determinate,\n      widthOfBorder,\n      testID,\n    } = this.props;\n\n    const layerStyle = this.getLayerStyle();\n\n    const viewportStyle = this.getViewportStyle();\n\n    const containerStyle = {\n      width: size,\n      height: size / 2,\n      overflow: 'hidden',\n    };\n\n    const lineStyle = {\n      width: size,\n      height: size,\n      borderColor: color,\n      borderWidth: size / widthOfBorder,\n      borderRadius: size / 2,\n    };\n\n    if (determinate) return <ProgressCircleDeterminate {...this.props} />;\n\n    return (\n      <View style={style} testID={testID}>\n        <Animated.View style={layerStyle} useNativeDriver={true}>\n          <Animated.View\n            style={containerStyle}\n            collapsable={false}\n            useNativeDriver={true}>\n            <Animated.View style={viewportStyle} useNativeDriver={true}>\n              <Animated.View\n                style={containerStyle}\n                collapsable={false}\n                useNativeDriver={true}>\n                <Animated.View style={lineStyle} useNativeDriver={true} />\n              </Animated.View>\n            </Animated.View>\n          </Animated.View>\n        </Animated.View>\n      </View>\n    );\n  }\n}\n\nexport default withTheme(ProgressCircle);\n"
  },
  {
    "path": "src/Components/Progress/ProgressCircle/ProgressCircle.stories.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\n\nimport { ProgressCircle, Button } from '../../..';\nimport { State, Store } from '@sambego/storybook-state';\nimport Header from '../../../storybook/components/Header';\nimport Container from '../../../storybook/components/Container';\nimport { storiesOf } from '../../../storybook/helpers/storiesOf';\n\nconst store = new Store({\n  value3: 30,\n  visible2: true,\n  circleValue3: 40,\n});\n\nexport default storiesOf('Components|Progress/ProgressCircle', module)\n  .addParameters({ jest: ['ProgressCircle'] })\n\n  .add('Indeterminate', () => (\n    <Container>\n      <Header title={'Progress Circle'} />\n\n      <View\n        style={{ flexDirection: 'row', flexWrap: 'wrap', marginBottom: 40 }}>\n        <ProgressCircle />\n        <ProgressCircle color={'#03A9F4'} />\n        <ProgressCircle color={'#E91E63'} />\n        <ProgressCircle color={'#009688'} />\n      </View>\n      <View\n        style={{ flexDirection: 'row', flexWrap: 'wrap', marginBottom: 40 }}>\n        <ProgressCircle animationDuration={4800} />\n        <ProgressCircle color={'#03A9F4'} animationDuration={4800} />\n        <ProgressCircle color={'#E91E63'} animationDuration={4800} />\n        <ProgressCircle color={'#009688'} animationDuration={4800} />\n      </View>\n      <View\n        style={{ flexDirection: 'row', flexWrap: 'wrap', marginBottom: 40 }}>\n        <ProgressCircle animationDuration={1200} />\n        <ProgressCircle color={'#03A9F4'} animationDuration={1200} />\n        <ProgressCircle color={'#E91E63'} animationDuration={1200} />\n        <ProgressCircle color={'#009688'} animationDuration={1200} />\n      </View>\n    </Container>\n  ))\n  .add('Determinate', () => (\n    <Container>\n      <Header title={'Progress Circle'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={{ flexDirection: 'column', marginBottom: 40 }}>\n            <ProgressCircle\n              value={state.circleValue3}\n              size={48}\n              thickness={4}\n              color=\"#2b80ff\"\n              unfilledColor=\"#f2f2f2\"\n              animationMethod=\"timing\"\n              animationConfig={{ speed: 1 }}\n              shouldAnimateFirstValue\n              determinate\n            />\n\n            <Button\n              type=\"outlined\"\n              style={{ marginTop: 20 }}\n              text={'Change Value'}\n              onPress={() => {\n                store.set({\n                  circleValue3: Math.floor(Math.random() * Math.floor(100)),\n                });\n              }}\n            />\n          </View>\n        )}\n      </State>\n      <View style={{ flexDirection: 'row', marginBottom: 40 }}>\n        <ProgressCircle\n          value={25}\n          size={48}\n          thickness={4}\n          color=\"#E91E63\"\n          animationMethod=\"timing\"\n          animationConfig={{ duration: 1000 }}\n          shouldAnimateFirstValue\n          determinate\n        />\n        <ProgressCircle\n          value={50}\n          size={48}\n          thickness={4}\n          color=\"#E91E63\"\n          animationMethod=\"timing\"\n          animationConfig={{ duration: 1000 }}\n          shouldAnimateFirstValue\n          determinate\n        />\n        <ProgressCircle\n          value={75}\n          size={48}\n          thickness={4}\n          color=\"#E91E63\"\n          animationMethod=\"timing\"\n          animationConfig={{ duration: 1000 }}\n          shouldAnimateFirstValue\n          determinate\n        />\n        <ProgressCircle\n          value={100}\n          size={48}\n          thickness={4}\n          color=\"#E91E63\"\n          animationMethod=\"timing\"\n          animationConfig={{ duration: 1000 }}\n          shouldAnimateFirstValue\n          determinate\n        />\n      </View>\n      <View style={{ flexDirection: 'row' }}>\n        <ProgressCircle\n          value={25}\n          size={48}\n          thickness={8}\n          color=\"#009688\"\n          animationMethod=\"timing\"\n          animationConfig={{ duration: 1000 }}\n          shouldAnimateFirstValue\n          determinate\n        />\n        <ProgressCircle\n          value={50}\n          size={48}\n          thickness={8}\n          color=\"#009688\"\n          animationMethod=\"timing\"\n          animationConfig={{ duration: 1000 }}\n          shouldAnimateFirstValue\n          determinate\n        />\n        <ProgressCircle\n          value={75}\n          size={48}\n          thickness={8}\n          color=\"#009688\"\n          animationMethod=\"timing\"\n          animationConfig={{ duration: 1000 }}\n          shouldAnimateFirstValue\n          determinate\n        />\n        <ProgressCircle\n          value={100}\n          size={48}\n          thickness={8}\n          color=\"#009688\"\n          animationMethod=\"timing\"\n          animationConfig={{ duration: 1000 }}\n          shouldAnimateFirstValue\n          determinate\n        />\n      </View>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/Progress/ProgressCircle/ProgressCircle.styles.js",
    "content": ""
  },
  {
    "path": "src/Components/Progress/ProgressCircle/ProgressCircle.test.js",
    "content": "import React from 'react';\nimport { ProgressCircle } from '../../..';\n\nimport renderer from 'react-test-renderer';\n\ntest('ProgressCircle Renders', () => {\n  const tree = renderer.create(<ProgressCircle />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Progress/ProgressCircle/ProgressCircleDeterminate.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { View, Animated, StyleSheet } from 'react-native';\nimport withTheme from '../../../Theme/withTheme';\n\nclass ProgressCircleDeterminate extends Component {\n  static propTypes = {\n    value: PropTypes.number,\n    size: PropTypes.number,\n    thickness: PropTypes.number,\n    color: PropTypes.string,\n    unfilledColor: PropTypes.string,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    children: PropTypes.node,\n    animationMethod: PropTypes.string,\n    animationConfig: PropTypes.object,\n    shouldAnimateFirstValue: PropTypes.bool,\n    onChange: PropTypes.func,\n    onChangeAnimationEnd: PropTypes.func,\n    noTrackColor: PropTypes.bool,\n  };\n\n  static defaultProps = {\n    value: 0,\n    size: 64,\n    thickness: 4,\n    color: '#4c90ff',\n    unfilledColor: 'transparent',\n    noTrackColor: true,\n    style: {},\n    children: null,\n    animationMethod: null,\n    animationConfig: { duration: 200 },\n    shouldAnimateFirstValue: false,\n    onChange() {},\n    onChangeAnimationEnd() {},\n  };\n\n  state = {\n    animatedValue:\n      this.props.value.constructor.name === 'AnimatedValue'\n        ? null\n        : new Animated.Value(\n            this.props.shouldAnimateFirstValue ? 0 : this.props.value,\n          ),\n  };\n\n  componentDidMount() {\n    const { shouldAnimateFirstValue, value } = this.props;\n\n    if (shouldAnimateFirstValue) this.animateChange(value);\n  }\n\n  componentDidUpdate(prevProps) {\n    const { value } = this.props;\n\n    if (value != prevProps.value) {\n      this.handleChange(value);\n    }\n  }\n\n  getFullCircleStyle() {\n    return {\n      width: this.props.size,\n      height: this.props.size,\n      borderRadius: this.props.size / 2,\n    };\n  }\n\n  getHalfCircleContainerStyle() {\n    return {\n      width: this.props.size / 2,\n      height: this.props.size,\n      overflow: 'hidden',\n    };\n  }\n\n  ANIMATION_TYPES = ['timing', 'spring', 'bounce', 'decay'];\n\n  getAnimationMethod() {\n    return this.ANIMATION_TYPES.includes(this.props.animationMethod)\n      ? this.props.animationMethod\n      : null;\n  }\n\n  handleChange = (value = this.props.value) => {\n    this.props.onChange();\n    if (value.constructor.name === 'AnimatedValue') {\n      return;\n    }\n\n    if (this.getAnimationMethod()) {\n      this.animateChange(value);\n    } else {\n      this.state.animatedValue.setValue(value);\n    }\n  };\n\n  animateChange = value =>\n    Animated[this.getAnimationMethod()](this.state.animatedValue, {\n      toValue: value / 100,\n      useNativeDriver: true,\n      ...this.props.animationConfig,\n    }).start(this.props.onChangeAnimationEnd);\n\n  renderHalfCircle = ({ isFlipped = false } = {}) => {\n    const { size, color, thickness, value } = this.props;\n    const valueToInterpolate =\n      value.constructor.name === 'AnimatedValue'\n        ? value\n        : this.state.animatedValue;\n\n    return (\n      <View\n        pointerEvents=\"none\"\n        style={[\n          this.getHalfCircleContainerStyle(),\n          { transform: [{ scaleX: isFlipped ? -1 : 1 }] },\n        ]}>\n        <Animated.View\n          useNativeDriver={true}\n          style={{\n            width: size,\n            height: size,\n            transform: [\n              {\n                rotate: valueToInterpolate.interpolate({\n                  inputRange: isFlipped ? [0, 0.5] : [0.5, 1],\n                  outputRange: isFlipped\n                    ? ['180deg', '0deg']\n                    : ['-180deg', '0deg'],\n                  extrapolate: 'clamp',\n                }),\n              },\n            ],\n          }}>\n          <View style={this.getHalfCircleContainerStyle()}>\n            <View\n              style={[\n                this.getFullCircleStyle(),\n                { borderWidth: thickness, borderColor: color },\n              ]}\n            />\n          </View>\n        </Animated.View>\n      </View>\n    );\n  };\n\n  render() {\n    const {\n      thickness,\n      unfilledColor,\n      children,\n      style,\n      noTrackColor,\n    } = this.props;\n\n    return (\n      <View style={[this.getFullCircleStyle(), styles.mainContainer, style]}>\n        <View\n          pointerEvents=\"box-none\"\n          style={[\n            this.getFullCircleStyle(),\n            {\n              borderWidth: noTrackColor ? 0 : thickness,\n              borderColor: unfilledColor,\n            },\n            styles.innerCircleContainer,\n          ]}>\n          {children}\n        </View>\n        {this.renderHalfCircle()}\n        {this.renderHalfCircle({ isFlipped: true })}\n      </View>\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  mainContainer: {\n    flexDirection: 'row',\n    borderColor: 'transparent',\n    backgroundColor: 'transparent',\n  },\n  innerCircleContainer: {\n    position: 'absolute',\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n});\n\nexport default withTheme(ProgressCircleDeterminate);\n"
  },
  {
    "path": "src/Components/Progress/ProgressCircle/__snapshots__/ProgressCircle.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`ProgressCircle Renders 1`] = `\n<View>\n  <View\n    style={\n      Object {\n        \"height\": 48,\n        \"transform\": Array [\n          Object {\n            \"rotate\": \"45deg\",\n          },\n        ],\n        \"width\": 48,\n      }\n    }\n    useNativeDriver={true}\n  >\n    <View\n      collapsable={false}\n      style={\n        Object {\n          \"height\": 24,\n          \"overflow\": \"hidden\",\n          \"width\": 48,\n        }\n      }\n      useNativeDriver={true}\n    >\n      <View\n        style={\n          Object {\n            \"height\": 48,\n            \"transform\": Array [\n              Object {\n                \"rotate\": \"-165deg\",\n              },\n            ],\n            \"width\": 48,\n          }\n        }\n        useNativeDriver={true}\n      >\n        <View\n          collapsable={false}\n          style={\n            Object {\n              \"height\": 24,\n              \"overflow\": \"hidden\",\n              \"width\": 48,\n            }\n          }\n          useNativeDriver={true}\n        >\n          <View\n            style={\n              Object {\n                \"borderColor\": \"rgb(0, 0, 0)\",\n                \"borderRadius\": 24,\n                \"borderWidth\": 4.8,\n                \"height\": 48,\n                \"width\": 48,\n              }\n            }\n            useNativeDriver={true}\n          />\n        </View>\n      </View>\n    </View>\n  </View>\n</View>\n`;\n"
  },
  {
    "path": "src/Components/Progress/ProgressCircle/index.js",
    "content": "export { default } from './ProgressCircle';\n"
  },
  {
    "path": "src/Components/RadioButton/RadioButton.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Animated, TouchableWithoutFeedback, View, Text } from 'react-native';\nimport withTheme from '../../Theme/withTheme';\nimport Ripple from '../Ripple/Ripple';\nimport styles from './RadioButton.styles';\n\nclass RadioButton extends Component {\n  static propTypes = {\n    checked: PropTypes.bool,\n    disabled: PropTypes.bool,\n    onPress: PropTypes.func,\n    rippleColor: PropTypes.string,\n    radioButtonColor: PropTypes.string,\n    uncheckedBorderColor: PropTypes.string,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n\n    label: PropTypes.string,\n    labelStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    labelPos: PropTypes.string,\n\n    error: PropTypes.bool,\n    theme: PropTypes.object,\n    testID: PropTypes.string,\n  };\n\n  static defaultProps = {\n    labelPos: 'right',\n  };\n\n  _renderLabel() {\n    const { label, labelStyle, onPress } = this.props;\n    if (!label) return null;\n    return (\n      <TouchableWithoutFeedback onPress={onPress}>\n        <View>\n          <Text style={[styles.label, labelStyle]}>{label}</Text>\n        </View>\n      </TouchableWithoutFeedback>\n    );\n  }\n\n  render() {\n    const {\n      checked,\n      disabled,\n      onPress,\n      rippleColor,\n      radioButtonColor,\n      uncheckedBorderColor,\n      style,\n      labelPos,\n      error,\n      theme,\n      testID,\n    } = this.props;\n\n    const rippleColorApplied = rippleColor ? rippleColor : 'rgba(0,0,0,.8)';\n    let radioButtonColorApplied = radioButtonColor\n      ? radioButtonColor\n      : 'rgba(33, 150, 243, 1)';\n    let uncheckedBorderColorApplied = uncheckedBorderColor\n      ? uncheckedBorderColor\n      : 'rgba(0,0,0,.5)';\n\n    if (error) {\n      radioButtonColorApplied = theme.error.main;\n      uncheckedBorderColorApplied = theme.error.main;\n    }\n    if (disabled) {\n      radioButtonColorApplied = 'rgba(0,0,0,.5)';\n    }\n\n    return (\n      <View style={[styles.container, style]} testID={testID}>\n        {labelPos === 'left' ? this._renderLabel() : null}\n        <Ripple\n          rippleColor={rippleColorApplied}\n          rippleContainerBorderRadius={18}\n          onPress={onPress}\n          style={[styles.ripple]}\n          rippleCentered={true}\n          disabled={disabled}>\n          <Animated.View\n            useNativeDriver={true}\n            style={[\n              styles.radio,\n              {\n                borderColor: checked\n                  ? radioButtonColorApplied\n                  : uncheckedBorderColorApplied,\n              },\n            ]}>\n            {checked ? (\n              <Animated.View\n                useNativeDriver={true}\n                style={[\n                  styles.radioDot,\n                  { backgroundColor: radioButtonColorApplied },\n                ]}\n              />\n            ) : null}\n          </Animated.View>\n        </Ripple>\n        {labelPos === 'right' ? this._renderLabel() : null}\n      </View>\n    );\n  }\n}\n\nexport default withTheme(RadioButton);\n"
  },
  {
    "path": "src/Components/RadioButton/RadioButton.stories.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\n\nimport { RadioButton } from '../../';\nimport { State, Store } from '@sambego/storybook-state';\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\n\nconst store = new Store({\n  checked: 1,\n  checked1: 2,\n  checked2: 3,\n  checked3: 1,\n  checked4: 1,\n});\n\nexport default storiesOf('Components|Radio Button', module)\n  .addParameters({ jest: ['RadioButton'] })\n  .add('simple', () => (\n    <Container>\n      <Header title={'Radio Button'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>\n            <RadioButton\n              checked={state.checked == 1}\n              onPress={() => store.set({ checked: 1 })}\n            />\n            <RadioButton\n              checked={state.checked == 2}\n              onPress={() => store.set({ checked: 2 })}\n            />\n            <RadioButton\n              checked={state.checked == 3}\n              onPress={() => store.set({ checked: 3 })}\n            />\n          </View>\n        )}\n      </State>\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>\n            <RadioButton\n              checked={state.checked1 == 1}\n              radioButtonColor={'#E91E63'}\n              rippleColor={'#E91E63'}\n              onPress={() => store.set({ checked1: 1 })}\n            />\n            <RadioButton\n              checked={state.checked1 == 2}\n              radioButtonColor={'#E91E63'}\n              rippleColor={'#E91E63'}\n              onPress={() => store.set({ checked1: 2 })}\n            />\n            <RadioButton\n              checked={state.checked1 == 3}\n              radioButtonColor={'#E91E63'}\n              rippleColor={'#E91E63'}\n              onPress={() => store.set({ checked1: 3 })}\n            />\n          </View>\n        )}\n      </State>\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>\n            <RadioButton\n              checked={state.checked2 == 1}\n              onPress={() => store.set({ checked2: 1 })}\n              uncheckedBorderColor={'#009688'}\n              radioButtonColor={'#009688'}\n              rippleColor={'#009688'}\n            />\n            <RadioButton\n              checked={state.checked2 == 2}\n              onPress={() => store.set({ checked2: 2 })}\n              uncheckedBorderColor={'#009688'}\n              radioButtonColor={'#009688'}\n              rippleColor={'#009688'}\n            />\n            <RadioButton\n              checked={state.checked2 == 3}\n              onPress={() => store.set({ checked2: 3 })}\n              uncheckedBorderColor={'#009688'}\n              radioButtonColor={'#009688'}\n              rippleColor={'#009688'}\n            />\n          </View>\n        )}\n      </State>\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>\n            <RadioButton\n              checked={state.checked3 == 1}\n              onPress={() => store.set({ checked2: 1 })}\n              disabled\n            />\n            <RadioButton\n              checked={state.checked3 == 1}\n              onPress={() => store.set({ checked2: 2 })}\n              disabled\n            />\n            <RadioButton\n              checked={state.checked3 == 1}\n              onPress={() => store.set({ checked2: 3 })}\n              disabled\n            />\n          </View>\n        )}\n      </State>\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>\n            <RadioButton\n              checked={state.checked4 == 1}\n              onPress={() => store.set({ checked4: 1 })}\n              error\n            />\n            <RadioButton\n              checked={state.checked4 == 2}\n              onPress={() => store.set({ checked4: 2 })}\n              error\n            />\n            <RadioButton\n              checked={state.checked4 == 3}\n              onPress={() => store.set({ checked4: 3 })}\n              error\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('label', () => (\n    <Container>\n      <Header title={'Radio Button'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={{ flexDirection: 'column', marginBottom: 20 }}>\n            <RadioButton\n              checked={state.checked == 1}\n              onPress={() => store.set({ checked: 1 })}\n              label=\"Home\"\n            />\n            <RadioButton\n              checked={state.checked == 2}\n              onPress={() => store.set({ checked: 2 })}\n              label=\"Work\"\n            />\n            <RadioButton\n              checked={state.checked == 3}\n              onPress={() => store.set({ checked: 3 })}\n              label=\"Anywhere\"\n            />\n          </View>\n        )}\n      </State>\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View\n            style={{\n              flexDirection: 'row',\n              flexWrap: 'wrap',\n              marginBottom: 20,\n            }}>\n            <RadioButton\n              checked={state.checked1 == 1}\n              radioButtonColor={'#E91E63'}\n              rippleColor={'#E91E63'}\n              onPress={() => store.set({ checked1: 1 })}\n              label=\"Beach\"\n            />\n            <RadioButton\n              checked={state.checked1 == 2}\n              radioButtonColor={'#E91E63'}\n              rippleColor={'#E91E63'}\n              onPress={() => store.set({ checked1: 2 })}\n              label=\"Mountain\"\n            />\n            <RadioButton\n              checked={state.checked1 == 3}\n              radioButtonColor={'#E91E63'}\n              rippleColor={'#E91E63'}\n              onPress={() => store.set({ checked1: 3 })}\n              label=\"Woods\"\n            />\n          </View>\n        )}\n      </State>\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={{ flexDirection: 'row', marginBottom: 20 }}>\n            <RadioButton\n              checked={state.checked2 == 1}\n              onPress={() => store.set({ checked2: 1 })}\n              uncheckedBorderColor={'#009688'}\n              radioButtonColor={'#009688'}\n              rippleColor={'#009688'}\n              label=\"Rocky\"\n              labelPos=\"left\"\n            />\n            <RadioButton\n              checked={state.checked2 == 2}\n              onPress={() => store.set({ checked2: 2 })}\n              uncheckedBorderColor={'#009688'}\n              radioButtonColor={'#009688'}\n              rippleColor={'#009688'}\n              label=\"Mountain\"\n              labelPos=\"left\"\n            />\n            <RadioButton\n              checked={state.checked2 == 3}\n              onPress={() => store.set({ checked2: 3 })}\n              uncheckedBorderColor={'#009688'}\n              radioButtonColor={'#009688'}\n              rippleColor={'#009688'}\n              label=\"High\"\n              labelPos=\"left\"\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/RadioButton/RadioButton.styles.js",
    "content": "import { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  container: {\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  ripple: {\n    borderRadius: 18,\n    alignItems: 'center',\n    justifyContent: 'center',\n    height: 40,\n    width: 40,\n  },\n  radio: {\n    height: 20,\n    width: 20,\n    borderRadius: 24,\n    borderWidth: 2,\n    margin: 2,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  radioDot: {\n    height: 10,\n    width: 10,\n    borderRadius: 5,\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/RadioButton/RadioButton.test.js",
    "content": "import React from 'react';\nimport { RadioButton } from '../../';\n\nimport renderer from 'react-test-renderer';\n\ntest('RadioButton Renders', () => {\n  const tree = renderer.create(<RadioButton />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/RadioButton/__snapshots__/RadioButton.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`RadioButton Renders 1`] = `\n<View\n  style={\n    Array [\n      Object {\n        \"alignItems\": \"center\",\n        \"flexDirection\": \"row\",\n      },\n      undefined,\n    ]\n  }\n>\n  <View\n    accessible={true}\n    displayUntilPressOut={true}\n    onLayout={[Function]}\n    onResponderGrant={[Function]}\n    onResponderMove={[Function]}\n    onResponderRelease={[Function]}\n    onResponderTerminate={[Function]}\n    onResponderTerminationRequest={[Function]}\n    onRippleAnimation={[Function]}\n    onStartShouldSetResponder={[Function]}\n    rippleCentered={true}\n    rippleColor=\"rgba(0,0,0,.8)\"\n    rippleDuration={400}\n    rippleFades={true}\n    rippleOpacity={0.3}\n    rippleSequential={false}\n    rippleSize={0}\n    style={\n      Object {\n        \"alignItems\": \"center\",\n        \"borderRadius\": 18,\n        \"height\": 40,\n        \"justifyContent\": \"center\",\n        \"width\": 40,\n      }\n    }\n    testID=\"mb-ripple\"\n    useNativeDriver={true}\n  >\n    <View\n      style={\n        Object {\n          \"alignItems\": \"center\",\n          \"borderColor\": \"rgba(0,0,0,.5)\",\n          \"borderRadius\": 24,\n          \"borderWidth\": 2,\n          \"height\": 20,\n          \"justifyContent\": \"center\",\n          \"margin\": 2,\n          \"width\": 20,\n        }\n      }\n      useNativeDriver={true}\n    />\n    <View\n      pointerEvents=\"none\"\n      style={\n        Array [\n          Object {\n            \"backgroundColor\": \"transparent\",\n            \"bottom\": 0,\n            \"left\": 0,\n            \"overflow\": \"hidden\",\n            \"position\": \"absolute\",\n            \"right\": 0,\n            \"top\": 0,\n            \"zIndex\": 10,\n          },\n          Object {\n            \"borderRadius\": 18,\n          },\n        ]\n      }\n    />\n  </View>\n</View>\n`;\n"
  },
  {
    "path": "src/Components/RadioButton/index.js",
    "content": "export { default } from './RadioButton';\n"
  },
  {
    "path": "src/Components/Ripple/Ripple.js",
    "content": "import PropTypes from 'prop-types';\nimport React, { PureComponent } from 'react';\nimport {\n  View,\n  Animated,\n  Easing,\n  TouchableWithoutFeedback,\n  Platform,\n} from 'react-native';\nimport styles from './Ripple.styles';\nimport { radius } from './Ripple.styles';\nexport default class Ripple extends PureComponent {\n  static defaultProps = {\n    ...TouchableWithoutFeedback.defaultProps,\n\n    rippleColor: 'rgba(0, 0, 0, .87)',\n    rippleOpacity: 0.3,\n    rippleDuration: 400,\n    rippleSize: 0,\n    rippleContainerBorderRadius: 0,\n    rippleCentered: false,\n    rippleSequential: false,\n    rippleFades: true,\n    disabled: false,\n    displayUntilPressOut: true,\n\n    onRippleAnimation: (animation, callback) => animation.start(callback),\n    testID: 'mb-ripple',\n  };\n\n  static propTypes = {\n    ...Animated.View.propTypes,\n    ...TouchableWithoutFeedback.propTypes,\n\n    rippleColor: PropTypes.string,\n    rippleOpacity: PropTypes.number,\n    rippleDuration: PropTypes.number,\n    rippleSize: PropTypes.number,\n    rippleContainerBorderRadius: PropTypes.number,\n    rippleCentered: PropTypes.bool,\n    rippleSequential: PropTypes.bool,\n    rippleFades: PropTypes.bool,\n    disabled: PropTypes.bool,\n    displayUntilPressOut: PropTypes.bool,\n\n    onRippleAnimation: PropTypes.func,\n    testID: PropTypes.string,\n  };\n\n  constructor(props) {\n    super(props);\n\n    this.onLayout = this.onLayout.bind(this);\n    this.onPress = this.onPress.bind(this);\n    this.onPressIn = this.onPressIn.bind(this);\n    this.onPressOut = this.onPressOut.bind(this);\n    this.onLongPress = this.onLongPress.bind(this);\n    this.onAnimationEnd = this.onAnimationEnd.bind(this);\n\n    this.renderRipple = this.renderRipple.bind(this);\n\n    this.unique = 0;\n    this.mounted = false;\n\n    this.rippleFades =\n      this.props.rippleFades && !this.props.displayUntilPressOut;\n    this.isPressingIn = false;\n    this.animationWaitingForEnd = false;\n\n    this.state = {\n      width: 0,\n      height: 0,\n      ripples: [],\n    };\n  }\n\n  componentDidMount() {\n    this.mounted = true;\n  }\n\n  componentWillUnmount() {\n    this.mounted = false;\n  }\n\n  onLayout(event) {\n    let { width, height } = event.nativeEvent.layout;\n    let { onLayout } = this.props;\n\n    if ('function' === typeof onLayout) {\n      onLayout(event);\n    }\n\n    this.setState({ width, height });\n  }\n\n  onPress(event) {\n    let { onPress } = this.props;\n\n    if ('function' === typeof onPress) {\n      requestAnimationFrame(() => onPress(event));\n    }\n  }\n\n  onLongPress(event) {\n    let { onLongPress, disabled } = this.props;\n    if (disabled) return;\n    if ('function' === typeof onLongPress) {\n      requestAnimationFrame(() => onLongPress(event));\n    }\n\n    this.startRipple(event);\n  }\n\n  onPressIn(event) {\n    const { onPressIn, rippleSequential, disabled } = this.props;\n    const { ripples } = this.state;\n    if (disabled) return;\n\n    this.isPressingIn = true;\n\n    if (!rippleSequential || !ripples.length) {\n      if (onPressIn) {\n        onPressIn(event);\n      }\n\n      this.startRipple(event);\n    }\n  }\n\n  onPressOut(event) {\n    let { onPressOut } = this.props;\n\n    if ('function' === typeof onPressOut) {\n      onPressOut(event);\n    }\n\n    this.signalAnimationEnd();\n    this.isPressingIn = false;\n  }\n\n  onAnimationEnd(event) {\n    if (this.props.displayUntilPressOut && this.isPressingIn) {\n      this.animationWaitingForEnd = true;\n      return;\n    }\n    if (this.props.onAnimationEnd) {\n      this.props.onAnimationEnd(event);\n    }\n\n    this.forceAnimationEnd();\n  }\n\n  signalAnimationEnd() {\n    if (this.animationWaitingForEnd) {\n      this.forceAnimationEnd();\n    }\n  }\n\n  forceAnimationEnd() {\n    if (this.mounted) {\n      this.setState(({ ripples }) => ({ ripples: ripples.slice(1) }));\n    }\n\n    this.animationWaitingForEnd = false;\n  }\n\n  webGetPositionInElement(e) {\n    var rect = e.nativeEvent.target.getBoundingClientRect();\n    var x = e.nativeEvent.pageX - rect.left; //x position within the element.\n    var y = e.nativeEvent.changedTouches[0].clientY - rect.top; //y position within the element.\n    return { x, y };\n  }\n\n  startRipple(event) {\n    let { width, height } = this.state;\n    let {\n      rippleDuration,\n      rippleCentered,\n      rippleSize,\n      onRippleAnimation,\n    } = this.props;\n\n    let w2 = 0.5 * width;\n    let h2 = 0.5 * height;\n\n    let { locationX, locationY } = event.nativeEvent;\n\n    if (Platform.OS === 'web') {\n      locationX = this.webGetPositionInElement(event).x;\n      locationY = this.webGetPositionInElement(event).y;\n    }\n    if (rippleCentered) {\n      locationX = w2;\n      locationY = h2;\n    }\n    let offsetX = Math.abs(w2 - locationX);\n    let offsetY = Math.abs(h2 - locationY);\n\n    let R =\n      rippleSize > 0\n        ? 0.5 * rippleSize\n        : Math.sqrt(Math.pow(w2 + offsetX, 2) + Math.pow(h2 + offsetY, 2));\n\n    let ripple = {\n      unique: this.unique++,\n      progress: new Animated.Value(0),\n      locationX,\n      locationY: locationY,\n      R,\n    };\n\n    const animation = Animated.timing(ripple.progress, {\n      toValue: 1,\n      easing: Easing.out(Easing.ease),\n      duration: rippleDuration,\n      useNativeDriver: true,\n    });\n\n    onRippleAnimation(animation, this.onAnimationEnd);\n\n    this.setState(({ ripples }) => ({ ripples: ripples.concat(ripple) }));\n  }\n\n  renderRipple({ unique, progress, locationX, locationY, R }) {\n    let { rippleColor, rippleOpacity } = this.props;\n    const rippleFades = this.rippleFades;\n\n    let rippleStyle = {\n      top: locationY - radius,\n      left: locationX - radius,\n      backgroundColor: rippleColor,\n\n      transform: [\n        {\n          scale: progress.interpolate({\n            inputRange: [0, 1],\n            outputRange: [0.5 / radius, R / radius],\n          }),\n        },\n      ],\n\n      opacity: rippleFades\n        ? progress.interpolate({\n            inputRange: [0, 1],\n            outputRange: [rippleOpacity, 0],\n          })\n        : rippleOpacity,\n    };\n\n    return (\n      <Animated.View\n        style={[styles.ripple, rippleStyle]}\n        key={unique}\n        useNativeDriver={true}\n      />\n    );\n  }\n\n  render() {\n    let { ripples } = this.state;\n    let { onPress, onPressIn, onPressOut, onLongPress, onLayout } = this;\n    let {\n      delayLongPress,\n      delayPressIn,\n      delayPressOut,\n      disabled,\n      hitSlop,\n      pressRetentionOffset,\n      children,\n      rippleContainerBorderRadius,\n      testID,\n      nativeID,\n      accessible,\n      accessibilityLabel,\n      panResponder,\n      ...props\n    } = this.props;\n\n    let touchableProps = {\n      delayLongPress,\n      delayPressIn,\n      delayPressOut,\n      disabled,\n      hitSlop,\n      pressRetentionOffset,\n      onPress,\n      onPressIn,\n      testID,\n      nativeID,\n      accessible,\n      accessibilityLabel,\n      onPressOut,\n      onLongPress: props.onLongPress ? onLongPress : undefined,\n      onLayout,\n    };\n\n    let containerStyle = {\n      borderRadius: rippleContainerBorderRadius,\n    };\n\n    return (\n      <TouchableWithoutFeedback\n        {...touchableProps}\n        {...panResponder}\n        testID={testID}>\n        <Animated.View useNativeDriver={true} {...props}>\n          {children}\n          <View style={[styles.container, containerStyle]} pointerEvents=\"none\">\n            {ripples.map(this.renderRipple)}\n          </View>\n        </Animated.View>\n      </TouchableWithoutFeedback>\n    );\n  }\n}\n"
  },
  {
    "path": "src/Components/Ripple/Ripple.stories.js",
    "content": "import React from 'react';\nimport { Text, View } from 'react-native';\n\nimport { Ripple, Card, Avatar } from '../../';\n\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\n\nexport default storiesOf('Components|Ripple', module)\n  .addParameters({ jest: ['Ripple'] })\n  .add('from click', () => (\n    <Container scroll>\n      <Header title={'Ripple from where it was clicked'} />\n      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>\n        <Ripple\n          rippleColor={'blue'}\n          style={{\n            width: 180,\n            height: 250,\n            justifyContent: 'center',\n            alignItems: 'center',\n            borderWidth: 1,\n            borderColor: 'black',\n            borderRadius: 5,\n          }}>\n          <Text>Click Me</Text>\n        </Ripple>\n        <Ripple style={{ width: 200, height: 200, marginLeft: 40 }}>\n          <Card\n            shadow={4}\n            style={{\n              width: 200,\n              height: 200,\n              justifyContent: 'center',\n              alignItems: 'center',\n            }}>\n            <Text>Click Me</Text>\n          </Card>\n        </Ripple>\n      </View>\n      <View style={{ flexDirection: 'row', flexWrap: 'wrap', marginTop: 40 }}>\n        <Ripple\n          rippleColor={'#E91E63'}\n          rippleContainerBorderRadius={100}\n          style={{\n            width: 100,\n            height: 100,\n            justifyContent: 'center',\n            alignItems: 'center',\n          }}>\n          <Avatar\n            type=\"icon\"\n            content=\"add\"\n            size={48}\n            color={'#E91E63'}\n            contentColor={'white'}\n          />\n        </Ripple>\n        <Ripple\n          rippleColor={'#9C27B0'}\n          style={{\n            width: 300,\n            height: 200,\n            marginLeft: 40,\n            justifyContent: 'center',\n            alignItems: 'center',\n          }}\n          rippleContainerBorderRadius={100}>\n          <Text>Massive Button</Text>\n        </Ripple>\n      </View>\n    </Container>\n  ))\n  .add('from center', () => (\n    <Container scroll>\n      <Header title={'Ripple form center'} />\n      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>\n        <Ripple\n          rippleColor={'blue'}\n          rippleCentered\n          style={{\n            width: 180,\n            height: 250,\n            justifyContent: 'center',\n            alignItems: 'center',\n            borderWidth: 1,\n            borderColor: 'black',\n            borderRadius: 5,\n          }}>\n          <Text>Click Me</Text>\n        </Ripple>\n        <Ripple\n          rippleCentered\n          style={{ width: 200, height: 200, marginLeft: 40 }}>\n          <Card\n            shadow={4}\n            style={{\n              width: 200,\n              height: 200,\n              justifyContent: 'center',\n              alignItems: 'center',\n            }}>\n            <Text>Click Me</Text>\n          </Card>\n        </Ripple>\n      </View>\n    </Container>\n  ))\n  .add('sequential', () => (\n    <Container scroll>\n      <Header title={'Sequential Ripple'} />\n      <Text style={{ marginBottom: 40 }}>\n        Try clicking quickly versus other demos\n      </Text>\n      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>\n        <Ripple\n          rippleColor={'blue'}\n          rippleSequential\n          style={{\n            width: 180,\n            height: 250,\n            justifyContent: 'center',\n            alignItems: 'center',\n            borderWidth: 1,\n            borderColor: 'black',\n            borderRadius: 5,\n          }}>\n          <Text>Click Me</Text>\n        </Ripple>\n        <Ripple\n          rippleCentered\n          rippleSequential\n          style={{ width: 200, height: 200, marginLeft: 40 }}>\n          <Card\n            shadow={4}\n            style={{\n              width: 200,\n              height: 200,\n              justifyContent: 'center',\n              alignItems: 'center',\n            }}>\n            <Text>Click Me</Text>\n          </Card>\n        </Ripple>\n      </View>\n    </Container>\n  ))\n  .add('speed', () => (\n    <Container scroll>\n      <Header title={'Speed Ripple'} />\n\n      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>\n        <Ripple\n          rippleColor={'blue'}\n          rippleDuration={250}\n          style={{\n            width: 180,\n            height: 250,\n            justifyContent: 'center',\n            alignItems: 'center',\n            borderWidth: 1,\n            borderColor: 'black',\n            borderRadius: 5,\n          }}>\n          <Text>Really fast</Text>\n        </Ripple>\n        <Ripple\n          rippleCentered\n          rippleDuration={1000}\n          style={{ width: 200, height: 200, marginLeft: 40 }}>\n          <Card\n            shadow={4}\n            style={{\n              width: 200,\n              height: 200,\n              justifyContent: 'center',\n              alignItems: 'center',\n            }}>\n            <Text>Really Slow</Text>\n          </Card>\n        </Ripple>\n      </View>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/Ripple/Ripple.styles.js",
    "content": "import { StyleSheet } from 'react-native';\nexport const radius = 10;\n\nconst styles = StyleSheet.create({\n  container: {\n    ...StyleSheet.absoluteFillObject,\n\n    backgroundColor: 'transparent',\n    overflow: 'hidden',\n    zIndex: 10,\n  },\n\n  ripple: {\n    width: radius * 2,\n    height: radius * 2,\n    borderRadius: radius,\n    overflow: 'hidden',\n    position: 'absolute',\n    zIndex: 10,\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Ripple/Ripple.test.js",
    "content": "import React from 'react';\nimport { Ripple } from '../../';\n\nimport renderer from 'react-test-renderer';\n\ntest('Ripple Renders', () => {\n  const tree = renderer.create(<Ripple />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Ripple/__snapshots__/Ripple.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Ripple Renders 1`] = `\n<View\n  accessible={true}\n  displayUntilPressOut={true}\n  onLayout={[Function]}\n  onResponderGrant={[Function]}\n  onResponderMove={[Function]}\n  onResponderRelease={[Function]}\n  onResponderTerminate={[Function]}\n  onResponderTerminationRequest={[Function]}\n  onRippleAnimation={[Function]}\n  onStartShouldSetResponder={[Function]}\n  rippleCentered={false}\n  rippleColor=\"rgba(0, 0, 0, .87)\"\n  rippleDuration={400}\n  rippleFades={true}\n  rippleOpacity={0.3}\n  rippleSequential={false}\n  rippleSize={0}\n  testID=\"mb-ripple\"\n  useNativeDriver={true}\n>\n  <View\n    pointerEvents=\"none\"\n    style={\n      Array [\n        Object {\n          \"backgroundColor\": \"transparent\",\n          \"bottom\": 0,\n          \"left\": 0,\n          \"overflow\": \"hidden\",\n          \"position\": \"absolute\",\n          \"right\": 0,\n          \"top\": 0,\n          \"zIndex\": 10,\n        },\n        Object {\n          \"borderRadius\": 0,\n        },\n      ]\n    }\n  />\n</View>\n`;\n"
  },
  {
    "path": "src/Components/Ripple/index.js",
    "content": "export { default } from './Ripple';\n"
  },
  {
    "path": "src/Components/Select/Select.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  TouchableHighlight,\n  View,\n  FlatList,\n  Platform,\n  Dimensions,\n} from 'react-native';\n\nimport Menu from '../Menu/Menu.js';\nimport MenuItem from '../Menu/MenuItem/MenuItem.js';\nimport Icon from '../Icon/Icon.js';\nimport TextField from '../TextField/TextField.js';\n\nimport withTheme from '../../Theme/withTheme';\nimport styles from './Select.styles';\n\nconst { height } = Dimensions.get('window');\n\nclass Select extends Component {\n  static propTypes = {\n    onSelect: PropTypes.func,\n    buttonStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    label: PropTypes.string,\n    selectedItem: PropTypes.node,\n    menuItems: PropTypes.array,\n    visible: PropTypes.bool,\n    textFieldProps: PropTypes.object,\n    menuProps: PropTypes.object,\n    type: PropTypes.string,\n    onBackdropPress: PropTypes.func,\n    theme: PropTypes.object,\n    testID: PropTypes.string,\n    fullWidth: PropTypes.bool,\n  };\n\n  state = {\n    visible: false,\n  };\n\n  onSelect = item => {\n    this.props.onSelect(item);\n    this.hideMenu();\n  };\n\n  showMenu() {\n    this.setState({\n      visible: true,\n    });\n  }\n\n  hideMenu() {\n    this.setState({\n      visible: false,\n    });\n  }\n\n  render() {\n    const {\n      buttonStyle,\n      label,\n      selectedItem,\n      menuItems,\n      textFieldProps,\n      menuProps,\n      type,\n      theme,\n      testID,\n      fullWidth,\n    } = this.props;\n\n    const { visible } = this.state;\n\n    let iconColor = visible ? theme.primary.main : '#757575';\n    if (textFieldProps && textFieldProps.error) iconColor = theme.error.main;\n\n    const platformStyles =\n      Platform.OS == 'web'\n        ? {\n            cursor: 'pointer',\n          }\n        : {};\n\n    const estimatedListHeight = menuItems.length * 48; // 48 is taken from MenuItem.styles#container\n    const menuListItemsWrapperStyle =\n      estimatedListHeight > height ? { height: 400 } : null;\n\n    return (\n      <Menu\n        style={[styles.menu, { flex: 1 }]}\n        sameWidth\n        visible={visible}\n        fullWidth={fullWidth}\n        modalMenuStyle={{\n          marginTop: textFieldProps && textFieldProps.dense ? 60 : 71,\n          width: '100%',\n          marginLeft: Platform.OS !== 'web' ? 6 : 0,\n        }}\n        onBackdropPress={() => this.hideMenu()}\n        testID={testID}\n        button={\n          <TouchableHighlight\n            onPress={() => this.showMenu()}\n            style={[\n              styles.button,\n              { width: fullWidth ? '100%' : 'auto' },\n              buttonStyle,\n            ]}\n            underlayColor={'transparent'}>\n            <View style={styles.innerView}>\n              <TextField\n                type={type ? type : 'flat'}\n                label={label}\n                value={selectedItem}\n                focused={visible}\n                editable={false}\n                style={[\n                  styles.textfield,\n                  platformStyles,\n                  textFieldProps && textFieldProps.style,\n                ]}\n                trailingIcon={\n                  <Icon\n                    name=\"arrow-drop-down\"\n                    size={24}\n                    color={iconColor}\n                    style={styles.icon}\n                  />\n                }\n                {...textFieldProps}\n              />\n            </View>\n          </TouchableHighlight>\n        }\n        {...menuProps}>\n        <View style={menuListItemsWrapperStyle}>\n          <FlatList\n            data={menuItems}\n            renderItem={({ item }) => {\n              return (\n                <MenuItem\n                  key={item.id}\n                  text={item.name}\n                  onPress={() => this.onSelect(item)}\n                  style={{ flex: 1 }}\n                />\n              );\n            }}\n          />\n        </View>\n      </Menu>\n    );\n  }\n}\n\nexport default withTheme(Select);\n"
  },
  {
    "path": "src/Components/Select/Select.styles.js",
    "content": "import { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  button: {\n    width: '100%',\n    minWidth: '100%',\n    height: 56,\n    alignItems: 'center',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: 8,\n    borderRadius: 4,\n    position: 'relative',\n  },\n  innerView: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    width: '100%',\n    height: 56,\n    position: 'relative',\n    zIndex: 2,\n  },\n  textfield: {\n    width: '100%',\n    minWidth: '100%',\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Select/SelectFilled/SelectFilled.stories.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\n\nimport { Select, Icon } from '../../..';\nimport { State, Store } from '@sambego/storybook-state';\nimport Header from '../../../storybook/components/Header';\nimport Container from '../../../storybook/components/Container';\nimport { storiesOf } from '../../../storybook/helpers/storiesOf';\n\nconst store = new Store({\n  selectedItem: '',\n});\n\nconst data = [\n  { id: 1, name: 'Option 1' },\n  { id: 2, name: 'Option 2' },\n  { id: 3, name: 'Option 3' },\n];\n\nexport default storiesOf('Components|Select/Filled', module)\n  .addParameters({ jest: ['SelectFilled'] })\n  .add('simple', () => (\n    <Container>\n      <Header title={'Filled Select'} />\n\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <Select\n              type={'filled'}\n              label={'Select'}\n              menuItems={data}\n              onSelect={value => store.set({ selectedItem: value.name })}\n              selectedItem={state.selectedItem}\n            />\n            <Select\n              type={'filled'}\n              label={'Select'}\n              menuItems={data}\n              onSelect={value => store.set({ selectedItemTwo: value.name })}\n              selectedItem={state.selectedItemTwo}\n              textFieldProps={{\n                error: true,\n                helperText: 'error',\n                containerStyle: { marginTop: 40 },\n              }}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('dense', () => (\n    <Container>\n      <Header title={'Filled Select'} />\n\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <Select\n              type={'filled'}\n              label={'Select'}\n              menuItems={data}\n              onSelect={value => store.set({ selectedItem: value.name })}\n              selectedItem={state.selectedItem}\n              textFieldProps={{\n                dense: true,\n              }}\n            />\n            <Select\n              type={'filled'}\n              label={'Select'}\n              menuItems={data}\n              onSelect={value => store.set({ selectedItemTwo: value.name })}\n              selectedItem={state.selectedItemTwo}\n              textFieldProps={{\n                error: true,\n                dense: true,\n              }}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('leading icon', () => (\n    <Container>\n      <Header title={'Filled Select'} />\n\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <Select\n              type={'filled'}\n              label={'Select'}\n              menuItems={data}\n              onSelect={value => store.set({ selectedItem: value.name })}\n              selectedItem={state.selectedItem}\n              textFieldProps={{\n                leadingIcon: (\n                  <Icon name={'date-range'} size={24} color={'#6e6e6e'} />\n                ),\n              }}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/Select/SelectFilled/SelectFilled.test.js",
    "content": "import React from 'react';\nimport { Select } from '../../..';\n\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\n\ntest('SelectFilled Renders', () => {\n  const tree = renderer.render(<Select type=\"filled\" />);\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Select/SelectFilled/__snapshots__/SelectFilled.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`SelectFilled Renders 1`] = `\n<Context.Consumer>\n  [Function]\n</Context.Consumer>\n`;\n"
  },
  {
    "path": "src/Components/Select/SelectFlat/SelectFlat.stories.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\n\nimport { Select, Icon } from '../../..';\nimport { State, Store } from '@sambego/storybook-state';\nimport Header from '../../../storybook/components/Header';\nimport Container from '../../../storybook/components/Container';\nimport { storiesOf } from '../../../storybook/helpers/storiesOf';\n\nconst store = new Store({\n  selectedItem: '',\n});\n\nconst data = [\n  { id: 1, name: 'Option 1' },\n  { id: 2, name: 'Option 2' },\n  { id: 3, name: 'Option 3' },\n];\n\nexport default storiesOf('Components|Select/Flat', module)\n  .addParameters({ jest: ['SelectFlat'] })\n  .add('simple', () => (\n    <Container>\n      <Header title={'Flat Select'} />\n\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <Select\n              type={'flat'}\n              label={'Select'}\n              menuItems={data}\n              onSelect={value => store.set({ selectedItem: value.name })}\n              selectedItem={state.selectedItem}\n            />\n            <Select\n              type={'flat'}\n              label={'Select'}\n              menuItems={data}\n              onSelect={value => store.set({ selectedItemTwo: value.name })}\n              selectedItem={state.selectedItemTwo}\n              textFieldProps={{\n                error: true,\n                helperText: 'error',\n                containerStyle: { marginTop: 40 },\n              }}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('dense', () => (\n    <Container>\n      <Header title={'Flat Select'} />\n\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <Select\n              type={'flat'}\n              label={'Select'}\n              menuItems={data}\n              onSelect={value => store.set({ selectedItem: value.name })}\n              selectedItem={state.selectedItem}\n              textFieldProps={{\n                dense: true,\n              }}\n            />\n            <Select\n              type={'flat'}\n              label={'Select'}\n              menuItems={data}\n              onSelect={value => store.set({ selectedItemTwo: value.name })}\n              selectedItem={state.selectedItemTwo}\n              textFieldProps={{\n                error: true,\n                dense: true,\n              }}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('leading icon', () => (\n    <Container>\n      <Header title={'Flat Select'} />\n\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <Select\n              type={'flat'}\n              label={'Select'}\n              menuItems={data}\n              onSelect={value => store.set({ selectedItem: value.name })}\n              selectedItem={state.selectedItem}\n              textFieldProps={{\n                leadingIcon: (\n                  <Icon name={'date-range'} size={24} color={'#6e6e6e'} />\n                ),\n              }}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/Select/SelectFlat/SelectFlat.test.js",
    "content": "import React from 'react';\nimport { Select } from '../../..';\n\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\n\ntest('SelectFlat Renders', () => {\n  const tree = renderer.render(<Select type=\"flat\" />);\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Select/SelectFlat/__snapshots__/SelectFlat.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`SelectFlat Renders 1`] = `\n<Context.Consumer>\n  [Function]\n</Context.Consumer>\n`;\n"
  },
  {
    "path": "src/Components/Select/SelectOutlined/SelectOutlined.stories.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\n\nimport { Select, Icon } from '../../..';\nimport { State, Store } from '@sambego/storybook-state';\nimport Header from '../../../storybook/components/Header';\nimport Container from '../../../storybook/components/Container';\nimport { storiesOf } from '../../../storybook/helpers/storiesOf';\n\nconst store = new Store({\n  selectedItem: '',\n  selectedItemTwo: '',\n});\n\nconst data = [\n  { id: 1, name: 'Option 1' },\n  { id: 2, name: 'Option 2' },\n  { id: 3, name: 'Option 3' },\n  { id: 4, name: 'Option 4' },\n  { id: 5, name: 'Option 5' },\n  { id: 6, name: 'Option 6' },\n  { id: 7, name: 'Option 7' },\n  { id: 8, name: 'Option 8' },\n  { id: 9, name: 'Option 9' },\n  { id: 10, name: 'Option 10' },\n  { id: 11, name: 'Option 11' },\n  { id: 12, name: 'Option 12' },\n  { id: 13, name: 'Option 13' },\n  { id: 14, name: 'Option 14' },\n  { id: 15, name: 'Option 15' },\n  { id: 16, name: 'Option 16' },\n  { id: 17, name: 'Option 17' },\n  { id: 18, name: 'Option 18' },\n  { id: 19, name: 'Option 19' },\n];\n\nexport default storiesOf('Components|Select/Outlined', module)\n  .addParameters({ jest: ['SelectOutlined'] })\n  .add('simple', () => (\n    <Container>\n      <Header title={'Outlined Select'} />\n\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <Select\n              type={'outlined'}\n              label={'Select'}\n              menuItems={data.slice(0, 4)}\n              onSelect={value => store.set({ selectedItem: value.name })}\n              selectedItem={state.selectedItem}\n            />\n            <Select\n              type={'outlined'}\n              label={'Select'}\n              menuItems={data}\n              onSelect={value => store.set({ selectedItemTwo: value.name })}\n              selectedItem={state.selectedItemTwo}\n              textFieldProps={{\n                error: true,\n                helperText: 'error',\n                containerStyle: { marginTop: 40 },\n              }}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('dense', () => (\n    <Container>\n      <Header title={'Outlined Select'} />\n\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <Select\n              type={'outlined'}\n              label={'Select'}\n              menuItems={data}\n              onSelect={value => store.set({ selectedItem: value.name })}\n              selectedItem={state.selectedItem}\n              textFieldProps={{\n                dense: true,\n              }}\n            />\n            <Select\n              type={'outlined'}\n              label={'Select'}\n              menuItems={data}\n              onSelect={value => store.set({ selectedItemTwo: value.name })}\n              selectedItem={state.selectedItemTwo}\n              textFieldProps={{\n                error: true,\n                dense: true,\n              }}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('leading icon', () => (\n    <Container>\n      <Header title={'Outlined Select'} />\n\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <Select\n              type={'outlined'}\n              label={'Select'}\n              menuItems={data}\n              onSelect={value => store.set({ selectedItem: value.name })}\n              selectedItem={state.selectedItem}\n              textFieldProps={{\n                leadingIcon: (\n                  <Icon name={'date-range'} size={24} color={'#6e6e6e'} />\n                ),\n              }}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/Select/SelectOutlined/SelectOutlined.test.js",
    "content": "import React from 'react';\nimport { Select } from '../../..';\n\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\n\ntest('SelectOutlined Renders', () => {\n  const tree = renderer.render(<Select type=\"outlined\" />);\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Select/SelectOutlined/__snapshots__/SelectOutlined.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`SelectOutlined Renders 1`] = `\n<Context.Consumer>\n  [Function]\n</Context.Consumer>\n`;\n"
  },
  {
    "path": "src/Components/Select/index.js",
    "content": "export { default } from './Select';\n"
  },
  {
    "path": "src/Components/SheetBottom/SheetBottom.js",
    "content": "import SheetBottom from './SheetBottom.web';\n\nexport default SheetBottom;\n"
  },
  {
    "path": "src/Components/SheetBottom/SheetBottom.native.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  View,\n  TouchableOpacity,\n  Animated,\n  PanResponder,\n  Modal,\n  Dimensions,\n  SafeAreaView,\n} from 'react-native';\nimport styles from './SheetBottom.styles';\n\nclass SheetBottom extends Component {\n  constructor(props) {\n    super(props);\n    this.createPanResponder();\n  }\n\n  static propTypes = {\n    duration: PropTypes.number,\n    onBackdropPress: PropTypes.func,\n    onSwipeDown: PropTypes.func,\n    onSwipeUp: PropTypes.func,\n    children: PropTypes.node,\n    wrapperStyles: PropTypes.object,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    visible: PropTypes.bool,\n    cardVerticalPadding: PropTypes.number,\n    pageHeight: PropTypes.number,\n    testID: PropTypes.string,\n  };\n\n  static defaultProps = {\n    duration: 200,\n    cardVerticalPadding: 20,\n  };\n\n  state = {\n    internalVisible: false,\n    pan: new Animated.ValueXY(),\n    initialHeight: 0,\n    initialWidth: 0,\n    fullHeight: 0,\n  };\n\n  componentDidMount() {\n    const { visible, pageHeight } = this.props;\n    const { pan } = this.state;\n    if (visible) {\n      this._open();\n    }\n    this.createPanResponder();\n    const fullHeight = pageHeight\n      ? pageHeight\n      : Dimensions.get('window').height;\n    pan.setValue({ x: 0, y: fullHeight });\n    this.setState({\n      fullHeight,\n    });\n  }\n\n  componentDidUpdate(prevProps) {\n    const { visible } = this.props;\n\n    if (visible != prevProps.visible) {\n      if (visible) {\n        this._open();\n      } else {\n        this._close();\n      }\n    }\n  }\n\n  onMenuLayout = e => {\n    const { pan, initialHeight } = this.state;\n    const { width, height } = e.nativeEvent.layout;\n    if (height == 0) return;\n    if (height <= initialHeight) return;\n\n    const windowHeight = Dimensions.get('window').height;\n\n    this.setState(\n      {\n        initialWidth: width,\n        initialHeight: height,\n        fullHeight: windowHeight,\n      },\n      () => {\n        pan.setValue({ x: 0, y: windowHeight });\n        this.createPanResponder();\n      },\n    );\n  };\n\n  animateSheet(visible) {\n    const { cardVerticalPadding, duration } = this.props;\n    const { initialHeight, fullHeight, pan } = this.state;\n\n    if (visible) {\n      this.setState({ internalVisible: true }, () => {\n        if (initialHeight == 0) {\n          setTimeout(() => this.animateSheet(true), 100);\n          return;\n        }\n        Animated.spring(pan, {\n          useNativeDriver: true,\n          toValue: {\n            x: 0,\n            y: fullHeight - initialHeight - cardVerticalPadding,\n          },\n        }).start();\n      });\n    } else {\n      Animated.timing(pan, {\n        useNativeDriver: true,\n        toValue: { x: 0, y: fullHeight },\n        duration: duration,\n      }).start(() => {\n        this.setState({ internalVisible: false });\n      });\n    }\n  }\n\n  createPanResponder = () => {\n    const { onSwipeDown, onSwipeUp, cardVerticalPadding } = this.props;\n    const { pan, initialHeight, fullHeight } = this.state;\n\n    this.panResponder = PanResponder.create({\n      onStartShouldSetPanResponder: () => true,\n      onPanResponderMove: (e, gestureState) => {\n        if (gestureState.dy < 80 && gestureState.dy > -40) {\n          Animated.timing(pan, {\n            useNativeDriver: true,\n            toValue: {\n              x: 0,\n              y:\n                fullHeight -\n                initialHeight -\n                cardVerticalPadding +\n                gestureState.dy,\n            },\n            duration: 0,\n          }).start();\n        }\n      },\n      onPanResponderRelease: (e, gestureState) => {\n        if (initialHeight / 4 - gestureState.dy < 0) {\n          if (onSwipeDown) onSwipeDown();\n        } else if (initialHeight / 4 + gestureState.dy > 0) {\n          if (onSwipeUp) onSwipeUp();\n        }\n      },\n    });\n  };\n\n  _open() {\n    this.animateSheet(true);\n  }\n\n  _close = () => {\n    this.animateSheet(false);\n    this.setState({ initialHeight: 0 });\n  };\n\n  _onBackdropPress = () => {\n    const { onBackdropPress } = this.props;\n\n    if (onBackdropPress) onBackdropPress();\n  };\n\n  _handlePlatform() {\n    const { internalVisible } = this.state;\n\n    return (\n      <Modal\n        transparent\n        animationType={'none'}\n        visible={internalVisible}\n        onRequestClose={this._close}\n        supportedOrientations={['portrait', 'landscape']}>\n        {this._renderContent()}\n      </Modal>\n    );\n  }\n\n  _renderContent() {\n    const {\n      children,\n      wrapperStyles,\n      style,\n      cardVerticalPadding,\n      testID,\n    } = this.props;\n    const { pan, fullHeight } = this.state;\n\n    return (\n      <View style={[styles.wrapper, wrapperStyles]} testID={testID}>\n        <TouchableOpacity\n          style={styles.mask}\n          activeOpacity={1}\n          onPress={this._onBackdropPress}\n        />\n\n        <Animated.View\n          useNativeDriver={true}\n          {...this.panResponder.panHandlers}\n          style={[\n            styles.container,\n            style,\n\n            {\n              height: fullHeight,\n              paddingVertical: cardVerticalPadding,\n              transform: [{ translateY: pan.y }],\n            },\n          ]}>\n          <SafeAreaView onLayout={this.onMenuLayout}>{children}</SafeAreaView>\n        </Animated.View>\n      </View>\n    );\n  }\n\n  render() {\n    return this._handlePlatform();\n  }\n}\n\nexport default SheetBottom;\n"
  },
  {
    "path": "src/Components/SheetBottom/SheetBottom.stories.js",
    "content": "import React from 'react';\nimport { View, Platform } from 'react-native';\n\nimport { SheetBottom, Button, List, ListItem, Icon } from '../../';\nimport { State, Store } from '@sambego/storybook-state';\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\n\nconst store = new Store({\n  visible: false,\n});\n\nexport default storiesOf('Components|SheetBottom', module)\n  .addParameters({ jest: ['SheetBottom'] })\n  .add('Modal', () => (\n    <Container>\n      <Header title={'SheetBottom'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={{ flex: 1, height: 400 }}>\n            <Button\n              text=\"Open Sheet\"\n              onPress={() => {\n                store.set({ visible: true });\n              }}\n            />\n            <SheetBottom\n              visible={state.visible}\n              pageHeight={Platform.OS == 'web' ? 600 : null}\n              onBackdropPress={() => store.set({ visible: false })}\n              onSwipeDown={() => store.set({ visible: false })}>\n              <List>\n                <ListItem\n                  text={'Attractions'}\n                  icon={<Icon name={'local-movies'} size={24} />}\n                />\n                <ListItem\n                  text={'Dining'}\n                  icon={<Icon name={'local-dining'} size={24} />}\n                />\n                <ListItem\n                  text={'Education'}\n                  icon={<Icon name={'edit'} size={24} />}\n                />\n                <ListItem\n                  text={'Health'}\n                  icon={<Icon name={'favorite'} size={24} />}\n                />\n                <ListItem\n                  text={'Family'}\n                  icon={<Icon name={'group'} size={24} />}\n                />\n                <ListItem\n                  text={'Office'}\n                  icon={<Icon name={'content-cut'} size={24} />}\n                />\n                <ListItem\n                  text={'Promotions'}\n                  icon={<Icon name={'loyalty'} size={24} />}\n                />\n              </List>\n            </SheetBottom>\n          </View>\n        )}\n      </State>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/SheetBottom/SheetBottom.styles.js",
    "content": "import { StyleSheet } from 'react-native';\nimport shadow from '../../Utils/Shadow/shadow';\n\nconst styles = StyleSheet.create({\n  wrapper: {\n    flex: 1,\n    backgroundColor: '#00000077',\n  },\n  mask: {\n    backgroundColor: 'transparent',\n    width: '100%',\n    height: '100%',\n    zIndex: -1,\n    position: 'absolute',\n    top: 0,\n    left: 0,\n  },\n  container: {\n    backgroundColor: '#fff',\n    width: '100%',\n    overflow: 'hidden',\n    paddingVertical: 20,\n    zIndex: 1000,\n\n    ...shadow(16),\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/SheetBottom/SheetBottom.test.js",
    "content": "import React from 'react';\nimport { SheetBottom } from '../../';\n\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\n\ntest('SheetBottom Renders', () => {\n  const tree = renderer.render(<SheetBottom />);\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/SheetBottom/SheetBottom.web.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  View,\n  TouchableOpacity,\n  Animated,\n  PanResponder,\n  Modal,\n  Platform,\n  Dimensions,\n} from 'react-native';\nimport styles from './SheetBottom.styles';\nimport WebModal from 'modal-enhanced-react-native-web';\n\nclass SheetBottom extends Component {\n  constructor(props) {\n    super(props);\n    this.createPanResponder(this.props);\n  }\n\n  static propTypes = {\n    duration: PropTypes.number,\n    onBackdropPress: PropTypes.func,\n    onSwipeDown: PropTypes.func,\n    onSwipeUp: PropTypes.func,\n    children: PropTypes.node,\n    wrapperStyles: PropTypes.object,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    visible: PropTypes.bool,\n    cardVerticalPadding: PropTypes.number,\n    pageHeight: PropTypes.number,\n    testID: PropTypes.string,\n  };\n\n  static defaultProps = {\n    duration: 200,\n    cardVerticalPadding: 20,\n  };\n\n  state = {\n    internalVisible: false,\n    pan: new Animated.ValueXY(),\n    initialHeight: 0,\n    initialWidth: 0,\n    fullHeight: 0,\n  };\n\n  componentDidMount() {\n    const { visible, pageHeight } = this.props;\n    const { pan } = this.state;\n    if (visible) {\n      this._open();\n    }\n\n    const fullHeight = pageHeight\n      ? pageHeight\n      : Dimensions.get('window').height;\n    this.createPanResponder(this.props);\n    pan.setValue({ x: 0, y: fullHeight });\n    this.setState({\n      fullHeight,\n    });\n  }\n\n  componentDidUpdate(prevProps) {\n    const { visible } = this.props;\n\n    if (visible != prevProps.visible) {\n      if (visible) {\n        this._open();\n      } else {\n        this._close();\n      }\n    }\n  }\n\n  onMenuLayout = e => {\n    const { pan, initialHeight, fullHeight } = this.state;\n    const { width, height } = e.nativeEvent.layout;\n    if (height == 0) return;\n    if (height <= initialHeight) return;\n\n    this.setState(\n      {\n        initialWidth: width,\n        initialHeight: height,\n      },\n      () => {\n        pan.setValue({ x: 0, y: fullHeight });\n        this.createPanResponder(this.props);\n      },\n    );\n  };\n\n  animateSheet(visible) {\n    const { cardVerticalPadding, duration } = this.props;\n    const { initialHeight, fullHeight, pan } = this.state;\n\n    if (visible) {\n      this.setState({ internalVisible: true }, () => {\n        if (initialHeight == 0) {\n          setTimeout(() => this.animateSheet(true), 100);\n          return;\n        }\n        Animated.spring(pan, {\n          useNativeDriver: true,\n          toValue: {\n            x: 0,\n            y: fullHeight - initialHeight - cardVerticalPadding,\n          },\n        }).start();\n      });\n    } else {\n      Animated.timing(pan, {\n        useNativeDriver: true,\n        toValue: { x: 0, y: fullHeight },\n        duration: duration,\n      }).start(() => {\n        this.setState({ internalVisible: false });\n      });\n    }\n  }\n\n  createPanResponder = () => {\n    const { onSwipeDown, onSwipeUp, cardVerticalPadding } = this.props;\n    const { pan, initialHeight, fullHeight } = this.state;\n\n    this.panResponder = PanResponder.create({\n      onStartShouldSetPanResponder: () => true,\n      onPanResponderMove: (e, gestureState) => {\n        if (gestureState.dy < 80 && gestureState.dy > -40) {\n          Animated.timing(pan, {\n            useNativeDriver: true,\n            toValue: {\n              x: 0,\n              y:\n                fullHeight -\n                initialHeight -\n                cardVerticalPadding +\n                gestureState.dy,\n            },\n            duration: 0,\n          }).start();\n        }\n      },\n      onPanResponderRelease: (e, gestureState) => {\n        if (initialHeight / 4 - gestureState.dy < 0) {\n          if (onSwipeDown) onSwipeDown();\n        } else if (initialHeight / 4 + gestureState.dy > 0) {\n          if (onSwipeUp) onSwipeUp();\n        }\n      },\n    });\n  };\n\n  _open() {\n    this.animateSheet(true);\n  }\n\n  _close = () => {\n    this.animateSheet(false);\n  };\n\n  _onBackdropPress = () => {\n    const { onBackdropPress } = this.props;\n\n    if (onBackdropPress) onBackdropPress();\n  };\n\n  _handlePlatform() {\n    const { internalVisible } = this.state;\n    if (Platform.OS == 'web') {\n      return (\n        <WebModal\n          transparent\n          animationType={'none'}\n          visible={internalVisible}\n          onRequestClose={this._close}\n          style={{ margin: 0 }}>\n          {this._renderContent()}\n        </WebModal>\n      );\n    } else {\n      return (\n        <Modal\n          transparent\n          animationType={'none'}\n          visible={internalVisible}\n          onRequestClose={this._close}>\n          {this._renderContent()}\n        </Modal>\n      );\n    }\n  }\n\n  _renderContent() {\n    const {\n      children,\n      wrapperStyles,\n      style,\n      cardVerticalPadding,\n      testID,\n    } = this.props;\n    const { pan, fullHeight } = this.state;\n\n    return (\n      <View style={[styles.wrapper, wrapperStyles]} testID={testID}>\n        <TouchableOpacity\n          style={styles.mask}\n          activeOpacity={1}\n          onPress={this._onBackdropPress}\n        />\n\n        <Animated.View\n          useNativeDriver={true}\n          {...this.panResponder.panHandlers}\n          style={[\n            styles.container,\n            style,\n\n            {\n              position: 'absolute',\n              bottom: 0,\n              height: fullHeight,\n              paddingVertical: cardVerticalPadding,\n              transform: [{ translateY: pan.y }],\n            },\n          ]}>\n          <View onLayout={this.onMenuLayout}>{children}</View>\n        </Animated.View>\n      </View>\n    );\n  }\n\n  render() {\n    return this._handlePlatform();\n  }\n}\n\nexport default SheetBottom;\n"
  },
  {
    "path": "src/Components/SheetBottom/__snapshots__/SheetBottom.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`SheetBottom Renders 1`] = `\n<Component\n  animationType=\"none\"\n  hardwareAccelerated={false}\n  onRequestClose={[Function]}\n  supportedOrientations={\n    Array [\n      \"portrait\",\n      \"landscape\",\n    ]\n  }\n  transparent={true}\n  visible={false}\n>\n  <View\n    style={\n      Array [\n        Object {\n          \"backgroundColor\": \"#00000077\",\n          \"flex\": 1,\n        },\n        undefined,\n      ]\n    }\n  >\n    <TouchableOpacity\n      activeOpacity={1}\n      onPress={[Function]}\n      style={\n        Object {\n          \"backgroundColor\": \"transparent\",\n          \"height\": \"100%\",\n          \"left\": 0,\n          \"position\": \"absolute\",\n          \"top\": 0,\n          \"width\": \"100%\",\n          \"zIndex\": -1,\n        }\n      }\n    />\n    <AnimatedComponent\n      onMoveShouldSetResponder={[Function]}\n      onMoveShouldSetResponderCapture={[Function]}\n      onResponderEnd={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderReject={[Function]}\n      onResponderRelease={[Function]}\n      onResponderStart={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      onStartShouldSetResponderCapture={[Function]}\n      style={\n        Array [\n          Object {\n            \"backgroundColor\": \"#fff\",\n            \"overflow\": \"hidden\",\n            \"paddingVertical\": 20,\n            \"shadowColor\": \"#000\",\n            \"shadowOffset\": Object {\n              \"height\": 8,\n              \"width\": 0,\n            },\n            \"shadowOpacity\": 0.44,\n            \"shadowRadius\": 10.32,\n            \"width\": \"100%\",\n            \"zIndex\": 1000,\n          },\n          undefined,\n          Object {\n            \"height\": 0,\n            \"paddingVertical\": 20,\n            \"transform\": Array [\n              Object {\n                \"translateY\": 0,\n              },\n            ],\n          },\n        ]\n      }\n      useNativeDriver={true}\n    >\n      <SafeAreaView\n        onLayout={[Function]}\n      />\n    </AnimatedComponent>\n  </View>\n</Component>\n`;\n"
  },
  {
    "path": "src/Components/SheetBottom/index.js",
    "content": "export { default } from './SheetBottom';\n"
  },
  {
    "path": "src/Components/SheetSide/SheetSide.android.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  View,\n  TouchableOpacity,\n  Animated,\n  PanResponder,\n  Modal,\n  Platform,\n  Dimensions,\n  SafeAreaView,\n} from 'react-native';\nimport styles from './SheetSide.styles';\n\nconst needsSafeArea = Platform.OS === 'ios' && parseInt(Platform.Version, 10);\n\nclass SheetSide extends Component {\n  constructor(props) {\n    super(props);\n    this.createPanResponder(this.props);\n  }\n\n  static propTypes = {\n    duration: PropTypes.number,\n    onBackdropPress: PropTypes.func,\n    onSwipeLeft: PropTypes.func,\n    onSwipeRight: PropTypes.func,\n    children: PropTypes.node,\n    wrapperStyles: PropTypes.object,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    visible: PropTypes.bool,\n    pageWidth: PropTypes.number,\n    pageHeight: PropTypes.number,\n    widthPercentage: PropTypes.number,\n    side: PropTypes.string,\n    testID: PropTypes.string,\n    sheetWidth: PropTypes.number,\n  };\n\n  static defaultProps = {\n    duration: 200,\n    widthPercentage: 0.8,\n    side: 'right',\n    sheetWidth: 300,\n  };\n\n  state = {\n    internalVisible: false,\n    animatedPosition: new Animated.Value(0),\n    pan: new Animated.ValueXY(),\n    initialHeight: 0,\n    initialWidth: 0,\n    fullHeight: 0,\n    fullWidth: 0,\n  };\n\n  componentDidMount() {\n    const { visible, pageHeight, pageWidth, side } = this.props;\n    const { pan } = this.state;\n    if (visible) {\n      this._open();\n    }\n\n    this.createPanResponder(this.props);\n\n    const width = Dimensions.get('window').width;\n\n    pan.setValue({ x: side == 'left' ? -width : width, y: 0 });\n\n    this.setState({\n      fullHeight: pageHeight ? pageHeight : Dimensions.get('window').height,\n      fullWidth: pageWidth ? pageWidth : width,\n    });\n  }\n\n  componentDidUpdate(prevProps) {\n    const { visible } = this.props;\n\n    if (visible != prevProps.visible) {\n      if (visible) {\n        this._open();\n      } else {\n        this._close();\n      }\n    }\n  }\n\n  onMenuLayout = e => {\n    const { width, height } = e.nativeEvent.layout;\n\n    this.setState(\n      {\n        initialWidth: width,\n        initialHeight: height,\n      },\n      () => {\n        this.createPanResponder(this.props);\n      },\n    );\n  };\n\n  animateSheet(visible) {\n    const { duration, widthPercentage, side, sheetWidth } = this.props;\n    const { fullWidth, pan } = this.state;\n\n    let openValue =\n      Platform.OS == 'web'\n        ? fullWidth - sheetWidth\n        : fullWidth * (1 - widthPercentage);\n\n    let closeValue = fullWidth;\n\n    if (side == 'left') {\n      openValue = 0;\n      closeValue = -closeValue;\n    }\n\n    if (visible) {\n      this.setState({ internalVisible: true }, () => {\n        Animated.timing(pan, {\n          useNativeDriver: true,\n          toValue: {\n            x: openValue,\n            y: 0,\n          },\n          duration: duration,\n        }).start();\n      });\n    } else {\n      Animated.timing(pan, {\n        useNativeDriver: true,\n        toValue: { x: closeValue, y: 0 },\n        duration: duration,\n      }).start(() => {\n        this.setState({ internalVisible: false });\n      });\n    }\n  }\n\n  createPanResponder = () => {\n    const {\n      onSwipeLeft,\n      onSwipeRight,\n      widthPercentage,\n      sheetWidth,\n    } = this.props;\n    const { fullWidth } = this.state;\n\n    const sheetWidthCalculated =\n      Platform.OS == 'web' ? sheetWidth : fullWidth * widthPercentage;\n\n    this.panResponder = PanResponder.create({\n      onStartShouldSetPanResponder: () => true,\n\n      onPanResponderRelease: (e, gestureState) => {\n        if (sheetWidthCalculated / 4 - gestureState.dy < 0) {\n          if (onSwipeLeft) onSwipeLeft();\n        } else if (sheetWidthCalculated / 4 + gestureState.dy > 0) {\n          if (onSwipeRight) onSwipeRight();\n        }\n      },\n    });\n  };\n\n  _open() {\n    this.animateSheet(true);\n  }\n\n  _close = () => {\n    this.animateSheet(false);\n  };\n\n  _onBackdropPress = () => {\n    const { onBackdropPress } = this.props;\n\n    if (onBackdropPress) onBackdropPress();\n  };\n\n  _handlePlatform() {\n    const { internalVisible } = this.state;\n\n    return (\n      <Modal\n        transparent\n        animationType={'none'}\n        visible={internalVisible}\n        onRequestClose={this._close}>\n        {this._handleSafeView()}\n      </Modal>\n    );\n  }\n\n  _handleSafeView() {\n    const { fullWidth } = this.state;\n    if (needsSafeArea) {\n      return (\n        <SafeAreaView\n          style={[\n            styles.safeAreaView,\n            {\n              backgroundColor: 'transparent',\n              width: fullWidth,\n              height: '100%',\n            },\n          ]}>\n          {this._renderContent()}\n        </SafeAreaView>\n      );\n    } else {\n      return this._renderContent();\n    }\n  }\n\n  _renderContent() {\n    const {\n      children,\n      wrapperStyles,\n      style,\n      widthPercentage,\n      testID,\n      sheetWidth,\n    } = this.props;\n    const { pan, fullWidth } = this.state;\n\n    return (\n      <View style={[styles.wrapper, wrapperStyles]} testID={testID}>\n        <TouchableOpacity\n          style={styles.mask}\n          activeOpacity={1}\n          onPress={this._onBackdropPress}\n        />\n\n        <Animated.View\n          useNativeDriver={true}\n          {...this.panResponder.panHandlers}\n          style={[\n            styles.container,\n            style,\n\n            {\n              height: '100%',\n              width:\n                Platform.OS == 'web' ? sheetWidth : fullWidth * widthPercentage,\n              transform: [{ translateX: pan.x }],\n            },\n          ]}>\n          <View onLayout={this.onMenuLayout}>{children}</View>\n        </Animated.View>\n      </View>\n    );\n  }\n\n  render() {\n    return this._handlePlatform();\n  }\n}\n\nexport default SheetSide;\n"
  },
  {
    "path": "src/Components/SheetSide/SheetSide.ios.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  View,\n  TouchableOpacity,\n  Animated,\n  PanResponder,\n  Modal,\n  Platform,\n  Dimensions,\n  SafeAreaView,\n} from 'react-native';\nimport styles from './SheetSide.styles';\n\nconst needsSafeArea = Platform.OS === 'ios' && parseInt(Platform.Version, 10);\n\nclass SheetSide extends Component {\n  constructor(props) {\n    super(props);\n    this.createPanResponder(this.props);\n  }\n\n  static propTypes = {\n    duration: PropTypes.number,\n    onBackdropPress: PropTypes.func,\n    onSwipeLeft: PropTypes.func,\n    onSwipeRight: PropTypes.func,\n    children: PropTypes.node,\n    wrapperStyles: PropTypes.object,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    visible: PropTypes.bool,\n    pageWidth: PropTypes.number,\n    pageHeight: PropTypes.number,\n    widthPercentage: PropTypes.number,\n    side: PropTypes.string,\n    testID: PropTypes.string,\n    sheetWidth: PropTypes.number,\n  };\n\n  static defaultProps = {\n    duration: 200,\n    widthPercentage: 0.8,\n    side: 'right',\n    sheetWidth: 300,\n  };\n\n  state = {\n    internalVisible: false,\n    animatedPosition: new Animated.Value(0),\n    pan: new Animated.ValueXY(),\n    initialHeight: 0,\n    initialWidth: 0,\n    fullHeight: 0,\n    fullWidth: 0,\n  };\n\n  componentDidMount() {\n    const { visible, pageHeight, pageWidth, side } = this.props;\n    const { pan } = this.state;\n    if (visible) {\n      this._open();\n    }\n\n    this.createPanResponder(this.props);\n\n    const width = Dimensions.get('window').width;\n\n    pan.setValue({ x: side == 'left' ? -width : width, y: 0 });\n\n    this.setState({\n      fullHeight: pageHeight ? pageHeight : Dimensions.get('window').height,\n      fullWidth: pageWidth ? pageWidth : width,\n    });\n  }\n\n  componentDidUpdate(prevProps) {\n    const { visible } = this.props;\n\n    if (visible != prevProps.visible) {\n      if (visible) {\n        this._open();\n      } else {\n        this._close();\n      }\n    }\n  }\n\n  onMenuLayout = e => {\n    const { width, height } = e.nativeEvent.layout;\n\n    this.setState(\n      {\n        initialWidth: width,\n        initialHeight: height,\n      },\n      () => {\n        this.createPanResponder(this.props);\n      },\n    );\n  };\n\n  animateSheet(visible) {\n    const { duration, widthPercentage, side, sheetWidth } = this.props;\n    const { fullWidth, pan } = this.state;\n\n    let openValue =\n      Platform.OS == 'web'\n        ? fullWidth - sheetWidth\n        : fullWidth * (1 - widthPercentage);\n\n    let closeValue = fullWidth;\n\n    if (side == 'left') {\n      openValue = 0;\n      closeValue = -closeValue;\n    }\n\n    if (visible) {\n      this.setState({ internalVisible: true }, () => {\n        Animated.timing(pan, {\n          useNativeDriver: true,\n          toValue: {\n            x: openValue,\n            y: 0,\n          },\n          duration: duration,\n        }).start();\n      });\n    } else {\n      Animated.timing(pan, {\n        useNativeDriver: true,\n        toValue: { x: closeValue, y: 0 },\n        duration: duration,\n      }).start(() => {\n        this.setState({ internalVisible: false });\n      });\n    }\n  }\n\n  createPanResponder = () => {\n    const {\n      onSwipeLeft,\n      onSwipeRight,\n      widthPercentage,\n      sheetWidth,\n    } = this.props;\n    const { fullWidth } = this.state;\n\n    const sheetWidthCalculated =\n      Platform.OS == 'web' ? sheetWidth : fullWidth * widthPercentage;\n\n    this.panResponder = PanResponder.create({\n      onStartShouldSetPanResponder: () => true,\n\n      onPanResponderRelease: (e, gestureState) => {\n        if (sheetWidthCalculated / 4 - gestureState.dy < 0) {\n          if (onSwipeLeft) onSwipeLeft();\n        } else if (sheetWidthCalculated / 4 + gestureState.dy > 0) {\n          if (onSwipeRight) onSwipeRight();\n        }\n      },\n    });\n  };\n\n  _open() {\n    this.animateSheet(true);\n  }\n\n  _close = () => {\n    this.animateSheet(false);\n  };\n\n  _onBackdropPress = () => {\n    const { onBackdropPress } = this.props;\n\n    if (onBackdropPress) onBackdropPress();\n  };\n\n  _handlePlatform() {\n    const { internalVisible } = this.state;\n\n    return (\n      <Modal\n        transparent\n        animationType={'none'}\n        visible={internalVisible}\n        onRequestClose={this._close}>\n        {this._handleSafeView()}\n      </Modal>\n    );\n  }\n\n  _handleSafeView() {\n    const { fullWidth } = this.state;\n    if (needsSafeArea) {\n      return (\n        <SafeAreaView\n          style={[\n            styles.safeAreaView,\n            {\n              backgroundColor: 'transparent',\n              width: fullWidth,\n              height: '100%',\n            },\n          ]}>\n          {this._renderContent()}\n        </SafeAreaView>\n      );\n    } else {\n      return this._renderContent();\n    }\n  }\n\n  _renderContent() {\n    const {\n      children,\n      wrapperStyles,\n      style,\n      widthPercentage,\n      testID,\n      sheetWidth,\n    } = this.props;\n    const { pan, fullWidth } = this.state;\n\n    return (\n      <View style={[styles.wrapper, wrapperStyles]} testID={testID}>\n        <TouchableOpacity\n          style={styles.mask}\n          activeOpacity={1}\n          onPress={this._onBackdropPress}\n        />\n\n        <Animated.View\n          useNativeDriver={true}\n          {...this.panResponder.panHandlers}\n          style={[\n            styles.container,\n            style,\n\n            {\n              height: '100%',\n              width:\n                Platform.OS == 'web' ? sheetWidth : fullWidth * widthPercentage,\n              transform: [{ translateX: pan.x }],\n            },\n          ]}>\n          <View onLayout={this.onMenuLayout}>{children}</View>\n        </Animated.View>\n      </View>\n    );\n  }\n\n  render() {\n    return this._handlePlatform();\n  }\n}\n\nexport default SheetSide;\n"
  },
  {
    "path": "src/Components/SheetSide/SheetSide.js",
    "content": "import SheetSide from './SheetSide.web';\n\nexport default SheetSide;\n"
  },
  {
    "path": "src/Components/SheetSide/SheetSide.stories.js",
    "content": "import React from 'react';\nimport { View, Platform } from 'react-native';\n\nimport { SheetSide, Button, List, ListItem, Icon } from '../../';\nimport { State, Store } from '@sambego/storybook-state';\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\n\nconst store = new Store({\n  visible: false,\n});\n\nexport default storiesOf('Components|SheetSide', module)\n  .addParameters({ jest: ['SheetSide'] })\n  .add('Modal Right', () => (\n    <Container>\n      <Header title={'SheetSide'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={{ flex: 1, height: 400 }}>\n            <Button\n              text=\"Open Sheet\"\n              onPress={() => {\n                store.set({ visible: true });\n              }}\n            />\n            <SheetSide\n              visible={state.visible}\n              pageHeight={Platform.OS == 'web' ? 600 : null}\n              onBackdropPress={() => store.set({ visible: false })}\n              onSwipeRight={() => store.set({ visible: false })}>\n              <List>\n                <ListItem\n                  text={'Attractions'}\n                  icon={<Icon name={'local-movies'} size={24} />}\n                />\n                <ListItem\n                  text={'Dining'}\n                  icon={<Icon name={'local-dining'} size={24} />}\n                />\n                <ListItem\n                  text={'Education'}\n                  icon={<Icon name={'edit'} size={24} />}\n                />\n                <ListItem\n                  text={'Health'}\n                  icon={<Icon name={'favorite'} size={24} />}\n                />\n                <ListItem\n                  text={'Family'}\n                  icon={<Icon name={'group'} size={24} />}\n                />\n                <ListItem\n                  text={'Office'}\n                  icon={<Icon name={'content-cut'} size={24} />}\n                />\n                <ListItem\n                  text={'Promotions'}\n                  icon={<Icon name={'loyalty'} size={24} />}\n                />\n              </List>\n            </SheetSide>\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('Modal Left', () => (\n    <Container>\n      <Header title={'SheetSide'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={{ flex: 1, height: 400 }}>\n            <Button\n              text=\"Open Sheet\"\n              onPress={() => {\n                store.set({ visible: true });\n              }}\n            />\n            <SheetSide\n              visible={state.visible}\n              side={'left'}\n              pageHeight={Platform.OS == 'web' ? 600 : null}\n              onBackdropPress={() => store.set({ visible: false })}\n              onSwipeLeft={() => store.set({ visible: false })}>\n              <List>\n                <ListItem\n                  text={'Attractions'}\n                  icon={<Icon name={'local-movies'} size={24} />}\n                />\n                <ListItem\n                  text={'Dining'}\n                  icon={<Icon name={'local-dining'} size={24} />}\n                />\n                <ListItem\n                  text={'Education'}\n                  icon={<Icon name={'edit'} size={24} />}\n                />\n                <ListItem\n                  text={'Health'}\n                  icon={<Icon name={'favorite'} size={24} />}\n                />\n                <ListItem\n                  text={'Family'}\n                  icon={<Icon name={'group'} size={24} />}\n                />\n                <ListItem\n                  text={'Office'}\n                  icon={<Icon name={'content-cut'} size={24} />}\n                />\n                <ListItem\n                  text={'Promotions'}\n                  icon={<Icon name={'loyalty'} size={24} />}\n                />\n              </List>\n            </SheetSide>\n          </View>\n        )}\n      </State>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/SheetSide/SheetSide.styles.js",
    "content": "import { StyleSheet } from 'react-native';\nimport shadow from '../../Utils/Shadow/shadow';\n\nconst styles = StyleSheet.create({\n  wrapper: {\n    flex: 1,\n    backgroundColor: '#00000077',\n  },\n  mask: {\n    backgroundColor: 'transparent',\n    width: '100%',\n    height: '100%',\n    zIndex: -1,\n    position: 'absolute',\n    top: 0,\n    left: 0,\n  },\n  container: {\n    backgroundColor: '#fff',\n    overflow: 'hidden',\n    paddingVertical: 16,\n    zIndex: 1000,\n\n    ...shadow(16),\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/SheetSide/SheetSide.test.js",
    "content": "import React from 'react';\nimport { SheetSide } from '../../';\n\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\n\ntest('SheetSide Renders', () => {\n  const tree = renderer.render(<SheetSide />);\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/SheetSide/SheetSide.web.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  View,\n  TouchableOpacity,\n  Animated,\n  PanResponder,\n  Modal,\n  Platform,\n  Dimensions,\n  SafeAreaView,\n} from 'react-native';\nimport styles from './SheetSide.styles';\nimport WebModal from 'modal-enhanced-react-native-web';\n\nconst needsSafeArea = Platform.OS === 'ios' && parseInt(Platform.Version, 10);\n\nclass SheetSide extends Component {\n  constructor(props) {\n    super(props);\n    this.createPanResponder(this.props);\n  }\n\n  static propTypes = {\n    duration: PropTypes.number,\n    onBackdropPress: PropTypes.func,\n    onSwipeLeft: PropTypes.func,\n    onSwipeRight: PropTypes.func,\n    children: PropTypes.node,\n    wrapperStyles: PropTypes.object,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    visible: PropTypes.bool,\n    pageWidth: PropTypes.number,\n    pageHeight: PropTypes.number,\n    widthPercentage: PropTypes.number,\n    side: PropTypes.string,\n    testID: PropTypes.string,\n    sheetWidth: PropTypes.number,\n  };\n\n  static defaultProps = {\n    duration: 200,\n    widthPercentage: 0.8,\n    side: 'right',\n    sheetWidth: 300,\n  };\n\n  state = {\n    internalVisible: false,\n    animatedPosition: new Animated.Value(0),\n    pan: new Animated.ValueXY(),\n    initialHeight: 0,\n    initialWidth: 0,\n    fullHeight: 0,\n    fullWidth: 0,\n  };\n\n  componentDidMount() {\n    const { visible, pageHeight, pageWidth, side } = this.props;\n    const { pan } = this.state;\n    if (visible) {\n      this._open();\n    }\n\n    this.createPanResponder(this.props);\n\n    const width = Dimensions.get('window').width;\n\n    pan.setValue({ x: side == 'left' ? -width : width, y: 0 });\n\n    this.setState({\n      fullHeight: pageHeight ? pageHeight : Dimensions.get('window').height,\n      fullWidth: pageWidth ? pageWidth : width,\n    });\n  }\n\n  componentDidUpdate(prevProps) {\n    const { visible } = this.props;\n\n    if (visible != prevProps.visible) {\n      if (visible) {\n        this._open();\n      } else {\n        this._close();\n      }\n    }\n  }\n\n  onMenuLayout = e => {\n    const { width, height } = e.nativeEvent.layout;\n\n    this.setState(\n      {\n        initialWidth: width,\n        initialHeight: height,\n      },\n      () => {\n        this.createPanResponder(this.props);\n      },\n    );\n  };\n\n  animateSheet(visible) {\n    const { duration, side } = this.props;\n    const { fullWidth, pan } = this.state;\n\n    let openValue = 0;\n\n    let closeValue = fullWidth;\n\n    if (side == 'left') {\n      openValue = 0;\n      closeValue = -closeValue;\n    }\n\n    if (visible) {\n      this.setState({ internalVisible: true }, () => {\n        Animated.timing(pan, {\n          useNativeDriver: true,\n          toValue: {\n            x: openValue,\n            y: 0,\n          },\n          duration: duration,\n        }).start();\n      });\n    } else {\n      Animated.timing(pan, {\n        useNativeDriver: true,\n        toValue: { x: closeValue, y: 0 },\n        duration: duration,\n      }).start(() => {\n        this.setState({ internalVisible: false });\n      });\n    }\n  }\n\n  createPanResponder = () => {\n    const {\n      onSwipeLeft,\n      onSwipeRight,\n      widthPercentage,\n      sheetWidth,\n    } = this.props;\n    const { fullWidth } = this.state;\n\n    const sheetWidthCalculated =\n      Platform.OS == 'web' ? sheetWidth : fullWidth * widthPercentage;\n\n    this.panResponder = PanResponder.create({\n      onStartShouldSetPanResponder: () => true,\n\n      onPanResponderRelease: (e, gestureState) => {\n        if (sheetWidthCalculated / 4 - gestureState.dy < 0) {\n          if (onSwipeLeft) onSwipeLeft();\n        } else if (sheetWidthCalculated / 4 + gestureState.dy > 0) {\n          if (onSwipeRight) onSwipeRight();\n        }\n      },\n    });\n  };\n\n  _open() {\n    this.animateSheet(true);\n  }\n\n  _close = () => {\n    this.animateSheet(false);\n  };\n\n  _onBackdropPress = () => {\n    const { onBackdropPress } = this.props;\n\n    if (onBackdropPress) onBackdropPress();\n  };\n\n  _handlePlatform() {\n    const { internalVisible } = this.state;\n    if (Platform.OS == 'web') {\n      return (\n        <WebModal\n          transparent\n          animationType={'none'}\n          visible={internalVisible}\n          onRequestClose={this._close}\n          style={{ margin: 0 }}>\n          {this._handleSafeView()}\n        </WebModal>\n      );\n    } else {\n      return (\n        <Modal\n          transparent\n          animationType={'none'}\n          visible={internalVisible}\n          onRequestClose={this._close}>\n          {this._handleSafeView()}\n        </Modal>\n      );\n    }\n  }\n\n  _handleSafeView() {\n    const { fullWidth } = this.state;\n    if (needsSafeArea) {\n      return (\n        <SafeAreaView\n          style={[\n            styles.safeAreaView,\n            {\n              backgroundColor: 'transparent',\n              width: fullWidth,\n              height: '100%',\n            },\n          ]}>\n          {this._renderContent()}\n        </SafeAreaView>\n      );\n    } else {\n      return this._renderContent();\n    }\n  }\n\n  _renderContent() {\n    const {\n      children,\n      wrapperStyles,\n      style,\n      widthPercentage,\n      testID,\n      sheetWidth,\n      side,\n    } = this.props;\n    const { pan, fullWidth } = this.state;\n\n    return (\n      <View style={[styles.wrapper, wrapperStyles]} testID={testID}>\n        <TouchableOpacity\n          style={styles.mask}\n          activeOpacity={1}\n          onPress={this._onBackdropPress}\n        />\n\n        <Animated.View\n          useNativeDriver={true}\n          {...this.panResponder.panHandlers}\n          style={[\n            styles.container,\n            style,\n\n            {\n              height: '100%',\n              position: 'absolute',\n              right: side == 'right' ? 0 : 'auto',\n              width:\n                Platform.OS == 'web' ? sheetWidth : fullWidth * widthPercentage,\n              transform: [{ translateX: pan.x }],\n            },\n          ]}>\n          <View onLayout={this.onMenuLayout}>{children}</View>\n        </Animated.View>\n      </View>\n    );\n  }\n\n  render() {\n    return this._handlePlatform();\n  }\n}\n\nexport default SheetSide;\n"
  },
  {
    "path": "src/Components/SheetSide/__snapshots__/SheetSide.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`SheetSide Renders 1`] = `\n<Component\n  animationType=\"none\"\n  hardwareAccelerated={false}\n  onRequestClose={[Function]}\n  transparent={true}\n  visible={false}\n>\n  <View\n    style={\n      Array [\n        Object {\n          \"backgroundColor\": \"#00000077\",\n          \"flex\": 1,\n        },\n        undefined,\n      ]\n    }\n  >\n    <TouchableOpacity\n      activeOpacity={1}\n      onPress={[Function]}\n      style={\n        Object {\n          \"backgroundColor\": \"transparent\",\n          \"height\": \"100%\",\n          \"left\": 0,\n          \"position\": \"absolute\",\n          \"top\": 0,\n          \"width\": \"100%\",\n          \"zIndex\": -1,\n        }\n      }\n    />\n    <AnimatedComponent\n      onMoveShouldSetResponder={[Function]}\n      onMoveShouldSetResponderCapture={[Function]}\n      onResponderEnd={[Function]}\n      onResponderGrant={[Function]}\n      onResponderMove={[Function]}\n      onResponderReject={[Function]}\n      onResponderRelease={[Function]}\n      onResponderStart={[Function]}\n      onResponderTerminate={[Function]}\n      onResponderTerminationRequest={[Function]}\n      onStartShouldSetResponder={[Function]}\n      onStartShouldSetResponderCapture={[Function]}\n      style={\n        Array [\n          Object {\n            \"backgroundColor\": \"#fff\",\n            \"overflow\": \"hidden\",\n            \"paddingVertical\": 16,\n            \"shadowColor\": \"#000\",\n            \"shadowOffset\": Object {\n              \"height\": 8,\n              \"width\": 0,\n            },\n            \"shadowOpacity\": 0.44,\n            \"shadowRadius\": 10.32,\n            \"zIndex\": 1000,\n          },\n          undefined,\n          Object {\n            \"height\": \"100%\",\n            \"transform\": Array [\n              Object {\n                \"translateX\": 0,\n              },\n            ],\n            \"width\": 0,\n          },\n        ]\n      }\n      useNativeDriver={true}\n    >\n      <View\n        onLayout={[Function]}\n      />\n    </AnimatedComponent>\n  </View>\n</Component>\n`;\n"
  },
  {
    "path": "src/Components/SheetSide/index.js",
    "content": "export { default } from './SheetSide';\n"
  },
  {
    "path": "src/Components/Slider/Marker/Marker.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { View } from 'react-native';\nimport styles from './Marker.styles';\nimport withTheme from '../../../Theme/withTheme';\nimport Ripple from '../../Ripple/Ripple.js';\nimport Hoverable from '../../../Utils/Hoverable/Hoverable.js';\nimport colorTool from 'color';\n\nclass Marker extends Component {\n  static propTypes = {\n    pressed: PropTypes.bool,\n    disabled: PropTypes.bool,\n    color: PropTypes.string,\n    theme: PropTypes.object,\n    onPress: PropTypes.func,\n    markerSize: PropTypes.number,\n  };\n\n  state = {\n    backgroundColorHover: 'transparent',\n  };\n\n  render() {\n    const { disabled, color, theme, markerSize } = this.props;\n    const { backgroundColorHover } = this.state;\n\n    let backgroundColor = color ? color : theme.primary.main;\n    if (disabled) backgroundColor = '#d3d3d3';\n\n    return (\n      <Hoverable\n        onHoverIn={() =>\n          this.setState({\n            backgroundColorHover: colorTool(backgroundColor).alpha(0.3),\n          })\n        }\n        onHoverOut={() =>\n          this.setState({ backgroundColorHover: 'transparent' })\n        }>\n        <Ripple\n          rippleColor={backgroundColor}\n          style={[\n            styles.ripple,\n            {\n              height: markerSize * 2.33,\n              width: markerSize * 2.33,\n              borderRadius: markerSize * 1.67,\n            },\n            { backgroundColor: backgroundColorHover },\n          ]}\n          rippleContainerBorderRadius={100}>\n          <View\n            style={[\n              {\n                backgroundColor: backgroundColor,\n                height: markerSize,\n                width: markerSize,\n                borderRadius: markerSize,\n              },\n              disabled && styles.disabled,\n            ]}\n          />\n        </Ripple>\n      </Hoverable>\n    );\n  }\n}\n\nexport default withTheme(Marker);\n"
  },
  {
    "path": "src/Components/Slider/Marker/Marker.styles.js",
    "content": "import { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  ripple: {\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Slider/MarkerContainer/MarkerContainer.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { View } from 'react-native';\nimport styles from './MarkerContainer.styles';\nimport withTheme from '../../../Theme/withTheme';\nimport Marker from '../Marker/Marker';\n\nclass MarkerContainer extends Component {\n  static propTypes = {\n    pressed: PropTypes.bool,\n    disabled: PropTypes.bool,\n    color: PropTypes.string,\n    theme: PropTypes.object,\n    sliderLength: PropTypes.number,\n    position: PropTypes.number,\n    panResponder: PropTypes.object,\n    onPress: PropTypes.func,\n    markerSize: PropTypes.number,\n    trackHeight: PropTypes.number,\n  };\n  render() {\n    const {\n      sliderLength,\n      position,\n      pressed,\n      disabled,\n      color,\n      panResponder,\n      onPress,\n      markerSize,\n      trackHeight,\n    } = this.props;\n\n    return (\n      <View\n        style={[\n          styles.markerContainer,\n          {\n            top: -markerSize * 2 + trackHeight / 2,\n            right: sliderLength - position - markerSize * 2,\n            height: markerSize * 4,\n            width: markerSize * 4,\n          },\n        ]}>\n        <View style={[styles.touch]} {...panResponder}>\n          <Marker\n            pressed={pressed}\n            disabled={disabled}\n            color={color}\n            onPress={onPress}\n            markerSize={markerSize}\n          />\n        </View>\n      </View>\n    );\n  }\n}\n\nexport default withTheme(MarkerContainer);\n"
  },
  {
    "path": "src/Components/Slider/MarkerContainer/MarkerContainer.styles.js",
    "content": "import { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  markerContainer: {\n    position: 'absolute',\n    backgroundColor: 'transparent',\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  topMarkerContainer: {\n    zIndex: 1,\n  },\n  touch: {\n    backgroundColor: 'transparent',\n    justifyContent: 'center',\n    alignItems: 'center',\n    alignSelf: 'stretch',\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Slider/Slider.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { PanResponder, View, StyleSheet } from 'react-native';\nimport withTheme from '../../Theme/withTheme';\nimport MarkerContainer from './MarkerContainer/MarkerContainer';\nimport Track from './Track/Track';\nimport { createArray, valueToPosition, positionToValue } from './converts';\nimport styles from './Slider.styles';\n\nclass Slider extends Component {\n  static propTypes = {\n    values: PropTypes.array,\n    sliderLength: PropTypes.number,\n    min: PropTypes.number,\n    max: PropTypes.number,\n    step: PropTypes.number,\n    disableOne: PropTypes.bool,\n    disableTwo: PropTypes.bool,\n    onValuesChange: PropTypes.func,\n    onValuesChangeEnd: PropTypes.func,\n    trackColor: PropTypes.string,\n    backgroundTrackColor: PropTypes.string,\n    markerColor: PropTypes.string,\n    allowOverlap: PropTypes.bool,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    testID: PropTypes.string,\n    markerSize: PropTypes.number,\n    trackHeight: PropTypes.number,\n    trackStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n  };\n\n  static defaultProps = {\n    values: [0],\n    onValuesChange: () => {},\n    onValuesChangeEnd: () => {},\n    step: 1,\n    min: 0,\n    max: 100,\n    sliderLength: 280,\n    disableOne: false,\n    disableTwo: false,\n    allowOverlap: false,\n    snapped: false,\n    minMarkerOverlapDistance: 0,\n    markerSize: 12,\n    trackStyle: {},\n  };\n\n  constructor(props) {\n    super(props);\n    const {\n      sliderLength,\n      values,\n      min,\n      max,\n      step,\n      trackHeight,\n      trackStyle,\n    } = this.props;\n\n    this.optionsArray = createArray(min, max, step);\n    this.stepLength = sliderLength / this.optionsArray.length;\n    this.finalTrackHeight =\n      trackHeight || StyleSheet.flatten(trackStyle).height || 2;\n\n    let initialValues = values.map(value =>\n      valueToPosition(value, this.optionsArray, sliderLength),\n    );\n\n    let customPanResponder = (start, move, end) => {\n      return PanResponder.create({\n        onStartShouldSetPanResponder: () => true,\n        onStartShouldSetPanResponderCapture: () => false,\n        onMoveShouldSetPanResponder: () => true,\n        onMoveShouldSetPanResponderCapture: () => true,\n        onPanResponderGrant: () => start(),\n        onPanResponderMove: (evt, gestureState) => move(gestureState),\n        onPanResponderTerminationRequest: () => false,\n        onPanResponderRelease: (evt, gestureState) => end(gestureState),\n        onPanResponderTerminate: (evt, gestureState) => end(gestureState),\n        onShouldBlockNativeResponder: () => true,\n      });\n    };\n\n    this._panResponderOne = customPanResponder(\n      this.startMarkerLeft,\n      this.moveMarkerLeft,\n      this.endMarkerLeft,\n    );\n    this._panResponderTwo = customPanResponder(\n      this.startMarkerRight,\n      this.moveMarkerRight,\n      this.endMarkerRight,\n    );\n\n    this.state = {\n      pressedOne: true,\n      valueOne: values[0],\n      valueTwo: values[1],\n      pastOne: initialValues[0],\n      pastTwo: initialValues[1],\n      positionOne: initialValues[0],\n      positionTwo: initialValues[1],\n    };\n  }\n  /* eslint-disable */\n  componentWillReceiveProps(nextProps) {\n    const { sliderLength, min, max, step } = this.props;\n    const { onePressed, twoPressed, valueOne, valueTwo } = this.state;\n\n    if (onePressed || twoPressed) {\n      return;\n    }\n\n    let nextState = {};\n    if (\n      nextProps.min !== min ||\n      nextProps.max !== max ||\n      nextProps.step !== step ||\n      nextProps.values[0] !== valueOne ||\n      nextProps.sliderLength !== sliderLength ||\n      nextProps.values[1] !== valueTwo ||\n      (nextProps.sliderLength !== sliderLength && nextProps.values[1])\n    ) {\n      this.optionsArray = createArray(\n        nextProps.min,\n        nextProps.max,\n        nextProps.step,\n      );\n\n      this.stepLength = sliderLength / this.optionsArray.length;\n\n      var positionOne = valueToPosition(\n        nextProps.values[0],\n        this.optionsArray,\n        nextProps.sliderLength,\n      );\n      nextState.valueOne = nextProps.values[0];\n      nextState.pastOne = positionOne;\n      nextState.positionOne = positionOne;\n\n      var positionTwo = valueToPosition(\n        nextProps.values[1],\n        this.optionsArray,\n        nextProps.sliderLength,\n      );\n      nextState.valueTwo = nextProps.values[1];\n      nextState.pastTwo = positionTwo;\n      nextState.positionTwo = positionTwo;\n    }\n\n    if (nextState != {}) {\n      this.setState(nextState);\n    }\n  }\n\n  startMarkerLeft = () => {\n    const { disableOne } = this.props;\n    const { onePressed } = this.state;\n\n    if (!disableOne) {\n      this.setState({\n        onePressed: !onePressed,\n      });\n    }\n  };\n\n  startMarkerRight = () => {\n    const { disableTwo } = this.props;\n    const { twoPressed } = this.state;\n\n    if (!disableTwo) {\n      this.setState({\n        twoPressed: !twoPressed,\n      });\n    }\n  };\n\n  moveMarkerLeft = gestureState => {\n    const {\n      disableOne,\n      allowOverlap,\n      sliderLength,\n      onValuesChange,\n    } = this.props;\n    const { pastOne, positionTwo, valueOne } = this.state;\n\n    if (disableOne) {\n      return;\n    }\n\n    const accumDistance = gestureState.dx;\n    const unconfined = accumDistance + pastOne;\n\n    var bottom = 0;\n    var trueTop = positionTwo - (allowOverlap ? 0 : this.stepLength);\n    var top = trueTop === 0 ? 0 : trueTop || sliderLength;\n    var confined =\n      unconfined < bottom ? bottom : unconfined > top ? top : unconfined;\n\n    var value = positionToValue(confined, this.optionsArray, sliderLength);\n\n    this.setState({\n      positionOne: confined,\n    });\n\n    if (value !== valueOne) {\n      this.setState(\n        {\n          valueOne: value,\n        },\n        () => {\n          const { valueOne: newValOne, valueTwo } = this.state;\n          let change = [newValOne];\n          if (valueTwo) {\n            change.push(valueTwo);\n          }\n          onValuesChange(change);\n        },\n      );\n    }\n  };\n\n  moveMarkerRight = gestureState => {\n    const {\n      disableTwo,\n      allowOverlap,\n      sliderLength,\n      onValuesChange,\n    } = this.props;\n    const { pastTwo, positionOne, valueTwo } = this.state;\n\n    if (disableTwo) {\n      return;\n    }\n\n    const accumDistance = gestureState.dx;\n    const unconfined = accumDistance + pastTwo;\n\n    var bottom = positionOne + (allowOverlap ? 0 : this.stepLength);\n    var top = sliderLength;\n    var confined =\n      unconfined < bottom ? bottom : unconfined > top ? top : unconfined;\n\n    var value = positionToValue(confined, this.optionsArray, sliderLength);\n\n    this.setState({\n      positionTwo: confined,\n    });\n\n    if (value !== valueTwo) {\n      this.setState(\n        {\n          valueTwo: value,\n        },\n        () => {\n          const { valueOne, valueTwo: newValTwo } = this.state;\n          onValuesChange([valueOne, newValTwo]);\n        },\n      );\n    }\n  };\n\n  endMarkerLeft = () => {\n    const { onValuesChangeEnd } = this.props;\n    const { positionOne, onePressed } = this.state;\n    this.setState(\n      {\n        pastOne: positionOne,\n        onePressed: !onePressed,\n      },\n      () => {\n        const { valueOne, valueTwo } = this.state;\n        var change = [valueOne];\n        if (valueTwo) {\n          change.push(valueTwo);\n        }\n        onValuesChangeEnd(change);\n      },\n    );\n  };\n\n  endMarkerRight = () => {\n    const { twoPressed, positionTwo } = this.state;\n\n    this.setState(\n      {\n        twoPressed: !twoPressed,\n        pastTwo: positionTwo,\n      },\n      () => {\n        const { valueOne, valueTwo } = this.state;\n        this.props.onValuesChangeEnd([valueOne, valueTwo]);\n      },\n    );\n  };\n\n  _renderMarkerRight() {\n    const {\n      sliderLength,\n      disableTwo,\n      markerColor,\n      onPress,\n      markerSize,\n    } = this.props;\n    const { positionTwo, twoPressed } = this.state;\n\n    return (\n      <MarkerContainer\n        sliderLength={sliderLength}\n        position={positionTwo}\n        pressed={twoPressed}\n        disabled={disableTwo}\n        panResponder={this._panResponderTwo.panHandlers}\n        color={markerColor}\n        onPress={onPress}\n        markerSize={markerSize}\n        trackHeight={this.finalTrackHeight}\n      />\n    );\n  }\n\n  _renderMarkerLeft() {\n    const {\n      sliderLength,\n      disableOne,\n      markerColor,\n      onPress,\n      markerSize,\n    } = this.props;\n    const { positionOne, onePressed } = this.state;\n\n    return (\n      <MarkerContainer\n        sliderLength={sliderLength}\n        position={positionOne}\n        pressed={onePressed}\n        disabled={disableOne}\n        panResponder={this._panResponderOne.panHandlers}\n        color={markerColor}\n        onPress={onPress}\n        markerSize={markerSize}\n        trackHeight={this.finalTrackHeight}\n      />\n    );\n  }\n\n  _renderTracks() {\n    const {\n      sliderLength,\n      values,\n      trackColor,\n      backgroundTrackColor,\n      disableOne,\n      disableTwo,\n      trackStyle,\n    } = this.props;\n    const { positionOne, positionTwo } = this.state;\n\n    return (\n      <Track\n        twoMarkers={values.length == 2}\n        sliderLength={sliderLength}\n        positionTwo={positionTwo}\n        positionOne={positionOne}\n        trackColor={trackColor}\n        backgroundTrackColor={backgroundTrackColor}\n        bothDisabled={disableOne && disableTwo}\n        oneDisabled={disableOne}\n        trackHeight={this.finalTrackHeight}\n        trackStyle={trackStyle}\n      />\n    );\n  }\n\n  render() {\n    const { sliderLength, values, style, testID } = this.props;\n    const twoMarkers = values.length == 2;\n\n    return (\n      <View style={[styles.container, style]} testID={testID}>\n        <View style={[styles.fullTrack, { width: sliderLength }]}>\n          {this._renderTracks()}\n          {this._renderMarkerLeft()}\n          {twoMarkers ? this._renderMarkerRight() : null}\n        </View>\n      </View>\n    );\n  }\n}\n\nexport default withTheme(Slider);\n"
  },
  {
    "path": "src/Components/Slider/Slider.stories.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\n\nimport { Slider } from '../../';\nimport { State, Store } from '@sambego/storybook-state';\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\n\nconst store = new Store({\n  slider: 20,\n  sliderOne: 10,\n  sliderTwo: 40,\n});\n\nexport default storiesOf('Components|Slider', module)\n  .addParameters({ jest: ['Slider'] })\n  .add('Simple', () => (\n    <Container>\n      <Header title={'Slider'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <Slider\n              value={state.slider}\n              sliderLength={200}\n              onValueChange={value => store.set({ slider: value })}\n              valuePrefix={'test'}\n            />\n\n            <Slider\n              value={state.slider}\n              sliderLength={200}\n              disableOne={true}\n              onValueChange={value => store.set({ slider: value })}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('Ranged', () => (\n    <Container>\n      <Header title={'Slider'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <Slider\n              values={[state.sliderOne, state.sliderTwo]}\n              sliderLength={280}\n              onValueChange={value => store.set({ slider: value })}\n              allowOverlap\n            />\n            <Slider\n              values={[state.sliderOne, state.sliderTwo]}\n              sliderLength={280}\n              onValueChange={value => store.set({ slider: value })}\n              min={0}\n              max={100}\n              step={1}\n              disableOne={true}\n              allowOverlap\n            />\n            <Slider\n              values={[state.sliderOne, state.sliderTwo]}\n              sliderLength={280}\n              onValueChange={value => store.set({ slider: value })}\n              min={0}\n              max={100}\n              step={1}\n              disableTwo={true}\n              allowOverlap\n            />\n            <Slider\n              values={[state.sliderOne, state.sliderTwo]}\n              sliderLength={280}\n              onValueChange={value => store.set({ slider: value })}\n              min={0}\n              max={100}\n              step={1}\n              disableOne={true}\n              disableTwo={true}\n              allowOverlap\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/Slider/Slider.styles.js",
    "content": "import { I18nManager, StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  container: {\n    position: 'relative',\n    height: 50,\n    justifyContent: 'center',\n  },\n  fullTrack: {\n    flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Slider/Slider.test.js",
    "content": "import React from 'react';\nimport { Slider } from '../../';\n\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\n\ntest('Slider Renders', () => {\n  const tree = renderer.render(<Slider />);\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Slider/Track/Track.js",
    "content": "import React, { Fragment, Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { View } from 'react-native';\nimport withTheme from '../../../Theme/withTheme';\nimport styles from './Track.styles';\n\nclass Track extends Component {\n  static propTypes = {\n    backgroundTrackColor: PropTypes.string,\n    twoMarkers: PropTypes.bool,\n    sliderLength: PropTypes.number,\n    positionOne: PropTypes.number,\n    positionTwo: PropTypes.number,\n    theme: PropTypes.object,\n    trackColor: PropTypes.string,\n    bothDisabled: PropTypes.bool,\n    oneDisabled: PropTypes.bool,\n    trackHeight: PropTypes.number,\n    trackStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n  };\n\n  render() {\n    const {\n      backgroundTrackColor,\n      sliderLength,\n      positionOne,\n      positionTwo,\n      twoMarkers,\n      theme,\n      trackColor,\n      bothDisabled,\n      oneDisabled,\n      trackHeight,\n      trackStyle,\n    } = this.props;\n\n    const selectedColor = trackColor ? trackColor : theme.primary.main;\n    const unselectedColor = backgroundTrackColor\n      ? backgroundTrackColor\n      : '#CECECE';\n\n    const trackOneLength = positionOne;\n    const trackThreeLength = twoMarkers ? sliderLength - positionTwo : 0;\n    const trackTwoLength = sliderLength - trackOneLength - trackThreeLength;\n\n    const commonStyles = [styles.track, trackStyle, { height: trackHeight }];\n\n    return (\n      <Fragment>\n        <View\n          style={[\n            ...commonStyles,\n            {\n              width: trackOneLength,\n              backgroundColor:\n                twoMarkers || oneDisabled ? unselectedColor : selectedColor,\n            },\n          ]}\n        />\n        <View\n          style={[\n            ...commonStyles,\n            {\n              width: trackTwoLength,\n              backgroundColor:\n                twoMarkers && !bothDisabled ? selectedColor : unselectedColor,\n            },\n          ]}\n        />\n        {twoMarkers && (\n          <View\n            style={[\n              ...commonStyles,\n              {\n                width: trackThreeLength,\n                backgroundColor: twoMarkers ? unselectedColor : selectedColor,\n              },\n            ]}\n          />\n        )}\n      </Fragment>\n    );\n  }\n}\n\nexport default withTheme(Track);\n"
  },
  {
    "path": "src/Components/Slider/Track/Track.styles.js",
    "content": "import { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  track: {\n    backgroundColor: '#CECECE',\n  },\n  selectedTrack: {\n    backgroundColor: '#0D8675',\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Slider/__snapshots__/Slider.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Slider Renders 1`] = `\n<Context.Consumer>\n  [Function]\n</Context.Consumer>\n`;\n"
  },
  {
    "path": "src/Components/Slider/converts.js",
    "content": "// Find closest index for a given value\nconst closest = (array, n) => {\n  let minI = 0;\n  let maxI = array.length - 1;\n\n  if (array[minI] > n) {\n    return minI;\n  } else if (array[maxI] < n) {\n    return maxI;\n  } else if (array[minI] <= n && n <= array[maxI]) {\n    let closestIndex = null;\n\n    while (closestIndex === null) {\n      const midI = Math.round((minI + maxI) / 2);\n      const midVal = array[midI];\n\n      if (midVal === n) {\n        closestIndex = midI;\n      } else if (maxI === minI + 1) {\n        const minValue = array[minI];\n        const maxValue = array[maxI];\n        const deltaMin = Math.abs(minValue - n);\n        const deltaMax = Math.abs(maxValue - n);\n\n        closestIndex = deltaMax <= deltaMin ? maxI : minI;\n      } else if (midVal < n) {\n        minI = midI;\n      } else if (midVal > n) {\n        maxI = midI;\n      } else {\n        closestIndex = -1;\n      }\n    }\n\n    return closestIndex;\n  }\n\n  return -1;\n};\n\nexport function valueToPosition(value, valuesArray, sliderLength) {\n  const index = closest(valuesArray, value);\n\n  const arrLength = valuesArray.length - 1;\n  const validIndex = index === -1 ? arrLength : index;\n\n  return (sliderLength * validIndex) / arrLength;\n}\n\nexport function positionToValue(position, valuesArray, sliderLength) {\n  var arrLength;\n  var index;\n\n  if (position < 0 || sliderLength < position) {\n    return null;\n  } else {\n    arrLength = valuesArray.length - 1;\n    index = (arrLength * position) / sliderLength;\n    return valuesArray[Math.round(index)];\n  }\n}\n\nexport function createArray(start, end, step) {\n  var i;\n  var length;\n  var direction = start - end > 0 ? -1 : 1;\n  var result = [];\n  if (!step) {\n    return result;\n  } else {\n    length = Math.abs((start - end) / step) + 1;\n    for (i = 0; i < length; i++) {\n      result.push(start + i * Math.abs(step) * direction);\n    }\n    return result;\n  }\n}\n"
  },
  {
    "path": "src/Components/Slider/index.js",
    "content": "export { default } from './Slider';\n"
  },
  {
    "path": "src/Components/Snackbar/Snackbar.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Animated, View, Text } from 'react-native';\n\nimport Paper from '../Paper/Paper';\nimport withTheme from '../../Theme/withTheme';\nimport styles from './Snackbar.styles';\n\nclass Snackbar extends Component {\n  static propTypes = {\n    visible: PropTypes.bool,\n    animationDuration: PropTypes.number,\n    children: PropTypes.node,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    action: PropTypes.node,\n    testID: PropTypes.string,\n  };\n\n  static defaultProps = {\n    animationDuration: 200,\n  };\n\n  state = {\n    scaleAnimation: new Animated.Value(0.8),\n    opacity: new Animated.Value(0),\n  };\n\n  componentDidMount() {\n    const { visible } = this.props;\n    if (visible) this.show();\n  }\n\n  componentDidUpdate(prevProps) {\n    const { visible } = this.props;\n\n    if (visible && !prevProps.visible) {\n      this.show();\n    } else if (!visible && prevProps.visible) {\n      this.hide();\n    }\n  }\n\n  show() {\n    const { opacity, scaleAnimation } = this.state;\n    const { animationDuration } = this.props;\n\n    this.setState({\n      show: false,\n    });\n\n    Animated.parallel([\n      Animated.timing(scaleAnimation, {\n        toValue: 1,\n        duration: animationDuration,\n        useNativeDriver: true,\n      }),\n\n      Animated.timing(opacity, {\n        toValue: 1,\n        duration: animationDuration,\n        useNativeDriver: true,\n      }),\n    ]).start();\n  }\n\n  hide() {\n    const { opacity, scaleAnimation } = this.state;\n    const { animationDuration } = this.props;\n\n    Animated.parallel([\n      Animated.timing(scaleAnimation, {\n        toValue: 0.8,\n        duration: animationDuration,\n        useNativeDriver: true,\n      }),\n\n      Animated.timing(opacity, {\n        toValue: 0,\n        duration: animationDuration,\n        useNativeDriver: true,\n      }),\n    ]).start();\n  }\n\n  _renderAction() {\n    const { action } = this.props;\n    if (!action) return null;\n    return <View style={styles.actions}>{action}</View>;\n  }\n\n  render() {\n    const { children, style, visible, testID, action } = this.props;\n    const { opacity, scaleAnimation } = this.state;\n\n    return (\n      <View\n        style={[styles.container, { zIndex: visible ? 10 : -1 }]}\n        testID={testID}>\n        <Paper\n          style={[\n            styles.card,\n            {\n              opacity: opacity,\n              transform: [\n                {\n                  scale: scaleAnimation,\n                },\n              ],\n            },\n            style,\n          ]}>\n          <Text style={[styles.text, { marginRight: action ? 0 : 8 }]}>\n            {children}\n          </Text>\n          {this._renderAction()}\n        </Paper>\n      </View>\n    );\n  }\n}\n\nexport default withTheme(Snackbar);\n"
  },
  {
    "path": "src/Components/Snackbar/Snackbar.stories.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\n\nimport { Snackbar, Button } from '../../';\nimport { State, Store } from '@sambego/storybook-state';\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\n\nconst store = new Store({\n  show1: false,\n  show2: false,\n  show3: false,\n});\n\nexport default storiesOf('Components|Snackbar', module)\n  .addParameters({ jest: ['Snackbar'] })\n  .add('Simple Snackbar', () => (\n    <Container>\n      <Header title={'Simple Snackbar'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={{ flex: 1 }}>\n            <Button\n              type=\"outlined\"\n              onPress={() => store.set({ show1: true })}\n              text={'Open Snackbar'}\n              textColor={'#6E2CFA'}\n            />\n            <Snackbar\n              visible={state.show1}\n              action={\n                <Button\n                  type=\"text\"\n                  onPress={() => store.set({ show1: false })}\n                  text={'Button'}\n                  textColor={'#6E2CFA'}\n                />\n              }>\n              {'This is a snackbar component'}\n            </Snackbar>\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('No button snackbar', () => (\n    <Container>\n      <Header title={'No Button Snackbar'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={{ flex: 1 }}>\n            <Button\n              type=\"outlined\"\n              onPress={() => store.set({ show2: true })}\n              text={'Open Snackbar'}\n              textColor={'#6E2CFA'}\n            />\n            <Snackbar visible={state.show2}>\n              {'This is a single line snackbar'}\n            </Snackbar>\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('Two line snackbar', () => (\n    <Container>\n      <Header title={'Two line Snackbar'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={{ flex: 1 }}>\n            <Button\n              type=\"outlined\"\n              onPress={() => store.set({ show3: true })}\n              text={'Open Snackbar'}\n              textColor={'#6E2CFA'}\n            />\n            <Snackbar\n              visible={state.show3}\n              style={{\n                flex: 1,\n                flexDirection: 'column',\n                paddingBottom: 16,\n                paddingRight: 16,\n              }}\n              action={\n                <Button\n                  style={{ marginTop: 16, marginLeft: 220 }}\n                  type=\"text\"\n                  onPress={() => store.set({ show3: false })}\n                  text={'Button'}\n                  textColor={'#6E2CFA'}\n                  density={-2}\n                />\n              }>\n              {'Two line message with long CTA button:' +\n                'Lorem ipsum dolor sit amet, consectetur'}\n            </Snackbar>\n          </View>\n        )}\n      </State>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/Snackbar/Snackbar.styles.js",
    "content": "import { StyleSheet } from 'react-native';\nimport shadow from '../../Utils/Shadow/shadow.js';\n\nconst styles = StyleSheet.create({\n  container: {\n    bottom: 0,\n    flex: 1,\n    width: '100%',\n    justifyContent: 'center',\n    alignItems: 'center',\n    position: 'absolute',\n  },\n  card: {\n    ...shadow(6),\n    borderRadius: 3,\n    width: 342,\n    backgroundColor: '#212121',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    padding: 8,\n  },\n  text: {\n    flex: 1,\n    fontWeight: '400',\n    flexWrap: 'wrap',\n    color: 'white',\n    marginLeft: 8,\n    marginVertical: 8,\n    fontSize: 14,\n    lineHeight: 16,\n    letterSpacing: 0.25,\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Snackbar/Snackbar.test.js",
    "content": "import React from 'react';\nimport { Snackbar } from '../../';\n\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\n\ntest('Snackbar Renders', () => {\n  const tree = renderer.render(<Snackbar />);\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Snackbar/__snapshots__/Snackbar.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Snackbar Renders 1`] = `\n<Context.Consumer>\n  [Function]\n</Context.Consumer>\n`;\n"
  },
  {
    "path": "src/Components/Snackbar/index.js",
    "content": "export { default } from './Snackbar';\n"
  },
  {
    "path": "src/Components/SwipeNav/SwipeNav.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { View, Animated } from 'react-native';\nimport styles from './SwipeNav.styles';\nimport getStatusBarHeight from '../../helpers/statusBarHeight';\n\nclass SwipeNav extends Component {\n  static propTypes = {\n    header: PropTypes.node,\n    footer: PropTypes.node,\n    scrollViewProps: PropTypes.object,\n    scrollComponent: PropTypes.node,\n    style: PropTypes.object,\n    headerContainerStyle: PropTypes.object,\n    footerContainerStyle: PropTypes.object,\n    scrollViewStyle: PropTypes.object,\n    children: PropTypes.node,\n  };\n\n  state = {\n    headerHeight: 56,\n    footerHeight: 100,\n    offsetY: 0,\n    headerOffsetY: new Animated.Value(0),\n    scrollPaddingTop: new Animated.Value(56),\n    footerOffsetY: new Animated.Value(0),\n    scrollPaddingBottom: new Animated.Value(100),\n  };\n\n  onHeaderLayout = e => {\n    this.setState({\n      headerHeight: e.nativeEvent.layout.height,\n    });\n  };\n\n  onFooterLayout = e => {\n    this.setState({\n      footeerHeight: e.nativeEvent.layout.height,\n    });\n  };\n\n  onScroll = e => {\n    const { header, footer } = this.props;\n    const offsetY = e.nativeEvent.contentOffset.y;\n    const lastOffsetY = this.state.offsetY;\n\n    this.setState({\n      offsetY,\n    });\n\n    if ((header && offsetY - lastOffsetY > 20) || offsetY - lastOffsetY < -20) {\n      if (offsetY > lastOffsetY) {\n        this.animateHeader(true);\n      } else {\n        this.animateHeader(false);\n      }\n    }\n    if ((footer && offsetY - lastOffsetY < -20) || offsetY - lastOffsetY > 20) {\n      if (offsetY < lastOffsetY) {\n        this.animateFooter(true);\n      } else {\n        this.animateFooter(false);\n      }\n    }\n  };\n\n  animateHeader(hide) {\n    const { headerOffsetY, headerHeight, scrollPaddingTop } = this.state;\n    const newHeaderOffset = hide ? -headerHeight - getStatusBarHeight() : 0;\n    const newScrollPadding = hide ? 0 : headerHeight;\n    Animated.parallel([\n      Animated.timing(headerOffsetY, {\n        toValue: newHeaderOffset,\n        duration: 100,\n        useNativeDriver: true,\n      }),\n      Animated.timing(scrollPaddingTop, {\n        toValue: newScrollPadding,\n        duration: 100,\n        useNativeDriver: true,\n      }),\n    ]).start();\n  }\n\n  animateFooter(hide) {\n    const { footerOffsetY, footerHeight, scrollPaddingBottom } = this.state;\n    const newFooterOffset = hide ? footerHeight : 0;\n    const newScrollPadding = hide ? 0 : footerHeight;\n    Animated.parallel([\n      Animated.timing(footerOffsetY, {\n        toValue: newFooterOffset,\n        duration: 100,\n        useNativeDriver: true,\n      }),\n      Animated.timing(scrollPaddingBottom, {\n        toValue: newScrollPadding,\n        duration: 100,\n        useNativeDriver: true,\n      }),\n    ]).start();\n  }\n\n  renderScrollView() {\n    const {\n      header,\n      footer,\n      scrollViewStyle,\n      scrollViewProps,\n      children,\n    } = this.props;\n    return (\n      <Animated.ScrollView\n        useNativeDriver={true}\n        scrollEventThrottle={16}\n        {...scrollViewProps}\n        onScroll={this.onScroll}\n        style={[\n          styles.scroll,\n          {\n            paddingTop: header ? this.state.scrollPaddingTop : 0,\n            paddingBottom: footer ? this.state.paddingBottom : 0,\n          },\n          scrollViewStyle,\n        ]}>\n        {children}\n      </Animated.ScrollView>\n    );\n  }\n\n  renderCustomScrollView() {\n    const { header, footer, scrollComponent, scrollViewStyle } = this.props;\n    return React.cloneElement(scrollComponent, {\n      scrollEventThrottle: 16,\n      style: [\n        styles.scroll,\n        {\n          paddingTop: header ? this.state.scrollPaddingTop : 0,\n          paddingBottom: footer ? this.state.paddingBottom : 0,\n        },\n        scrollViewStyle,\n      ],\n      onScroll: e => {\n        this.onScroll(e);\n        scrollComponent.props.onScroll && scrollComponent.props.onScroll(e);\n      },\n    });\n  }\n\n  _renderHeader() {\n    const { header, headerContainerStyle } = this.props;\n\n    return (\n      <Animated.View\n        useNativeDriver={true}\n        style={[\n          styles.headerContainer,\n          headerContainerStyle,\n          {\n            transform: [{ translateY: this.state.headerOffsetY }],\n          },\n        ]}\n        onLayout={this.onHeaderLayout}>\n        {header}\n      </Animated.View>\n    );\n  }\n\n  _renderFooter() {\n    const { footer, footerContainerStyle } = this.props;\n\n    return (\n      <Animated.View\n        useNativeDriver={true}\n        style={[\n          styles.footerContainer,\n          footerContainerStyle,\n          {\n            transform: [{ translateY: this.state.footerOffsetY }],\n          },\n        ]}\n        onLayout={this.onFooterLayout}>\n        {footer}\n      </Animated.View>\n    );\n  }\n\n  render() {\n    const { header, footer, scrollComponent, style } = this.props;\n\n    return (\n      <View style={[styles.container, style]}>\n        {header ? this._renderHeader() : null}\n        <View style={[styles.scrollContainer]}>\n          {scrollComponent\n            ? this.renderCustomScrollView()\n            : this.renderScrollView()}\n        </View>\n        {footer ? this._renderFooter() : null}\n      </View>\n    );\n  }\n}\n\nexport default SwipeNav;\n"
  },
  {
    "path": "src/Components/SwipeNav/SwipeNav.stories.js",
    "content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { View, Text, Platform, SafeAreaView } from 'react-native';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\n\nimport {\n  Appbar,\n  Card,\n  CardContent,\n  BottomNavigation,\n  AppbarBottom,\n  Fab,\n} from '../..';\n\nimport SwipeNav from './SwipeNav';\n\nexport default storiesOf('Components|SwipeNav', module)\n  .addParameters({ jest: ['SwipeNav'] })\n\n  .add('Header', () => (\n    <SafeAreaView>\n      <View style={{ height: '100%', maxWidth: 500 }}>\n        <SwipeNav\n          header={\n            <Appbar\n              barType={'normal'}\n              color={'#009688'}\n              navigation={'menu'}\n              title={'News'}\n              actionItems={[{ name: 'more-vert' }]}\n            />\n          }\n          scrollViewStyle={{ height: Platform.OS == 'web' ? 500 : '100%' }}>\n          <BodyContent />\n        </SwipeNav>\n      </View>\n    </SafeAreaView>\n  ))\n  .add('Footer BottomNav', () => (\n    <SafeAreaView>\n      <View style={{ height: '100%', maxWidth: 500 }}>\n        <SwipeNav\n          footer={\n            <BottomNavigation\n              style={{ maxWidth: 672, width: '100%' }}\n              value={true}\n              showLabels\n              actionItems={[\n                { label: 'Buy' },\n                { label: 'Sell' },\n                { label: 'Settings' },\n              ]}\n            />\n          }\n          scrollViewStyle={{\n            height: Platform.OS == 'web' ? 400 : '100%',\n            overflow: 'hidden',\n          }}>\n          <BodyContent />\n        </SwipeNav>\n      </View>\n    </SafeAreaView>\n  ))\n  .add('Footer AppbarBottom', () => (\n    <SafeAreaView>\n      <View style={{ height: '100%', maxWidth: 500 }}>\n        <SwipeNav\n          footer={\n            <AppbarBottom\n              fab={<Fab icon={'change-history'} backgroundColor={'#009688'} />}\n              fabPosition={'center'}\n              navigation={'menu'}\n              color={'#E91E63'}\n            />\n          }\n          scrollViewStyle={{\n            height: Platform.OS == 'web' ? 400 : '100%',\n            overflow: 'hidden',\n          }}>\n          <BodyContent />\n        </SwipeNav>\n      </View>\n    </SafeAreaView>\n  ));\n\nconst SimpleCard = ({ hours, title, description }) => {\n  return (\n    <Card\n      style={{ maxWidth: 500, width: '100%', marginBottom: 6, marginTop: 6 }}>\n      <CardContent>\n        <Text\n          style={{ color: 'rgba(0,0,0,.6)', fontSize: 14, marginBottom: 6 }}>\n          {hours}\n        </Text>\n        <Text\n          style={{ color: 'rgba(0,0,0,1)', fontSize: 16, marginBottom: 10 }}>\n          {title}\n        </Text>\n        <Text style={{ color: 'rgba(0,0,0,.8)', fontSize: 14 }}>\n          {description}\n        </Text>\n      </CardContent>\n    </Card>\n  );\n};\n\nconst BodyContent = () => {\n  return (\n    <View\n      style={{\n        backgroundColor: 'salmon',\n\n        paddingLeft: 8,\n        paddingRight: 8,\n      }}>\n      <SimpleCard\n        hours={'2 hours ago'}\n        title={'Woman Opens Two Chrome Tabs'}\n        description={\n          'After downloading 128GB of RAM on her custom desktop, Karen was able to open two Chrome tabs at the same time which experts have called \"Revolutionary\"'\n        }\n      />\n      <SimpleCard\n        hours={'3 hours ago'}\n        title={'Local developer wastes time'}\n        description={\n          'A local develop wastes his Sunday writing placeholder text for a demo instead of going outside'\n        }\n      />\n      <SimpleCard\n        hours={'4 hours ago'}\n        title={'Bitcoin dead again'}\n        description={\n          'Bitcoin has died yet again after falling .2% in 1 hour says leading economist.'\n        }\n      />\n      <SimpleCard\n        hours={'6 hours ago'}\n        title={'Bitcoin going to the moon'}\n        description={\n          'Bitcoin has risen 11.4% in the last 5 minutes which has some experts predicating the start of the next bull run'\n        }\n      />\n\n      <SimpleCard\n        hours={'8 hours ago'}\n        title={'U.S Tech Startups rebound'}\n        description={\n          'Favorable Business Conditions have allowed startups to secure more fundraising deals compared to last year.'\n        }\n      />\n      <SimpleCard\n        hours={'9 hours ago'}\n        title={\"Asia's clean energy initiatives\"}\n        description={\n          'China Plans to invest billions of dollars for the development of over 300 clean energy projects in SouthEast Asia'\n        }\n      />\n      <SimpleCard\n        hours={'10 hours ago'}\n        title={'Copper on the rise'}\n        description={\n          'Copper prices soar admid global market optimism and increasing demand'\n        }\n      />\n      <SimpleCard\n        hours={'11 hours ago'}\n        title={'Poverty to Empowerment in Chicago'}\n        description={\n          'How one woman is transforming the lives of underpriveledged children.'\n        }\n      />\n    </View>\n  );\n};\n\nSimpleCard.propTypes = {\n  hours: PropTypes.string,\n  title: PropTypes.string,\n  description: PropTypes.string,\n};\n"
  },
  {
    "path": "src/Components/SwipeNav/SwipeNav.styles.js",
    "content": "export default {\n  container: {\n    flex: 1,\n    overflow: 'hidden',\n  },\n  headerContainer: {\n    position: 'absolute',\n    left: 0,\n    right: 0,\n    top: 0,\n    zIndex: 100,\n  },\n  footerContainer: {\n    position: 'absolute',\n    left: 0,\n    right: 0,\n    bottom: 0,\n    zIndex: 100,\n  },\n\n  scrollContainer: {\n    zIndex: 10,\n  },\n};\n"
  },
  {
    "path": "src/Components/SwipeNav/index.js",
    "content": "export { default } from './SwipeNav';\n"
  },
  {
    "path": "src/Components/Switch/Switch.js",
    "content": "import React, { Component } from 'react';\nimport {\n  Animated,\n  I18nManager,\n  View,\n  TouchableWithoutFeedback,\n} from 'react-native';\nimport PropTypes from 'prop-types';\nimport withTheme from '../../Theme/withTheme';\n\nimport Ripple from '../Ripple/Ripple.js';\nimport ProgressCircle from '../Progress/ProgressCircle/ProgressCircle.js';\nimport styles from './Switch.styles';\nimport colorTool from 'color';\n\nclass Switch extends Component {\n  static propTypes = {\n    checked: PropTypes.bool,\n    onPress: PropTypes.func,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    trackStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    thumbStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    label: PropTypes.node,\n    labelPos: PropTypes.string,\n    theme: PropTypes.object,\n    color: PropTypes.string,\n    loading: PropTypes.bool,\n    testID: PropTypes.string,\n    width: PropTypes.number,\n  };\n\n  static defaultProps = { labelPos: 'right', width: 36 };\n\n  state = {\n    thumbTranslateX: new Animated.Value(0),\n  };\n\n  componentDidMount() {\n    const { checked, width } = this.props;\n    const { thumbTranslateX } = this.state;\n\n    if (checked) {\n      const xValue = width / 2;\n      thumbTranslateX.setValue(I18nManager.isRTL ? -xValue : xValue);\n    }\n  }\n\n  componentDidUpdate(prevProps) {\n    const { checked } = this.props;\n    if (checked != prevProps.checked) {\n      this.handleSwitch();\n    }\n  }\n\n  _renderLabel() {\n    const { label, labelPos, onPress } = this.props;\n\n    return (\n      <TouchableWithoutFeedback onPress={() => onPress()}>\n        <View\n          style={{\n            marginLeft: labelPos == 'right' ? 8 : 0,\n            marginRight: labelPos == 'left' ? 8 : 0,\n          }}>\n          {label}\n        </View>\n      </TouchableWithoutFeedback>\n    );\n  }\n\n  handleSwitch() {\n    const { thumbTranslateX } = this.state;\n    const { checked, width } = this.props;\n\n    let xValue = width / 2;\n    if (!checked) {\n      xValue = 0;\n    }\n\n    Animated.parallel([\n      Animated.timing(thumbTranslateX, {\n        toValue: I18nManager.isRTL ? -xValue : xValue,\n        duration: 300,\n        useNativeDriver: true,\n      }),\n    ]).start();\n  }\n\n  getDimensions = width => {\n    const height = width * (8 / 9);\n\n    return {\n      height,\n      trackDimensions: {\n        width,\n        height: height * (7 / 16),\n        borderRadius: height * (5 / 16),\n      },\n      thumbRippleDimensions: {\n        width: width * (8 / 9),\n        top: height * -(9 / 32),\n        left: width * -(2 / 9),\n      },\n      thumbDimensions: {\n        width: width * (5 / 9),\n        height: height * (5 / 8),\n      },\n    };\n  };\n\n  render() {\n    const { thumbTranslateX } = this.state;\n    const {\n      label,\n      labelPos,\n      style,\n      trackStyle,\n      thumbStyle,\n      theme,\n      color,\n      checked,\n      onPress,\n      loading,\n      testID,\n      width,\n      ...rest\n    } = this.props;\n\n    let trackColor = color\n      ? colorTool(color).alpha(0.54)\n      : colorTool(theme.primary.main).alpha(0.54);\n    let thumbColor = color ? color : theme.primary.main;\n\n    const {\n      height,\n      trackDimensions,\n      thumbRippleDimensions,\n      thumbDimensions,\n    } = this.getDimensions(width);\n\n    return (\n      <View style={[styles.container, style]} testID={testID} {...rest}>\n        {labelPos == 'left' && label ? this._renderLabel() : null}\n        <Animated.View\n          useNativeDriver={true}\n          style={[\n            styles.track,\n            {\n              backgroundColor:\n                checked && !loading ? trackColor : 'rgba(0, 0, 0, 0.3)',\n              ...trackDimensions,\n            },\n            trackStyle,\n          ]}\n          onPress={onPress}>\n          <Ripple\n            rippleContainerBorderRadius={100}\n            style={[\n              styles.thumbRipple,\n              {\n                transform: [{ translateX: thumbTranslateX }],\n                height,\n                ...thumbRippleDimensions,\n              },\n            ]}\n            onPress={onPress}>\n            <Animated.View\n              useNativeDriver={true}\n              style={[\n                styles.thumb,\n                {\n                  backgroundColor: checked && !loading ? thumbColor : 'white',\n                  ...thumbDimensions,\n                },\n                thumbStyle,\n              ]}>\n              {loading ? (\n                <ProgressCircle\n                  color={thumbColor}\n                  size={14}\n                  widthOfBorder={6}\n                />\n              ) : null}\n            </Animated.View>\n          </Ripple>\n        </Animated.View>\n        {labelPos == 'right' && label ? this._renderLabel() : null}\n      </View>\n    );\n  }\n}\n\nexport default withTheme(Switch);\n"
  },
  {
    "path": "src/Components/Switch/Switch.stories.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\n\nimport { Switch, BodyText, Button } from '../../';\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\nimport { State, Store } from '@sambego/storybook-state';\n\nconst store = new Store({\n  checkedOne: true,\n  checkedTwo: true,\n  checkedThree: true,\n  checkedFour: true,\n  checkedFive: true,\n  isLoading: true,\n});\n\nexport default storiesOf('Components|Switch', module)\n  .addParameters({ jest: ['Switch'] })\n  .add('simple', () => (\n    <Container>\n      <Header title={'Switch'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <Switch\n              onPress={() => store.set({ checkedOne: !state.checkedOne })}\n              checked={state.checkedOne}\n              style={{ marginBottom: 16 }}\n            />\n            <Switch\n              color={'#E91E63'}\n              onPress={() => store.set({ checkedTwo: !state.checkedTwo })}\n              checked={state.checkedTwo}\n              style={{ marginBottom: 16 }}\n            />\n            <Switch\n              color={'#009688'}\n              onPress={() => store.set({ checkedThree: !state.checkedThree })}\n              checked={state.checkedThree}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('loading', () => (\n    <Container>\n      <Header title={'Switch'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <Switch\n              onPress={() => store.set({ checkedOne: !state.checkedOne })}\n              checked={state.checkedOne}\n              loading={state.isLoading}\n              style={{ marginBottom: 16 }}\n            />\n            <Switch\n              onPress={() => store.set({ checkedOne: !state.checkedOne })}\n              checked={state.checkedOne}\n              loading={state.isLoading}\n              style={{ marginBottom: 16 }}\n              color={'#E91E63'}\n            />\n            <Switch\n              onPress={() => store.set({ checkedOne: !state.checkedOne })}\n              checked={state.checkedOne}\n              loading={state.isLoading}\n              style={{ marginBottom: 16 }}\n              color={'#9C27B0'}\n            />\n            <Button\n              text={'Toggle Loading'}\n              type=\"outlined\"\n              onPress={() => store.set({ isLoading: !state.isLoading })}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('label', () => (\n    <Container>\n      <Header title={'Switch'} />\n\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <Switch\n              label={<BodyText type={2} text={'Label'} />}\n              style={{ marginBottom: 16 }}\n              color={'#E91E63'}\n              onPress={() => store.set({ checkedOne: !state.checkedOne })}\n              checked={state.checkedOne}\n            />\n            <Switch\n              label={\n                <BodyText\n                  type={2}\n                  style={{ color: '#E91E63' }}\n                  text={'Label'}\n                />\n              }\n              style={{ marginBottom: 16 }}\n              color={'#E91E63'}\n              onPress={() => store.set({ checkedTwo: !state.checkedTwo })}\n              checked={state.checkedTwo}\n            />\n            <Switch\n              label={<BodyText type={2} text={'Label'} />}\n              labelPos={'left'}\n              color={'#9C27B0'}\n              style={{ marginBottom: 16 }}\n              onPress={() => store.set({ checkedThree: !state.checkedThree })}\n              checked={state.checkedThree}\n            />\n            <Switch\n              label={<BodyText type={2} text={'Label'} />}\n              labelPos={'left'}\n              color={'#3F51B5'}\n              style={{ marginBottom: 16 }}\n              onPress={() => store.set({ checkedFour: !state.checkedFour })}\n              checked={state.checkedFour}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/Switch/Switch.styles.js",
    "content": "import { StyleSheet } from 'react-native';\nimport shadow from '../../Utils/Shadow/shadow.js';\n\nconst styles = StyleSheet.create({\n  container: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    alignSelf: 'flex-start',\n  },\n  track: {\n    backgroundColor: 'rgba(0,0,0,.3)',\n    position: 'relative',\n  },\n  thumbRipple: {\n    borderRadius: 100,\n    position: 'absolute',\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  thumb: {\n    borderRadius: 100,\n    justifyContent: 'center',\n    alignItems: 'center',\n\n    ...shadow(2),\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Switch/Switch.test.js",
    "content": "import React from 'react';\nimport { Switch } from '../../';\n\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\n\ntest('Switch Renders', () => {\n  const tree = renderer.render(<Switch />);\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Switch/__snapshots__/Switch.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Switch Renders 1`] = `\n<Context.Consumer>\n  [Function]\n</Context.Consumer>\n`;\n"
  },
  {
    "path": "src/Components/Switch/index.js",
    "content": "export { default } from './Switch';\n"
  },
  {
    "path": "src/Components/Tabs/Tab/Tab.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { View, ViewPropTypes, Text } from 'react-native';\nimport Ripple from '../../Ripple/Ripple.js';\nimport Icon from '../../Icon/Icon.js';\nimport withTheme from '../../../Theme/withTheme';\nimport styles from './Tab.styles';\n\nclass Tab extends Component {\n  static propTypes = {\n    label: PropTypes.string,\n    active: PropTypes.bool,\n    activeTextColor: PropTypes.string,\n    containerStyle: ViewPropTypes.style,\n    inActiveTextColor: PropTypes.string,\n    textStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    iconStyles: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    onPress: PropTypes.func,\n    tabWidth: PropTypes.number,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    icon: PropTypes.string,\n    rippleProps: PropTypes.object,\n  };\n\n  static defaultProps = {\n    inActiveTextColor: 'rgba(255, 255, 255, 0.7)',\n    activeTextColor: '#fff',\n    containerStyle: {},\n  };\n\n  _renderIcon(color) {\n    const { icon, iconStyles } = this.props;\n    return <Icon name={icon} size={24} color={color} style={iconStyles} />;\n  }\n\n  _renderText(color) {\n    const { label, icon, textStyle } = this.props;\n    return (\n      <Text\n        style={[\n          styles.text,\n          {\n            color: color,\n            marginTop: icon ? 4 : 0,\n          },\n          textStyle,\n        ]}>\n        {label ? label.toUpperCase() : null}\n      </Text>\n    );\n  }\n\n  _renderTab() {\n    const {\n      label,\n      active,\n      activeTextColor,\n      containerStyle,\n      inActiveTextColor,\n      icon,\n    } = this.props;\n\n    const color = active ? activeTextColor : inActiveTextColor;\n\n    return (\n      <View style={[styles.container, containerStyle]}>\n        {icon ? this._renderIcon(color) : null}\n        {label ? this._renderText(color) : null}\n      </View>\n    );\n  }\n\n  getHeight() {\n    const { icon, label } = this.props;\n    let height = icon && label ? 72 : 48;\n\n    return height;\n  }\n\n  render() {\n    const { onPress, tabWidth, rippleProps, style } = this.props;\n\n    return (\n      <Ripple\n        onPress={onPress}\n        style={[{ width: tabWidth, height: this.getHeight() }, style]}\n        {...rippleProps}>\n        {this._renderTab()}\n      </Ripple>\n    );\n  }\n}\n\nexport default withTheme(Tab);\n"
  },
  {
    "path": "src/Components/Tabs/Tab/Tab.stories.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\n\nimport { Tabs, Tab } from '../../..';\nimport Header from '../../../storybook/components/Header';\nimport Container from '../../../storybook/components/Container';\nimport { storiesOf } from '../../../storybook/helpers/storiesOf';\nimport { State, Store } from '@sambego/storybook-state';\n\nconst store = new Store({\n  selectedTab: 1,\n});\n\nexport default storiesOf('Components|Tabs/Tab', module)\n  .addParameters({ jest: ['Tab'] })\n\n  .add('as component', () => (\n    <Container>\n      <Header title={'Tab'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <Tabs\n              selectedIndex={state.selectedTab}\n              handleChange={index => store.set({ selectedTab: index })}\n              actionItems={[\n                <Tab key={1} icon=\"phone\" label=\"Recents\" />,\n                <Tab key={2} icon=\"favorite\" label=\"Favorites\" />,\n                <Tab key={3} icon=\"map\" label=\"Nearby\" />,\n              ]}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('custom', () => (\n    <Container>\n      <Header title={'Tab'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <Tabs\n              selectedIndex={state.selectedTab}\n              handleChange={index => store.set({ selectedTab: index })}\n              actionItems={[\n                <Tab\n                  key={1}\n                  icon=\"phone\"\n                  label=\"Recents\"\n                  style={{ backgroundColor: '#9C27B0' }}\n                />,\n                <Tab\n                  key={2}\n                  icon=\"favorite\"\n                  label=\"Favorites\"\n                  style={{ backgroundColor: '#009688' }}\n                />,\n                <Tab key={3} icon=\"map\" label=\"Nearby\" />,\n                <Tab\n                  key={4}\n                  icon=\"account-circle\"\n                  label=\"Account\"\n                  style={{ backgroundColor: '#E91E63' }}\n                />,\n              ]}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/Tabs/Tab/Tab.styles.js",
    "content": "import { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  container: {\n    alignItems: 'center',\n    justifyContent: 'center',\n    padding: 12,\n    minHeight: 48,\n    maxHeight: 72,\n  },\n  text: {\n    fontSize: 14,\n    textAlign: 'center',\n    minWidth: '100%',\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Tabs/Tab/Tab.test.js",
    "content": "import React from 'react';\nimport { Tab } from '../../..';\n\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\n\ntest('Tab Renders', () => {\n  const tree = renderer.render(<Tab />);\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Tabs/Tab/__snapshots__/Tab.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Tab Renders 1`] = `\n<Context.Consumer>\n  [Function]\n</Context.Consumer>\n`;\n"
  },
  {
    "path": "src/Components/Tabs/Tab/index.js",
    "content": "export { default } from './Tab';\n"
  },
  {
    "path": "src/Components/Tabs/Tabs.js",
    "content": "import React, { Component, Fragment } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Animated, I18nManager, ScrollView, View } from 'react-native';\nimport Tab from './Tab/Tab';\nimport Underline from './Underline/Underline';\nimport withTheme from '../../Theme/withTheme';\nimport styles from './Tabs.styles';\nexport const TabsContext = React.createContext();\n\nclass Tabs extends Component {\n  static propTypes = {\n    actionItems: PropTypes.arrayOf(\n      PropTypes.oneOfType([PropTypes.object, PropTypes.element]),\n    ),\n    selectedIndex: PropTypes.number,\n    backgroundColor: PropTypes.string,\n    underlineColor: PropTypes.string,\n    underlineHeight: PropTypes.number,\n    scrollEnabled: PropTypes.bool,\n    handleChange: PropTypes.func,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    theme: PropTypes.object,\n    testID: PropTypes.string,\n  };\n\n  static defaultProps = {\n    selectedIndex: 0,\n    underlineColor: '#fff',\n    scrollEnabled: false,\n  };\n\n  state = {\n    tabWidth: 0,\n    barWidth: 0,\n    indicatorPosition: new Animated.Value(0),\n  };\n\n  componentDidUpdate(prevProps) {\n    const { actionItems } = this.props;\n\n    if (actionItems.length !== prevProps.actionItems.length && this.container) {\n      this.container.measure((_, b, width) => {\n        this.getTabWidth(width);\n      });\n    }\n\n    this.selectTab();\n  }\n\n  shouldComponentUpdate(nextProps) {\n    const { actionItems } = this.props;\n\n    return (\n      actionItems.length !== nextProps.actionItems.length ||\n      (nextProps.selectedIndex < nextProps.actionItems.length &&\n        nextProps.selectedIndex >= 0)\n    );\n  }\n\n  getAnimateValues() {\n    const { selectedIndex, scrollEnabled, actionItems } = this.props;\n    const { tabWidth, barWidth } = this.state;\n\n    const index = selectedIndex;\n    let scrollValue = !scrollEnabled ? tabWidth : barWidth * 0.4;\n    if (scrollValue < 90) scrollValue = 90;\n\n    if (!scrollEnabled && scrollValue > 90) {\n      return {\n        indicatorPosition: index === 0 ? 0 : index * scrollValue,\n        scrollPosition: 0,\n      };\n    }\n\n    switch (index) {\n      case 0: // First tab\n        return {\n          indicatorPosition: 0,\n          scrollPosition: 0,\n        };\n      case 1: // Second tab\n        return {\n          indicatorPosition: barWidth * 0.5 - scrollValue / 4,\n          scrollPosition: scrollValue * 0.25,\n        };\n      case actionItems.length - 1: // Last tab\n        return {\n          indicatorPosition:\n            scrollValue * (index - 1) + (barWidth * 0.5 - scrollValue / 4),\n          scrollPosition: scrollValue * (index - 2) + scrollValue * 0.5,\n        };\n      default:\n        // Any tabs between second and last\n        return {\n          indicatorPosition:\n            scrollValue * (index - 1) + (barWidth * 0.5 - scrollValue / 4),\n          scrollPosition: scrollValue * 0.25 + scrollValue * (index - 1),\n        };\n    }\n  }\n\n  selectTab() {\n    const { indicatorPosition, scrollPosition } = this.getAnimateValues();\n\n    Animated.spring(this.state.indicatorPosition, {\n      toValue: I18nManager.isRTL ? -indicatorPosition : indicatorPosition,\n      tension: 300,\n      friction: 20,\n      useNativeDriver: true,\n    }).start();\n\n    if (this.scrollView) {\n      this.scrollView.scrollTo({ x: scrollPosition });\n    }\n  }\n\n  getTabWidth(width) {\n    const { scrollEnabled, actionItems } = this.props;\n\n    if (!scrollEnabled) {\n      let tabWidth = width / actionItems.length;\n\n      this.setState({\n        tabWidth: tabWidth,\n      });\n    }\n    this.setState({\n      barWidth: width,\n    });\n  }\n\n  getColor() {\n    const { backgroundColor, theme } = this.props;\n    let implementedColor = backgroundColor\n      ? backgroundColor\n      : theme.primary.main;\n\n    return implementedColor;\n  }\n\n  _renderTabs() {\n    const {\n      scrollEnabled,\n      actionItems,\n      handleChange,\n      selectedIndex,\n    } = this.props;\n    const { tabWidth, barWidth } = this.state;\n\n    let tabWidthImplemented = !scrollEnabled ? tabWidth : barWidth * 0.4;\n    if (tabWidthImplemented < 90) tabWidthImplemented = 90;\n\n    return actionItems.map((item, index) => {\n      if (!item.props) {\n        return (\n          <Tab\n            key={index}\n            label={item.label}\n            icon={item.icon}\n            onPress={() => {\n              handleChange(index);\n              if (item.onPress) item.onPress();\n            }}\n            active={index === selectedIndex}\n            tabWidth={tabWidthImplemented}\n          />\n        );\n      } else {\n        return React.cloneElement(item, {\n          key: index,\n          active: index === selectedIndex,\n          tabWidth: tabWidthImplemented,\n          onPress: () => {\n            handleChange(index);\n            if (item.props.onPress) item.onPress();\n          },\n        });\n      }\n    });\n  }\n\n  _renderContent() {\n    const { scrollEnabled, underlineColor, underlineHeight } = this.props;\n    const { tabWidth, indicatorPosition, barWidth } = this.state;\n\n    let tabWidthImplemented = !scrollEnabled ? tabWidth : barWidth * 0.4;\n    if (tabWidthImplemented < 90) tabWidthImplemented = 90;\n\n    return (\n      <Fragment>\n        <View style={styles.tabsWrapper}>{this._renderTabs()}</View>\n\n        <Underline\n          underlineHeight={underlineHeight}\n          color={underlineColor}\n          value={indicatorPosition}\n          tabWidth={tabWidthImplemented}\n        />\n      </Fragment>\n    );\n  }\n\n  _renderScrollView() {\n    const { scrollEnabled } = this.props;\n    const { tabWidth, barWidth } = this.state;\n\n    const tabWidthImplemented = !scrollEnabled ? tabWidth : barWidth * 0.4;\n\n    if (scrollEnabled || tabWidthImplemented < 90) {\n      return (\n        <ScrollView\n          horizontal\n          ref={ref => {\n            this.scrollView = ref;\n          }}\n          showsHorizontalScrollIndicator={false}\n          keyboardShouldPersistTaps={'never'}\n          scrollEnabled={scrollEnabled || tabWidthImplemented < 90}>\n          {this._renderContent()}\n        </ScrollView>\n      );\n    } else {\n      return this._renderContent();\n    }\n  }\n\n  render() {\n    const { style, testID } = this.props;\n\n    return (\n      <TabsContext.Provider>\n        <View\n          style={[\n            styles.container,\n            {\n              backgroundColor: this.getColor(),\n            },\n            style,\n          ]}\n          testID={testID}\n          ref={ref => {\n            this.container = ref;\n          }}\n          onLayout={event => this.getTabWidth(event.nativeEvent.layout.width)}>\n          {this._renderScrollView()}\n        </View>\n      </TabsContext.Provider>\n    );\n  }\n}\n\nexport default withTheme(Tabs);\n"
  },
  {
    "path": "src/Components/Tabs/Tabs.stories.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\n\nimport { Tabs } from '../../';\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\nimport { State, Store } from '@sambego/storybook-state';\n\nconst store = new Store({\n  selectedTab: 1,\n});\n\nexport default storiesOf('Components|Tabs', module)\n  .addParameters({ jest: ['Tabs'] })\n  .add('label', () => (\n    <Container>\n      <Header title={'Tabs'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <Tabs\n              selectedIndex={state.selectedTab}\n              handleChange={index => store.set({ selectedTab: index })}\n              actionItems={[\n                { label: 'Dogs' },\n                { label: 'Cats' },\n                { label: 'Birds' },\n              ]}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('icon', () => (\n    <Container>\n      <Header title={'Tabs'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <Tabs\n              selectedIndex={state.selectedTab}\n              handleChange={index => store.set({ selectedTab: index })}\n              backgroundColor={'#009688'}\n              actionItems={[\n                { icon: 'phone' },\n                { icon: 'favorite' },\n                { icon: 'map' },\n              ]}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('icon + label', () => (\n    <Container>\n      <Header title={'Tabs'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <Tabs\n              selectedIndex={state.selectedTab}\n              handleChange={index => store.set({ selectedTab: index })}\n              backgroundColor={'#9C27B0'}\n              actionItems={[\n                { icon: 'phone', label: 'Recents' },\n                { icon: 'favorite', label: 'Favorites' },\n                { icon: 'map', label: 'Nearby' },\n              ]}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('scrollable', () => (\n    <Container>\n      <Header title={'Tabs'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <Tabs\n              selectedIndex={state.selectedTab}\n              handleChange={index => store.set({ selectedTab: index })}\n              scrollEnabled\n              actionItems={[\n                { icon: 'phone', label: 'Recents' },\n                { icon: 'favorite', label: 'Favorites' },\n                { icon: 'map', label: 'Nearby' },\n                { icon: 'account-circle', label: 'Account' },\n                { icon: 'album', label: 'Music' },\n              ]}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/Tabs/Tabs.styles.js",
    "content": "import { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  container: {\n    minHeight: 48,\n    maxHeight: 78,\n  },\n  tabsWrapper: {\n    flexDirection: 'row',\n    minHeight: 48,\n    maxHeight: 78,\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Tabs/Tabs.test.js",
    "content": "import React from 'react';\nimport { Tabs } from '../../';\n\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\n\ntest('Tabs Renders', () => {\n  const tree = renderer.render(<Tabs />);\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Tabs/Underline/Underline.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Animated } from 'react-native';\nimport withTheme from '../../../Theme/withTheme';\nimport styles from './Undrline.styles';\n\nclass Underline extends Component {\n  static propTypes = {\n    color: PropTypes.string,\n    value: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.instanceOf(Animated.Value),\n    ]),\n    tabWidth: PropTypes.number,\n    underlineHeight: PropTypes.number,\n  };\n\n  static defaultProps = {\n    underlineHeight: 2,\n  };\n\n  render() {\n    const { tabWidth, color, value, underlineHeight } = this.props;\n\n    return (\n      <Animated.View\n        useNativeDriver={true}\n        style={[\n          styles.underline,\n          {\n            width: tabWidth,\n            backgroundColor: color,\n            transform: [{ translateX: value }],\n            height: underlineHeight,\n          },\n        ]}\n      />\n    );\n  }\n}\n\nexport default withTheme(Underline);\n"
  },
  {
    "path": "src/Components/Tabs/Underline/Undrline.styles.js",
    "content": "import { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  underline: {\n    height: 2,\n    position: 'absolute',\n    bottom: 0,\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Tabs/__snapshots__/Tabs.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Tabs Renders 1`] = `\n<Context.Consumer>\n  [Function]\n</Context.Consumer>\n`;\n"
  },
  {
    "path": "src/Components/Tabs/index.js",
    "content": "export { default } from './Tabs';\nexport { default as Tab } from './Tab';\n"
  },
  {
    "path": "src/Components/TextField/Searchfield/Searchfield.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { View, TextInput } from 'react-native';\nimport withTheme from '../../../Theme/withTheme';\nimport IconButton from '../../IconButton/IconButton';\nimport styles from './Searchfield.styles';\n\nclass Searchfield extends Component {\n  static propTypes = {\n    color: PropTypes.string,\n    inputRef: PropTypes.func,\n    onBlur: PropTypes.func,\n    onChangeText: PropTypes.func,\n    onCloseIcon: PropTypes.func,\n    onFocus: PropTypes.func,\n    placeholder: PropTypes.string,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    textStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    value: PropTypes.string,\n    searchIconProps: PropTypes.object,\n    closeIconProps: PropTypes.object,\n    inputProps: PropTypes.object,\n  };\n\n  render() {\n    const {\n      color,\n      searchIconProps,\n      closeIconProps,\n      inputProps,\n      inputRef,\n      onBlur,\n      onChangeText,\n      onCloseIcon,\n      onFocus,\n      placeholder,\n      style,\n      textStyle,\n      value,\n    } = this.props;\n\n    return (\n      <View\n        style={[\n          styles.container,\n          { backgroundColor: color ? color : 'rgba(255,255,255,.15)' },\n          style,\n        ]}>\n        <IconButton\n          name={'search'}\n          size={20}\n          color={'white'}\n          {...searchIconProps}\n        />\n\n        <TextInput\n          ref={inputRef}\n          style={[styles.searchInput, textStyle]}\n          placeholder={placeholder ? placeholder : 'Search'}\n          value={value}\n          onChangeText={onChangeText}\n          placeholderTextColor={'rgba(255,255,255,.57)'}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          {...inputProps}\n        />\n\n        <IconButton\n          name={'close'}\n          size={20}\n          style={{ opacity: !value || (value && value.length < 1) ? 0 : 1 }}\n          onPress={onCloseIcon}\n          color={'white'}\n          {...closeIconProps}\n        />\n      </View>\n    );\n  }\n}\n\nexport default withTheme(Searchfield);\n"
  },
  {
    "path": "src/Components/TextField/Searchfield/Searchfield.stories.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\n\nimport { Searchfield } from '../../../';\nimport { State, Store } from '@sambego/storybook-state';\nimport Header from '../../../storybook/components/Header';\nimport Container from '../../../storybook/components/Container';\nimport { storiesOf } from '../../../storybook/helpers/storiesOf';\n\nconst store = new Store({\n  searchOne: '',\n});\n\nexport default storiesOf('Components|TextField/SearchField', module)\n  .addParameters({ jest: ['Searchfield'] })\n  .add('Simple', () => (\n    <Container>\n      <Header title={'Searchfield'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <Searchfield\n              color={'#E91E63'}\n              value={state.search}\n              onChangeText={search => store.set({ search })}\n              onCloseIcon={() => store.set({ search: '' })}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/TextField/Searchfield/Searchfield.styles.js",
    "content": "import { StyleSheet } from 'react-native';\nimport shadow from '../../../Utils/Shadow/shadow.js';\n\nconst styles = StyleSheet.create({\n  container: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    borderRadius: 4,\n    paddingHorizontal: 8,\n\n    height: 40,\n  },\n  searchInput: {\n    fontSize: 16,\n    height: 40,\n    marginLeft: 8,\n    flex: 1,\n    color: 'white',\n    ...shadow(0),\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/TextField/Searchfield/Searchfield.test.js",
    "content": "import React from 'react';\nimport { Searchfield } from '../../..';\n\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\n\ntest('SearchField Renders', () => {\n  const tree = renderer.render(<Searchfield />);\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/TextField/Searchfield/__snapshots__/Searchfield.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`SearchField Renders 1`] = `\n<Context.Consumer>\n  [Function]\n</Context.Consumer>\n`;\n"
  },
  {
    "path": "src/Components/TextField/TextField.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport withTheme from '../../Theme/withTheme';\nimport TextFieldOutline from './TextFieldOutline/TextFieldOutline.js';\nimport TextFieldFilled from './TextFieldFilled/TextFieldFilled.js';\nimport TextFieldFlat from './TextFieldFlat/TextFieldFlat.js';\n\nclass TextField extends Component {\n  static propTypes = {\n    type: PropTypes.string,\n    onFocus: PropTypes.func,\n    onBlur: PropTypes.func,\n    disabled: PropTypes.bool,\n  };\n\n  state = {\n    focused: false,\n  };\n\n  handleFocus = (...args) => {\n    const { disabled, onFocus } = this.props;\n\n    if (disabled) return;\n\n    this.setState({ focused: true });\n\n    if (onFocus) onFocus(...args);\n  };\n\n  handleBlur = (...args) => {\n    const { disabled, onBlur } = this.props;\n\n    if (disabled) return;\n\n    this.setState({ focused: false });\n\n    if (onBlur) onBlur(...args);\n  };\n\n  render() {\n    const { type, ...rest } = this.props;\n    const { focused } = this.state;\n\n    if (type == 'outlined') {\n      return (\n        <TextFieldOutline\n          handleFocus={this.handleFocus}\n          handleBlur={this.handleBlur}\n          focused={focused}\n          {...rest}\n        />\n      );\n    } else if (type == 'filled') {\n      return (\n        <TextFieldFilled\n          handleFocus={this.handleFocus}\n          handleBlur={this.handleBlur}\n          focused={focused}\n          {...rest}\n        />\n      );\n    } else {\n      return (\n        <TextFieldFlat\n          handleFocus={this.handleFocus}\n          handleBlur={this.handleBlur}\n          focused={focused}\n          {...rest}\n        />\n      );\n    }\n  }\n}\n\nexport default withTheme(TextField);\n"
  },
  {
    "path": "src/Components/TextField/TextField.styles.js",
    "content": ""
  },
  {
    "path": "src/Components/TextField/TextField.test.js",
    "content": "import React from 'react';\nimport { TextField } from '../..';\n\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\n\ntest('TextField Renders', () => {\n  const tree = renderer.render(<TextField />);\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/TextField/TextFieldFilled/TextFieldFilled.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { View, TextInput, Platform } from 'react-native';\nimport withTheme from '../../../Theme/withTheme';\nimport TextFieldUnderline from '../TextFieldUnderline/TextFieldUnderline';\nimport TextFieldLabel from '../TextFieldLabel/TextFieldLabel';\nimport TextFieldHelperText from '../TextFieldHelperText/TextFieldHelperText';\nimport styles from './TextFieldFilled.styles';\nimport { nonOutlinedStops } from '../TextFieldLabel/TextFieldLabel.constants';\n\nclass TextFieldFilled extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    error: PropTypes.bool,\n    label: PropTypes.string,\n    labelColor: PropTypes.string,\n    labelStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    handleFocus: PropTypes.func,\n    handleBlur: PropTypes.func,\n    focused: PropTypes.bool,\n    helperText: PropTypes.string,\n    helperVisible: PropTypes.bool,\n    helperTextStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    underlineColor: PropTypes.string,\n    underlineActiveColor: PropTypes.string,\n    leadingIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),\n    trailingIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),\n    dense: PropTypes.bool,\n    value: PropTypes.string,\n    multiline: PropTypes.bool,\n    suffix: PropTypes.node,\n    prefix: PropTypes.node,\n    testID: PropTypes.string,\n    focusedLabelColor: PropTypes.string,\n  };\n\n  static defaultProps = {\n    helperVisible: true,\n  };\n\n  state = {\n    height: 56,\n    labelHeight: 0,\n  };\n\n  componentDidUpdate(prevProps) {\n    const { value, multiline } = this.props;\n    if (value && !value.length && prevProps.value.length && multiline) {\n      this.setState({ height: 56 });\n    }\n  }\n\n  _renderLeadingIcon() {\n    const { leadingIcon } = this.props;\n    const isFunc = typeof leadingIcon === 'function';\n\n    return (\n      <View style={{ position: 'absolute', left: 8, top: 16 }}>\n        {isFunc ? leadingIcon() : leadingIcon}\n      </View>\n    );\n  }\n\n  _renderTrailingIcon() {\n    const { trailingIcon } = this.props;\n    const isFunc = typeof trailingIcon === 'function';\n\n    return (\n      <View style={{ position: 'absolute', right: 12, top: 16 }}>\n        {isFunc ? trailingIcon() : trailingIcon}\n      </View>\n    );\n  }\n  _renderPrefix() {\n    const { prefix } = this.props;\n\n    return (\n      <View style={{ position: 'absolute', left: 16, top: 26, zIndex: 1 }}>\n        {React.cloneElement(prefix, {\n          color: prefix.props.color ? prefix.props.color : 'rgba(0, 0, 0, .57)',\n          fontSize: prefix.props.fontSize ? prefix.props.fontSize : 16,\n        })}\n      </View>\n    );\n  }\n\n  _renderSuffix() {\n    const { suffix } = this.props;\n\n    return (\n      <View style={{ position: 'absolute', right: 16, top: 28 }}>\n        {React.cloneElement(suffix, {\n          color: suffix.props.color ? suffix.props.color : 'rgba(0, 0, 0, .57)',\n          fontSize: suffix.props.fontSize ? suffix.props.fontSize : 14,\n        })}\n      </View>\n    );\n  }\n\n  _updateTextInputHeight = e => {\n    const { labelHeight } = this.state;\n    if (!this.props.multiline) return;\n\n    const nativeHeight = e.nativeEvent.contentSize.height;\n\n    const heightOffset =\n      Platform.OS === 'ios' ? labelHeight + nonOutlinedStops.active + 8 : 0;\n    this.setState({\n      height: Math.max(56, nativeHeight + heightOffset),\n    });\n  };\n\n  _measureLabel = ({\n    nativeEvent: {\n      layout: { height },\n    },\n  }) => this.setState({ labelHeight: height });\n\n  render() {\n    const {\n      style,\n      containerStyle,\n      error,\n      label,\n      labelColor,\n      labelStyle,\n      handleFocus,\n      handleBlur,\n      focused,\n      helperText,\n      helperVisible,\n      helperTextStyle,\n      underlineColor,\n      underlineActiveColor,\n      leadingIcon,\n      trailingIcon,\n      dense,\n      suffix,\n      prefix,\n      testID,\n      focusedLabelColor,\n      ...rest\n    } = this.props;\n\n    let height = this.state.height;\n\n    let paddingTop = rest.multiline ? 24 : 12;\n    if (dense) {\n      height = label ? 52 : 40;\n      paddingTop = 6;\n    }\n\n    let paddingLeft = leadingIcon ? 44 : 12;\n    if (prefix) paddingLeft = 32;\n\n    const platformStyles = Platform.OS === 'web' ? { outlineWidth: 0 } : {};\n    return (\n      <View\n        style={[\n          styles.containerStyle,\n          { marginBottom: helperText && helperVisible ? 20 : 0 },\n          containerStyle,\n        ]}>\n        {label ? (\n          <TextFieldLabel\n            label={label}\n            focused={focused}\n            error={error}\n            value={rest.value}\n            labelColor={labelColor}\n            style={labelStyle}\n            leadingIcon={!!leadingIcon}\n            dense={dense}\n            prefix={prefix}\n            type={'filled'}\n            focusedLabelColor={focusedLabelColor}\n            onLayout={this._measureLabel}\n          />\n        ) : null}\n        {leadingIcon ? this._renderLeadingIcon() : null}\n        {prefix ? this._renderPrefix() : null}\n        <TextInput\n          style={[\n            styles.textField,\n            styles.filledInput,\n            platformStyles,\n            {\n              minHeight: dense ? 40 : 56,\n              height: height,\n              paddingBottom: rest.multiline ? 8 : 0,\n              paddingTop: paddingTop,\n              paddingLeft: paddingLeft,\n              paddingRight: trailingIcon || suffix ? 36 : 12,\n            },\n            style,\n          ]}\n          onContentSizeChange={e => this._updateTextInputHeight(e)}\n          testID={testID}\n          scrollEnabled={false}\n          {...rest}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n        />\n        {trailingIcon ? this._renderTrailingIcon() : null}\n        {suffix ? this._renderSuffix() : null}\n\n        <TextFieldUnderline\n          focused={focused}\n          error={error}\n          underlineColor={underlineColor}\n          underlineActiveColor={underlineActiveColor}\n        />\n\n        <TextFieldHelperText\n          error={error}\n          visible={helperVisible || error}\n          style={helperTextStyle}>\n          {helperText}\n        </TextFieldHelperText>\n      </View>\n    );\n  }\n}\n\nexport default withTheme(TextFieldFilled);\n"
  },
  {
    "path": "src/Components/TextField/TextFieldFilled/TextFieldFilled.stories.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\n\nimport { State, Store } from '@sambego/storybook-state';\nimport Header from '../../../storybook/components/Header';\nimport Container from '../../../storybook/components/Container';\nimport { storiesOf } from '../../../storybook/helpers/storiesOf';\nimport { TextField, Icon, Caption, BodyText } from '../../../';\n\nconst store = new Store({\n  filledOne: '',\n  filledTwo: '',\n  filledThree: '',\n});\n\nexport default storiesOf('Components|TextField/Filled', module)\n  .addParameters({ jest: ['TextFieldFilled'] })\n\n  .add('simple', () => (\n    <Container>\n      <Header title={'Filled TextField'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <TextField\n              type={'filled'}\n              containerStyle={{ marginTop: 20 }}\n              label={'Label'}\n              value={state.filledOne}\n              onChangeText={value => store.set({ filledOne: value })}\n            />\n\n            <TextField\n              type={'filled'}\n              containerStyle={{ marginTop: 20 }}\n              label={'Label'}\n              error={true}\n              value={state.filledThree}\n              onChangeText={value => store.set({ filledThree: value })}\n              helperText={'There is an error'}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('multiline', () => (\n    <Container>\n      <Header title={'Filled TextField'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <TextField\n              type={'filled'}\n              containerStyle={{ marginTop: 20 }}\n              label={'Multiline'}\n              multiline\n              value={state.filledTwo}\n              onChangeText={value => store.set({ filledTwo: value })}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('with leadingIcon', () => (\n    <Container>\n      <Header title={'Filled TextField'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <TextField\n              type={'filled'}\n              containerStyle={{ marginTop: 20 }}\n              label={'Icon'}\n              leadingIcon={\n                <Icon name={'date-range'} size={24} color={'#6e6e6e'} />\n              }\n              value={state.filledTwo}\n              onChangeText={value => store.set({ filledTwo: value })}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('with trailingIcon', () => (\n    <Container>\n      <Header title={'Filled TextField'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <TextField\n              type={'filled'}\n              containerStyle={{ marginTop: 20 }}\n              label={'Icon'}\n              trailingIcon={\n                <Icon name={'date-range'} size={24} color={'#6e6e6e'} />\n              }\n              value={state.filledTwo}\n              onChangeText={value => store.set({ filledTwo: value })}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('with prefix', () => (\n    <Container>\n      <Header title={'Filled TextField'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <TextField\n              type={'filled'}\n              containerStyle={{ marginTop: 20 }}\n              label={'Pounds'}\n              prefix={<BodyText text={'$'} />}\n              value={state.filledTwo}\n              onChangeText={value => store.set({ filledTwo: value })}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('with suffix', () => (\n    <Container>\n      <Header title={'Filled TextField'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <TextField\n              type={'filled'}\n              containerStyle={{ marginTop: 20 }}\n              label={'Pounds'}\n              suffix={<Caption text=\"lbs\" />}\n              value={state.filledTwo}\n              onChangeText={value => store.set({ filledTwo: value })}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('with helperText', () => (\n    <Container>\n      <Header title={'Filled TextField'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <TextField\n              type={'filled'}\n              containerStyle={{ marginTop: 20 }}\n              label={'Label'}\n              value={state.filledOne}\n              onChangeText={value => store.set({ filledOne: value })}\n              helperText={'Some helper text'}\n            />\n\n            <TextField\n              type={'filled'}\n              containerStyle={{ marginTop: 20 }}\n              label={'Label'}\n              error={true}\n              value={state.filledThree}\n              onChangeText={value => store.set({ filledThree: value })}\n              helperText={'This is the error text that will show'}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('dense', () => (\n    <Container>\n      <Header title={'Filled TextField'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <TextField\n              type={'filled'}\n              containerStyle={{ marginTop: 20 }}\n              label={'With Label'}\n              value={state.filledOne}\n              onChangeText={value => store.set({ filledOne: value })}\n              dense\n            />\n\n            <TextField\n              type={'filled'}\n              containerStyle={{ marginTop: 20 }}\n              value={state.filledThree}\n              onChangeText={value => store.set({ filledThree: value })}\n              dense\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/TextField/TextFieldFilled/TextFieldFilled.styles.js",
    "content": "import { StyleSheet } from 'react-native';\nconst styles = StyleSheet.create({\n  containerStyle: {\n    position: 'relative',\n  },\n  textField: {\n    paddingHorizontal: 12,\n  },\n\n  filledInput: {\n    borderTopLeftRadius: 4,\n    borderTopRightRadius: 4,\n    backgroundColor: '#d9d9d9',\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/TextField/TextFieldFilled/TextFieldFilled.test.js",
    "content": "import React from 'react';\nimport TextFieldFilled from './TextFieldFilled';\n\nimport renderer from 'react-test-renderer';\n\ntest('TextFieldFilled Renders', () => {\n  const tree = renderer.create(<TextFieldFilled />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/TextField/TextFieldFilled/__snapshots__/TextFieldFilled.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`TextFieldFilled Renders 1`] = `\n<View\n  style={\n    Array [\n      Object {\n        \"position\": \"relative\",\n      },\n      Object {\n        \"marginBottom\": 0,\n      },\n      undefined,\n    ]\n  }\n>\n  <TextInput\n    allowFontScaling={true}\n    onContentSizeChange={[Function]}\n    rejectResponderTermination={true}\n    scrollEnabled={false}\n    style={\n      Array [\n        Object {\n          \"paddingHorizontal\": 12,\n        },\n        Object {\n          \"backgroundColor\": \"#d9d9d9\",\n          \"borderTopLeftRadius\": 4,\n          \"borderTopRightRadius\": 4,\n        },\n        Object {},\n        Object {\n          \"height\": 56,\n          \"minHeight\": 56,\n          \"paddingBottom\": 0,\n          \"paddingLeft\": 12,\n          \"paddingRight\": 12,\n          \"paddingTop\": 12,\n        },\n        undefined,\n      ]\n    }\n    theme={\n      Object {\n        \"action\": Object {\n          \"active\": \"rgba(0, 0, 0, 0.54)\",\n          \"disabled\": \"rgba(0, 0, 0, 0.26)\",\n          \"disabledBackground\": \"rgba(0, 0, 0, 0.12)\",\n          \"hover\": \"rgba(0, 0, 0, 0.08)\",\n          \"hoverOpacity\": 0.08,\n          \"selected\": \"rgba(0, 0, 0, 0.14)\",\n        },\n        \"background\": Object {\n          \"default\": \"#fafafa\",\n        },\n        \"bodyText\": Object {\n          \"fontSize\": 16,\n          \"letterSpacing\": 0.5,\n          \"lineHeight\": 16,\n        },\n        \"bodyTextTwo\": Object {\n          \"fontSize\": 14,\n          \"letterSpacing\": 0.25,\n          \"lineHeight\": 14,\n        },\n        \"button\": Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"display\": \"flex\",\n          \"fontSize\": 14,\n          \"fontWeight\": \"500\",\n          \"height\": 36,\n          \"letterSpacing\": 1.25,\n          \"lineHeight\": 16,\n          \"textAlign\": \"center\",\n          \"textTransform\": \"uppercase\",\n        },\n        \"buttonText\": Object {\n          \"color\": \"#2196f3\",\n          \"fontStyle\": \"normal\",\n          \"letterSpacing\": 0.5,\n        },\n        \"caption\": Object {\n          \"fontSize\": 12,\n          \"letterSpacing\": 0.4,\n          \"lineHeight\": 12,\n        },\n        \"containedButton\": Object {\n          \"backgroundColor\": \"#2196f3\",\n          \"paddingHorizontal\": 16,\n        },\n        \"divider\": Object {\n          \"backgroundColor\": \"rgba(0,0,0,.12)\",\n          \"width\": \"100%\",\n        },\n        \"drawer\": Object {\n          \"backgroundColor\": \"white\",\n          \"borderRightColor\": \"rgba(0,0,0,.12)\",\n          \"borderRightWidth\": 1,\n          \"borderStyle\": \"solid\",\n          \"position\": \"absolute\",\n          \"zIndex\": 100,\n        },\n        \"drawerHeader\": Object {\n          \"borderBottomColor\": \"rgba(0,0,0,.12)\",\n          \"borderBottomWidth\": 0.5,\n          \"paddingHorizontal\": 16,\n          \"paddingVertical\": 18,\n        },\n        \"drawerHeaderAvatarContainer\": Object {\n          \"marginBottom\": 20,\n        },\n        \"drawerHeaderSubtitle\": Object {\n          \"color\": \"rgba(0,0,0,.67)\",\n          \"fontSize\": 12,\n          \"marginTop\": 4,\n        },\n        \"drawerHeaderTitle\": Object {\n          \"color\": \"rgba(0,0,0,.87)\",\n          \"fontSize\": 20,\n          \"fontWeight\": \"500\",\n        },\n        \"drawerItem\": Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"transparent\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"height\": 40,\n          \"paddingHorizontal\": 8,\n          \"zIndex\": 10,\n        },\n        \"drawerItemActive\": Object {\n          \"backgroundColor\": \"rgba(30, 136, 229, .2)\",\n          \"color\": \"#1e88e5\",\n        },\n        \"drawerItemIcon\": Object {\n          \"color\": \"grey\",\n          \"size\": 20,\n        },\n        \"drawerItemText\": Object {\n          \"color\": \"rgba(0,0,0,.87)\",\n          \"fontSize\": 14,\n          \"fontWeight\": \"500\",\n          \"zIndex\": 10,\n        },\n        \"error\": Object {\n          \"dark\": \"#d32f2f\",\n          \"light\": \"#e57373\",\n          \"main\": \"#f44336\",\n        },\n        \"headingFive\": Object {\n          \"fontSize\": 24,\n          \"lineHeight\": 24,\n        },\n        \"headingFour\": Object {\n          \"fontSize\": 34,\n          \"letterSpacing\": 0.25,\n          \"lineHeight\": 34,\n        },\n        \"headingOne\": Object {\n          \"fontSize\": 96,\n          \"fontWeight\": \"300\",\n          \"letterSpacing\": -1.5,\n          \"lineHeight\": 96,\n        },\n        \"headingSix\": Object {\n          \"fontSize\": 20,\n          \"fontWeight\": \"500\",\n          \"letterSpacing\": 0.15,\n          \"lineHeight\": 20,\n        },\n        \"headingThree\": Object {\n          \"fontSize\": 48,\n          \"lineHeight\": 48,\n        },\n        \"headingTwo\": Object {\n          \"fontSize\": 60,\n          \"fontWeight\": \"300\",\n          \"letterSpacing\": -0.5,\n          \"lineHeight\": 60,\n        },\n        \"outlinedButton\": Object {\n          \"borderColor\": \"rgba(0,0,0,.29)\",\n          \"borderWidth\": 0.5,\n          \"boxSizing\": \"border-box\",\n          \"paddingHorizontal\": 16,\n        },\n        \"overline\": Object {\n          \"fontSize\": 10,\n          \"letterSpacing\": 1.5,\n          \"lineHeight\": 10,\n          \"textTransform\": \"uppercase\",\n        },\n        \"paper\": Object {\n          \"backgroundColor\": \"white\",\n          \"borderRadius\": 2,\n        },\n        \"primary\": Object {\n          \"dark\": \"#005cb2\",\n          \"light\": \"#6ab7ff\",\n          \"main\": \"#1e88e5\",\n        },\n        \"searchBar\": Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(255,255,255,1)\",\n          \"flexDirection\": \"row\",\n          \"height\": 56,\n          \"paddingHorizontal\": 16,\n          \"width\": \"100%\",\n        },\n        \"searchBarNavigationIcon\": Object {\n          \"color\": \"black\",\n          \"size\": 24,\n        },\n        \"searchBarcloseIcon\": Object {\n          \"color\": \"black\",\n          \"size\": 24,\n        },\n        \"searchInput\": Object {\n          \"flex\": 1,\n          \"fontSize\": 16,\n          \"height\": 30,\n          \"marginLeft\": 8,\n          \"shadowColor\": \"#000\",\n          \"shadowOffset\": Object {\n            \"height\": 0,\n            \"width\": 0,\n          },\n          \"shadowOpacity\": 0,\n          \"shadowRadius\": 1,\n        },\n        \"secondary\": Object {\n          \"dark\": \"#c51162\",\n          \"light\": \"#ff4081\",\n          \"main\": \"#f50057\",\n        },\n        \"subtitleOne\": Object {\n          \"fontSize\": 16,\n          \"letterSpacing\": 0.15,\n          \"lineHeight\": 16,\n        },\n        \"subtitleTwo\": Object {\n          \"fontSize\": 14,\n          \"fontWeight\": \"500\",\n          \"letterSpacing\": 0.1,\n          \"lineHeight\": 14,\n        },\n        \"text\": Object {},\n        \"textColor\": Object {\n          \"disabled\": \"rgba(0, 0, 0, 0.38)\",\n          \"hint\": \"rgba(0, 0, 0, 0.38)\",\n          \"primary\": \"rgba(0, 0, 0, 0.87)\",\n          \"secondary\": \"rgba(0, 0, 0, 0.54)\",\n        },\n      }\n    }\n    underlineColorAndroid=\"transparent\"\n  />\n  <View\n    style={\n      Object {\n        \"backgroundColor\": \"rgba(0, 0, 0, 0.42)\",\n        \"bottom\": 0,\n        \"height\": 2,\n        \"left\": 0,\n        \"position\": \"absolute\",\n        \"right\": 0,\n        \"transform\": Array [\n          Object {\n            \"scaleY\": 0.5,\n          },\n        ],\n      }\n    }\n    useNativeDriver={true}\n  >\n    <View\n      style={\n        Object {\n          \"backgroundColor\": \"rgba(33, 150, 243, 1)\",\n          \"bottom\": 0,\n          \"height\": 2,\n          \"left\": 0,\n          \"opacity\": 0,\n          \"position\": \"absolute\",\n          \"right\": 0,\n          \"transform\": Array [\n            Object {\n              \"scaleX\": 0,\n            },\n            Object {\n              \"scaleY\": 0,\n            },\n          ],\n        }\n      }\n      useNativeDriver={true}\n    />\n  </View>\n  <Text\n    style={\n      Array [\n        Object {\n          \"bottom\": -20,\n          \"color\": \"rgba(0,0,0,0.6)\",\n          \"fontSize\": 12,\n          \"height\": 16,\n          \"marginLeft\": 12,\n          \"position\": \"absolute\",\n          \"width\": \"100%\",\n          \"zIndex\": 10,\n        },\n        Object {\n          \"color\": \"rgba(0,0,0,0.6)\",\n        },\n        undefined,\n      ]\n    }\n  />\n</View>\n`;\n"
  },
  {
    "path": "src/Components/TextField/TextFieldFlat/TextFieldFlat.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { View, TextInput, Platform } from 'react-native';\nimport withTheme from '../../../Theme/withTheme';\nimport TextFieldUnderline from '../TextFieldUnderline/TextFieldUnderline';\nimport TextFieldLabel from '../TextFieldLabel/TextFieldLabel';\nimport TextFieldHelperText from '../TextFieldHelperText/TextFieldHelperText';\nimport styles from './TextFieldFlat.styles';\nimport { nonOutlinedStops } from '../TextFieldLabel/TextFieldLabel.constants';\n\nclass TextFieldFlat extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    error: PropTypes.bool,\n    label: PropTypes.string,\n    labelColor: PropTypes.string,\n    labelStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    handleFocus: PropTypes.func,\n    handleBlur: PropTypes.func,\n    focused: PropTypes.bool,\n    helperText: PropTypes.string,\n    helperVisible: PropTypes.bool,\n    helperTextStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    underlineColor: PropTypes.string,\n    underlineActiveColor: PropTypes.oneOfType([\n      PropTypes.object,\n      PropTypes.array,\n      PropTypes.string,\n    ]),\n    leadingIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),\n    trailingIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),\n    dense: PropTypes.bool,\n    value: PropTypes.string,\n    multiline: PropTypes.bool,\n    suffix: PropTypes.node,\n    prefix: PropTypes.node,\n    testID: PropTypes.string,\n    focusedLabelColor: PropTypes.string,\n  };\n\n  static defaultProps = {\n    helperVisible: true,\n  };\n\n  state = {\n    height: 56,\n    labelHeight: 0,\n  };\n\n  _renderLeadingIcon() {\n    const { leadingIcon } = this.props;\n    const isFunc = typeof leadingIcon === 'function';\n\n    return (\n      <View style={{ position: 'absolute', left: 8, top: 16 }}>\n        {isFunc ? leadingIcon() : leadingIcon}\n      </View>\n    );\n  }\n\n  _renderTrailingIcon() {\n    const { trailingIcon } = this.props;\n    const isFunc = typeof trailingIcon === 'function';\n\n    return (\n      <View style={{ position: 'absolute', right: 12, top: 16 }}>\n        {isFunc ? trailingIcon() : trailingIcon}\n      </View>\n    );\n  }\n\n  _renderPrefix() {\n    const { prefix } = this.props;\n\n    return (\n      <View style={{ position: 'absolute', left: 0, top: 26 }}>\n        {React.cloneElement(prefix, {\n          color: prefix.props.color ? prefix.props.color : 'rgba(0, 0, 0, .57)',\n          fontSize: prefix.props.fontSize ? prefix.props.fontSize : 16,\n        })}\n      </View>\n    );\n  }\n\n  _renderSuffix() {\n    const { suffix } = this.props;\n\n    return (\n      <View style={{ position: 'absolute', right: 16, top: 28 }}>\n        {React.cloneElement(suffix, {\n          color: suffix.props.color ? suffix.props.color : 'rgba(0, 0, 0, .57)',\n          fontSize: suffix.props.fontSize ? suffix.props.fontSize : 12,\n        })}\n      </View>\n    );\n  }\n\n  _updateTextInputHeight = e => {\n    const { labelHeight } = this.state;\n    if (!this.props.multiline) return;\n\n    const nativeHeight = e.nativeEvent.contentSize.height;\n\n    const heightOffset =\n      Platform.OS === 'ios' ? labelHeight + nonOutlinedStops.active + 8 : 0;\n    this.setState({\n      height: Math.max(56, nativeHeight + heightOffset),\n    });\n  };\n\n  _measureLabel = ({\n    nativeEvent: {\n      layout: { height },\n    },\n  }) => this.setState({ labelHeight: height });\n\n  render() {\n    const {\n      style,\n      containerStyle,\n      error,\n      label,\n      labelColor,\n      labelStyle,\n      handleFocus,\n      handleBlur,\n      focused,\n      helperText,\n      helperVisible,\n      helperTextStyle,\n      underlineColor,\n      underlineActiveColor,\n      leadingIcon,\n      trailingIcon,\n      dense,\n      suffix,\n      prefix,\n      testID,\n      focusedLabelColor,\n      ...rest\n    } = this.props;\n\n    let height = this.state.height;\n\n    if (dense) {\n      height = 40;\n    }\n\n    let paddingLeft = leadingIcon ? 44 : 0;\n    if (prefix) paddingLeft = 16;\n\n    const platformStyles = Platform.OS === 'web' ? { outlineWidth: 0 } : {};\n\n    return (\n      <View\n        style={[\n          styles.containerStyle,\n          { marginBottom: helperText && helperVisible ? 20 : 0 },\n          containerStyle,\n        ]}>\n        {label ? (\n          <TextFieldLabel\n            label={label}\n            focused={focused}\n            error={error}\n            value={rest.value}\n            type={'flat'}\n            labelColor={labelColor}\n            style={labelStyle}\n            leadingIcon={!!leadingIcon}\n            dense={dense}\n            prefix={prefix}\n            focusedLabelColor={focusedLabelColor}\n            onLayout={this._measureLabel}\n          />\n        ) : null}\n        {leadingIcon ? this._renderLeadingIcon() : null}\n        {prefix ? this._renderPrefix() : null}\n        <TextInput\n          style={[\n            styles.textField,\n            styles.flatInput,\n            platformStyles,\n            {\n              minHeight: dense ? 40 : 56,\n              height: height,\n              paddingBottom: rest.multiline ? 8 : 0,\n              paddingTop: rest.multiline ? 24 : 16,\n              paddingLeft: paddingLeft,\n              paddingRight: trailingIcon || suffix ? 36 : 0,\n            },\n            style,\n          ]}\n          testID={testID}\n          scrollEnabled={false}\n          onContentSizeChange={e => this._updateTextInputHeight(e)}\n          {...rest}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n        />\n        {trailingIcon ? this._renderTrailingIcon() : null}\n        {suffix ? this._renderSuffix() : null}\n        <TextFieldUnderline\n          focused={focused}\n          error={error}\n          underlineColor={underlineColor}\n          underlineActiveColor={underlineActiveColor}\n        />\n        <TextFieldHelperText\n          error={error}\n          visible={helperVisible || error}\n          style={helperTextStyle}>\n          {helperText}\n        </TextFieldHelperText>\n      </View>\n    );\n  }\n}\n\nexport default withTheme(TextFieldFlat);\n"
  },
  {
    "path": "src/Components/TextField/TextFieldFlat/TextFieldFlat.stories.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\n\nimport { State, Store } from '@sambego/storybook-state';\nimport Header from '../../../storybook/components/Header';\nimport Container from '../../../storybook/components/Container';\nimport { storiesOf } from '../../../storybook/helpers/storiesOf';\nimport { TextField, Icon, Caption, BodyText } from '../../../';\n\nconst store = new Store({\n  flatOne: '',\n  flatTwo: '',\n  flatThree: '',\n});\n\nexport default storiesOf('Components|TextField/Flat', module)\n  .addParameters({ jest: ['TextFieldFlat'] })\n  .add('simple', () => (\n    <Container>\n      <Header title={'Flat TextField'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <TextField\n              label={'Label'}\n              value={state.flatOne}\n              onChangeText={value => store.set({ flatOne: value })}\n            />\n            <TextField\n              containerStyle={{ marginTop: 20 }}\n              label={'Multiline'}\n              multiline\n              value={state.flatTwo}\n              onChangeText={value => store.set({ flatTwo: value })}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('multiline', () => (\n    <Container>\n      <Header title={'Flat TextField'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <TextField\n              containerStyle={{ marginTop: 20 }}\n              label={'Multiline'}\n              multiline\n              value={state.flatTwo}\n              onChangeText={value => store.set({ flatTwo: value })}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('with leadingIcon', () => (\n    <Container>\n      <Header title={'Flat TextField'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <TextField\n              type={'flat'}\n              containerStyle={{ marginTop: 20 }}\n              label={'Icon'}\n              leadingIcon={\n                <Icon name={'date-range'} size={24} color={'#6e6e6e'} />\n              }\n              value={state.flatTwo}\n              onChangeText={value => store.set({ flatTwo: value })}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('with prefix', () => (\n    <Container>\n      <Header title={'Flat TextField'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <TextField\n              type={'flat'}\n              containerStyle={{ marginTop: 20 }}\n              label={'Pounds'}\n              prefix={<BodyText text=\"$\" />}\n              value={state.flatOne}\n              onChangeText={value => store.set({ flatOne: value })}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('with suffix', () => (\n    <Container>\n      <Header title={'Flat TextField'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <TextField\n              type={'flat'}\n              containerStyle={{ marginTop: 20 }}\n              label={'Pounds'}\n              suffix={<Caption text=\"lbs\" />}\n              value={state.flatOne}\n              onChangeText={value => store.set({ flatOne: value })}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n\n  .add('with trailingIcon', () => (\n    <Container>\n      <Header title={'Flat TextField'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <TextField\n              type={'flat'}\n              containerStyle={{ marginTop: 20 }}\n              label={'Icon'}\n              trailingIcon={\n                <Icon name={'date-range'} size={24} color={'#6e6e6e'} />\n              }\n              value={state.flatOne}\n              onChangeText={value => store.set({ flatOne: value })}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('with helperText', () => (\n    <Container>\n      <Header title={'Flat TextField'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <TextField\n              label={'Label'}\n              value={state.flatOne}\n              onChangeText={value => store.set({ flatOne: value })}\n              helperText={'This is some helper text'}\n            />\n\n            <TextField\n              containerStyle={{ marginTop: 20 }}\n              label={'Label'}\n              error={true}\n              value={state.flatThree}\n              onChangeText={value => store.set({ flatThree: value })}\n              helperText={'There is an error'}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('dense', () => (\n    <Container>\n      <Header title={'Flat TextField'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <TextField\n              label={'Label'}\n              value={state.flatOne}\n              onChangeText={value => store.set({ flatOne: value })}\n              dense\n            />\n\n            <TextField\n              containerStyle={{ marginTop: 20 }}\n              placeholder={'Placeholder'}\n              value={state.flatThree}\n              onChangeText={value => store.set({ flatThree: value })}\n              dense\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/TextField/TextFieldFlat/TextFieldFlat.styles.js",
    "content": "import { StyleSheet } from 'react-native';\nconst styles = StyleSheet.create({\n  containerStyle: {\n    position: 'relative',\n  },\n  textField: {\n    height: 56,\n    textAlignVertical: 'bottom',\n    paddingTop: 16,\n  },\n\n  flatInput: {},\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/TextField/TextFieldFlat/TextFieldFlat.test.js",
    "content": "import React from 'react';\nimport TextFieldFlat from './TextFieldFlat';\n\nimport renderer from 'react-test-renderer';\n\ntest('TextFieldFlat Renders', () => {\n  const tree = renderer.create(<TextFieldFlat />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/TextField/TextFieldFlat/__snapshots__/TextFieldFlat.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`TextFieldFlat Renders 1`] = `\n<View\n  style={\n    Array [\n      Object {\n        \"position\": \"relative\",\n      },\n      Object {\n        \"marginBottom\": 0,\n      },\n      undefined,\n    ]\n  }\n>\n  <TextInput\n    allowFontScaling={true}\n    labelHeight={0}\n    onContentSizeChange={[Function]}\n    rejectResponderTermination={true}\n    scrollEnabled={false}\n    style={\n      Array [\n        Object {\n          \"height\": 56,\n          \"paddingTop\": 16,\n          \"textAlignVertical\": \"bottom\",\n        },\n        Object {},\n        Object {},\n        Object {\n          \"height\": 56,\n          \"minHeight\": 56,\n          \"paddingBottom\": 0,\n          \"paddingLeft\": 0,\n          \"paddingRight\": 0,\n          \"paddingTop\": 16,\n        },\n        undefined,\n      ]\n    }\n    theme={\n      Object {\n        \"action\": Object {\n          \"active\": \"rgba(0, 0, 0, 0.54)\",\n          \"disabled\": \"rgba(0, 0, 0, 0.26)\",\n          \"disabledBackground\": \"rgba(0, 0, 0, 0.12)\",\n          \"hover\": \"rgba(0, 0, 0, 0.08)\",\n          \"hoverOpacity\": 0.08,\n          \"selected\": \"rgba(0, 0, 0, 0.14)\",\n        },\n        \"background\": Object {\n          \"default\": \"#fafafa\",\n        },\n        \"bodyText\": Object {\n          \"fontSize\": 16,\n          \"letterSpacing\": 0.5,\n          \"lineHeight\": 16,\n        },\n        \"bodyTextTwo\": Object {\n          \"fontSize\": 14,\n          \"letterSpacing\": 0.25,\n          \"lineHeight\": 14,\n        },\n        \"button\": Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"display\": \"flex\",\n          \"fontSize\": 14,\n          \"fontWeight\": \"500\",\n          \"height\": 36,\n          \"letterSpacing\": 1.25,\n          \"lineHeight\": 16,\n          \"textAlign\": \"center\",\n          \"textTransform\": \"uppercase\",\n        },\n        \"buttonText\": Object {\n          \"color\": \"#2196f3\",\n          \"fontStyle\": \"normal\",\n          \"letterSpacing\": 0.5,\n        },\n        \"caption\": Object {\n          \"fontSize\": 12,\n          \"letterSpacing\": 0.4,\n          \"lineHeight\": 12,\n        },\n        \"containedButton\": Object {\n          \"backgroundColor\": \"#2196f3\",\n          \"paddingHorizontal\": 16,\n        },\n        \"divider\": Object {\n          \"backgroundColor\": \"rgba(0,0,0,.12)\",\n          \"width\": \"100%\",\n        },\n        \"drawer\": Object {\n          \"backgroundColor\": \"white\",\n          \"borderRightColor\": \"rgba(0,0,0,.12)\",\n          \"borderRightWidth\": 1,\n          \"borderStyle\": \"solid\",\n          \"position\": \"absolute\",\n          \"zIndex\": 100,\n        },\n        \"drawerHeader\": Object {\n          \"borderBottomColor\": \"rgba(0,0,0,.12)\",\n          \"borderBottomWidth\": 0.5,\n          \"paddingHorizontal\": 16,\n          \"paddingVertical\": 18,\n        },\n        \"drawerHeaderAvatarContainer\": Object {\n          \"marginBottom\": 20,\n        },\n        \"drawerHeaderSubtitle\": Object {\n          \"color\": \"rgba(0,0,0,.67)\",\n          \"fontSize\": 12,\n          \"marginTop\": 4,\n        },\n        \"drawerHeaderTitle\": Object {\n          \"color\": \"rgba(0,0,0,.87)\",\n          \"fontSize\": 20,\n          \"fontWeight\": \"500\",\n        },\n        \"drawerItem\": Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"transparent\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"height\": 40,\n          \"paddingHorizontal\": 8,\n          \"zIndex\": 10,\n        },\n        \"drawerItemActive\": Object {\n          \"backgroundColor\": \"rgba(30, 136, 229, .2)\",\n          \"color\": \"#1e88e5\",\n        },\n        \"drawerItemIcon\": Object {\n          \"color\": \"grey\",\n          \"size\": 20,\n        },\n        \"drawerItemText\": Object {\n          \"color\": \"rgba(0,0,0,.87)\",\n          \"fontSize\": 14,\n          \"fontWeight\": \"500\",\n          \"zIndex\": 10,\n        },\n        \"error\": Object {\n          \"dark\": \"#d32f2f\",\n          \"light\": \"#e57373\",\n          \"main\": \"#f44336\",\n        },\n        \"headingFive\": Object {\n          \"fontSize\": 24,\n          \"lineHeight\": 24,\n        },\n        \"headingFour\": Object {\n          \"fontSize\": 34,\n          \"letterSpacing\": 0.25,\n          \"lineHeight\": 34,\n        },\n        \"headingOne\": Object {\n          \"fontSize\": 96,\n          \"fontWeight\": \"300\",\n          \"letterSpacing\": -1.5,\n          \"lineHeight\": 96,\n        },\n        \"headingSix\": Object {\n          \"fontSize\": 20,\n          \"fontWeight\": \"500\",\n          \"letterSpacing\": 0.15,\n          \"lineHeight\": 20,\n        },\n        \"headingThree\": Object {\n          \"fontSize\": 48,\n          \"lineHeight\": 48,\n        },\n        \"headingTwo\": Object {\n          \"fontSize\": 60,\n          \"fontWeight\": \"300\",\n          \"letterSpacing\": -0.5,\n          \"lineHeight\": 60,\n        },\n        \"outlinedButton\": Object {\n          \"borderColor\": \"rgba(0,0,0,.29)\",\n          \"borderWidth\": 0.5,\n          \"boxSizing\": \"border-box\",\n          \"paddingHorizontal\": 16,\n        },\n        \"overline\": Object {\n          \"fontSize\": 10,\n          \"letterSpacing\": 1.5,\n          \"lineHeight\": 10,\n          \"textTransform\": \"uppercase\",\n        },\n        \"paper\": Object {\n          \"backgroundColor\": \"white\",\n          \"borderRadius\": 2,\n        },\n        \"primary\": Object {\n          \"dark\": \"#005cb2\",\n          \"light\": \"#6ab7ff\",\n          \"main\": \"#1e88e5\",\n        },\n        \"searchBar\": Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(255,255,255,1)\",\n          \"flexDirection\": \"row\",\n          \"height\": 56,\n          \"paddingHorizontal\": 16,\n          \"width\": \"100%\",\n        },\n        \"searchBarNavigationIcon\": Object {\n          \"color\": \"black\",\n          \"size\": 24,\n        },\n        \"searchBarcloseIcon\": Object {\n          \"color\": \"black\",\n          \"size\": 24,\n        },\n        \"searchInput\": Object {\n          \"flex\": 1,\n          \"fontSize\": 16,\n          \"height\": 30,\n          \"marginLeft\": 8,\n          \"shadowColor\": \"#000\",\n          \"shadowOffset\": Object {\n            \"height\": 0,\n            \"width\": 0,\n          },\n          \"shadowOpacity\": 0,\n          \"shadowRadius\": 1,\n        },\n        \"secondary\": Object {\n          \"dark\": \"#c51162\",\n          \"light\": \"#ff4081\",\n          \"main\": \"#f50057\",\n        },\n        \"subtitleOne\": Object {\n          \"fontSize\": 16,\n          \"letterSpacing\": 0.15,\n          \"lineHeight\": 16,\n        },\n        \"subtitleTwo\": Object {\n          \"fontSize\": 14,\n          \"fontWeight\": \"500\",\n          \"letterSpacing\": 0.1,\n          \"lineHeight\": 14,\n        },\n        \"text\": Object {},\n        \"textColor\": Object {\n          \"disabled\": \"rgba(0, 0, 0, 0.38)\",\n          \"hint\": \"rgba(0, 0, 0, 0.38)\",\n          \"primary\": \"rgba(0, 0, 0, 0.87)\",\n          \"secondary\": \"rgba(0, 0, 0, 0.54)\",\n        },\n      }\n    }\n    underlineColorAndroid=\"transparent\"\n  />\n  <View\n    style={\n      Object {\n        \"backgroundColor\": \"rgba(0, 0, 0, 0.42)\",\n        \"bottom\": 0,\n        \"height\": 2,\n        \"left\": 0,\n        \"position\": \"absolute\",\n        \"right\": 0,\n        \"transform\": Array [\n          Object {\n            \"scaleY\": 0.5,\n          },\n        ],\n      }\n    }\n    useNativeDriver={true}\n  >\n    <View\n      style={\n        Object {\n          \"backgroundColor\": \"rgba(33, 150, 243, 1)\",\n          \"bottom\": 0,\n          \"height\": 2,\n          \"left\": 0,\n          \"opacity\": 0,\n          \"position\": \"absolute\",\n          \"right\": 0,\n          \"transform\": Array [\n            Object {\n              \"scaleX\": 0,\n            },\n            Object {\n              \"scaleY\": 0,\n            },\n          ],\n        }\n      }\n      useNativeDriver={true}\n    />\n  </View>\n  <Text\n    style={\n      Array [\n        Object {\n          \"bottom\": -20,\n          \"color\": \"rgba(0,0,0,0.6)\",\n          \"fontSize\": 12,\n          \"height\": 16,\n          \"marginLeft\": 12,\n          \"position\": \"absolute\",\n          \"width\": \"100%\",\n          \"zIndex\": 10,\n        },\n        Object {\n          \"color\": \"rgba(0,0,0,0.6)\",\n        },\n        undefined,\n      ]\n    }\n  />\n</View>\n`;\n"
  },
  {
    "path": "src/Components/TextField/TextFieldHelperText/TextFieldHelperText.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Text } from 'react-native';\nimport withTheme from '../../../Theme/withTheme';\nimport styles from './TextFieldHelperText.styles';\n\nclass TextFieldHelperText extends Component {\n  static propTypes = {\n    error: PropTypes.bool,\n    children: PropTypes.node,\n    visible: PropTypes.bool,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n  };\n  render() {\n    const { children, visible, error, style } = this.props;\n\n    if (!visible) return null;\n\n    return (\n      <Text\n        style={[\n          styles.helper,\n          { color: error ? '#E53935' : 'rgba(0,0,0,0.6)' },\n          style,\n        ]}>\n        {children}\n      </Text>\n    );\n  }\n}\n\nexport default withTheme(TextFieldHelperText);\n"
  },
  {
    "path": "src/Components/TextField/TextFieldHelperText/TextFieldHelperText.styles.js",
    "content": "import { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  helper: {\n    color: 'rgba(0,0,0,0.6)',\n    height: 16,\n    marginLeft: 12,\n    zIndex: 10,\n    width: '100%',\n    position: 'absolute',\n    bottom: -20,\n    fontSize: 12,\n  },\n});\nexport default styles;\n"
  },
  {
    "path": "src/Components/TextField/TextFieldHelperText/TextFieldHelperText.test.js",
    "content": "import React from 'react';\nimport { TextFieldHelperText } from '../../..';\n\nimport renderer from 'react-test-renderer';\n\ntest('TextFieldHelperText Renders', () => {\n  const tree = renderer.create(<TextFieldHelperText />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/TextField/TextFieldHelperText/__snapshots__/TextFieldHelperText.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`TextFieldHelperText Renders 1`] = `null`;\n"
  },
  {
    "path": "src/Components/TextField/TextFieldHelperText/index.js",
    "content": "export { default } from './TextFieldHelperText';\n"
  },
  {
    "path": "src/Components/TextField/TextFieldLabel/TextFieldLabel.constants.js",
    "content": "export const outlinedStops = {\n  initial: 18,\n  active: -8,\n};\n\nexport const outlinedStopsDense = {\n  initial: 10,\n  active: -8,\n};\n\nexport const nonOutlinedStops = {\n  initial: 18,\n  active: 5,\n};\n"
  },
  {
    "path": "src/Components/TextField/TextFieldLabel/TextFieldLabel.constants.native.js",
    "content": "export const outlinedStops = {\n  initial: 20,\n  active: -12,\n};\n\nexport const outlinedStopsDense = {\n  initial: 8,\n  active: -12,\n};\n\nexport const nonOutlinedStops = {\n  initial: 20,\n  active: 5,\n};\n"
  },
  {
    "path": "src/Components/TextField/TextFieldLabel/TextFieldLabel.constants.web.js",
    "content": "export const outlinedStops = {\n  initial: 18,\n  active: -8,\n};\n\nexport const outlinedStopsDense = {\n  initial: 10,\n  active: -8,\n};\n\nexport const nonOutlinedStops = {\n  initial: 18,\n  active: 5,\n};\n"
  },
  {
    "path": "src/Components/TextField/TextFieldLabel/TextFieldLabel.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Animated, Easing, I18nManager, StyleSheet } from 'react-native';\nimport withTheme from '../../../Theme/withTheme';\nimport styles from './TextFieldLabel.styles';\nimport {\n  nonOutlinedStops,\n  outlinedStops,\n  outlinedStopsDense,\n} from './TextFieldLabel.constants';\n\nclass TextFieldLabel extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    error: PropTypes.bool,\n    labelColor: PropTypes.string,\n    focused: PropTypes.bool,\n    label: PropTypes.string,\n    type: PropTypes.string,\n    value: PropTypes.string,\n    leadingIcon: PropTypes.bool,\n    dense: PropTypes.bool,\n    prefix: PropTypes.bool,\n    theme: PropTypes.object,\n    focusedLabelColor: PropTypes.string,\n    onLayout: PropTypes.func,\n  };\n\n  state = {\n    translateYAnimation: new Animated.Value(\n      this.props.type === 'outlined'\n        ? outlinedStops.initial\n        : nonOutlinedStops.initial,\n    ),\n    fontSizeAnimation: new Animated.Value(\n      this.props.value || this.props.focused ? 1 : 0,\n    ),\n    animationDuration: 200,\n    animationEasing: Easing.ease,\n    canAnimate: true,\n  };\n\n  componentDidMount() {\n    const { type, dense, prefix, value } = this.props;\n\n    if (type == 'outlined' && dense) {\n      this.setState({\n        translateYAnimation: new Animated.Value(outlinedStopsDense.initial),\n      });\n    }\n\n    if (prefix) this._handlePrefix();\n\n    if (value) {\n      if (type == 'outlined') {\n        this._handleLabelOutlinedAnimation();\n      } else {\n        this._handleLabelAnimation();\n      }\n    }\n  }\n\n  componentDidUpdate(prevProps) {\n    const { focused, type, value } = this.props;\n\n    if (focused !== prevProps.focused || value !== prevProps.value) {\n      if (type == 'outlined') {\n        this._handleLabelOutlinedAnimation();\n      } else {\n        this._handleLabelAnimation();\n      }\n    }\n  }\n\n  _handlePrefix() {\n    const { type, dense } = this.props;\n    let translateYAnimation = nonOutlinedStops.active;\n    if (type == 'outlined') {\n      translateYAnimation = dense\n        ? outlinedStopsDense.active\n        : outlinedStops.active;\n    }\n\n    this.setState({\n      canAnimate: false,\n      translateYAnimation: new Animated.Value(translateYAnimation),\n      fontSizeAnimation: new Animated.Value(1),\n    });\n  }\n\n  _handleLabelAnimation() {\n    const { focused, value } = this.props;\n    const {\n      translateYAnimation,\n      animationEasing,\n      animationDuration,\n      canAnimate,\n      fontSizeAnimation,\n    } = this.state;\n    if (!canAnimate) return;\n\n    let position =\n      focused || value ? nonOutlinedStops.active : nonOutlinedStops.initial;\n    const fontVal = focused || value ? 1 : 0;\n\n    Animated.parallel([\n      Animated.timing(translateYAnimation, {\n        toValue: position,\n        duration: animationDuration,\n        easing: animationEasing,\n      }),\n      Animated.timing(fontSizeAnimation, {\n        toValue: fontVal,\n        duration: animationDuration,\n        easing: animationEasing,\n      }),\n    ]).start();\n  }\n\n  _handleLabelOutlinedAnimation() {\n    const { focused, value, dense } = this.props;\n    const {\n      translateYAnimation,\n      animationEasing,\n      animationDuration,\n      fontSizeAnimation,\n      canAnimate,\n    } = this.state;\n    if (!canAnimate) return;\n\n    let position =\n      focused || value ? outlinedStops.active : outlinedStops.initial;\n    const fontVal = focused || value ? 1 : 0;\n\n    if (dense)\n      position =\n        focused || value\n          ? outlinedStopsDense.active\n          : outlinedStopsDense.initial;\n\n    Animated.parallel([\n      Animated.timing(translateYAnimation, {\n        toValue: position,\n        duration: animationDuration,\n        easing: animationEasing,\n      }),\n      Animated.timing(fontSizeAnimation, {\n        toValue: fontVal,\n        duration: animationDuration,\n        easing: animationEasing,\n      }),\n    ]).start();\n  }\n\n  render() {\n    let {\n      error,\n      labelColor,\n      label,\n      focused,\n      type,\n      leadingIcon,\n      prefix,\n      theme,\n      style,\n      dense,\n      focusedLabelColor,\n      onLayout,\n    } = this.props;\n    const { translateYAnimation, fontSizeAnimation } = this.state;\n\n    let translateX = 12;\n    if (type === 'flat') {\n      translateX = -1;\n    } else if (type === 'outlined') {\n      translateX = 10;\n    }\n\n    if (!labelColor) labelColor = 'rgba(0, 0, 0, 0.54)';\n\n    if (focused) labelColor = focusedLabelColor || theme.primary.main;\n\n    if (error) {\n      labelColor = 'red';\n    }\n\n    let marginLeft = leadingIcon ? 32 : 0;\n    if (type == 'flat' && leadingIcon) {\n      marginLeft = 42;\n    } else if (type == 'filled' && prefix) {\n      marginLeft = 6;\n    }\n\n    const baseFontSize =\n      (StyleSheet.flatten(style) || {}).fontSize ||\n      theme.subtitleOne.fontSize ||\n      16;\n\n    const fontStyle = {\n      fontSize: fontSizeAnimation.interpolate({\n        inputRange: [0, 1],\n        outputRange: [baseFontSize, baseFontSize * (dense ? 0.65 : 0.75)],\n      }),\n    };\n\n    return (\n      <Animated.View\n        style={[\n          styles.container,\n          {\n            marginLeft: marginLeft,\n          },\n        ]}\n        onLayout={(e) => onLayout && onLayout(e)}\n        pointerEvents=\"none\">\n        <Animated.Text\n          style={[\n            styles.label,\n            {\n              color: labelColor,\n              backgroundColor: type == 'outlined' ? 'white' : 'transparent',\n              paddingHorizontal: type == 'outlined' ? 4 : 0,\n              transform: [\n                { translateY: translateYAnimation },\n                { translateX: I18nManager.isRTL ? -translateX : translateX },\n              ],\n            },\n            style,\n            fontStyle,\n          ]}>\n          {label}\n        </Animated.Text>\n      </Animated.View>\n    );\n  }\n}\n\nexport default withTheme(TextFieldLabel);\n"
  },
  {
    "path": "src/Components/TextField/TextFieldLabel/TextFieldLabel.styles.js",
    "content": "import { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  container: { position: 'absolute', zIndex: 10 },\n  label: {},\n});\nexport default styles;\n"
  },
  {
    "path": "src/Components/TextField/TextFieldLabel/TextFieldLabel.test.js",
    "content": "import React from 'react';\nimport TextFieldLabel from './TextFieldLabel';\n\nimport renderer from 'react-test-renderer';\n\ntest('TextFieldLabel Renders', () => {\n  const tree = renderer.create(<TextFieldLabel />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/TextField/TextFieldLabel/__snapshots__/TextFieldLabel.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`TextFieldLabel Renders 1`] = `\n<View\n  onLayout={[Function]}\n  pointerEvents=\"none\"\n  style={\n    Object {\n      \"marginLeft\": 0,\n      \"position\": \"absolute\",\n      \"zIndex\": 10,\n    }\n  }\n  useNativeDriver={true}\n>\n  <Text\n    style={\n      Object {\n        \"backgroundColor\": \"transparent\",\n        \"color\": \"rgba(0, 0, 0, 0.54)\",\n        \"fontSize\": 16,\n        \"paddingHorizontal\": 0,\n        \"transform\": Array [\n          Object {\n            \"translateY\": 20,\n          },\n          Object {\n            \"translateX\": 12,\n          },\n        ],\n      }\n    }\n    useNativeDriver={true}\n  />\n</View>\n`;\n"
  },
  {
    "path": "src/Components/TextField/TextFieldOutline/TextFieldOutline.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { View, TextInput, Platform } from 'react-native';\nimport withTheme from '../../../Theme/withTheme';\nimport TextFieldLabel from '../TextFieldLabel/TextFieldLabel';\nimport TextFieldHelperText from '../TextFieldHelperText/TextFieldHelperText';\nimport styles, { OUTLINED_LEFT_PADDING } from './TextFieldOutline.styles';\n\nclass TextFieldOutlined extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    error: PropTypes.bool,\n    label: PropTypes.string,\n    labelColor: PropTypes.string,\n    labelStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    handleFocus: PropTypes.func,\n    handleBlur: PropTypes.func,\n    focused: PropTypes.bool,\n    helperText: PropTypes.string,\n    helperVisible: PropTypes.bool,\n    helperTextStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    leadingIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),\n    trailingIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),\n    dense: PropTypes.bool,\n    value: PropTypes.string,\n    multiline: PropTypes.bool,\n    suffix: PropTypes.node,\n    prefix: PropTypes.node,\n    testID: PropTypes.string,\n    focusedLabelColor: PropTypes.string,\n  };\n\n  static defaultProps = {\n    helperVisible: true,\n  };\n\n  state = {\n    height: 56,\n  };\n\n  componentDidUpdate(prevProps) {\n    const { value, multiline } = this.props;\n    if (value && value.length < 1 && prevProps.value.length > 0 && multiline) {\n      this.setState({ height: 56 });\n    }\n  }\n\n  _renderLeadingIcon() {\n    const { leadingIcon } = this.props;\n    const isFunc = typeof leadingIcon === 'function';\n\n    return (\n      <View style={{ position: 'absolute', left: 8, top: 16 }}>\n        {isFunc ? leadingIcon() : leadingIcon}\n      </View>\n    );\n  }\n\n  _renderTrailingIcon() {\n    const { trailingIcon } = this.props;\n    const isFunc = typeof trailingIcon === 'function';\n\n    return (\n      <View style={{ position: 'absolute', right: 12, top: 16 }}>\n        {isFunc ? trailingIcon() : trailingIcon}\n      </View>\n    );\n  }\n  _renderPrefix() {\n    const { prefix } = this.props;\n\n    return (\n      <View style={{ position: 'absolute', left: 16, top: 20 }}>\n        {React.cloneElement(prefix, {\n          color: prefix.props.color ? prefix.props.color : 'rgba(0, 0, 0, .57)',\n          fontSize: prefix.props.fontSize ? prefix.props.fontSize : 16,\n        })}\n      </View>\n    );\n  }\n\n  _renderSuffix() {\n    const { suffix } = this.props;\n\n    return (\n      <View style={{ position: 'absolute', right: 16, top: 28 }}>\n        {React.cloneElement(suffix, {\n          color: suffix.props.color ? suffix.props.color : 'rgba(0, 0, 0, .57)',\n          fontSize: suffix.props.fontSize ? suffix.props.fontSize : 12,\n        })}\n      </View>\n    );\n  }\n\n  _updateTextInputHeight = e => {\n    if (!this.props.multiline) return;\n\n    const nativeHeight = e.nativeEvent.contentSize.height;\n\n    this.setState({\n      height: nativeHeight,\n    });\n  };\n\n  render() {\n    const {\n      style,\n      containerStyle,\n      error,\n      label,\n      labelColor,\n      labelStyle,\n      handleFocus,\n      handleBlur,\n      focused,\n      helperText,\n      helperVisible,\n      helperTextStyle,\n      leadingIcon,\n      trailingIcon,\n      dense,\n      suffix,\n      prefix,\n      testID,\n      focusedLabelColor,\n      ...rest\n    } = this.props;\n\n    let borderColor = focused ? 'rgba(33, 150, 243, 1)' : 'rgb(192, 192, 192)';\n    if (error) borderColor = 'red';\n\n    let height =\n      rest.multiline || rest.numberOfLines > 1 ? this.state.height : 56;\n\n    if (dense) {\n      height = 40;\n    }\n\n    let paddingLeft = leadingIcon ? 44 : OUTLINED_LEFT_PADDING;\n    if (prefix) paddingLeft = 32;\n\n    const platformStyles = Platform.OS == 'web' ? { outlineWidth: 0 } : {};\n    return (\n      <View\n        style={[\n          styles.containerStyle,\n          {\n            marginBottom: helperText && helperVisible ? 20 : 0,\n            marginTop: 8,\n          },\n          containerStyle,\n        ]}>\n        {label ? (\n          <TextFieldLabel\n            label={label}\n            focused={focused}\n            error={error}\n            value={rest.value}\n            type={'outlined'}\n            labelColor={labelColor}\n            style={labelStyle}\n            leadingIcon={!!leadingIcon}\n            dense={dense}\n            prefix={prefix}\n            focusedLabelColor={focusedLabelColor}\n          />\n        ) : null}\n        {leadingIcon ? this._renderLeadingIcon() : null}\n        {prefix ? this._renderPrefix() : null}\n        <TextInput\n          style={[\n            styles.textField,\n            styles.outlinedInput,\n            platformStyles,\n            {\n              borderWidth: focused ? 2 : 1,\n              borderColor,\n              minHeight: dense ? 40 : 56,\n              height: height,\n              paddingBottom: rest.multiline ? 8 : 0,\n              paddingTop: rest.multiline ? 20 : 0,\n\n              paddingLeft: paddingLeft,\n              paddingRight: trailingIcon || suffix ? 36 : 0,\n            },\n            style,\n          ]}\n          testID={testID}\n          onContentSizeChange={e => this._updateTextInputHeight(e)}\n          {...rest}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n        />\n        {trailingIcon ? this._renderTrailingIcon() : null}\n        {suffix ? this._renderSuffix() : null}\n\n        <TextFieldHelperText\n          error={error}\n          visible={helperVisible || error}\n          style={helperTextStyle}>\n          {helperText}\n        </TextFieldHelperText>\n      </View>\n    );\n  }\n}\n\nexport default withTheme(TextFieldOutlined);\n"
  },
  {
    "path": "src/Components/TextField/TextFieldOutline/TextFieldOutline.stories.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\n\nimport { State, Store } from '@sambego/storybook-state';\nimport Header from '../../../storybook/components/Header';\nimport Container from '../../../storybook/components/Container';\nimport { storiesOf } from '../../../storybook/helpers/storiesOf';\nimport { TextField, Icon, Caption, BodyText } from '../../../';\n\nconst store = new Store({\n  outlinedOne: '',\n  outlinedTwo: '',\n  outlinedThree: '',\n});\n\nexport default storiesOf('Components|TextField/Outlined', module)\n  .addParameters({ jest: ['TextFieldOutlined'] })\n\n  .add('simple', () => (\n    <Container>\n      <Header title={'Outlined TextField'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <TextField\n              type={'outlined'}\n              containerStyle={{ marginTop: 20 }}\n              label={'Label'}\n              value={state.outlinedOne}\n              onChangeText={value => store.set({ outlinedOne: value })}\n            />\n\n            <TextField\n              type={'outlined'}\n              containerStyle={{ marginTop: 20 }}\n              label={'Label'}\n              error={true}\n              value={state.outlinedhree}\n              onChangeText={value => store.set({ outlinedhree: value })}\n              helperText={'There is an error'}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('multiline', () => (\n    <Container>\n      <Header title={'Outlined TextField'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <TextField\n              type={'outlined'}\n              containerStyle={{ marginTop: 20 }}\n              label={'Multiline'}\n              multiline\n              value={state.outlinedTwo}\n              onChangeText={value => store.set({ outlinedTwo: value })}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('with leadingIcon', () => (\n    <Container>\n      <Header title={'Outlined TextField'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <TextField\n              type={'outlined'}\n              containerStyle={{ marginTop: 20 }}\n              label={'Icon'}\n              leadingIcon={\n                <Icon name={'date-range'} size={24} color={'#6e6e6e'} />\n              }\n              value={state.outlinedOne}\n              onChangeText={value => store.set({ outlinedOne: value })}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('with trailingIcon', () => (\n    <Container>\n      <Header title={'Outlined TextField'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <TextField\n              type={'outlined'}\n              containerStyle={{ marginTop: 20 }}\n              label={'Icon'}\n              trailingIcon={\n                <Icon name={'date-range'} size={24} color={'#6e6e6e'} />\n              }\n              value={state.outlinedOne}\n              onChangeText={value => store.set({ outlinedOne: value })}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('with prefix', () => (\n    <Container>\n      <Header title={'Outlined TextField'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <TextField\n              type={'outlined'}\n              containerStyle={{ marginTop: 20 }}\n              label={'Pounds'}\n              prefix={<BodyText text=\"$\" />}\n              value={state.outlinedOne}\n              onChangeText={value => store.set({ outlinedOne: value })}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('with suffix', () => (\n    <Container>\n      <Header title={'Outlined TextField'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <TextField\n              type={'outlined'}\n              containerStyle={{ marginTop: 20 }}\n              label={'Pounds'}\n              suffix={<Caption text=\"lbs\" />}\n              value={state.outlinedOne}\n              onChangeText={value => store.set({ outlinedOne: value })}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('with helperText', () => (\n    <Container>\n      <Header title={'Outlined TextField'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <TextField\n              type={'outlined'}\n              containerStyle={{ marginTop: 20 }}\n              label={'Label'}\n              value={state.outlinedOne}\n              onChangeText={value => store.set({ outlinedOne: value })}\n              helperText={'This is some helper text'}\n            />\n\n            <TextField\n              type={'outlined'}\n              containerStyle={{ marginTop: 20 }}\n              label={'Label'}\n              error={true}\n              value={state.outlinedhree}\n              onChangeText={value => store.set({ outlinedhree: value })}\n              helperText={'There is an error'}\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('dense', () => (\n    <Container>\n      <Header title={'Outlined TextField'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View>\n            <TextField\n              type={'outlined'}\n              containerStyle={{ marginTop: 20 }}\n              label={'Label'}\n              value={state.outlinedOne}\n              onChangeText={value => store.set({ outlinedOne: value })}\n              dense\n            />\n\n            <TextField\n              type={'outlined'}\n              containerStyle={{ marginTop: 20 }}\n              error={true}\n              value={state.outlinedhree}\n              onChangeText={value => store.set({ outlinedhree: value })}\n              dense\n            />\n          </View>\n        )}\n      </State>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/TextField/TextFieldOutline/TextFieldOutline.styles.js",
    "content": "import { StyleSheet } from 'react-native';\n\nexport const OUTLINED_LEFT_PADDING = 14;\n\nconst styles = StyleSheet.create({\n  containerStyle: {},\n  textField: {\n    height: 56,\n    paddingHorizontal: OUTLINED_LEFT_PADDING,\n  },\n  outlinedInput: {\n    borderRadius: 4,\n  },\n});\nexport default styles;\n"
  },
  {
    "path": "src/Components/TextField/TextFieldOutline/TextFieldOutline.test.js",
    "content": "import React from 'react';\nimport TextFieldOutline from './TextFieldOutline';\n\nimport renderer from 'react-test-renderer';\n\ntest('TextFieldOutline Renders', () => {\n  const tree = renderer.create(<TextFieldOutline />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/TextField/TextFieldOutline/__snapshots__/TextFieldOutline.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`TextFieldOutline Renders 1`] = `\n<View\n  style={\n    Array [\n      Object {},\n      Object {\n        \"marginBottom\": 0,\n        \"marginTop\": 8,\n      },\n      undefined,\n    ]\n  }\n>\n  <TextInput\n    allowFontScaling={true}\n    onContentSizeChange={[Function]}\n    rejectResponderTermination={true}\n    style={\n      Array [\n        Object {\n          \"height\": 56,\n          \"paddingHorizontal\": 14,\n        },\n        Object {\n          \"borderRadius\": 4,\n        },\n        Object {},\n        Object {\n          \"borderColor\": \"rgb(192, 192, 192)\",\n          \"borderWidth\": 1,\n          \"height\": 56,\n          \"minHeight\": 56,\n          \"paddingBottom\": 0,\n          \"paddingLeft\": 14,\n          \"paddingRight\": 0,\n          \"paddingTop\": 0,\n        },\n        undefined,\n      ]\n    }\n    theme={\n      Object {\n        \"action\": Object {\n          \"active\": \"rgba(0, 0, 0, 0.54)\",\n          \"disabled\": \"rgba(0, 0, 0, 0.26)\",\n          \"disabledBackground\": \"rgba(0, 0, 0, 0.12)\",\n          \"hover\": \"rgba(0, 0, 0, 0.08)\",\n          \"hoverOpacity\": 0.08,\n          \"selected\": \"rgba(0, 0, 0, 0.14)\",\n        },\n        \"background\": Object {\n          \"default\": \"#fafafa\",\n        },\n        \"bodyText\": Object {\n          \"fontSize\": 16,\n          \"letterSpacing\": 0.5,\n          \"lineHeight\": 16,\n        },\n        \"bodyTextTwo\": Object {\n          \"fontSize\": 14,\n          \"letterSpacing\": 0.25,\n          \"lineHeight\": 14,\n        },\n        \"button\": Object {\n          \"alignItems\": \"center\",\n          \"borderRadius\": 4,\n          \"display\": \"flex\",\n          \"fontSize\": 14,\n          \"fontWeight\": \"500\",\n          \"height\": 36,\n          \"letterSpacing\": 1.25,\n          \"lineHeight\": 16,\n          \"textAlign\": \"center\",\n          \"textTransform\": \"uppercase\",\n        },\n        \"buttonText\": Object {\n          \"color\": \"#2196f3\",\n          \"fontStyle\": \"normal\",\n          \"letterSpacing\": 0.5,\n        },\n        \"caption\": Object {\n          \"fontSize\": 12,\n          \"letterSpacing\": 0.4,\n          \"lineHeight\": 12,\n        },\n        \"containedButton\": Object {\n          \"backgroundColor\": \"#2196f3\",\n          \"paddingHorizontal\": 16,\n        },\n        \"divider\": Object {\n          \"backgroundColor\": \"rgba(0,0,0,.12)\",\n          \"width\": \"100%\",\n        },\n        \"drawer\": Object {\n          \"backgroundColor\": \"white\",\n          \"borderRightColor\": \"rgba(0,0,0,.12)\",\n          \"borderRightWidth\": 1,\n          \"borderStyle\": \"solid\",\n          \"position\": \"absolute\",\n          \"zIndex\": 100,\n        },\n        \"drawerHeader\": Object {\n          \"borderBottomColor\": \"rgba(0,0,0,.12)\",\n          \"borderBottomWidth\": 0.5,\n          \"paddingHorizontal\": 16,\n          \"paddingVertical\": 18,\n        },\n        \"drawerHeaderAvatarContainer\": Object {\n          \"marginBottom\": 20,\n        },\n        \"drawerHeaderSubtitle\": Object {\n          \"color\": \"rgba(0,0,0,.67)\",\n          \"fontSize\": 12,\n          \"marginTop\": 4,\n        },\n        \"drawerHeaderTitle\": Object {\n          \"color\": \"rgba(0,0,0,.87)\",\n          \"fontSize\": 20,\n          \"fontWeight\": \"500\",\n        },\n        \"drawerItem\": Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"transparent\",\n          \"borderRadius\": 4,\n          \"flexDirection\": \"row\",\n          \"height\": 40,\n          \"paddingHorizontal\": 8,\n          \"zIndex\": 10,\n        },\n        \"drawerItemActive\": Object {\n          \"backgroundColor\": \"rgba(30, 136, 229, .2)\",\n          \"color\": \"#1e88e5\",\n        },\n        \"drawerItemIcon\": Object {\n          \"color\": \"grey\",\n          \"size\": 20,\n        },\n        \"drawerItemText\": Object {\n          \"color\": \"rgba(0,0,0,.87)\",\n          \"fontSize\": 14,\n          \"fontWeight\": \"500\",\n          \"zIndex\": 10,\n        },\n        \"error\": Object {\n          \"dark\": \"#d32f2f\",\n          \"light\": \"#e57373\",\n          \"main\": \"#f44336\",\n        },\n        \"headingFive\": Object {\n          \"fontSize\": 24,\n          \"lineHeight\": 24,\n        },\n        \"headingFour\": Object {\n          \"fontSize\": 34,\n          \"letterSpacing\": 0.25,\n          \"lineHeight\": 34,\n        },\n        \"headingOne\": Object {\n          \"fontSize\": 96,\n          \"fontWeight\": \"300\",\n          \"letterSpacing\": -1.5,\n          \"lineHeight\": 96,\n        },\n        \"headingSix\": Object {\n          \"fontSize\": 20,\n          \"fontWeight\": \"500\",\n          \"letterSpacing\": 0.15,\n          \"lineHeight\": 20,\n        },\n        \"headingThree\": Object {\n          \"fontSize\": 48,\n          \"lineHeight\": 48,\n        },\n        \"headingTwo\": Object {\n          \"fontSize\": 60,\n          \"fontWeight\": \"300\",\n          \"letterSpacing\": -0.5,\n          \"lineHeight\": 60,\n        },\n        \"outlinedButton\": Object {\n          \"borderColor\": \"rgba(0,0,0,.29)\",\n          \"borderWidth\": 0.5,\n          \"boxSizing\": \"border-box\",\n          \"paddingHorizontal\": 16,\n        },\n        \"overline\": Object {\n          \"fontSize\": 10,\n          \"letterSpacing\": 1.5,\n          \"lineHeight\": 10,\n          \"textTransform\": \"uppercase\",\n        },\n        \"paper\": Object {\n          \"backgroundColor\": \"white\",\n          \"borderRadius\": 2,\n        },\n        \"primary\": Object {\n          \"dark\": \"#005cb2\",\n          \"light\": \"#6ab7ff\",\n          \"main\": \"#1e88e5\",\n        },\n        \"searchBar\": Object {\n          \"alignItems\": \"center\",\n          \"backgroundColor\": \"rgba(255,255,255,1)\",\n          \"flexDirection\": \"row\",\n          \"height\": 56,\n          \"paddingHorizontal\": 16,\n          \"width\": \"100%\",\n        },\n        \"searchBarNavigationIcon\": Object {\n          \"color\": \"black\",\n          \"size\": 24,\n        },\n        \"searchBarcloseIcon\": Object {\n          \"color\": \"black\",\n          \"size\": 24,\n        },\n        \"searchInput\": Object {\n          \"flex\": 1,\n          \"fontSize\": 16,\n          \"height\": 30,\n          \"marginLeft\": 8,\n          \"shadowColor\": \"#000\",\n          \"shadowOffset\": Object {\n            \"height\": 0,\n            \"width\": 0,\n          },\n          \"shadowOpacity\": 0,\n          \"shadowRadius\": 1,\n        },\n        \"secondary\": Object {\n          \"dark\": \"#c51162\",\n          \"light\": \"#ff4081\",\n          \"main\": \"#f50057\",\n        },\n        \"subtitleOne\": Object {\n          \"fontSize\": 16,\n          \"letterSpacing\": 0.15,\n          \"lineHeight\": 16,\n        },\n        \"subtitleTwo\": Object {\n          \"fontSize\": 14,\n          \"fontWeight\": \"500\",\n          \"letterSpacing\": 0.1,\n          \"lineHeight\": 14,\n        },\n        \"text\": Object {},\n        \"textColor\": Object {\n          \"disabled\": \"rgba(0, 0, 0, 0.38)\",\n          \"hint\": \"rgba(0, 0, 0, 0.38)\",\n          \"primary\": \"rgba(0, 0, 0, 0.87)\",\n          \"secondary\": \"rgba(0, 0, 0, 0.54)\",\n        },\n      }\n    }\n    underlineColorAndroid=\"transparent\"\n  />\n  <Text\n    style={\n      Array [\n        Object {\n          \"bottom\": -20,\n          \"color\": \"rgba(0,0,0,0.6)\",\n          \"fontSize\": 12,\n          \"height\": 16,\n          \"marginLeft\": 12,\n          \"position\": \"absolute\",\n          \"width\": \"100%\",\n          \"zIndex\": 10,\n        },\n        Object {\n          \"color\": \"rgba(0,0,0,0.6)\",\n        },\n        undefined,\n      ]\n    }\n  />\n</View>\n`;\n"
  },
  {
    "path": "src/Components/TextField/TextFieldUnderline/TextFieldUnderline.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Animated, Easing } from 'react-native';\nimport withTheme from '../../../Theme/withTheme';\nimport styles from './TextFieldUnderline.styles';\n\nclass TextFieldUnderline extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    error: PropTypes.bool,\n    underlineColor: PropTypes.string,\n    underlineActiveColor: PropTypes.string,\n    focused: PropTypes.bool,\n  };\n\n  state = {\n    underLineXAnimation: new Animated.Value(0),\n    animationDuration: 200,\n    animationEasing: Easing.bounce,\n  };\n\n  componentDidUpdate(prevProps) {\n    const { focused, error } = this.props;\n    if (focused !== prevProps.focused && !error) {\n      this._handleUnderlineAnimation();\n    }\n  }\n\n  _handleUnderlineAnimation() {\n    const { focused } = this.props;\n    const {\n      underLineXAnimation,\n      animationEasing,\n      animationDuration,\n    } = this.state;\n\n    let value = focused ? 1 : 0;\n\n    Animated.timing(underLineXAnimation, {\n      toValue: value,\n      duration: animationDuration,\n      easing: animationEasing,\n      useNativeDriver: true,\n    }).start();\n  }\n\n  render() {\n    let { error, underlineColor, underlineActiveColor, focused } = this.props;\n    const { underLineXAnimation } = this.state;\n\n    let baseUnderlineScale = 0.5;\n\n    if (!underlineColor) underlineColor = 'rgba(0, 0, 0, 0.42)';\n    if (!underlineActiveColor) underlineActiveColor = 'rgba(33, 150, 243, 1)';\n\n    if (error) {\n      underlineColor = 'red';\n      baseUnderlineScale = 1;\n    }\n\n    return (\n      <Animated.View\n        useNativeDriver={true}\n        style={[\n          styles.underline,\n          {\n            backgroundColor: underlineColor,\n            transform: [{ scaleY: baseUnderlineScale }],\n          },\n        ]}>\n        <Animated.View\n          useNativeDriver={true}\n          style={[\n            styles.underline,\n            {\n              backgroundColor: underlineActiveColor,\n              opacity: focused && !error ? 1 : 0,\n              transform: [\n                { scaleX: underLineXAnimation },\n                { scaleY: focused ? 2 : 0 },\n              ],\n            },\n          ]}\n        />\n      </Animated.View>\n    );\n  }\n}\n\nexport default withTheme(TextFieldUnderline);\n"
  },
  {
    "path": "src/Components/TextField/TextFieldUnderline/TextFieldUnderline.styles.js",
    "content": "import { StyleSheet } from 'react-native';\nconst styles = StyleSheet.create({\n  underline: {\n    position: 'absolute',\n    left: 0,\n    right: 0,\n    bottom: 0,\n    height: 2,\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/TextField/TextFieldUnderline/TextFieldUnderline.test.js",
    "content": "import React from 'react';\nimport TextFieldUnderline from './TextFieldUnderline';\n\nimport renderer from 'react-test-renderer';\n\ntest('TextFieldUnderline Renders', () => {\n  const tree = renderer.create(<TextFieldUnderline />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/TextField/TextFieldUnderline/__snapshots__/TextFieldUnderline.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`TextFieldUnderline Renders 1`] = `\n<View\n  style={\n    Object {\n      \"backgroundColor\": \"rgba(0, 0, 0, 0.42)\",\n      \"bottom\": 0,\n      \"height\": 2,\n      \"left\": 0,\n      \"position\": \"absolute\",\n      \"right\": 0,\n      \"transform\": Array [\n        Object {\n          \"scaleY\": 0.5,\n        },\n      ],\n    }\n  }\n  useNativeDriver={true}\n>\n  <View\n    style={\n      Object {\n        \"backgroundColor\": \"rgba(33, 150, 243, 1)\",\n        \"bottom\": 0,\n        \"height\": 2,\n        \"left\": 0,\n        \"opacity\": 0,\n        \"position\": \"absolute\",\n        \"right\": 0,\n        \"transform\": Array [\n          Object {\n            \"scaleX\": 0,\n          },\n          Object {\n            \"scaleY\": 0,\n          },\n        ],\n      }\n    }\n    useNativeDriver={true}\n  />\n</View>\n`;\n"
  },
  {
    "path": "src/Components/TextField/__snapshots__/TextField.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`TextField Renders 1`] = `\n<Context.Consumer>\n  [Function]\n</Context.Consumer>\n`;\n"
  },
  {
    "path": "src/Components/TextField/index.js",
    "content": "export { default } from './TextField';\nexport { default as TextFieldHelperText } from './TextFieldHelperText';\n"
  },
  {
    "path": "src/Components/ToggleButton/ToggleButton.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport withTheme from '../../Theme/withTheme';\nimport Ripple from '../Ripple/Ripple.js';\n\nimport { ToggleButtonContext } from './ToggleButtonGroup/ToggleButtonGroup';\n\nclass ToggleButton extends Component {\n  static propTypes = {\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    active: PropTypes.bool,\n    onPress: PropTypes.func,\n    value: PropTypes.string,\n    activeNode: PropTypes.node,\n    inActiveNode: PropTypes.node,\n    rippleColor: PropTypes.string,\n    size: PropTypes.number,\n    rippleContainerBorderRadius: PropTypes.number,\n    testID: PropTypes.string,\n  };\n  state = {\n    isActive: false,\n  };\n\n  static defaultProps = {\n    size: 30,\n  };\n\n  componentDidMount() {\n    const { active } = this.props;\n    if (active) {\n      this.setState({ isActive: true });\n    }\n  }\n  componentDidUpdate(prevProps) {\n    const { active } = this.props;\n\n    if (active != prevProps.active) {\n      this.setState({ isActive: active });\n    }\n  }\n\n  handleToggle() {\n    const { onPress } = this.props;\n    const { isActive } = this.state;\n\n    this.setState({ isActive: !isActive });\n    if (onPress) onPress();\n  }\n\n  render() {\n    const {\n      style,\n      size,\n      rippleColor,\n      value,\n      activeNode,\n      inActiveNode,\n      rippleContainerBorderRadius,\n      testID,\n    } = this.props;\n    const { isActive } = this.state;\n\n    return (\n      <ToggleButtonContext.Consumer>\n        {context => (\n          <Ripple\n            rippleContainerBorderRadius={\n              rippleContainerBorderRadius || rippleContainerBorderRadius == 0\n                ? rippleContainerBorderRadius\n                : 100\n            }\n            rippleColor={rippleColor ? rippleColor : 'rgb(0, 0, 0)'}\n            onPress={() => {\n              if (context && context.updateActive) {\n                return context.updateActive(value);\n              } else {\n                return this.handleToggle();\n              }\n            }}\n            testID={testID}\n            style={[\n              style,\n              {\n                height: size * 1.2,\n                width: size * 1.2,\n                justifyContent: 'center',\n                alignItems: 'center',\n              },\n            ]}>\n            {isActive || context.active == value ? activeNode : inActiveNode}\n          </Ripple>\n        )}\n      </ToggleButtonContext.Consumer>\n    );\n  }\n}\n\nexport default withTheme(ToggleButton);\n"
  },
  {
    "path": "src/Components/ToggleButton/ToggleButton.stories.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\n\nimport { Icon, ToggleButton, ToggleButtonGroup } from '../../';\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\n\nexport default storiesOf('Components|Toggle Button', module)\n  .addParameters({ jest: ['ToggleButton'] })\n  .add('Single', () => (\n    <Container>\n      <Header title={'Toggle Button'} />\n      <View style={{ flexDirection: 'row' }}>\n        <ToggleButton\n          activeNode={<Icon name=\"alarm\" size={32} />}\n          inActiveNode={\n            <Icon name=\"alarm\" size={32} style={{ opacity: 0.5 }} />\n          }\n          size={32}\n        />\n        <ToggleButton\n          activeNode={<Icon name=\"face\" size={32} color={'purple'} />}\n          inActiveNode={\n            <Icon\n              name=\"face\"\n              size={32}\n              style={{ opacity: 0.5 }}\n              color={'purple'}\n            />\n          }\n          size={32}\n        />\n        <ToggleButton\n          activeNode={<Icon name=\"arrow-back\" size={32} color={'orange'} />}\n          inActiveNode={\n            <Icon\n              name=\"arrow-back\"\n              size={32}\n              style={{ opacity: 0.5 }}\n              color={'orange'}\n            />\n          }\n          size={32}\n        />\n      </View>\n      <View style={{ flexDirection: 'row' }}>\n        <ToggleButton\n          activeNode={<Icon name=\"favorite\" size={32} />}\n          inActiveNode={<Icon name=\"favorite-border\" size={32} />}\n          size={32}\n        />\n        <ToggleButton\n          activeNode={<Icon name=\"brightness-1\" size={32} color={'purple'} />}\n          inActiveNode={<Icon name=\"adjust\" size={32} color={'purple'} />}\n          size={32}\n        />\n        <ToggleButton\n          activeNode={<Icon name=\"label\" size={32} color={'orange'} />}\n          inActiveNode={\n            <Icon\n              name=\"label-outline\"\n              size={32}\n              style={{ opacity: 0.5 }}\n              color={'orange'}\n            />\n          }\n          size={32}\n        />\n      </View>\n    </Container>\n  ))\n  .add('Custom', () => (\n    <Container>\n      <Header title={'Toggle Button'} />\n      <View style={{ flexDirection: 'row' }}>\n        <ToggleButton\n          activeNode={\n            <View\n              style={{\n                backgroundColor: 'rgba(0,0,0,.12)',\n                borderWidth: 1,\n                borderColor: 'rgba(0,0,0,.12)',\n                padding: 8,\n              }}>\n              <Icon name=\"format-italic\" size={20} />\n            </View>\n          }\n          inActiveNode={\n            <View\n              style={{\n                backgroundColor: 'white',\n                borderWidth: 1,\n                borderColor: 'rgba(0,0,0,.12)',\n                padding: 8,\n              }}>\n              <Icon name=\"format-italic\" size={20} />\n            </View>\n          }\n          rippleContainerBorderRadius={0}\n        />\n        <ToggleButton\n          activeNode={\n            <View\n              style={{\n                backgroundColor: 'rgba(0,0,0,.12)',\n                borderWidth: 1,\n                borderRightWidth: 0,\n                borderLeftWidth: 0,\n                borderColor: 'rgba(0,0,0,.12)',\n                padding: 8,\n              }}>\n              <Icon name=\"format-bold\" size={20} />\n            </View>\n          }\n          inActiveNode={\n            <View\n              style={{\n                backgroundColor: 'white',\n                borderWidth: 1,\n                borderRightWidth: 0,\n                borderLeftWidth: 0,\n                borderColor: 'rgba(0,0,0,.12)',\n                padding: 8,\n              }}>\n              <Icon name=\"format-bold\" size={20} />\n            </View>\n          }\n          rippleContainerBorderRadius={0}\n        />\n        <ToggleButton\n          activeNode={\n            <View\n              style={{\n                backgroundColor: 'rgba(0,0,0,.12)',\n                borderWidth: 1,\n                borderColor: 'rgba(0,0,0,.12)',\n                padding: 8,\n              }}>\n              <Icon name=\"format-underlined\" size={20} />\n            </View>\n          }\n          inActiveNode={\n            <View\n              style={{\n                backgroundColor: 'white',\n                borderWidth: 1,\n                borderColor: 'rgba(0,0,0,.12)',\n                padding: 8,\n              }}>\n              <Icon name=\"format-underlined\" size={20} />\n            </View>\n          }\n          rippleContainerBorderRadius={0}\n        />\n      </View>\n    </Container>\n  ))\n  .add('Group', () => (\n    <Container>\n      <Header title={'Toggle Button Group'} />\n      <ToggleButtonGroup>\n        <View style={{ flexDirection: 'row' }}>\n          <ToggleButton\n            activeNode={\n              <View\n                style={{\n                  backgroundColor: 'rgba(0,0,0,.12)',\n                  borderWidth: 1,\n                  borderColor: 'rgba(0,0,0,.12)',\n                  padding: 8,\n                }}>\n                <Icon name=\"format-align-center\" size={20} />\n              </View>\n            }\n            inActiveNode={\n              <View\n                style={{\n                  backgroundColor: 'white',\n                  borderWidth: 1,\n                  borderColor: 'rgba(0,0,0,.12)',\n                  padding: 8,\n                }}>\n                <Icon name=\"format-align-center\" size={20} />\n              </View>\n            }\n            rippleContainerBorderRadius={0}\n            value={'center'}\n          />\n          <ToggleButton\n            value={'bold'}\n            activeNode={\n              <View\n                style={{\n                  backgroundColor: 'rgba(0,0,0,.12)',\n                  borderWidth: 1,\n                  borderRightWidth: 0,\n                  borderLeftWidth: 0,\n                  borderColor: 'rgba(0,0,0,.12)',\n                  padding: 8,\n                }}>\n                <Icon name=\"format-align-left\" size={20} />\n              </View>\n            }\n            inActiveNode={\n              <View\n                style={{\n                  backgroundColor: 'white',\n                  borderWidth: 1,\n                  borderRightWidth: 0,\n                  borderLeftWidth: 0,\n                  borderColor: 'rgba(0,0,0,.12)',\n                  padding: 8,\n                }}>\n                <Icon name=\"format-align-left\" size={20} />\n              </View>\n            }\n            rippleContainerBorderRadius={0}\n          />\n          <ToggleButton\n            value={'underlined'}\n            activeNode={\n              <View\n                style={{\n                  backgroundColor: 'rgba(0,0,0,.12)',\n                  borderWidth: 1,\n                  borderColor: 'rgba(0,0,0,.12)',\n                  padding: 8,\n                }}>\n                <Icon name=\"format-align-right\" size={20} />\n              </View>\n            }\n            inActiveNode={\n              <View\n                style={{\n                  backgroundColor: 'white',\n                  borderWidth: 1,\n                  borderColor: 'rgba(0,0,0,.12)',\n                  padding: 8,\n                }}>\n                <Icon name=\"format-align-right\" size={20} />\n              </View>\n            }\n            rippleContainerBorderRadius={0}\n          />\n        </View>\n      </ToggleButtonGroup>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/ToggleButton/ToggleButton.styles.js",
    "content": ""
  },
  {
    "path": "src/Components/ToggleButton/ToggleButton.test.js",
    "content": "import React from 'react';\nimport { ToggleButton } from '../../';\n\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\n\ntest('ToggleButton Renders', () => {\n  const tree = renderer.render(<ToggleButton />);\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/ToggleButton/ToggleButtonGroup/ToggleButtonGroup.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport withTheme from '../../../Theme/withTheme';\n\nexport const ToggleButtonContext = React.createContext({\n  updateActive: '',\n  active: '',\n});\n\nclass ToggleButtonGroup extends Component {\n  static propTypes = {\n    onPress: PropTypes.func,\n    children: PropTypes.node,\n  };\n  state = {\n    active: '',\n  };\n\n  updateActive = value => {\n    this.setState({ active: value });\n    if (this.props.onPress) this.props.onPress(value);\n  };\n\n  render() {\n    const { children } = this.props;\n    return (\n      <ToggleButtonContext.Provider\n        value={{ updateActive: this.updateActive, active: this.state.active }}>\n        {children}\n      </ToggleButtonContext.Provider>\n    );\n  }\n}\n\nexport default withTheme(ToggleButtonGroup);\n"
  },
  {
    "path": "src/Components/ToggleButton/ToggleButtonGroup/ToggleButtonGroup.test.js",
    "content": "import React from 'react';\nimport { ToggleButtonGroup } from '../../../';\n\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\n\ntest('ToggleButtonGroup Renders', () => {\n  const tree = renderer.render(<ToggleButtonGroup />);\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/ToggleButton/ToggleButtonGroup/__snapshots__/ToggleButtonGroup.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`ToggleButtonGroup Renders 1`] = `\n<Context.Consumer>\n  [Function]\n</Context.Consumer>\n`;\n"
  },
  {
    "path": "src/Components/ToggleButton/ToggleButtonGroup/index.js",
    "content": "export { default } from './ToggleButtonGroup';\n"
  },
  {
    "path": "src/Components/ToggleButton/__snapshots__/ToggleButton.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`ToggleButton Renders 1`] = `\n<Context.Consumer>\n  [Function]\n</Context.Consumer>\n`;\n"
  },
  {
    "path": "src/Components/ToggleButton/index.js",
    "content": "export { default } from './ToggleButton';\nexport { default as ToggleButtonGroup } from './ToggleButtonGroup';\n"
  },
  {
    "path": "src/Components/Tooltip/Tooltip.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Platform, Text, View, TouchableWithoutFeedback } from 'react-native';\n\nimport Paper from '../Paper/Paper.js';\nimport Menu from '../Menu/Menu.js';\nimport shadow from '../../Utils/Shadow/shadow.js';\nimport Hoverable from '../../Utils/Hoverable/Hoverable.js';\n\nimport withTheme from '../../Theme/withTheme';\nimport styles from './Tooltip.styles';\n\nclass Tooltip extends Component {\n  static propTypes = {\n    children: PropTypes.node,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    content: PropTypes.string,\n    tooltipPosition: PropTypes.string,\n    testID: PropTypes.string,\n  };\n\n  state = {\n    visible: false,\n  };\n\n  show = () => {\n    this.setState({\n      visible: true,\n    });\n  };\n\n  hide = () => {\n    this.setState({\n      visible: false,\n    });\n  };\n\n  _toggle = () => {\n    const { visible } = this.state;\n\n    this.setState({ visible: !visible });\n  };\n\n  _hide = () => {\n    this.setState({ visible: false });\n  };\n\n  render() {\n    const { children, content, style, tooltipPosition, testID } = this.props;\n    const { visible } = this.state;\n\n    const platformTextStyles =\n      Platform.OS == 'web'\n        ? { whiteSpace: 'noWrap', fontSize: 10 }\n        : { fontSize: 14 };\n\n    const platformPaperStyles =\n      Platform.OS == 'web'\n        ? { height: 24, paddingHoriztonal: 8 }\n        : { height: 32, paddingHoriztonal: 16 };\n\n    return (\n      <Menu\n        tooltip\n        visible={visible}\n        testID={testID}\n        button={\n          <Hoverable onHoverIn={this._toggle} onHoverOut={this._hide}>\n            <TouchableWithoutFeedback onPress={this._toggle}>\n              <View>\n                {React.cloneElement(children, {\n                  onPress: () => {\n                    this._toggle();\n                    if (children.props.onPress) children.props.onPress();\n                  },\n                })}\n              </View>\n            </TouchableWithoutFeedback>\n          </Hoverable>\n        }\n        onBackdropPress={this._hide}\n        noBackDrop\n        tooltipPosition={tooltipPosition}\n        contentContainerStyle={{\n          backgroundColor: 'transparent',\n          paddingTop: 0,\n          paddingBottom: 0,\n        }}\n        menuStyle={{\n          width: 'auto',\n          minWidth: 'auto',\n          marginBottom: 40,\n          ...shadow(0),\n        }}>\n        <Paper style={[styles.card, platformPaperStyles, style]}>\n          <Text style={[styles.text, platformTextStyles]}>{content}</Text>\n        </Paper>\n      </Menu>\n    );\n  }\n}\n\nexport default withTheme(Tooltip);\n"
  },
  {
    "path": "src/Components/Tooltip/Tooltip.stories.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\n\nimport { Tooltip, Button } from '../../';\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\n\nexport default storiesOf('Components|Tooltip', module)\n  .addParameters({ jest: ['Tooltip'] })\n  .add('Tooltip', () => (\n    <Container>\n      <Header title={'Tooltip'} />\n      <View>\n        <View style={{ flexDirection: 'row', marginBottom: 30 }}>\n          <Tooltip content={\"I'm a tooltip\"}>\n            <Button type=\"outlined\" text={'Top'} />\n          </Tooltip>\n        </View>\n        <View style={{ marginBottom: 30 }}>\n          <Tooltip content={\"I'm a tooltip\"} tooltipPosition={'bottom'}>\n            <Button type=\"outlined\" text={'Bottom'} />\n          </Tooltip>\n        </View>\n        <View style={{ marginBottom: 30 }}>\n          <Tooltip content={\"I'm a tooltip\"} tooltipPosition={'right'}>\n            <Button type=\"outlined\" text={'Right'} />\n          </Tooltip>\n        </View>\n        <View style={{ marginLeft: 100 }}>\n          <Tooltip content={\"I'm a tooltip\"} tooltipPosition={'left'}>\n            <Button type=\"outlined\" text={'Left'} />\n          </Tooltip>\n        </View>\n      </View>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/Tooltip/Tooltip.styles.js",
    "content": "import { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    width: '100%',\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n\n  card: {\n    borderRadius: 4,\n    backgroundColor: '#323232',\n    flexDirection: 'row',\n    justifyContent: 'center',\n    alignItems: 'center',\n    height: 24,\n    paddingHorizontal: 8,\n    width: '100%',\n  },\n  text: {\n    color: 'white',\n    fontSize: 10,\n  },\n});\n\nexport default styles;\n"
  },
  {
    "path": "src/Components/Tooltip/Tooltip.test.js",
    "content": "import React from 'react';\nimport { Tooltip } from '../../';\n\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\n\ntest('Tooltip Renders', () => {\n  const tree = renderer.render(<Tooltip />);\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Tooltip/__snapshots__/Tooltip.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Tooltip Renders 1`] = `\n<Context.Consumer>\n  [Function]\n</Context.Consumer>\n`;\n"
  },
  {
    "path": "src/Components/Tooltip/index.js",
    "content": "export { default } from './Tooltip';\n"
  },
  {
    "path": "src/Components/Typography/BaseText/BaseTest.test.js",
    "content": "import React from 'react';\nimport BaseText from './BaseText';\n\nimport renderer from 'react-test-renderer';\n\nconst props = {\n  theme: {\n    text: {},\n    textColor: {\n      primary: 'red',\n      secondary: 'blue',\n    },\n  },\n};\n\ndescribe('BaseText', () => {\n  const tree = renderer.create(<BaseText {...props} />);\n\n  test('renders', () => {\n    expect(tree.toJSON()).toMatchSnapshot();\n  });\n\n  test('renders with different theme color', () => {\n    tree.update(<BaseText {...props} themeColor=\"secondary\" />);\n    expect(tree.toJSON()).toMatchSnapshot();\n  });\n});\n"
  },
  {
    "path": "src/Components/Typography/BaseText/BaseText.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Text } from 'react-native';\n\nexport default class BaseText extends Component {\n  static propTypes = {\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    children: PropTypes.node,\n    typographyStyles: PropTypes.object,\n    align: PropTypes.string,\n    color: PropTypes.string,\n    gutterBottom: PropTypes.bool,\n    theme: PropTypes.object,\n    themeColor: PropTypes.string,\n  };\n\n  render() {\n    const {\n      style,\n      typographyStyles,\n      align,\n      color,\n      gutterBottom,\n      children,\n      theme,\n      themeColor = 'primary',\n      ...props\n    } = this.props;\n\n    return (\n      <Text\n        style={[\n          theme.text,\n          typographyStyles,\n          {\n            textAlign: align ? align : 'left',\n            color: color ? color : theme.textColor[themeColor],\n            marginBottom: gutterBottom ? 10 : 0,\n          },\n          style,\n        ]}\n        {...props}>\n        {children}\n      </Text>\n    );\n  }\n}\n"
  },
  {
    "path": "src/Components/Typography/BaseText/__snapshots__/BaseTest.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`BaseText renders 1`] = `\n<Text\n  style={\n    Array [\n      Object {},\n      undefined,\n      Object {\n        \"color\": \"red\",\n        \"marginBottom\": 0,\n        \"textAlign\": \"left\",\n      },\n      undefined,\n    ]\n  }\n/>\n`;\n\nexports[`BaseText renders with different theme color 1`] = `\n<Text\n  style={\n    Array [\n      Object {},\n      undefined,\n      Object {\n        \"color\": \"blue\",\n        \"marginBottom\": 0,\n        \"textAlign\": \"left\",\n      },\n      undefined,\n    ]\n  }\n/>\n`;\n"
  },
  {
    "path": "src/Components/Typography/BodyText/BodyText.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport BaseText from '../BaseText/BaseText';\nimport withTheme from '../../../Theme/withTheme';\n\nclass BodyText extends Component {\n  static propTypes = {\n    type: PropTypes.number,\n    children: PropTypes.node,\n    theme: PropTypes.object,\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    text: PropTypes.string,\n  };\n\n  render() {\n    const { type, theme, style, children, text } = this.props;\n\n    const textStyle = type == 2 ? theme.bodyTextTwo : theme.bodyText;\n    return (\n      <BaseText\n        typographyStyles={textStyle}\n        style={style}\n        theme={theme}\n        {...this.props}>\n        {children ? children : text}\n      </BaseText>\n    );\n  }\n}\n\nexport default withTheme(BodyText);\n"
  },
  {
    "path": "src/Components/Typography/BodyText/BodyText.test.js",
    "content": "import React from 'react';\nimport { BodyText } from '../../..';\n\nimport renderer from 'react-test-renderer';\n\ntest('BodyText Renders', () => {\n  const tree = renderer.create(<BodyText />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Typography/BodyText/__snapshots__/BodyText.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`BodyText Renders 1`] = `\n<Text\n  style={\n    Array [\n      Object {},\n      Object {\n        \"fontSize\": 16,\n        \"letterSpacing\": 0.5,\n        \"lineHeight\": 16,\n      },\n      Object {\n        \"color\": \"rgba(0, 0, 0, 0.87)\",\n        \"marginBottom\": 0,\n        \"textAlign\": \"left\",\n      },\n      undefined,\n    ]\n  }\n/>\n`;\n"
  },
  {
    "path": "src/Components/Typography/Caption/Caption.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport BaseText from '../BaseText/BaseText';\nimport withTheme from '../../../Theme/withTheme';\nclass Caption extends Component {\n  static propTypes = {\n    children: PropTypes.node,\n    theme: PropTypes.object,\n    text: PropTypes.string,\n  };\n\n  render() {\n    const { theme, children, text } = this.props;\n    return (\n      <BaseText typographyStyles={theme.caption} theme={theme} {...this.props}>\n        {children ? children : text}\n      </BaseText>\n    );\n  }\n}\n\nexport default withTheme(Caption);\n"
  },
  {
    "path": "src/Components/Typography/Caption/Caption.test.js",
    "content": "import React from 'react';\nimport { Caption } from '../../..';\n\nimport renderer from 'react-test-renderer';\n\ntest('Caption Renders', () => {\n  const tree = renderer.create(<Caption />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Typography/Caption/__snapshots__/Caption.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Caption Renders 1`] = `\n<Text\n  style={\n    Array [\n      Object {},\n      Object {\n        \"fontSize\": 12,\n        \"letterSpacing\": 0.4,\n        \"lineHeight\": 12,\n      },\n      Object {\n        \"color\": \"rgba(0, 0, 0, 0.87)\",\n        \"marginBottom\": 0,\n        \"textAlign\": \"left\",\n      },\n      undefined,\n    ]\n  }\n/>\n`;\n"
  },
  {
    "path": "src/Components/Typography/Heading/Heading.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport BaseText from '../BaseText/BaseText';\nimport withTheme from '../../../Theme/withTheme';\n\nclass Heading extends Component {\n  static propTypes = {\n    type: PropTypes.number,\n    children: PropTypes.node,\n    theme: PropTypes.object,\n    text: PropTypes.string,\n  };\n\n  numberToStyle(num) {\n    const { theme } = this.props;\n    const numArray = [\n      theme.headingOne,\n      theme.headingTwo,\n      theme.headingThree,\n      theme.headingFour,\n      theme.headingFive,\n      theme.headingSix,\n    ];\n    return numArray[num - 1];\n  }\n\n  render() {\n    const { type, theme, children, text } = this.props;\n\n    let textStyle;\n    if (type < 1 && type > 6) {\n      textStyle = theme.headingOne;\n    }\n    textStyle = this.numberToStyle(type);\n\n    return (\n      <BaseText typographyStyles={textStyle} theme={theme} {...this.props}>\n        {children ? children : text}\n      </BaseText>\n    );\n  }\n}\n\nexport default withTheme(Heading);\n"
  },
  {
    "path": "src/Components/Typography/Heading/Heading.test.js",
    "content": "import React from 'react';\nimport { Heading } from '../../../';\n\nimport renderer from 'react-test-renderer';\n\ntest('Heading Renders', () => {\n  const tree = renderer.create(<Heading />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Typography/Heading/__snapshots__/Heading.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Heading Renders 1`] = `\n<Text\n  style={\n    Array [\n      Object {},\n      undefined,\n      Object {\n        \"color\": \"rgba(0, 0, 0, 0.87)\",\n        \"marginBottom\": 0,\n        \"textAlign\": \"left\",\n      },\n      undefined,\n    ]\n  }\n/>\n`;\n"
  },
  {
    "path": "src/Components/Typography/Overline/Overline.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport BaseText from '../BaseText/BaseText';\nimport withTheme from '../../../Theme/withTheme';\n\nclass Overline extends Component {\n  static propTypes = {\n    children: PropTypes.node,\n    theme: PropTypes.object,\n    text: PropTypes.string,\n  };\n\n  render() {\n    const { theme, children, text } = this.props;\n    return (\n      <BaseText typographyStyles={theme.overline} theme={theme} {...this.props}>\n        {children ? children : text}\n      </BaseText>\n    );\n  }\n}\n\nexport default withTheme(Overline);\n"
  },
  {
    "path": "src/Components/Typography/Overline/Overline.test.js",
    "content": "import React from 'react';\nimport { Overline } from '../../../';\n\nimport renderer from 'react-test-renderer';\n\ntest('Overline Renders', () => {\n  const tree = renderer.create(<Overline />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Typography/Overline/__snapshots__/Overline.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Overline Renders 1`] = `\n<Text\n  style={\n    Array [\n      Object {},\n      Object {\n        \"fontSize\": 10,\n        \"letterSpacing\": 1.5,\n        \"lineHeight\": 10,\n        \"textTransform\": \"uppercase\",\n      },\n      Object {\n        \"color\": \"rgba(0, 0, 0, 0.87)\",\n        \"marginBottom\": 0,\n        \"textAlign\": \"left\",\n      },\n      undefined,\n    ]\n  }\n/>\n`;\n"
  },
  {
    "path": "src/Components/Typography/Subtitle/Subtitle.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport BaseText from '../BaseText/BaseText';\nimport withTheme from '../../../Theme/withTheme';\n\nclass Subtitle extends Component {\n  static propTypes = {\n    type: PropTypes.number,\n    children: PropTypes.node,\n    theme: PropTypes.object,\n    text: PropTypes.string,\n  };\n\n  numberToStyle(num) {\n    const { theme } = this.props;\n    const numArray = [theme.subtitleOne, theme.subtitleTwo];\n    return numArray[num - 1];\n  }\n\n  render() {\n    const { type, theme, children, text } = this.props;\n    let textStyle;\n    if (type < 1 && type > 2) {\n      textStyle = theme.subtitleOne;\n    }\n    textStyle = this.numberToStyle(type);\n\n    return (\n      <BaseText typographyStyles={textStyle} theme={theme} {...this.props}>\n        {children ? children : text}\n      </BaseText>\n    );\n  }\n}\n\nexport default withTheme(Subtitle);\n"
  },
  {
    "path": "src/Components/Typography/Subtitle/Subtitle.test.js",
    "content": "import React from 'react';\nimport { Subtitle } from '../../../';\n\nimport renderer from 'react-test-renderer';\n\ntest('Subtitle Renders', () => {\n  const tree = renderer.create(<Subtitle />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Components/Typography/Subtitle/__snapshots__/Subtitle.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Subtitle Renders 1`] = `\n<Text\n  style={\n    Array [\n      Object {},\n      undefined,\n      Object {\n        \"color\": \"rgba(0, 0, 0, 0.87)\",\n        \"marginBottom\": 0,\n        \"textAlign\": \"left\",\n      },\n      undefined,\n    ]\n  }\n/>\n`;\n"
  },
  {
    "path": "src/Components/Typography/Typography.stories.js",
    "content": "import React from 'react';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\nimport { View } from 'react-native';\n\nimport { Heading, Subtitle, BodyText, Caption, Overline } from '../..';\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\n\nexport default storiesOf('Components|Typography', module)\n  .addParameters({\n    jest: ['BodyText', 'Caption', 'Heading', 'Overline', 'Subtitle'],\n  })\n  .add('Components', () => (\n    <Container>\n      <Header title={'Typography'} />\n      <View style={{ marginTop: 50 }}>\n        <Heading type={1} text=\"h1\" />\n        <Heading type={2} text=\"h2\" />\n        <Heading type={3} text=\"h3\" />\n        <Heading type={4} text=\"h4\" />\n        <Heading type={5} text=\"h5\" />\n        <Heading type={6} text=\"h6\" />\n        <Subtitle type={1} text=\"Subtitle 1\" />\n        <Subtitle type={2} text=\"Subtitle 2\" />\n        <BodyText type={1} text=\"Body 1\" />\n        <BodyText type={1} text=\"Body 1 secondary\" themeColor=\"secondary\" />\n        <BodyText type={2} text=\"Body 2\" />\n        <BodyText type={2} text=\"Body 2 secondary\" themeColor=\"secondary\" />\n        <Caption text=\"Caption\" />\n        <Overline text=\"Overline\" />\n      </View>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Components/Typography/index.js",
    "content": "export { default as BodyText } from './BodyText/BodyText.js';\nexport { default as Caption } from './Caption/Caption.js';\nexport { default as Heading } from './Heading/Heading.js';\nexport { default as Overline } from './Overline/Overline.js';\nexport { default as Subtitle } from './Subtitle/Subtitle.js';\n"
  },
  {
    "path": "src/Core/BreadProvider.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport ThemeContext from '../Theme/ThemeContext';\n\nexport default class BreadProvider extends Component {\n  static propTypes = {\n    children: PropTypes.node.isRequired,\n    value: PropTypes.object,\n  };\n\n  static defaultProps = {\n    value: {},\n  };\n\n  render() {\n    const { children, value } = this.props;\n    return (\n      <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>\n    );\n  }\n}\n"
  },
  {
    "path": "src/Core/colors/amber.js",
    "content": "const amber = {\n  50: '#fff8e1',\n  100: '#ffecb3',\n  200: '#ffe082',\n  300: '#ffd54f',\n  400: '#ffca28',\n  500: '#ffc107',\n  600: '#ffb300',\n  700: '#ffa000',\n  800: '#ff8f00',\n  900: '#ff6f00',\n  A100: '#ffe57f',\n  A200: '#ffd740',\n  A400: '#ffc400',\n  A700: '#ffab00',\n};\n\nexport default amber;\n"
  },
  {
    "path": "src/Core/colors/blue.js",
    "content": "const blue = {\n  50: '#e3f2fd',\n  100: '#bbdefb',\n  200: '#90caf9',\n  300: '#64b5f6',\n  400: '#42a5f5',\n  500: '#2196f3',\n  600: '#1e88e5',\n  700: '#1976d2',\n  800: '#1565c0',\n  900: '#0d47a1',\n  A100: '#82b1ff',\n  A200: '#448aff',\n  A400: '#2979ff',\n  A700: '#2962ff',\n};\n\nexport default blue;\n"
  },
  {
    "path": "src/Core/colors/blueGrey.js",
    "content": "const blueGrey = {\n  50: '#eceff1',\n  100: '#cfd8dc',\n  200: '#b0bec5',\n  300: '#90a4ae',\n  400: '#78909c',\n  500: '#607d8b',\n  600: '#546e7a',\n  700: '#455a64',\n  800: '#37474f',\n  900: '#263238',\n  A100: '#cfd8dc',\n  A200: '#b0bec5',\n  A400: '#78909c',\n  A700: '#455a64',\n};\n\nexport default blueGrey;\n"
  },
  {
    "path": "src/Core/colors/brown.js",
    "content": "const brown = {\n  50: '#efebe9',\n  100: '#d7ccc8',\n  200: '#bcaaa4',\n  300: '#a1887f',\n  400: '#8d6e63',\n  500: '#795548',\n  600: '#6d4c41',\n  700: '#5d4037',\n  800: '#4e342e',\n  900: '#3e2723',\n  A100: '#d7ccc8',\n  A200: '#bcaaa4',\n  A400: '#8d6e63',\n  A700: '#5d4037',\n};\n\nexport default brown;\n"
  },
  {
    "path": "src/Core/colors/cyan.js",
    "content": "const cyan = {\n  50: '#e0f7fa',\n  100: '#b2ebf2',\n  200: '#80deea',\n  300: '#4dd0e1',\n  400: '#26c6da',\n  500: '#00bcd4',\n  600: '#00acc1',\n  700: '#0097a7',\n  800: '#00838f',\n  900: '#006064',\n  A100: '#84ffff',\n  A200: '#18ffff',\n  A400: '#00e5ff',\n  A700: '#00b8d4',\n};\n\nexport default cyan;\n"
  },
  {
    "path": "src/Core/colors/deepOrange.js",
    "content": "const deepOrange = {\n  50: '#fbe9e7',\n  100: '#ffccbc',\n  200: '#ffab91',\n  300: '#ff8a65',\n  400: '#ff7043',\n  500: '#ff5722',\n  600: '#f4511e',\n  700: '#e64a19',\n  800: '#d84315',\n  900: '#bf360c',\n  A100: '#ff9e80',\n  A200: '#ff6e40',\n  A400: '#ff3d00',\n  A700: '#dd2c00',\n};\n\nexport default deepOrange;\n"
  },
  {
    "path": "src/Core/colors/deepPurple.js",
    "content": "const deepPurple = {\n  50: '#ede7f6',\n  100: '#d1c4e9',\n  200: '#b39ddb',\n  300: '#9575cd',\n  400: '#7e57c2',\n  500: '#673ab7',\n  600: '#5e35b1',\n  700: '#512da8',\n  800: '#4527a0',\n  900: '#311b92',\n  A100: '#b388ff',\n  A200: '#7c4dff',\n  A400: '#651fff',\n  A700: '#6200ea',\n};\n\nexport default deepPurple;\n"
  },
  {
    "path": "src/Core/colors/green.js",
    "content": "const green = {\n  50: '#e8f5e9',\n  100: '#c8e6c9',\n  200: '#a5d6a7',\n  300: '#81c784',\n  400: '#66bb6a',\n  500: '#4caf50',\n  600: '#43a047',\n  700: '#388e3c',\n  800: '#2e7d32',\n  900: '#1b5e20',\n  A100: '#b9f6ca',\n  A200: '#69f0ae',\n  A400: '#00e676',\n  A700: '#00c853',\n};\n\nexport default green;\n"
  },
  {
    "path": "src/Core/colors/grey.js",
    "content": "const grey = {\n  50: '#fafafa',\n  100: '#f5f5f5',\n  200: '#eeeeee',\n  300: '#e0e0e0',\n  400: '#bdbdbd',\n  500: '#9e9e9e',\n  600: '#757575',\n  700: '#616161',\n  800: '#424242',\n  900: '#212121',\n  A100: '#d5d5d5',\n  A200: '#aaaaaa',\n  A400: '#303030',\n  A700: '#616161',\n};\n\nexport default grey;\n"
  },
  {
    "path": "src/Core/colors/index.js",
    "content": "import amber from './amber';\nimport blue from './blue';\nimport blueGrey from './blueGrey';\nimport brown from './brown';\nimport cyan from './cyan';\nimport deepOrange from './deepOrange';\nimport deepPurple from './deepPurple';\nimport green from './green';\nimport grey from './grey';\nimport indigo from './indigo';\nimport lightBlue from './lightBlue';\nimport lightGreen from './lightGreen';\nimport lime from './lime';\nimport orange from './orange';\nimport pink from './pink';\nimport purple from './purple';\nimport red from './red';\nimport teal from './teal';\nimport yellow from './yellow';\n\nconst Colors = {\n  amber,\n  blue,\n  blueGrey,\n  brown,\n  cyan,\n  deepOrange,\n  deepPurple,\n  green,\n  grey,\n  indigo,\n  lightBlue,\n  lightGreen,\n  lime,\n  orange,\n  pink,\n  purple,\n  red,\n  teal,\n  yellow,\n};\n\nexport default Colors;\n"
  },
  {
    "path": "src/Core/colors/indigo.js",
    "content": "const indigo = {\n  50: '#e8eaf6',\n  100: '#c5cae9',\n  200: '#9fa8da',\n  300: '#7986cb',\n  400: '#5c6bc0',\n  500: '#3f51b5',\n  600: '#3949ab',\n  700: '#303f9f',\n  800: '#283593',\n  900: '#1a237e',\n  A100: '#8c9eff',\n  A200: '#536dfe',\n  A400: '#3d5afe',\n  A700: '#304ffe',\n};\n\nexport default indigo;\n"
  },
  {
    "path": "src/Core/colors/lightBlue.js",
    "content": "const lightBlue = {\n  50: '#e1f5fe',\n  100: '#b3e5fc',\n  200: '#81d4fa',\n  300: '#4fc3f7',\n  400: '#29b6f6',\n  500: '#03a9f4',\n  600: '#039be5',\n  700: '#0288d1',\n  800: '#0277bd',\n  900: '#01579b',\n  A100: '#80d8ff',\n  A200: '#40c4ff',\n  A400: '#00b0ff',\n  A700: '#0091ea',\n};\n\nexport default lightBlue;\n"
  },
  {
    "path": "src/Core/colors/lightGreen.js",
    "content": "const lightGreen = {\n  50: '#f1f8e9',\n  100: '#dcedc8',\n  200: '#c5e1a5',\n  300: '#aed581',\n  400: '#9ccc65',\n  500: '#8bc34a',\n  600: '#7cb342',\n  700: '#689f38',\n  800: '#558b2f',\n  900: '#33691e',\n  A100: '#ccff90',\n  A200: '#b2ff59',\n  A400: '#76ff03',\n  A700: '#64dd17',\n};\n\nexport default lightGreen;\n"
  },
  {
    "path": "src/Core/colors/lime.js",
    "content": "const lime = {\n  50: '#f9fbe7',\n  100: '#f0f4c3',\n  200: '#e6ee9c',\n  300: '#dce775',\n  400: '#d4e157',\n  500: '#cddc39',\n  600: '#c0ca33',\n  700: '#afb42b',\n  800: '#9e9d24',\n  900: '#827717',\n  A100: '#f4ff81',\n  A200: '#eeff41',\n  A400: '#c6ff00',\n  A700: '#aeea00',\n};\n\nexport default lime;\n"
  },
  {
    "path": "src/Core/colors/orange.js",
    "content": "const orange = {\n  50: '#fff3e0',\n  100: '#ffe0b2',\n  200: '#ffcc80',\n  300: '#ffb74d',\n  400: '#ffa726',\n  500: '#ff9800',\n  600: '#fb8c00',\n  700: '#f57c00',\n  800: '#ef6c00',\n  900: '#e65100',\n  A100: '#ffd180',\n  A200: '#ffab40',\n  A400: '#ff9100',\n  A700: '#ff6d00',\n};\n\nexport default orange;\n"
  },
  {
    "path": "src/Core/colors/pink.js",
    "content": "const pink = {\n  50: '#fce4ec',\n  100: '#f8bbd0',\n  200: '#f48fb1',\n  300: '#f06292',\n  400: '#ec407a',\n  500: '#e91e63',\n  600: '#d81b60',\n  700: '#c2185b',\n  800: '#ad1457',\n  900: '#880e4f',\n  A100: '#ff80ab',\n  A200: '#ff4081',\n  A400: '#f50057',\n  A700: '#c51162',\n};\n\nexport default pink;\n"
  },
  {
    "path": "src/Core/colors/purple.js",
    "content": "const purple = {\n  50: '#f3e5f5',\n  100: '#e1bee7',\n  200: '#ce93d8',\n  300: '#ba68c8',\n  400: '#ab47bc',\n  500: '#9c27b0',\n  600: '#8e24aa',\n  700: '#7b1fa2',\n  800: '#6a1b9a',\n  900: '#4a148c',\n  A100: '#ea80fc',\n  A200: '#e040fb',\n  A400: '#d500f9',\n  A700: '#aa00ff',\n};\n\nexport default purple;\n"
  },
  {
    "path": "src/Core/colors/red.js",
    "content": "const red = {\n  50: '#ffebee',\n  100: '#ffcdd2',\n  200: '#ef9a9a',\n  300: '#e57373',\n  400: '#ef5350',\n  500: '#f44336',\n  600: '#e53935',\n  700: '#d32f2f',\n  800: '#c62828',\n  900: '#b71c1c',\n  A100: '#ff8a80',\n  A200: '#ff5252',\n  A400: '#ff1744',\n  A700: '#d50000',\n};\n\nexport default red;\n"
  },
  {
    "path": "src/Core/colors/teal.js",
    "content": "const teal = {\n  50: '#e0f2f1',\n  100: '#b2dfdb',\n  200: '#80cbc4',\n  300: '#4db6ac',\n  400: '#26a69a',\n  500: '#009688',\n  600: '#00897b',\n  700: '#00796b',\n  800: '#00695c',\n  900: '#004d40',\n  A100: '#a7ffeb',\n  A200: '#64ffda',\n  A400: '#1de9b6',\n  A700: '#00bfa5',\n};\n\nexport default teal;\n"
  },
  {
    "path": "src/Core/colors/yellow.js",
    "content": "const yellow = {\n  50: '#fffde7',\n  100: '#fff9c4',\n  200: '#fff59d',\n  300: '#fff176',\n  400: '#ffee58',\n  500: '#ffeb3b',\n  600: '#fdd835',\n  700: '#fbc02d',\n  800: '#f9a825',\n  900: '#f57f17',\n  A100: '#ffff8d',\n  A200: '#ffff00',\n  A400: '#ffea00',\n  A700: '#ffd600',\n};\n\nexport default yellow;\n"
  },
  {
    "path": "src/Theme/ThemeContext.js",
    "content": "import React from 'react';\nimport defaultTheme from './defaultTheme';\n\nconst ThemeContext = React.createContext(defaultTheme);\n\nexport default ThemeContext;\n"
  },
  {
    "path": "src/Theme/defaultTheme.js",
    "content": "import { StyleSheet } from 'react-native';\nimport shadow from '../Utils/Shadow/shadow';\n\nexport default {\n  primary: {\n    main: '#1e88e5',\n    dark: '#005cb2',\n    light: '#6ab7ff',\n  },\n  secondary: {\n    main: '#f50057',\n    dark: '#c51162',\n    light: '#ff4081',\n  },\n  error: {\n    main: '#f44336',\n    light: '#e57373',\n    dark: '#d32f2f',\n  },\n  textColor: {\n    primary: 'rgba(0, 0, 0, 0.87)',\n    secondary: 'rgba(0, 0, 0, 0.54)',\n    disabled: 'rgba(0, 0, 0, 0.38)',\n    hint: 'rgba(0, 0, 0, 0.38)',\n  },\n  text: {},\n  background: {\n    default: '#fafafa',\n  },\n  action: {\n    active: 'rgba(0, 0, 0, 0.54)',\n    hover: 'rgba(0, 0, 0, 0.08)',\n    hoverOpacity: 0.08,\n    selected: 'rgba(0, 0, 0, 0.14)',\n    disabled: 'rgba(0, 0, 0, 0.26)',\n    disabledBackground: 'rgba(0, 0, 0, 0.12)',\n  },\n  paper: {\n    backgroundColor: 'white',\n    borderRadius: 2,\n  },\n  divider: {\n    width: '100%',\n    backgroundColor: 'rgba(0,0,0,.12)',\n  },\n  drawer: {\n    position: 'absolute',\n    zIndex: 100,\n    borderRightWidth: 1,\n    borderRightColor: 'rgba(0,0,0,.12)',\n    borderStyle: 'solid',\n    backgroundColor: 'white',\n  },\n  drawerHeader: {\n    borderBottomWidth: StyleSheet.hairlineWidth,\n    borderBottomColor: 'rgba(0,0,0,.12)',\n    paddingHorizontal: 16,\n    paddingVertical: 18,\n  },\n  drawerHeaderAvatarContainer: {\n    marginBottom: 20,\n  },\n  drawerHeaderTitle: {\n    fontSize: 20,\n    fontWeight: '500',\n    color: 'rgba(0,0,0,.87)',\n  },\n  drawerHeaderSubtitle: {\n    marginTop: 4,\n    fontSize: 12,\n    color: 'rgba(0,0,0,.67)',\n  },\n  drawerItem: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    backgroundColor: 'transparent',\n    height: 40,\n    borderRadius: 4,\n    paddingHorizontal: 8,\n    zIndex: 10,\n  },\n  drawerItemActive: {\n    backgroundColor: 'rgba(30, 136, 229, .2)',\n    color: '#1e88e5',\n  },\n  drawerItemText: {\n    fontSize: 14,\n    color: 'rgba(0,0,0,.87)',\n    fontWeight: '500',\n    zIndex: 10,\n  },\n  drawerItemIcon: {\n    color: 'grey',\n    size: 20,\n  },\n  button: {\n    borderRadius: 4,\n    alignItems: 'center',\n    textAlign: 'center',\n    letterSpacing: 1.25,\n    textTransform: 'uppercase',\n    height: 36,\n    fontSize: 14,\n    fontWeight: '500',\n    lineHeight: 16,\n    display: 'flex',\n  },\n  buttonText: {\n    fontStyle: 'normal',\n    letterSpacing: 0.5,\n    color: '#2196f3',\n  },\n  outlinedButton: {\n    borderColor: 'rgba(0,0,0,.29)',\n    borderWidth: StyleSheet.hairlineWidth,\n    paddingHorizontal: 16,\n    boxSizing: 'border-box',\n  },\n  containedButton: {\n    paddingHorizontal: 16,\n    backgroundColor: '#2196f3',\n  },\n  bodyText: {\n    fontSize: 16,\n    lineHeight: 16,\n    letterSpacing: 0.5,\n  },\n  bodyTextTwo: {\n    fontSize: 14,\n    lineHeight: 14,\n    letterSpacing: 0.25,\n  },\n  caption: {\n    fontSize: 12,\n    lineHeight: 12,\n    letterSpacing: 0.4,\n  },\n  headingOne: {\n    fontWeight: '300',\n    fontSize: 96,\n    lineHeight: 96,\n    letterSpacing: -1.5,\n  },\n  headingTwo: {\n    fontWeight: '300',\n    fontSize: 60,\n    lineHeight: 60,\n    letterSpacing: -0.5,\n  },\n  headingThree: {\n    fontSize: 48,\n    lineHeight: 48,\n  },\n  headingFour: {\n    fontSize: 34,\n    lineHeight: 34,\n    letterSpacing: 0.25,\n  },\n  headingFive: {\n    fontSize: 24,\n    lineHeight: 24,\n  },\n  headingSix: {\n    fontSize: 20,\n    lineHeight: 20,\n    letterSpacing: 0.15,\n    fontWeight: '500',\n  },\n  overline: {\n    fontSize: 10,\n    lineHeight: 10,\n    letterSpacing: 1.5,\n    textTransform: 'uppercase',\n  },\n  searchBar: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    width: '100%',\n    backgroundColor: 'rgba(255,255,255,1)',\n    height: 56,\n    paddingHorizontal: 16,\n  },\n  searchBarNavigationIcon: {\n    color: 'black',\n    size: 24,\n  },\n  searchBarcloseIcon: {\n    color: 'black',\n    size: 24,\n  },\n  searchInput: {\n    fontSize: 16,\n    flex: 1,\n    marginLeft: 8,\n    height: 30,\n    ...shadow(0),\n  },\n  subtitleOne: {\n    fontSize: 16,\n    lineHeight: 16,\n    letterSpacing: 0.15,\n  },\n  subtitleTwo: {\n    fontSize: 14,\n    lineHeight: 14,\n    letterSpacing: 0.1,\n    fontWeight: '500',\n  },\n};\n"
  },
  {
    "path": "src/Theme/mergeTheme.js",
    "content": "import defaultTheme from './defaultTheme';\n\nfunction mergeTheme(userTheme) {\n  const mergedTheme = {\n    ...defaultTheme,\n  };\n\n  if (userTheme) {\n    Object.keys(mergedTheme).forEach(key => {\n      if (userTheme[key]) {\n        mergedTheme[key] = { ...defaultTheme[key], ...userTheme[key] };\n      }\n    });\n  }\n\n  return mergedTheme;\n}\n\nexport default mergeTheme;\n"
  },
  {
    "path": "src/Theme/withTheme.js",
    "content": "import React from 'react';\nimport ThemeContext from './ThemeContext';\nimport mergeTheme from './mergeTheme';\n\nfunction withTheme(Component) {\n  return class extends React.Component {\n    render() {\n      return (\n        <ThemeContext.Consumer>\n          {theme => {\n            return <Component theme={mergeTheme(theme)} {...this.props} />;\n          }}\n        </ThemeContext.Consumer>\n      );\n    }\n  };\n}\n\nexport default withTheme;\n"
  },
  {
    "path": "src/Utils/Anchor/Anchor.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  View,\n  Linking,\n  Platform,\n  TouchableWithoutFeedback,\n} from 'react-native';\n\nexport default class Anchor extends Component {\n  static propTypes = {\n    url: PropTypes.string,\n    children: PropTypes.node,\n    target: PropTypes.string,\n    testID: PropTypes.string,\n  };\n\n  handlePress = () => {\n    Linking.openURL(this.props.url);\n  };\n\n  render() {\n    const { url, children, target, testID } = this.props;\n\n    if (Platform.OS === 'web') {\n      return (\n        <TouchableWithoutFeedback\n          href={url}\n          accessibilityRole=\"link\"\n          target={target ? target : '_self'}\n          testID={testID}>\n          <View>{children}</View>\n        </TouchableWithoutFeedback>\n      );\n    }\n\n    return (\n      <TouchableWithoutFeedback onPress={this.handlePress}>\n        {children}\n      </TouchableWithoutFeedback>\n    );\n  }\n}\n"
  },
  {
    "path": "src/Utils/Anchor/Anchor.stories.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\n\nimport { Anchor, Button, Heading, IconButton } from '../../';\n\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\n\nexport default storiesOf('Utils|Anchor', module)\n  .addParameters({ jest: ['Anchor'] })\n  .add('Simple', () => (\n    <Container>\n      <Header\n        title={'Anchor'}\n        subtitle={'Cross Platform Anchor to link to other pages'}\n      />\n      <View style={{ flexDirection: 'row' }}>\n        <Anchor url={'http://material-bread.org/'} target={'_parent'}>\n          <Button\n            text={'Documentation'}\n            type={'outlined'}\n            textColor={'rgb(233, 30, 99)'}\n          />\n        </Anchor>\n\n        <Anchor\n          url={'https://github.com/codypearce/material-bread'}\n          target={'_parent'}>\n          <Button\n            text={'Github'}\n            type={'outlined'}\n            textColor={'#666'}\n            style={{ marginLeft: 10 }}\n          />\n        </Anchor>\n      </View>\n      <View style={{ flexDirection: 'row', marginTop: 20 }}>\n        <Anchor url={'https://www.nasa.gov/'} target={'_parent'}>\n          <Button text={'NASA'} />\n        </Anchor>\n\n        <Anchor url={'https://www.wikipedia.org/'} target={'_parent'}>\n          <Button style={{ marginLeft: 40 }} text={'Wikipedia'} />\n        </Anchor>\n      </View>\n      <View style={{ flexDirection: 'row', marginTop: 20 }}>\n        <Anchor url={'https://www.pbs.org/'} target={'_blank'}>\n          <Heading style={{ color: 'blue' }}>PBS</Heading>\n        </Anchor>\n        <Anchor url={'https://www.bbc.com/'} target={'_blank'}>\n          <Heading style={{ color: 'blue', marginLeft: 20 }}>BBC</Heading>\n        </Anchor>\n      </View>\n      <View style={{ flexDirection: 'row', marginTop: 20 }}>\n        <Anchor url={'https://www.google.com'} target={'_blank'}>\n          <IconButton size={24} name=\"search\" />\n        </Anchor>\n        <Anchor url={'https://www.google.com/maps'} target={'_blank'}>\n          <IconButton size={24} style={{ marginLeft: 20 }} name=\"map\" />\n        </Anchor>\n      </View>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Utils/Hoverable/HoverState.js",
    "content": "import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';\n\n/**\n * Touch devices emulate mouse events. This functions makes it possible to know\n * if the current modality supports hover (including for multi-modality\n * devices).\n */\nconst createHoverMonitor = () => {\n  let isHoverEnabled = false;\n  let lastTouchTime = 0;\n\n  function enableHover() {\n    if (isHoverEnabled || Date.now() - lastTouchTime < 500) {\n      return;\n    }\n    isHoverEnabled = true;\n  }\n\n  function disableHover() {\n    lastTouchTime = new Date();\n    if (isHoverEnabled) {\n      isHoverEnabled = false;\n    }\n  }\n\n  if (canUseDOM) {\n    document.addEventListener('touchstart', disableHover, true);\n    document.addEventListener('mousemove', enableHover, true);\n  }\n\n  return {\n    get isEnabled() {\n      return isHoverEnabled;\n    },\n  };\n};\n\nexport default createHoverMonitor;\n"
  },
  {
    "path": "src/Utils/Hoverable/Hoverable.js",
    "content": "import React, { Component } from 'react';\nimport {\n  Platform,\n  Dimensions,\n  TouchableWithoutFeedback,\n  View,\n} from 'react-native';\nimport PropTypes from 'prop-types';\n\nclass Hoverable extends Component {\n  static displayName = 'Hoverable';\n  constructor(props) {\n    super(props);\n  }\n\n  static propTypes = {\n    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n    onHoverIn: PropTypes.func,\n    onHoverOut: PropTypes.func,\n    testID: PropTypes.string,\n  };\n\n  state = { isHovered: false, width: Dimensions.get('window').width };\n\n  componentDidMount() {\n    Dimensions.addEventListener('change', this.handleWindowWidth);\n    const width = Dimensions.get('window').width;\n    this.setState({ width });\n  }\n\n  componentWillUnmount() {\n    Dimensions.removeEventListener('change', this.handleWindowWidth);\n  }\n\n  handleWindowWidth = event => {\n    this.setState({ width: event.window.width });\n  };\n\n  _handleMouseEnter = () => {\n    if (!this.state.isHovered) {\n      const { onHoverIn } = this.props;\n      if (onHoverIn) {\n        onHoverIn();\n      }\n      this.setState(() => ({ isHovered: true }));\n    }\n  };\n\n  _handleMouseLeave = () => {\n    if (this.state.isHovered) {\n      const { onHoverOut } = this.props;\n      if (onHoverOut) {\n        onHoverOut();\n      }\n      this.setState(() => ({ isHovered: false }));\n    }\n  };\n\n  _toggle = () => {\n    if (this.state.isHovered) {\n      this._handleMouseLeave();\n    } else {\n      this._handleMouseEnter();\n    }\n  };\n\n  render() {\n    const { children, testID } = this.props;\n\n    const child =\n      typeof children === 'function'\n        ? children(this.state.isHovered)\n        : children;\n\n    if (Platform.OS == 'web') {\n      return React.cloneElement(React.Children.only(child), {\n        onMouseEnter: this._handleMouseEnter,\n        onMouseLeave: this._handleMouseLeave,\n      });\n    } else {\n      return (\n        <TouchableWithoutFeedback onPress={this._toggle} testID={testID}>\n          <View>\n            {React.cloneElement(React.Children.only(child), {\n              onMouseEnter: this._handleMouseEnter,\n              onMouseLeave: this._handleMouseLeave,\n            })}\n          </View>\n        </TouchableWithoutFeedback>\n      );\n    }\n  }\n}\n\nexport default Hoverable;\n"
  },
  {
    "path": "src/Utils/Hoverable/Hoverable.stories.js",
    "content": "import React from 'react';\nimport { View, Animated } from 'react-native';\n\nimport { Hoverable } from '../../';\n\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\nimport { State, Store } from '@sambego/storybook-state';\nconst store = new Store({\n  color: '#00BCD4',\n  left: new Animated.Value(0),\n});\n\nexport default storiesOf('Utils|Hoverable', module)\n  .addParameters({ jest: ['Hoverable'] })\n  .add('Simple', () => (\n    <Container>\n      <Header title={'Hoverable'} subtitle={'Cross Platform Hover Component'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={{ flexDirection: 'row' }}>\n            <Hoverable\n              onHoverIn={() => store.set({ color: '#009688' })}\n              onHoverOut={() => store.set({ color: '#00BCD4' })}>\n              <View\n                style={{\n                  width: 200,\n                  height: 125,\n                  backgroundColor: state.color,\n                }}\n              />\n            </Hoverable>\n          </View>\n        )}\n      </State>\n    </Container>\n  ))\n  .add('Animation', () => (\n    <Container>\n      <Header title={'Hoverable'} subtitle={'Cross Platform Hover Component'} />\n      <State store={store} style={{ flex: 1 }}>\n        {state => (\n          <View style={{ flexDirection: 'row' }}>\n            <Hoverable\n              onHoverIn={() => {\n                Animated.timing(state.left, {\n                  toValue: 1,\n                  duration: 500,\n                  useNativeDriver: true,\n                }).start();\n              }}\n              onHoverOut={() => {\n                Animated.timing(state.left, {\n                  toValue: 0,\n                  duration: 500,\n                  useNativeDriver: true,\n                }).start();\n              }}>\n              <Animated.View\n                useNativeDriver={true}\n                style={{\n                  width: 200,\n                  height: 125,\n                  backgroundColor: state.color,\n                  transform: [\n                    {\n                      rotate: state.left.interpolate({\n                        inputRange: [0, 1],\n                        outputRange: ['0deg', '360deg'],\n                      }),\n                    },\n                  ],\n                }}\n              />\n            </Hoverable>\n          </View>\n        )}\n      </State>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Utils/Hoverable/Hoverable.test.js",
    "content": "import React from 'react';\nimport { View } from 'react-native';\nimport { Hoverable } from '../../';\n\nimport ShallowRenderer from 'react-test-renderer/shallow';\nconst renderer = new ShallowRenderer();\n\ntest('Switch Renders', () => {\n  const tree = renderer.render(\n    <Hoverable>\n      <View />\n    </Hoverable>,\n  );\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "src/Utils/Hoverable/__snapshots__/Hoverable.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Switch Renders 1`] = `\n<TouchableWithoutFeedback\n  onPress={[Function]}\n>\n  <View>\n    <View\n      onMouseEnter={[Function]}\n      onMouseLeave={[Function]}\n    />\n  </View>\n</TouchableWithoutFeedback>\n`;\n"
  },
  {
    "path": "src/Utils/Shadow/Shadow.stories.js",
    "content": "import React from 'react';\nimport { View, Text, StyleSheet, Platform, Dimensions } from 'react-native';\n\nimport { shadow } from '../../';\n\nimport Header from '../../storybook/components/Header';\nimport Container from '../../storybook/components/Container';\nimport { storiesOf } from '../../storybook/helpers/storiesOf';\n\nconst pageWidth =\n  Platform.OS == 'web' ? window.innerWidth : Dimensions.get('window').width;\n\nconst shadowTypeNum = 24;\nconst maxItemPerRow = shadowTypeNum / 4;\nconst itemWidth = pageWidth < 1200 ? pageWidth / 10 : 100;\n\nconst styles = StyleSheet.create({\n  container: {\n    position: 'relative',\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-evenly',\n    marginHorizontal: '8%',\n    marginBottom: 30,\n  },\n  shadowItem: {\n    padding: 8,\n    height: itemWidth,\n    width: itemWidth,\n    alignItems: 'center',\n    justifyContent: 'center',\n    backgroundColor: 'white',\n    borderRadius: 100,\n    fontSize: itemWidth / 3,\n  },\n});\n\nconst shadowItems = [];\nfor (let i = 1; i <= shadowTypeNum; i++) {\n  shadowItems.push(\n    <View key={i} style={[styles.shadowItem, { ...shadow(i) }]}>\n      <Text>{i} </Text>\n    </View>,\n  );\n}\nconst shadowDividedItems = [];\nfor (let i = 0; i < maxItemPerRow; i++) {\n  shadowDividedItems.push(\n    <View style={styles.container} key={i}>\n      {shadowItems.slice(maxItemPerRow * i, maxItemPerRow * (i + 1))}\n    </View>,\n  );\n}\n\nexport default storiesOf('Utils|Shadows', module)\n  .addParameters({ jest: ['Shadows'] })\n  .add('Simple', () => (\n    <Container>\n      <Header\n        title={'Shadows'}\n        subtitle={\n          'Use the shadow() function to add platform shadow to the style of any component'\n        }\n      />\n\n      <View>{shadowDividedItems}</View>\n    </Container>\n  ));\n"
  },
  {
    "path": "src/Utils/Shadow/shadow.js",
    "content": "import { Platform } from 'react-native';\n\nfunction shadow(elevation) {\n  return Platform.OS !== 'android'\n    ? shadowConversion[elevation]\n    : { elevation };\n}\n\nexport default shadow;\n\nconst shadowConversion = [\n  {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 0,\n    },\n    shadowOpacity: 0,\n    shadowRadius: 1.0,\n  },\n  {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 1,\n    },\n    shadowOpacity: 0.18,\n    shadowRadius: 1.0,\n  },\n  {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 1,\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 1.41,\n  },\n  {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 1,\n    },\n    shadowOpacity: 0.22,\n    shadowRadius: 2.22,\n  },\n  {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 2,\n    },\n    shadowOpacity: 0.23,\n    shadowRadius: 2.62,\n  },\n  {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 2,\n    },\n    shadowOpacity: 0.25,\n    shadowRadius: 3.84,\n  },\n  {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 3,\n    },\n    shadowOpacity: 0.27,\n    shadowRadius: 4.65,\n  },\n  {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 3,\n    },\n    shadowOpacity: 0.29,\n    shadowRadius: 4.65,\n  },\n  {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 4,\n    },\n    shadowOpacity: 0.3,\n    shadowRadius: 4.65,\n  },\n  {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 4,\n    },\n    shadowOpacity: 0.32,\n    shadowRadius: 5.46,\n  },\n  {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 5,\n    },\n    shadowOpacity: 0.34,\n    shadowRadius: 6.27,\n  },\n  {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 5,\n    },\n    shadowOpacity: 0.36,\n    shadowRadius: 6.68,\n  },\n  {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 6,\n    },\n    shadowOpacity: 0.37,\n    shadowRadius: 7.49,\n  },\n  {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 6,\n    },\n    shadowOpacity: 0.39,\n    shadowRadius: 8.3,\n  },\n  {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 7,\n    },\n    shadowOpacity: 0.41,\n    shadowRadius: 9.11,\n  },\n  {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 7,\n    },\n    shadowOpacity: 0.43,\n    shadowRadius: 9.51,\n  },\n  {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 8,\n    },\n    shadowOpacity: 0.44,\n    shadowRadius: 10.32,\n  },\n  {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 8,\n    },\n    shadowOpacity: 0.46,\n    shadowRadius: 11.14,\n  },\n  {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 9,\n    },\n    shadowOpacity: 0.48,\n    shadowRadius: 11.95,\n  },\n  {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 9,\n    },\n    shadowOpacity: 0.5,\n    shadowRadius: 12.35,\n  },\n  {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 10,\n    },\n    shadowOpacity: 0.51,\n    shadowRadius: 13.16,\n  },\n  {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 10,\n    },\n    shadowOpacity: 0.53,\n    shadowRadius: 13.97,\n  },\n  {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 11,\n    },\n    shadowOpacity: 0.55,\n    shadowRadius: 14.78,\n  },\n  {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 11,\n    },\n    shadowOpacity: 0.57,\n    shadowRadius: 15.19,\n  },\n  {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 12,\n    },\n    shadowOpacity: 0.58,\n    shadowRadius: 16.0,\n  },\n];\n"
  },
  {
    "path": "src/helpers/hasNotch.js",
    "content": "import { Platform, Dimensions } from 'react-native';\n\nconst IPHONE_XS_HEIGHT = 812;\nconst IPHONE_XR_HEIGHT = 896;\nconst { width: WINDOW_WIDTH, height: WINDOW_HEIGHT } = Dimensions.get('window');\nexport const hasNotch =\n  Platform.OS === 'ios' &&\n  !Platform.isPad &&\n  !Platform.isTVOS &&\n  (WINDOW_HEIGHT === IPHONE_XS_HEIGHT ||\n    WINDOW_WIDTH === IPHONE_XS_HEIGHT ||\n    WINDOW_HEIGHT === IPHONE_XR_HEIGHT ||\n    WINDOW_WIDTH === IPHONE_XR_HEIGHT);\n\nexport default hasNotch;\n"
  },
  {
    "path": "src/helpers/statusBarHeight.js",
    "content": "import { Platform } from 'react-native';\n\nimport hasNotch from './hasNotch';\n\nlet androidStatusBarHeight = 0;\n\nconst getStatusBarHeight = () => {\n  if (Platform.OS === 'ios') {\n    return hasNotch ? 44 : 20;\n  } else if (Platform.OS === 'android') return androidStatusBarHeight;\n  else return 0;\n};\n\nexport default getStatusBarHeight;\n"
  },
  {
    "path": "src/index.d.ts",
    "content": "import React, { RefObject } from 'react'\nimport {\n  StyleProp,\n  TextStyle,\n  View,\n  StyleSheet,\n  StyleSheetProperties,\n  Image,\n  GestureResponderEvent,\n  TextProps,\n  TouchableWithoutFeedbackProps,\n  ViewPropTypes,\n  ViewProps,\n  Animated,\n  ScrollViewProps,\n} from 'react-native'\n\ntype Color = string\n\nexport interface Theme {\n  primary: {\n    main: Color\n    dark: Color\n    light: Color\n  }\n  secondary: {\n    main: Color\n    dark: Color\n    light: Color\n  }\n  textColor: {\n    primary: Color\n    secondary: Color\n    disabled: Color\n    hint: Color\n  }\n  text: {}\n  background: {\n    default: Color\n  }\n  action: {\n    active: Color\n    hover: Color\n    hoverOpacity: number\n    selected: Color\n    disabled: Color\n    disabledBackground: Color\n    paper: {\n      backgroundColor: Color\n      borderRadius: number\n    }\n    divider: {\n      width: string\n      backgroundColor: Color\n    }\n    buttonText: {\n      fontSize: number\n      fontWight: string\n      letterSpacing: number\n      color: Color\n    }\n    outlinedButton: {\n      borderColor: Color\n      borderWidth: StyleSheetProperties['hairlineWidth']\n      paddingOrizontal: number\n    }\n    containedButton: {\n      paddingHorizontal: number\n      backgroundColor: Color\n    }\n    bodyText: {\n      fontSize: number\n      lineHeight: number\n      letterSpacing: number\n    }\n    bodyTextTwo: {\n      fontSize: number\n      lineHeight: number\n      letterSpacing: number\n    }\n    caption: {\n      fontSize: number\n      lineHeight: number\n      letterSpacing: number\n    }\n    headingOne: {\n      fontWeight: string\n      fontSize: number\n      lineHeight: number\n      letterSpacing: number\n    }\n    headingTwo: {\n      fontWeight: string\n      fontSize: number\n      lineHeight: number\n      letterSpacing: number\n    }\n    headingThree: {\n      fontSize: number\n      lineHeight: number\n    }\n    headingFour: {\n      fontSize: number\n      lineHeight: number\n      letterSpacing: number\n    }\n    headingFive: {\n      fontSize: number\n      lineHeight: number\n    }\n    headingSix: {\n      fontSize: number\n      lineHeight: number\n      letterSpacing: number\n      fontWeight: string\n    }\n    overline: {\n      fontSize: number\n      lineHeight: number\n      letterSpacing: number\n      textTransform: string\n    }\n    subtitleOne: {\n      fontSize: number\n      lineHeight: number\n      letterSpacing: number\n    }\n    subtitleTwo: {\n      fontSize: number\n      lineHeight: number\n      letterSpacing: number\n      fontWeight: string\n    }\n  }\n}\n\nexport const ThemeContext: React.Context<Theme>\n\nexport const defaultTheme: Theme\n\nexport type WithThemeProps = {\n  theme: Theme\n}\n\ntype WithTheme = <P extends object>(\n  Component: React.ElementType<P>,\n) => React.ElementType<Omit<P, keyof WithThemeProps>>\n\nexport const withTheme: WithTheme\n\nexport interface BreadProviderProps {\n  children: React.ReactNode\n  value?: Theme\n}\n\nexport class BreadProvider extends React.Component<BreadProviderProps> {\n  render(): React.ReactElement\n}\n\nexport interface AnchorProps {\n  url?: string\n  children?: React.ReactNode\n  target?: string\n  testID?: string\n}\n\nexport class Anchor extends React.Component<AnchorProps> {\n  render(): React.ReactElement\n}\n\nexport interface HoverableProps {\n  children?: React.ReactNode | ((...args: any[]) => any)\n  onHoverIn?: (...args: any[]) => void\n  onHoverOut?: (...args: any[]) => void\n  testID?: string\n}\n\nexport class Hoverable extends React.Component<HoverableProps> {\n  render(): React.ReactElement\n}\n\nexport type ShadowElevation =\n  | 0\n  | 1\n  | 2\n  | 3\n  | 4\n  | 5\n  | 6\n  | 7\n  | 8\n  | 9\n  | 10\n  | 11\n  | 12\n  | 13\n  | 14\n  | 15\n  | 16\n  | 17\n  | 18\n  | 19\n  | 20\n  | 21\n  | 22\n  | 23\n  | 24\n\nexport type ShadowAndroidReturn = {\n  elevation: ShadowElevation\n}\n\nexport type ShadowDefaultReturn = {\n  shadowColor: Color\n  shadowOffset: {\n    width: number\n    height: number\n  }\n  shadowOpacity: number\n  shadowRadius: number\n}\n\nexport const shadow: (\n  elevation: ShadowElevation,\n) => ShadowAndroidReturn | ShadowDefaultReturn\n\nexport type ColorRange = {\n  50: Color\n  100: Color\n  200: Color\n  300: Color\n  400: Color\n  500: Color\n  600: Color\n  700: Color\n  800: Color\n  900: Color\n  A100: Color\n  A200: Color\n  A400: Color\n  A700: Color\n}\n\nexport const Colors: {\n  amber: ColorRange\n  blue: ColorRange\n  blueGrey: ColorRange\n  brown: ColorRange\n  cyan: ColorRange\n  deepOrange: ColorRange\n  deepPurple: ColorRange\n  green: ColorRange\n  grey: ColorRange\n  indigo: ColorRange\n  lightBlue: ColorRange\n  lightGreen: ColorRange\n  lime: ColorRange\n  orange: ColorRange\n  pink: ColorRange\n  purple: ColorRange\n  red: ColorRange\n  teal: ColorRange\n  yellow: ColorRange\n}\n\nexport interface AvatarProps {\n  style?: StyleProp<any>\n  theme?: Theme\n  color?: Color\n  type?: 'image' | 'icon' | 'text'\n  size?: number\n  contentSize?: number\n  contentColor?: Color\n  contentStyles?: StyleProp<any>\n  content?: string\n  image?: React.ReactNode\n  onPress?: (e: GestureResponderEvent) => void\n  ripple?: boolean\n  rippleProps?: RippleProps\n  testID?: string\n  children?: React.ReactNode\n}\n\nexport class Avatar extends React.Component<AvatarProps> {\n  render(): React.ReactElement\n}\n\nexport interface BadgeProps {\n  color?: Color\n  textColor?: Color\n  content?: string | number\n  maxValue?: number\n  children?: React.ReactNode\n  size?: number\n  style?: StyleProp<any>\n  position?: 'right' | 'left'\n  onPress?: (e: GestureResponderEvent) => void\n\n  theme?: Theme\n  containerStyle?: StyleProp<any>\n  right?: number | string\n  left?: number | string\n  top?: number | string\n\n  visible?: boolean\n  testID?: string\n}\n\nexport class Badge extends React.Component<BadgeProps> {\n  render(): React.ReactElement\n}\n\nexport interface BaseButtonProps {\n  text?: string\n  icon?: React.ReactNode\n  iconPosition?: 'left' | 'right'\n  textStyle?: StyleProp<TextStyle>\n\n  theme?: Theme\n  style?: StyleProp<any>\n  children?: React.ReactNode\n\n  type?: 'outlined' | 'contained' | 'flat' | 'text'\n  onPress?: (e: GestureResponderEvent) => void\n\n  loading?: boolean\n  loader?: React.ReactNode\n  hideLabel?: boolean\n\n  color?: Color\n  radius?: number\n\n  fullWidth?: boolean\n  density?: boolean\n\n  disabled?: boolean\n  disableRipple?: boolean\n\n  useInputCasing?: boolean\n\n  textColor?: Color\n  buttonStyles?: StyleProp<any>\n  rippleColor?: Color\n  onPressIn?: (e: GestureResponderEvent) => void\n  onPressOut?: (e: GestureResponderEvent) => void\n\n  testID?: string\n}\n\nexport interface ContainedButtonProps {\n  disabled?: boolean\n  color?: Color\n  textColor?: Color\n  rippleColor?: Color\n  theme?: Theme\n  onPressIn?: (e: GestureResponderEvent) => void\n  onPressOut?: (e: GestureResponderEvent) => void\n  containerStyle?: StyleProp<any>\n  radius?: number\n  fullWidth?: boolean\n}\n\nexport interface FlatButtonProps {\n  disabled?: boolean\n  color?: Color\n  textColor?: Color\n  rippleColor?: Color\n  theme?: Theme\n  onPressIn?: (e: GestureResponderEvent) => void\n  onPressOut?: (e: GestureResponderEvent) => void\n  containerStyle?: StyleProp<any>\n}\n\nexport interface OutlinedButtonProps {\n  disabled?: boolean\n  color?: Color\n  textColor?: Color\n  rippleColor?: Color\n  theme?: Theme\n  borderSize?: number\n  containerStyle?: StyleProp<any>\n}\n\nexport interface TextButtonProps {\n  disabled?: boolean\n  color?: Color\n  textColor?: Color\n  rippleColor?: Color\n  theme?: Theme\n  containerStyle?: StyleProp<any>\n}\n\ntype SpecificButtonProps =\n  | ContainedButtonProps\n  | FlatButtonProps\n  | OutlinedButtonProps\n  | TextButtonProps\n\nexport type ButtonProps = BaseButtonProps & SpecificButtonProps\n\nexport class Button extends React.Component<ButtonProps> {\n  render(): React.ReactElement\n}\n\nexport interface CheckboxProps {\n  checked: boolean\n\n  disabled?: boolean\n  onPress?: (e: GestureResponderEvent) => void\n  rippleColor?: Color\n  checkboxColor?: Color\n  unCheckedColor?: Color\n  style?: StyleProp<any>\n  checkboxStyle?: StyleProp<any>\n  theme?: Theme\n  rippleMatchesCheckbox?: boolean\n  indeterminate?: boolean\n\n  label?: string\n  labelStyle?: StyleProp<any>\n  labelPos?: string\n\n  icon?: React.ReactNode | string\n  size?: number\n  checkedIcon?: React.ReactNode | string\n\n  ios?: boolean\n\n  error?: boolean\n  testID?: string\n}\n\nexport class Checkbox extends React.Component<CheckboxProps> {\n  render(): React.ReactElement\n}\n\nexport interface ChipProps {\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  theme?: Theme\n\n  chipStyle?: StyleProp<any>\n\n  color?: Color\n  themeColor?: Color\n  radius?: number\n\n  onPress?: (e: GestureResponderEvent) => void\n  onDelete?: (...args: any[]) => void\n  visible?: boolean\n\n  text?: string\n  textStyles?: StyleProp<any>\n\n  leftIcon?: React.ReactNode\n  rightIcon?: React.ReactNode\n\n  selected?: boolean\n  disabled?: boolean\n  testID?: string | (() => any)\n}\n\nexport class Chip extends React.Component<ChipProps> {\n  render(): React.ReactElement\n}\n\nexport interface DividerProps {\n  style?: StyleProp<any>\n  theme?: Theme\n  marginVertical?: number\n  subheader?: string\n  insetHeader?: number\n  insetLeft?: number\n  testID?: string\n}\n\nexport class Divider extends React.Component<DividerProps> {\n  render(): React.ReactElement\n}\n\nexport interface FabProps {\n  style?: StyleProp<any>\n  backgroundColor?: Color\n  onPress?: (e: GestureResponderEvent) => void\n  disabled?: boolean\n  rippleColor?: Color\n  icon?: React.ReactNode | string\n  shadow?: number\n  mini?: boolean\n  theme?: Theme\n  children?: React.ReactNode\n  visible?: boolean\n  initialScale?: number\n  animated?: boolean\n  label?: string\n  testID?: string\n  containerStyle?: StyleProp<any>\n}\n\nexport class Fab extends React.Component<FabProps> {\n  render(): React.ReactElement\n}\n\nexport interface IconProps {\n  name: string\n\n  style?: StyleProp<any>\n  theme?: Theme\n  color?: Color\n  size?: number\n  testID?: string\n  iconComponent?: React.Component\n}\n\nexport class Icon extends React.Component<IconProps> {\n  render(): React.ReactElement\n}\n\nexport interface IconButtonProps {\n  name: string\n  style?: StyleProp<any>\n  theme?: Theme\n  color?: Color\n  size?: number\n  onPress?: (e: GestureResponderEvent) => void\n  rippleColor?: Color\n  disabled?: boolean\n  testID?: string\n  iconComponent?: React.Component\n}\n\nexport class IconButton extends React.Component<IconButtonProps> {\n  render(): React.ReactElement\n}\n\nexport interface ListExpandProps {\n  expanded?: boolean\n  onPress?: (e: GestureResponderEvent) => void\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  title?: string\n  titleStyle?: StyleProp<any>\n  theme?: Theme\n  icon?: React.ReactNode\n  expandIconStyle?: StyleProp<any>\n  rippleProps?: RippleProps\n}\n\nexport class ListExpand extends React.Component<ListExpandProps> {\n  render(): React.ReactElement\n}\n\nexport interface ListItemProps {\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  onPress?: (e: GestureResponderEvent) => void\n  disabled?: boolean\n  selected?: boolean\n  text?: string\n  textProps?: StyleProp<TextProps>\n  secondaryText?: string | React.ReactElement\n  secondaryTextProps?: StyleProp<TextProps>\n  media?: React.ReactNode\n  icon?: React.ReactNode\n  actionItem?: React.ReactNode\n  leadingActionItem?: React.ReactNode\n  textStyle?: StyleProp<TextStyle>\n  secondaryTextStyle?: StyleProp<TextProps>\n  rippleProps?: RippleProps\n  backgroundColor?: Color\n}\n\nexport class ListItem extends React.Component<ListItemProps> {\n  render(): React.ReactElement\n}\n\nexport interface ListSectionProps {\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  label?: string\n  labelStyle?: StyleProp<any>\n  topDivider?: boolean\n  bottomDivider?: boolean\n  inset?: boolean\n  contentStyle?: StyleProp<any>\n  theme?: Theme\n}\n\nexport class ListSection extends React.Component<ListSectionProps> {\n  render(): React.ReactElement\n}\n\nexport interface ListProps {\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  shadow?: number\n  subheader?: string\n  testID?: string\n}\n\nexport class List extends React.Component<ListProps> {\n  render(): React.ReactElement\n}\n\nexport interface ModalProps {\n  buttons: React.ReactElement\n  visible: boolean\n  onRequestClose: (...args: any[]) => void\n  onShow: (...args: any[]) => void\n  onTouchOutside: (e: GestureResponderEvent) => void\n  containerStyle: StyleProp<any>\n  NativeModalProps: StyleProp<any>\n  children: React.ReactNode\n}\n\nexport class Modal extends React.Component<ModalProps> {\n  render(): React.ReactElement\n}\n\nexport interface PaperProps {\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  theme?: Theme\n  shadow?: number\n  radius?: number\n  testID?: string\n  elevation?: number\n}\n\nexport class Paper extends React.Component<PaperProps> {\n  render(): React.ReactElement\n}\n\nexport interface ProgressBarProps {\n  visible: boolean\n\n  color?: Color\n  height?: number\n  trackStyle?: StyleProp<any>\n  determinate?: boolean\n  indicatorStartPosition?: number\n  animationEasing?: (...args: any[]) => any\n  animationDuration?: number\n  value?: number\n  style?: StyleProp<any>\n  theme?: Theme\n  testID?: string\n}\n\nexport class ProgressBar extends React.Component<ProgressBarProps> {\n  render(): React.ReactElement\n}\n\nexport interface ProgressCircleProps {\n  color?: Color\n  size?: number\n  style?: StyleProp<any>\n  animationDuration?: number\n  animationEasing?: (...args: any[]) => any\n  visible?: boolean\n  determinate?: boolean\n  widthOfBorder?: number\n  testID?: string\n}\n\nexport interface ProgressCircleDeterminateProps {\n  value?: number\n  size?: number\n  thickness?: number\n  color?: Color\n  unfilledColor?: Color\n  style?: StyleProp<any>\n  children?: React.ReactNode\n  animationMethod?: string\n  animationConfig?: {}\n  shouldAnimateFirstValue?: boolean\n  onChange?: (...args: any[]) => void\n  onChangeAnimationEnd?: (...args: any[]) => void\n  noTrackColor?: boolean\n}\n\nexport class ProgressCircle extends React.Component<\n  ProgressCircleProps | ProgressCircleDeterminateProps\n> {\n  render(): React.ReactElement\n}\n\nexport interface RadioButtonProps {\n  checked: boolean\n\n  disabled?: boolean\n  onPress?: (e: GestureResponderEvent) => void\n  rippleColor?: Color\n  radioButtonColor?: Color\n  uncheckedBorderColor?: Color\n  style?: StyleProp<any>\n\n  label?: string\n  labelStyle?: StyleProp<any>\n  labelPos?: string\n\n  error?: boolean\n  theme?: Theme\n  testID?: string\n}\n\nexport class RadioButton extends React.Component<RadioButtonProps> {\n  render(): React.ReactElement\n}\n\nexport interface RippleProps\n  extends ViewProps,\n    TouchableWithoutFeedbackProps {\n  rippleColor?: Color\n  rippleOpacity?: number\n  rippleDuration?: number\n  rippleSize?: number\n  rippleContainerBorderRadius?: number\n  rippleCentered?: boolean\n  rippleSequential?: boolean\n  rippleFades?: boolean\n  disabled?: boolean\n  displayUntilPressOut?: boolean\n\n  onRippleAnimation?: (...args: any[]) => void\n  testID?: string\n}\n\nexport class Ripple extends React.Component<RippleProps> {\n  render(): React.ReactElement\n}\n\nexport interface SliderProps {\n  value?: number\n  values?: number[]\n  sliderLength?: number\n  min?: number\n  max?: number\n  step?: number\n  disableOne?: boolean\n  disableTwo?: boolean\n  onValueChange?: (...args: any[]) => void\n  onValueChangeEnd?: (...args: any[]) => void\n  onValuesChange?: (...args: any[]) => void\n  onValuesChangeEnd?: (...args: any[]) => void\n  trackColor?: Color\n  markerColor?: Color\n  allowOverlap?: boolean\n  style?: StyleProp<any>\n  testID?: string\n  markerSize?: number\n  trackHeight?: number\n  trackStyle?: StyleProp<any>\n}\n\nexport class Slider extends React.Component<SliderProps> {\n  render(): React.ReactElement\n}\n\nexport interface SwitchProps {\n  checked: boolean\n\n  onPress?: (e: GestureResponderEvent) => void\n  style?: StyleProp<any>\n  trackStyle?: StyleProp<any>\n  thumbStyle?: StyleProp<any>\n  label?: React.ReactNode\n  labelPos?: string\n  theme?: Theme\n  color?: Color\n  loading?: boolean\n  testID?: string\n  width?: number\n}\n\nexport class Switch extends React.Component<SwitchProps> {\n  render(): React.ReactElement\n}\n\nexport interface SearchfieldProps {\n  color?: Color\n  iconProps?: IconProps\n  inputRef?: (...args: any[]) => any\n  onBlur?: (...args: any[]) => void\n  onChangeText?: (text: string) => void\n  onCloseIcon?: (...args: any[]) => void\n  onFocus?: (...args: any[]) => void\n  placeholder?: string\n  style?: StyleProp<any>\n  textStyle?: StyleProp<TextStyle>\n  value?: string\n}\n\nexport class Searchfield extends React.Component<SearchfieldProps> {\n  render(): React.ReactElement\n}\n\nexport interface TextFieldFilledProps {\n  style?: StyleProp<any>\n  containerStyle?: StyleProp<any>\n  error?: boolean\n  label?: string\n  labelColor?: Color\n  labelStyle?: StyleProp<any>\n  handleFocus?: (...args: any[]) => void\n  handleBlur?: (...args: any[]) => void\n  focused?: boolean\n  helperText?: string\n  helperVisible?: boolean\n  helperTextStyle?: StyleProp<any>\n  underlineColor?: Color\n  underlineActiveColor?: Color\n  leadingIcon?: React.ReactNode\n  trailingIcon?: React.ReactNode\n  dense?: boolean\n  value?: string\n  multiline?: boolean\n  suffix?: React.ReactNode\n  prefix?: React.ReactNode\n  testID?: string\n  focusedLabelColor?: string\n}\n\nexport interface TextFieldFlatProps {\n  style?: StyleProp<any>\n  containerStyle?: StyleProp<any>\n  error?: boolean\n  label?: string\n  labelColor?: string\n  labelStyle?: StyleProp<any>\n  handleFocus?: (...args: any[]) => void\n  handleBlur?: (...args: any[]) => void\n  focused?: boolean\n  helperText?: string\n  helperVisible?: boolean\n  helperTextStyle?: StyleProp<any>\n  underlineColor?: string\n  underlineActiveColor?: StyleProp<any> | Color\n  leadingIcon?: React.ReactNode\n  trailingIcon?: React.ReactNode\n  dense?: boolean\n  value?: string\n  multiline?: boolean\n  suffix?: React.ReactNode\n  prefix?: React.ReactNode\n  testID?: string\n  focusedLabelColor?: string\n}\n\nexport interface TextFieldOutlineProps {\n  style?: StyleProp<any>\n  containerStyle?: StyleProp<any>\n  error?: boolean\n  label?: string\n  labelColor?: string\n  labelStyle?: StyleProp<any>\n  handleFocus?: (...args: any[]) => void\n  handleBlur?: (...args: any[]) => void\n  focused?: boolean\n  helperText?: string\n  helperVisible?: boolean\n  helperTextStyle?: StyleProp<any>\n  leadingIcon?: React.ReactNode\n  trailingIcon?: React.ReactNode\n  dense?: boolean\n  value?: string\n  multiline?: boolean\n  suffix?: React.ReactNode\n  prefix?: React.ReactNode\n  testID?: string\n  focusedLabelColor?: Color\n}\n\nexport interface TextFieldPropsBase {\n  type?: 'outlined' | 'filled' | 'flat'\n  onFocus?: (...args: any[]) => void\n  onBlur?: (...args: any[]) => void\n  disabled?: boolean\n  placeholder?: string\n  onChangeText?: (text: string) => void\n}\n\ntype TextFieldSpecialProps =\n  | TextFieldFilledProps\n  | TextFieldOutlineProps\n  | TextFieldFlatProps\nexport type TextFieldProps = TextFieldPropsBase & TextFieldSpecialProps\n\nexport class TextField extends React.Component<TextFieldProps> {\n  render(): React.ReactElement\n}\n\nexport interface TextFieldHelperTextProps {\n  error?: boolean\n  children?: React.ReactNode\n  visible?: boolean\n  style?: StyleProp<any>\n}\n\nexport class TextFieldHelperText extends React.Component<TextFieldProps> {\n  render(): React.ReactElement\n}\n\nexport interface ToggleButtonProps {\n  style?: StyleProp<any>\n  active?: boolean\n  onPress?: (e: GestureResponderEvent) => void\n  value?: string\n  activeNode?: React.ReactNode\n  inActiveNode?: React.ReactNode\n  rippleColor?: Color\n  size?: number\n  rippleContainerBorderRadius?: number\n  testID?: string\n}\n\nexport class ToggleButton extends React.Component<ToggleButtonProps> {\n  render(): React.ReactElement\n}\n\nexport interface ToggleButtonGroupProps {\n  onPress?: (e: GestureResponderEvent) => void\n  children?: React.ReactNode\n}\n\nexport class ToggleButtonGroup extends React.Component<\n  ToggleButtonGroupProps\n> {\n  render(): React.ReactElement\n}\n\nexport interface TooltipProps {\n  content: string\n\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  tooltipPosition?: MenuProps['tooltipPosition']\n  testID?: string\n}\n\nexport class Tooltip extends React.Component<TooltipProps> {\n  render(): React.ReactElement\n}\n\nexport interface BaseTextProps {\n  style?: StyleProp<any>\n  children?: React.ReactNode\n  typographyStyles?: StyleProp<TextStyle>\n  align?: 'center' | 'left' | 'right'\n  color?: Color\n  gutterBottom?: boolean\n  theme?: Theme\n  themeColor?: string\n}\n\nexport class BaseText extends React.Component<BaseTextProps> {\n  render(): React.ReactElement\n}\n\nexport interface BodyTextProps extends BaseTextProps {\n  text?: string\n  type?: number\n  children?: React.ReactNode\n  theme?: Theme\n  style?: StyleProp<any>\n}\n\nexport class BodyText extends React.Component<BodyTextProps> {\n  render(): React.ReactElement\n}\n\nexport interface CaptionProps extends BaseTextProps {\n  text?: string\n  children?: React.ReactNode\n  theme?: Theme\n}\n\nexport class Caption extends React.Component<CaptionProps> {\n  render(): React.ReactElement\n}\n\nexport interface HeadingProps extends BaseTextProps {\n  text?: string\n  type?: 1 | 2 | 3 | 4 | 5 | 6\n  children?: React.ReactNode\n  theme?: Theme\n}\n\nexport class Heading extends React.Component<HeadingProps> {\n  render(): React.ReactElement\n}\n\nexport interface OverlineProps extends BaseTextProps {\n  text?: string\n  children?: React.ReactNode\n  theme?: Theme\n}\n\nexport class Overline extends React.Component<OverlineProps> {\n  render(): React.ReactElement\n}\n\nexport interface SubtitleProps extends BaseTextProps {\n  text?: string\n  type?: number\n  children?: React.ReactNode\n  theme?: Theme\n}\n\nexport class Subtitle extends React.Component<SubtitleProps> {\n  render(): React.ReactElement\n}\n\nexport interface AppbarProps {\n  color?: Color\n  style?: StyleProp<any>\n  theme?: Theme\n  barType?: 'normal' | 'simple' | 'prominent' | 'dense' | 'prominent dense'\n  backgroundImage?: React.ReactNode\n  position?: string\n  elevation?: number\n\n  navigation?: string | React.ReactNode\n  onNavigation?: (...args: any[]) => void\n\n  title?: string\n  titleStyles?: StyleProp<any>\n  onTitle?: (...args: any[]) => void\n  subtitle?: string\n  subtitleStyles?: StyleProp<TextStyle>\n  textContainerStyles?: StyleProp<TextStyle>\n\n  actionItems?: React.ReactNode\n\n  children?: React.ReactNode\n}\n\nexport class Appbar extends React.Component<AppbarProps> {\n  render(): React.ReactElement\n}\n\nexport interface AppbarBottomProps {\n  color?: Color\n  style?: StyleProp<any>\n  theme?: Theme\n\n  fab?: React.ReactNode | string\n  fabStyles?: StyleProp<any>\n  fabPosition?: string\n  fabCutout?: boolean\n\n  navigation?: React.ReactNode | string\n  onNavigation?: (...args: any[]) => void\n\n  actionItems?: React.ReactNode\n\n  children?: React.ReactNode\n  appbarStyles?: StyleProp<any>\n}\n\nexport class AppbarBottom extends React.Component<AppbarBottomProps> {\n  render(): React.ReactElement\n}\n\nexport interface BackdropProps {\n  backLayerConcealed: React.ReactNode\n  backLayerRevealed: React.ReactNode\n\n  backLayerStyle?: StyleProp<any>\n  frontLayerStyle?: StyleProp<any>\n  headerButtonStyle?: StyleProp<any>\n  style?: StyleProp<any>\n  offset?: number\n  initialOffset?: number\n  children?: React.ReactNode\n  theme?: Theme\n  subheader?: string\n  testID?: string\n}\n\nexport class Backdrop extends React.Component<BackdropProps> {\n  render(): React.ReactElement\n}\n\nexport interface BannerProps {\n  mobileLayout?: boolean\n  style?: StyleProp<any>\n  actionItems?: any[]\n  singleLine?: boolean\n  media?: React.ReactNode\n  visible?: boolean\n\n  message?: string\n  position?: string\n  testID?: string\n}\n\nexport class Banner extends React.Component<BannerProps> {\n  render(): React.ReactElement\n}\n\nexport interface BottomNavigationProps {\n  value: string | number\n  actionItems: any[]\n\n  backgroundColor?: Color\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  showLabels?: boolean\n  handleChange?: (...args: any[]) => void\n  horizontalWhenLandscape?: boolean\n  testID?: string\n}\n\nexport class BottomNavigation extends React.Component<BottomNavigationProps> {\n  render(): React.ReactElement\n}\n\nexport interface BottomNavigationItemProps {\n  children?: React.ReactNode\n  active?: boolean\n  icon?: string\n  label?: string\n  showLabel?: boolean\n  onPress?: (e: GestureResponderEvent) => void\n  handleChange?: (...args: any[]) => void\n  value?: number | string\n  showLabels?: boolean\n  style?: StyleProp<any>\n  badgeProps?: BadgeProps\n  rippleProps?: RippleProps\n  testID?: string\n  isLandscape?: boolean\n  onItemLayout?: (...args: any[]) => void\n  maxWidth?: number\n  horizontal?: boolean\n}\n\nexport class BottomNavigationItem extends React.Component<\n  BottomNavigationItemProps\n> {\n  render(): React.ReactElement\n}\n\nexport interface CardActionsProps {\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  leftActionItems?: any[]\n  rightActionItems?: any[]\n}\n\nexport class CardActions extends React.Component<CardActionsProps> {\n  render(): React.ReactElement\n}\n\nexport interface CardContentProps {\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  rippleProps?: RippleProps\n  onPress?: (e: GestureResponderEvent) => void\n}\n\nexport class CardContent extends React.Component<CardContentProps> {\n  render(): React.ReactElement\n}\n\nexport interface CardHeaderProps {\n  children?: React.ReactNode\n  thumbnail?: React.ReactNode\n  action?: React.ReactNode\n  title?: string\n  titleStyles?: StyleProp<TextStyle>\n  subtitle?: string\n  subtitleStyles?: StyleProp<TextStyle>\n  style?: StyleProp<any>\n}\n\nexport class CardHeader extends React.Component<CardHeaderProps> {\n  render(): React.ReactElement\n}\n\nexport interface CardMediaProps {\n  children?: React.ReactNode\n  image?: React.ReactNode\n  style?: StyleProp<any>\n  title?: string\n  titleStyles?: StyleProp<TextStyle>\n  subtitle?: string\n  subtitleStyles?: StyleProp<TextStyle>\n  height?: number\n}\n\nexport class CardMedia extends React.Component<CardMediaProps> {\n  render(): React.ReactElement\n}\n\nexport interface CardProps {\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  outlined?: boolean\n  shadow?: number\n  radius?: number\n  onPress?: (e: GestureResponderEvent) => void\n  rippleProps?: RippleProps\n  testID?: string\n}\n\nexport class Card extends React.Component<CardProps> {\n  render(): React.ReactElement\n}\n\nexport interface DataTableCellProps {\n  text: string\n\n  type?: 'up' | 'header'\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  right?: boolean\n  borderRight?: boolean\n  borderLeft?: boolean\n  minWidth?: number\n  onPress?: (e: GestureResponderEvent) => void\n  sortingIcon?: string\n  relativeWidth?: number\n  textStyle?: StyleProp<any>\n}\n\nexport class DataTableCell extends React.Component<DataTableCellProps> {\n  render(): React.ReactElement\n}\n\nexport interface DataTableHeaderProps {\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  rightActions?: React.ReactNode\n  leftActions?: React.ReactNode\n  title?: string\n}\n\nexport class DataTableHeader extends React.Component<DataTableHeaderProps> {\n  render(): React.ReactElement\n}\n\nexport interface DataTablePaginationProps {\n  page: number\n  numberOfPages: number\n  numberOfRows: number\n  perPage: number\n\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  possibleNumberPerPage?: number\n  onChangePage?: (page: number) => void\n  onChangeRowsPerPage?: (perPage: number) => void\n}\n\nexport class DataTablePagination extends React.Component<\n  DataTablePaginationProps\n> {\n  render(): React.ReactElement\n}\n\nexport interface DataTableRowProps {\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  borderBottomColor?: Color\n  selected?: boolean\n  onPressCheckbox?: (...args: any[]) => void\n  showCheckbox?: boolean\n  checkboxOffset?: boolean\n  onPress?: (e: GestureResponderEvent) => void\n  hover?: boolean\n  type?: string\n}\n\nexport class DataTableRow extends React.Component<DataTableRowProps> {\n  render(): React.ReactElement\n}\n\nexport interface DataTableProps {\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  testID?: string\n}\n\nexport class DataTable extends React.Component<DataTableProps> {\n  render(): React.ReactElement\n}\n\nexport interface DialogProps {\n  visible: boolean\n\n  actionItems?: React.ReactNode[]\n  style?: StyleProp<any>\n  children?: React.ReactNode\n  onRequestClose?: (...args: any[]) => void\n  onShow?: (...args: any[]) => void\n  onTouchOutside?: (...args: any[]) => void\n  title?: string\n  titleStyle?: StyleProp<any>\n  supportingText?: string\n  supportingTextStyle?: StyleProp<any>\n  contentStyle?: StyleProp<any>\n  testID?: string\n}\n\nexport class Dialog extends React.Component<DialogProps> {\n  render(): React.ReactElement\n}\n\nexport interface DrawerHeaderProps {\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  title?: string\n  subtitle?: string\n  avatar?: React.ReactNode\n}\n\nexport class DrawerHeader extends React.Component<DrawerHeaderProps> {\n  render(): React.ReactElement\n}\n\nexport interface DrawerItemProps {\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  text?: string\n  icon?: string\n  onPress?: (e: GestureResponderEvent) => void\n  active?: boolean\n}\n\nexport class DrawerItem extends React.Component<DrawerItemProps> {\n  render(): React.ReactElement\n}\n\nexport interface DrawerSectionProps {\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  label?: string\n  topDivider?: boolean\n  bottomDivider?: boolean\n  fullWidth?: boolean\n}\n\nexport class DrawerSection extends React.Component<DrawerSectionProps> {\n  render(): React.ReactElement\n}\n\nexport interface DrawerProps {\n  open: boolean\n  drawerContent: React.ReactNode\n  onClose: (...args: any[]) => void\n\n  type?: 'push' | 'permanent'\n  children?: React.ReactNode\n  animationTime?: number\n\n  pageHeight?: number\n  pageWidth?: number\n  widthPercentage?: number\n  width?: number\n  fullHeight?: boolean\n  position?: string\n\n  appbar?: React.ReactNode\n  scrim?: boolean\n  scrimColor?: string\n  scrimOpacity?: number\n\n  style?: StyleProp<any>\n  contentContainerStyle?: StyleProp<any>\n  drawerStyle?: StyleProp<any>\n  scrimStyles?: StyleProp<any>\n  testID?: string\n}\n\nexport class Drawer extends React.Component<DrawerProps> {\n  render(): React.ReactElement\n}\n\nexport interface DrawerBottomProps extends SheetBottomProps {\n  children?: React.ReactNode\n  style?: StyleProp<any>\n}\n\nexport class DrawerBottom extends React.Component<DrawerBottomProps> {\n  render(): React.ReactElement\n}\n\nexport interface FabSpeedDialProps {\n  fab?: React.ReactNode | string\n  actions?: React.ReactNode\n  extended?: boolean\n  style?: StyleProp<any>\n  onPress?: (e: GestureResponderEvent) => void\n  testID?: string\n}\n\nexport class FabSpeedDial extends React.Component<FabSpeedDialProps> {\n  render(): React.ReactElement\n}\n\nexport interface MenuItemProps {\n  text?: string\n  children?: React.ReactNode\n  disabled?: boolean\n  onPress?: (e: GestureResponderEvent) => void\n  style?: StyleProp<any>\n  textStyle?: StyleProp<TextStyle>\n  icon?: React.ReactNode\n  keyboardCommand?: React.ReactNode\n}\n\nexport class MenuItem extends React.Component<MenuItemProps> {\n  render(): React.ReactElement\n}\n\nexport interface MenuProps {\n  button?: React.ReactNode\n  children?: React.ReactNode\n  onHidden?: (...args: any[]) => void\n  style?: StyleProp<any>\n  visible?: boolean\n  menuStyle?: StyleProp<any>\n  sameWidth?: boolean\n  onBackdropPress?: (...args: any[]) => void\n  modalMenuStyle?: StyleProp<any>\n  contentContainerStyle?: StyleProp<any>\n  noBackDrop?: boolean\n  tooltip?: boolean\n  tooltipPosition?: string\n  testID?: string\n}\n\nexport class Menu extends React.Component<MenuProps> {\n  render(): React.ReactElement\n}\n\nexport interface SearchbarProps {\n  value?: string\n  style?: StyleProp<any>\n  onChangeText?: (text: string) => void\n  onCloseIcon?: (...args: any[]) => void\n  onNavigation?: (...args: any[]) => void\n  placeholder?: string\n}\n\nexport class Searchbar extends React.Component<SearchbarProps> {\n  render(): React.ReactElement\n}\n\nexport interface SelectProps {\n  onSelect?: (...args: any[]) => void\n  buttonStyle?: StyleProp<any>\n  label?: string\n  selectedItem?: React.ReactNode\n  menuItems?: any[]\n  visible?: boolean\n  textFieldProps?: TextFieldProps\n  menuProps?: MenuProps\n  type?: TextFieldProps['type']\n  onBackdropPress?: (e: GestureResponderEvent) => void\n  theme?: Theme\n  testID?: string\n}\n\nexport class Select extends React.Component<SelectProps> {\n  render(): React.ReactElement\n}\n\nexport interface SheetBottomProps {\n  visible: boolean\n  duration?: number\n  onBackdropPress?: (...args: any[]) => void\n  onSwipeDown?: (...args: any[]) => void\n  onSwipeUp?: (...args: any[]) => void\n  children?: React.ReactNode\n  wrapperStyles?: StyleProp<any>\n  style?: StyleProp<any>\n  cardVerticalPadding?: number\n  pageHeight?: number\n  testID?: string\n}\n\nexport class SheetBottom extends React.Component<SheetBottomProps> {\n  render(): React.ReactElement\n}\n\nexport interface SheetSideProps {\n  duration?: number\n  onBackdropPress?: (...args: any[]) => void\n  onSwipeLeft?: (...args: any[]) => void\n  onSwipeRight?: (...args: any[]) => void\n  children?: React.ReactNode\n  wrapperStyles?: StyleProp<any>\n  style?: StyleProp<any>\n  visible?: boolean\n  pageWidth?: number\n  pageHeight?: number\n  widthPercentage?: number\n  side?: string\n  testID?: string\n}\n\nexport class SheetSide extends React.Component<SheetSideProps> {\n  render(): React.ReactElement\n}\n\nexport interface SnackbarProps {\n  visible?: boolean\n  animationDuration?: number\n  children?: React.ReactNode\n  style?: StyleProp<any>\n  onButtonPress?: (e: GestureResponderEvent) => void\n  buttonLabel?: string\n  buttonTextColor?: Color\n  testID?: string\n}\n\nexport class Snackbar extends React.Component<SnackbarProps> {\n  render(): React.ReactElement\n}\n\nexport interface SwipeNavProps {\n  header?: React.ReactNode\n  footer?: React.ReactNode\n  scrollViewProps?: ScrollViewProps\n  scrollComponent?: React.ReactNode\n  style?: StyleProp<any>\n  headerContainerStyle?: StyleProp<any>\n  footerContainerStyle?: StyleProp<any>\n  scrollViewStyle?: StyleProp<any>\n  children?: React.ReactNode\n}\n\nexport class SwipeNav extends React.Component<SwipeNavProps> {\n  render(): React.ReactElement\n}\n\nexport interface TabsProps {\n  actionItems?: string | React.ReactNode\n  selectedIndex?: number\n  backgroundColor?: string\n  underlineColor?: string\n  scrollEnabled?: boolean\n  handleChange?: (...args: any[]) => void\n  style?: StyleProp<any>\n  theme?: Theme\n  testID?: string\n}\n\nexport class Tabs extends React.Component<TabsProps> {\n  render(): React.ReactElement\n}\n\nexport interface TabProps {\n  label?: string\n  active?: boolean\n  activeTextColor?: string\n  inActiveTextColor?: string\n  textStyle?: StyleProp<any>\n  iconStyles?: StyleProp<any>\n  onPress?: (e: GestureResponderEvent) => void\n  tabWidth?: number\n  style?: StyleProp<any>\n  icon?: string\n  rippleProps?: RippleProps\n}\n\nexport class Tab extends React.Component<TabProps> {\n  render(): React.ReactElement\n}\n"
  },
  {
    "path": "src/index.js",
    "content": "// ==== UTIL ====\nexport { default as Hoverable } from './Utils/Hoverable/Hoverable.js';\nexport { default as shadow } from './Utils/Shadow/shadow.js';\nexport { default as Anchor } from './Utils/Anchor/Anchor.js';\n\n// ==== Components ====\nexport { default as Appbar } from './Components/Appbar';\nexport { default as AppbarBottom } from './Components/AppbarBottom';\nexport { default as Avatar } from './Components/Avatar';\nexport { default as Backdrop } from './Components/Backdrop';\nexport { default as Badge } from './Components/Badge';\nexport { default as Banner } from './Components/Banner';\nexport {\n  default as BottomNavigation,\n  BottomNavigationItem,\n} from './Components/BottomNavigation';\nexport { default as Button } from './Components/Button';\nexport {\n  default as Card,\n  CardActions,\n  CardContent,\n  CardHeader,\n  CardMedia,\n} from './Components/Card';\nexport { default as Checkbox } from './Components/Checkbox';\nexport { default as Chip } from './Components/Chip';\nexport {\n  default as DataTable,\n  DataTableHeader,\n  DataTableCell,\n  DataTablePagination,\n  DataTableRow,\n} from './Components/DataTable';\n\nexport { default as Dialog } from './Components/Dialog';\n\nexport {\n  default as Drawer,\n  DrawerHeader,\n  DrawerItem,\n  DrawerSection,\n} from './Components/Drawer';\nexport { default as DrawerBottom } from './Components/DrawerBottom';\nexport { default as Divider } from './Components/Divider';\nexport { default as Fab, FabSpeedDial } from './Components/Fab';\nexport { default as Icon } from './Components/Icon';\nexport { default as IconButton } from './Components/IconButton';\nexport {\n  default as List,\n  ListSection,\n  ListExpand,\n  ListItem,\n} from './Components/List';\nexport { default as Menu, MenuItem } from './Components/Menu';\nexport { default as Paper } from './Components/Paper/Paper.js';\nexport { default as ProgressBar } from './Components/Progress/ProgressBar';\nexport {\n  default as ProgressCircle,\n} from './Components/Progress/ProgressCircle';\nexport { default as RadioButton } from './Components/RadioButton';\nexport { default as Ripple } from './Components/Ripple';\nexport { default as Select } from './Components/Select';\nexport {\n  default as Searchfield,\n} from './Components/TextField/Searchfield/Searchfield.js';\nexport {\n  default as Searchbar,\n} from './Components/Appbar/Searchbar/Searchbar.js';\nexport { default as SheetBottom } from './Components/SheetBottom';\nexport { default as SheetSide } from './Components/SheetSide';\nexport { default as Slider } from './Components/Slider';\nexport { default as Snackbar } from './Components/Snackbar';\nexport { default as SwipeNav } from './Components/SwipeNav';\nexport { default as Switch } from './Components/Switch';\nexport { default as Tabs, Tab } from './Components/Tabs';\nexport {\n  default as TextField,\n  TextFieldHelperText,\n} from './Components/TextField';\nexport {\n  default as ToggleButton,\n  ToggleButtonGroup,\n} from './Components/ToggleButton';\nexport { default as Tooltip } from './Components/Tooltip';\nexport {\n  Heading,\n  Subtitle,\n  BodyText,\n  Caption,\n  Overline,\n} from './Components/Typography';\n\n// ==== Theme ====\nexport { default as ThemeContext } from './Theme/ThemeContext.js';\nexport { default as withTheme } from './Theme/withTheme.js';\nexport { default as defaultTheme } from './Theme/defaultTheme.js';\n\n// ==== Core ====\nexport { default as BreadProvider } from './Core/BreadProvider.js';\nexport { default as Colors } from './Core/colors/index.js';\nexport { default as VueMaterialBread } from './vue-native.js';\n"
  },
  {
    "path": "src/storybook/components/Container.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { View, StyleSheet, ScrollView } from 'react-native';\nimport { BreadProvider } from '../..';\n\nexport default class Container extends Component {\n  static propTypes = {\n    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n    children: PropTypes.node,\n    scroll: PropTypes.bool,\n  };\n\n  render() {\n    const { style, scroll, children } = this.props;\n    if (scroll) {\n      return (\n        <ScrollView>\n          <View style={[styles.container, style]}>\n            <BreadProvider value={{}}>{children}</BreadProvider>\n          </View>\n        </ScrollView>\n      );\n    }\n    return (\n      <View style={[styles.container, style]}>\n        <BreadProvider value={{}}>{children}</BreadProvider>\n      </View>\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    padding: 16,\n  },\n});\n"
  },
  {
    "path": "src/storybook/components/Header.js",
    "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { View, StyleSheet } from 'react-native';\nimport { Heading, Subtitle } from '../..';\n\nexport default class Header extends Component {\n  static propTypes = {\n    title: PropTypes.string,\n    subtitle: PropTypes.string,\n  };\n\n  render() {\n    const { title, subtitle } = this.props;\n    return (\n      <View style={styles.container}>\n        <Heading align=\"center\" type={4}>\n          {title}\n        </Heading>\n        {subtitle ? (\n          <Subtitle type={1} style={[styles.subtitle]}>\n            {subtitle}\n          </Subtitle>\n        ) : null}\n      </View>\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    marginBottom: 60,\n  },\n  subtitle: {\n    marginTop: 40,\n  },\n});\n"
  },
  {
    "path": "src/storybook/helpers/storiesOf/index.android.js",
    "content": "import { storiesOf } from '@storybook/react-native';\nexport { storiesOf };\n"
  },
  {
    "path": "src/storybook/helpers/storiesOf/index.ios.js",
    "content": "import { storiesOf } from '@storybook/react-native';\nexport { storiesOf };\n"
  },
  {
    "path": "src/storybook/helpers/storiesOf/index.js",
    "content": "import { storiesOf } from '@storybook/react';\nexport { storiesOf };\n"
  },
  {
    "path": "src/storybook/index.android.js",
    "content": "import { AppRegistry } from 'react-native';\nimport StorybookUI from './storybook';\nAppRegistry.registerComponent('ReactNativeBread', () => StorybookUI);\n\nexport default StorybookUI;\n"
  },
  {
    "path": "src/storybook/index.ios.js",
    "content": "import { AppRegistry } from 'react-native';\nimport StorybookUI from './storybook';\nAppRegistry.registerComponent('ReactNativeBread', () => StorybookUI);\n\nexport default StorybookUI;\n"
  },
  {
    "path": "src/storybook/index.js",
    "content": "import { getStorybookUI, configure } from '@storybook/react-native';\n\nimport './rn-addons';\n\n// import stories\nconfigure(() => {\n  require('./stories');\n}, module);\n\n// Refer to https://github.com/storybooks/storybook/tree/master/app/react-native#start-command-parameters\n// To find allowed options for getStorybookUI\nconst StorybookUIRoot = getStorybookUI({ port: 7007, host: 'localhost' });\n\nexport default StorybookUIRoot;\n"
  },
  {
    "path": "src/storybook/rn-addons.js",
    "content": ""
  },
  {
    "path": "src/storybook/stories/Home.stories.js",
    "content": "import React from 'react';\nimport { View, Image, StyleSheet } from 'react-native';\nimport { storiesOf } from '../helpers/storiesOf';\n\nimport Container from '../components/Container';\nimport { Heading, BodyText, Button, Anchor } from '../..';\nconst styles = StyleSheet.create({\n  top: {\n    flexDirection: 'column',\n    alignItems: 'center',\n  },\n  header: {\n    fontSize: 48,\n    textAlign: 'center',\n    fontWeight: '600',\n  },\n  subtitle: {\n    fontSize: 16,\n    color: 'rgba(10, 10, 10, 0.67)',\n    fontWeight: '400',\n    marginTop: 6,\n  },\n  bodyText: {\n    fontSize: 14,\n    lineHeight: 22,\n  },\n  initialText: {\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n    marginTop: 40,\n    marginHorizontal: 'auto',\n    maxWidth: 780,\n  },\n  textRow: {\n    marginTop: 20,\n    flexWrap: 'wrap',\n    maxWidth: 780,\n  },\n  buttonRow: {\n    marginTop: 20,\n    flexDirection: 'row',\n  },\n  secondButton: { marginLeft: 20 },\n  logo: {\n    width: 300.502,\n    height: 250.398,\n    resizeMode: 'cover',\n  },\n});\n\nexport default storiesOf('Docs|Start Here', module).add('Home', () => (\n  <Container>\n    <View style={styles.top}>\n      <Image\n        source={{ uri: 'http://material-bread.org/logo-shadow.svg' }}\n        style={styles.logo}\n      />\n      <Heading style={styles.header}>Material Bread</Heading>\n      <BodyText style={styles.subtitle}>\n        One Component Library, Six Platforms\n      </BodyText>\n    </View>\n\n    <View style={styles.initialText}>\n      <BodyText style={styles.bodyText}>\n        This is the Storybook environment for Material Bread which is a highly\n        customizable cross-platform React Native Material Library. Visit the\n        docs to see the full component API.\n      </BodyText>\n      <View style={styles.buttonRow}>\n        <Anchor url={'http://material-bread.org/'} target={'_parent'}>\n          <Button\n            text={'Documentation'}\n            type={'outlined'}\n            textColor={'rgb(233, 30, 99)'}\n          />\n        </Anchor>\n\n        <Anchor\n          url={'https://github.com/codypearce/material-bread'}\n          target={'_parent'}>\n          <Button\n            text={'Github'}\n            type={'outlined'}\n            textColor={'#666'}\n            style={styles.secondButton}\n          />\n        </Anchor>\n      </View>\n    </View>\n  </Container>\n));\n"
  },
  {
    "path": "src/storybook/stories/index.js",
    "content": "export { default as Home } from './Home.stories.js';\n\n/* Components */\nexport { default as Appbar } from '../../Components/Appbar/Appbar.stories';\nexport {\n  default as AppbarBottom,\n} from '../../Components/AppbarBottom/AppbarBottom.stories.js';\nexport { default as Avatar } from '../../Components/Avatar/Avatar.stories.js';\nexport {\n  default as Backdrop,\n} from '../../Components/Backdrop/Backdrop.stories.js';\nexport { default as Badge } from '../../Components/Badge/Badge.stories.js';\nexport { default as Banner } from '../../Components/Banner/Banner.stories.js';\nexport {\n  default as BottomNavigation,\n} from '../../Components/BottomNavigation/BottomNavigation.stories.js';\nexport {\n  default as BottomNavigationItem,\n} from '../../Components/BottomNavigation/BottomNavigationItem/BottomNavigationItem.stories.js';\n\nexport { default as Button } from '../../Components/Button/Button.stories.js';\nexport {\n  default as TextButton,\n} from '../../Components/Button/TextButton/TextButton.stories.js';\nexport {\n  default as FlatButton,\n} from '../../Components/Button/FlatButton/FlatButton.stories.js';\nexport {\n  default as OutlinedButton,\n} from '../../Components/Button/OutlinedButton/OutlinedButton.stories.js';\nexport {\n  default as ContainedButton,\n} from '../../Components/Button/ContainedButton/ContainedButton.stories.js';\n\nexport { default as Card } from '../../Components/Card/Card.stories.js';\nexport {\n  default as Checkbox,\n} from '../../Components/Checkbox/Checkbox.stories.js';\nexport { default as Chip } from '../../Components/Chip/Chip.stories.js';\nexport {\n  default as DataTable,\n} from '../../Components/DataTable/DataTable.stories.js';\nexport {\n  default as DataTableCell,\n} from '../../Components/DataTable/DataTableCell/DataTableCell.stories.js';\nexport {\n  default as DataTableHeader,\n} from '../../Components/DataTable/DataTableHeader/DataTableHeader.stories.js';\nexport {\n  default as DataTableRow,\n} from '../../Components/DataTable/DataTableRow/DataTableRow.stories.js';\nexport {\n  default as DataTablePagination,\n} from '../../Components/DataTable/DataTablePagination/DataTablePagination.stories.js';\nexport { default as Dialog } from '../../Components/Dialog/Dialog.stories.js';\n\nexport { default as Drawer } from '../../Components/Drawer/Drawer.stories.js';\nexport {\n  default as DrawerHeader,\n} from '../../Components/Drawer/DrawerHeader/DrawerHeader.stories.js';\nexport {\n  default as DrawerSection,\n} from '../../Components/Drawer/DrawerSection/DrawerSection.stories.js';\nexport {\n  default as DrawerItem,\n} from '../../Components/Drawer/DrawerItem/DrawerItem.stories.js';\nexport {\n  default as DrawerBottom,\n} from '../../Components/DrawerBottom/DrawerBottom.stories.js';\nexport {\n  default as Divider,\n} from '../../Components/Divider/Divider.stories.js';\nexport { default as Fab } from '../../Components/Fab/Fab.stories.js';\nexport {\n  default as FabSpeedDial,\n} from '../../Components/Fab/FabSpeedDial/FabSpeedDial.stories.js';\nexport { default as Icons } from '../../Components/Icon/Icons.stories.js';\nexport {\n  default as IconButton,\n} from '../../Components/IconButton/IconButton.stories.js';\nexport { default as List } from '../../Components/List/List.stories.js';\nexport {\n  default as ListExpand,\n} from '../../Components/List/ListExpand/ListExpand.stories.js';\nexport {\n  default as ListItem,\n} from '../../Components/List/ListItem/ListItem.stories.js';\nexport {\n  default as ListSection,\n} from '../../Components/List/ListSection/ListSection.stories.js';\n\nexport { default as Menu } from '../../Components/Menu/Menu.stories.js';\nexport {\n  default as MenuItem,\n} from '../../Components/Menu/MenuItem/MenuItem.stories.js';\nexport { default as Paper } from '../../Components/Paper/Paper.stories.js';\nexport {\n  default as ProgressBar,\n} from '../../Components/Progress/ProgressBar/ProgressBar.stories.js';\nexport {\n  default as ProgressCircle,\n} from '../../Components/Progress/ProgressCircle/ProgressCircle.stories.js';\nexport {\n  default as RadioButton,\n} from '../../Components/RadioButton/RadioButton.stories.js';\nexport { default as Ripple } from '../../Components/Ripple/Ripple.stories.js';\nexport {\n  default as Searchbar,\n} from '../../Components/Appbar/Searchbar/Searchbar.stories.js';\nexport {\n  default as Searchfield,\n} from '../../Components/TextField/Searchfield/Searchfield.stories.js';\nexport {\n  default as SelectFilled,\n} from '../../Components/Select/SelectFilled/SelectFilled.stories.js';\nexport {\n  default as SelectFlat,\n} from '../../Components/Select/SelectFlat/SelectFlat.stories.js';\nexport {\n  default as SelectOutlined,\n} from '../../Components/Select/SelectOutlined/SelectOutlined.stories.js';\n\nexport {\n  default as SheetBottom,\n} from '../../Components/SheetBottom/SheetBottom.stories.js';\nexport {\n  default as SheetSide,\n} from '../../Components/SheetSide/SheetSide.stories.js';\nexport { default as Slider } from '../../Components/Slider/Slider.stories.js';\nexport {\n  default as Snackbar,\n} from '../../Components/Snackbar/Snackbar.stories.js';\nexport {\n  default as SwipeNav,\n} from '../../Components/SwipeNav/SwipeNav.stories.js';\n\nexport { default as Switch } from '../../Components/Switch/Switch.stories.js';\nexport { default as Tab } from '../../Components/Tabs/Tab/Tab.stories.js';\nexport { default as Tabs } from '../../Components/Tabs/Tabs.stories.js';\nexport {\n  default as TextFieldFilled,\n} from '../../Components/TextField/TextFieldFilled/TextFieldFilled.stories.js';\nexport {\n  default as TextFieldFlat,\n} from '../../Components/TextField/TextFieldFlat/TextFieldFlat.stories.js';\nexport {\n  default as TextFieldOutline,\n} from '../../Components/TextField/TextFieldOutline/TextFieldOutline.stories.js';\n\nexport {\n  default as ToggleButton,\n} from '../../Components/ToggleButton/ToggleButton.stories.js';\nexport {\n  default as Tooltip,\n} from '../../Components/Tooltip/Tooltip.stories.js';\nexport {\n  default as Typography,\n} from '../../Components/Typography/Typography.stories.js';\n\n/* Utils */\nexport { default as Anchor } from '../../Utils/Anchor/Anchor.stories.js';\nexport {\n  default as Hoverable,\n} from '../../Utils/Hoverable/Hoverable.stories.js';\nexport { default as Shadows } from '../../Utils/Shadow/Shadow.stories.js';\n"
  },
  {
    "path": "src/storybook/storybook.js",
    "content": "import React, { Component } from 'react';\nimport { AppRegistry } from 'react-native';\nimport { getStorybookUI, configure } from '@storybook/react-native';\n\n// import stories\nconfigure(() => {\n  require('./stories');\n}, module);\n\n// This assumes that storybook is running on the same host as your RN packager,\n// to set manually use, e.g. host: 'localhost' option\nconst StorybookUIRoot = getStorybookUI({ port: 7007, onDeviceUI: true });\n\n// react-native hot module loader must take in a Class - https://github.com/facebook/react-native/issues/10991\n// https://github.com/storybooks/storybook/issues/2081\n// eslint-disable-next-line react/prefer-stateless-function\nclass StorybookUIHMRRoot extends Component {\n  render() {\n    return <StorybookUIRoot />;\n  }\n}\n\nAppRegistry.registerComponent('MaterialBread', () => StorybookUIHMRRoot);\nexport default StorybookUIHMRRoot;\n"
  },
  {
    "path": "src/vue-native.js",
    "content": "import {\n  Hoverable,\n  shadow,\n  Anchor,\n  Appbar,\n  AppbarBottom,\n  Avatar,\n  Backdrop,\n  Badge,\n  Banner,\n  BottomNavigation,\n  BottomNavigationItem,\n  Button,\n  Card,\n  CardActions,\n  CardContent,\n  CardHeader,\n  CardMedia,\n  Checkbox,\n  Chip,\n  DataTable,\n  DataTableHeader,\n  DataTableCell,\n  DataTablePagination,\n  DataTableRow,\n  Dialog,\n  Drawer,\n  DrawerHeader,\n  DrawerItem,\n  DrawerSection,\n  DrawerBottom,\n  Divider,\n  Fab,\n  FabSpeedDial,\n  Icon,\n  IconButton,\n  List,\n  ListSection,\n  ListExpand,\n  ListItem,\n  Menu,\n  MenuItem,\n  ProgressBar,\n  ProgressCircle,\n  RadioButton,\n  Ripple,\n  Select,\n  Searchfield,\n  Searchbar,\n  SheetBottom,\n  SheetSide,\n  Slider,\n  Snackbar,\n  SwipeNav,\n  Switch,\n  Tabs,\n  Tab,\n  TextField,\n  TextFieldHelperText,\n  ToggleButton,\n  ToggleButtonGroup,\n  Tooltip,\n  Heading,\n  Subtitle,\n  BodyText,\n  Caption,\n  Overline,\n  BreadProvider,\n  Colors,\n  ThemeContext,\n} from './index';\n\nconst VueMaterialBread = {\n  // The install method is all that needs to exist on the plugin object.\n  // It takes the global Vue object as well as user-defined options.\n  install(Vue) {\n    Vue.component('mb-hoverable', Hoverable);\n    Vue.component('mb-shadow', shadow);\n    Vue.component('mb-anchor', Anchor);\n    Vue.component('mb-appbar', Appbar);\n    Vue.component('mb-AppbarBottom', AppbarBottom);\n    Vue.component('mb-avatar', Avatar);\n    Vue.component('mb-backdrop', Backdrop);\n    Vue.component('mb-badge', Badge);\n    Vue.component('mb-banner', Banner);\n\n    Vue.component('mb-bottom-navigation', BottomNavigation);\n    Vue.component('mb-bottom-navigation-item', BottomNavigationItem);\n    Vue.component('mb-button', Button);\n    Vue.component('mb-card', Card);\n    Vue.component('mb-card-actions', CardActions);\n    Vue.component('mb-card-content', CardContent);\n    Vue.component('mb-card-header', CardHeader);\n    Vue.component('mb-card-media', CardMedia);\n    Vue.component('mb-checkbox', Checkbox);\n    Vue.component('mb-chip', Chip);\n    Vue.component('mb-data-table', DataTable);\n    Vue.component('mb-data-table-header', DataTableHeader);\n    Vue.component('mb-data-table-cell', DataTableCell);\n\n    Vue.component('mb-data-table-pagination', DataTablePagination);\n    Vue.component('mb-data-table-row', DataTableRow);\n    Vue.component('mb-dialog', Dialog);\n    Vue.component('mb-drawer', Drawer);\n    Vue.component('mb-drawer-header', DrawerHeader);\n    Vue.component('mb-drawer-item', DrawerItem);\n    Vue.component('mb-drawer-section', DrawerSection);\n    Vue.component('mb-drawer-bottom', DrawerBottom);\n    Vue.component('mb-divider', Divider);\n    Vue.component('mb-fab', Fab);\n    Vue.component('mb-fab-speed-dial', FabSpeedDial);\n    Vue.component('mb-icon', Icon);\n    Vue.component('mb-icon-button', IconButton);\n    Vue.component('mb-list', List);\n    Vue.component('mb-list-section', ListSection);\n    Vue.component('mb-list-expand', ListExpand);\n    Vue.component('mb-list-item', ListItem);\n    Vue.component('mb-menu', Menu);\n    Vue.component('mb-menu-item', MenuItem);\n    Vue.component('mb-progress-bar', ProgressBar);\n    Vue.component('mb-progress-circle', ProgressCircle);\n    Vue.component('mb-radio-button', RadioButton);\n    Vue.component('mb-ripple', Ripple);\n    Vue.component('mb-select', Select);\n    Vue.component('mb-search-field', Searchfield);\n    Vue.component('mb-search-bar', Searchbar);\n    Vue.component('mb-sheet-bottom', SheetBottom);\n    Vue.component('mb-sheet-side', SheetSide);\n    Vue.component('mb-slider', Slider);\n    Vue.component('mb-snackbar', Snackbar);\n    Vue.component('mb-swipe-nav', SwipeNav);\n    Vue.component('mb-switch', Switch);\n    Vue.component('mb-tabs', Tabs);\n    Vue.component('mb-tab', Tab);\n    Vue.component('mb-text-field', TextField);\n    Vue.component('mb-text-field-helper-text', TextFieldHelperText);\n    Vue.component('mb-toggle-button', ToggleButton);\n    Vue.component('mb-toggle-button-group', ToggleButtonGroup);\n    Vue.component('mb-tooltip', Tooltip);\n    Vue.component('mb-heading', Heading);\n    Vue.component('mb-subtitle', Subtitle);\n    Vue.component('mb-body-text', BodyText);\n    Vue.component('mb-caption', Caption);\n    Vue.component('mb-overline', Overline);\n    Vue.component('mb-bread-provider', BreadProvider);\n    Vue.component('mb-colors', Colors);\n    Vue.component('mb-theme-context', ThemeContext);\n  },\n};\n\nexport default VueMaterialBread;\n"
  },
  {
    "path": "webpack.config.js",
    "content": "const webpack = require('webpack');\nconst path = require('path');\n\nmodule.exports = {\n  require: ['@babel/polyfill'],\n  components: 'src/**/[A-Z]*.js',\n  webpackConfig: {\n    resolve: {\n      // auto resolves any react-native import as react-native-web\n      alias: { 'react-native': 'react-native-web' },\n      extensions: ['.web.js', '.js'],\n    },\n    module: {\n      rules: [\n        {\n          test: /\\.js$/,\n          loader: 'babel-loader',\n          exclude: [/node_modules/],\n          include: [path.resolve('./node_modules/react-native-animatable')],\n          options: {\n            plugins: [\n              '@babel/proposal-class-properties',\n              '@babel/proposal-object-rest-spread',\n              'react-native-web',\n            ],\n            presets: [\n              '@babel/preset-env',\n              'module:metro-react-native-babel-preset',\n            ],\n            babelrc: false,\n          },\n        },\n        {\n          test: /\\.(jpe?g|png|gif)$/i,\n          use: [\n            {\n              loader: 'file-loader',\n              options: {\n                hash: 'sha512',\n                digest: 'hex',\n                name: '[hash].[ext]',\n              },\n            },\n          ],\n        },\n        {\n          test: /\\.ttf$/,\n          loader: 'file-loader',\n        },\n      ],\n    },\n\n    // Most react native projects will need some extra plugin configuration.\n    plugins: [\n      // Add __DEV__ flag to browser example.\n      new webpack.DefinePlugin({\n        __DEV__: process.env,\n      }),\n    ],\n  },\n};\n"
  }
]